Chapter 14: Landmark Regions

With HTML 4.0 and earlier markup languages, the elements such as <div>, <p> and <span> are used to build the content of web pages. These elements do not provide any semantic value to the web page as far as accessibility is concerned. Screen readers by default treat all these elements similarly. In addition before the introduction of HTML5, no markup difference is available to denote header, main content and footer sections of the web page. Screen reader users used to have a plane experience on the web page. They are not aware if a piece of content is either in the header, main content, footer or any other portions of the page.

HTML Techniques

HTML5 introduced semantic tags such as <nav>, <main>, <header>, <footer>, <aside> etc to markup different regions of the web page. Screen readers started adapting these tags and most of the latest versions of screen readers announce them.
Screen reader announces the beginning and the end of the section depending on the markup.

a

HTML5 Element Description Screen reader announcement
<header> Contains the header section of the page. Usually the first landmark of the page. Banner landmark
<nav> Contains the navigation elements of the page. The <nav> element should be appended with some aria-label if the page contains more than one navigation section. Navigation landmark
<main> The <main> element holds the main content of the page. Main landmark
<aside> Contains the independent sections of the page. Eg: Tweets widget, advertisement’s etc. Complimentary landmark
<footer> Holds the footer content such as copyright. Contentinfo landmark

ARIA Techniques

If HTML5 sectioning elements can’t be used for some reason, the following ARIA landmark roles can be used along with the non semantic elements such as <div>, <p> and <span> elements.

WAI ARIA role Description Screen reader announcement
Role=‘banner’ Contains the header section of the page. Usually the first landmark of the page. Banner landmark
Role=‘navigation’ Contains the navigation elements of the page. The <nav> element should be appended with some aria-label if the page contains more than one navigation section. Navigation landmark
Role=‘main’ The <main> element holds the main content of the page. Main landmark
Role=‘complimentary’ Contains the independent sections of the page. Eg: Tweets widget, advertisement’s etc. Complimentary landmark
Role=‘contentinfo’ Holds the footer content such as copyright. Contentinfo landmark