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.
| 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 |