What are landmarks?
Landmarks are website elements that make the structure to define different sections or regions that are navegables for the screen readers such as NVDA in Windows and Voice Over in iOS. This structure offer assistive technologies to the users that needs to be oriented by their self using the keyboard only.
Landmarks are identified by the most common HTML tags such as header, main, nav and footer and complemented with ARIA or ROLE that clarify the website structure. Usually main is where the screen readers want to start reading the page identifying main and more important sections to show the users where they are and where they can navigate.
Best practices to build and accesible website
- Implement heading titles incrementing 1 by 1 (h1, h2, h3…) never h1 to h3, if this is the case, see example below
- Include alt text for all images and/or friendly filenames
- Links with descriptive names (ex: “Click here to read…” should be “To learn more… Read About Us”
- Use grid system instead of html <table>
- Logical order using tab-index to give the in-order experience using TAB
- Use ARIA only when necessary, (Ex: use label instead of aria-label, <button> instead of aria-button=”role”)
- Use ARIA when you are developing dynamic page changes or dynamic filters.
- Use ARIA en modals, popups, in-page updates, etc.
- Use section for splitting up the page elements
Code to be implemented
To have our website screen reader compatible, we should add the next html tags to our page html, using this code will create the correctly structure and the screen readers will validate our website as compatible with accessibility.
When using header as our first element, could use as banner area including the logo, site name and probably the first navigation bar. Header could be use within other sections, in this case header will not be used as a landmark because the order where it is.