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
-
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, 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.
Header
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.
<div role="banner"> or HTML5 equivalent <header>.
Main
Identify the first content of the page, each page should include this landmark.
<div role="main"> or HTML5 equivalent <main>.
Example:
<div role="main">
<h1>Main content title</h1>
</div>
You can include more than 1 main in the same page, we can differentiate using aria-labelledby.
<div role="main" aria-labelledby="title1">
<h1 id="title heading 1">
Lorem ipsum
</h1>
Main content area 1
</div>
<div role="main" aria-labelledby="title2">
<h1 id="title heading 2">
Lorem ipsum 2
</h1>
Main content area 2
</div>
Footer or Contentinfo
Use this landmark to identify the section where you want to include important information. Called also footer, include here information such as contact info, copyrights, shortcut menus, etc.
<div role="footer"> or HTML5 equivalent <footer>.
Navigation
Identify the lists or groups with links that goes to internal pages in the website or a simple page. If more than one menu exists, differentiate it using aria-labelledby.
<div role="navigation"> or HTML5 equivalent <nav>.
Examples:
<div role="navigation">
<h2 id="nav1">
Nav title 1
</h2>
</div>
If more than one exist:
<div role="navigation" aria-labelledby="nav1">
<h2 id="nav1">
Nav title 1
</h2>
</div>
<div role="navigation" aria-labelledby="nav2">
<h2 id="nav2">
Nav title 2
</h2>
</div>
Aside or Complementary
Content that is located in the right or left side of the main content.
<div role="complementary"> or HTML5 equivalent <aside>.
Examples:
<div role="complementary" aria-labelledby="comp1">
aside content 1
</div>
<div role="complementary" aria-labelledby="comp2">
aside content 2
</div>
Forms
A form define the region that contains the items to catch/send data. We can use the role search when the form is a search form.
<div role="form" aria-labelledby="formname"> or HTML5 equivalent <form>.
If the form is a search form:
<form role="search">
Region
Normally used to display a summary of the content, this sections is very important when you want the users goes to directly to that content easily.
<div role="region" aria-labelledby="region1"> or HTML5 equivalent <section aria-labelledby="region1">.
Examples:
<div role="main">
<div role="region" aria-labelledby="region1">
content region 1
</div>
</div>
Can use also:
<section aria-label="title of the region section 1">
content
</section>
Correct use of headings
Headings should be increasing 1 by 1, below the use case to have a good landmark structure.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
If we have the case the Heading can’t be applied in sequence, can use:
<h1>Heading 1</h1>
<h2 class="h3">Heading 3</h2>
Using this, screen readers know how to identify the correct heading order without care about the size.