Why use HTML and WAI-ARIA?
HTML5 introduces semantic elements like <nav>, <header>, and <footer>, which enhance accessibility by providing built-in roles without the need for ARIA attributes.
WAI-ARIA, which stands for Web Accessibility Initiative - Accessible Rich Internet Applications, complements HTML5 by providing a more comprehensive set of roles, states, and properties. WAI-ARIA allows you to create accessible web content with advanced user interface controls and dynamic content that may not be achievable with HTML5 alone.
By combining the strengths of HTML5 and WAI-ARIA, you can ensure a more inclusive web experience for all users, especially those relying on assistive technologies like screen readers.
|
Content |
Description |
|---|---|
|
Page regions |
Identify and label different areas of web pages using HTML5 and WAI-ARIA. |
|
Label regions |
Identify and label different areas of web pages using HTML5 and WAI-ARIA. |
|
Headings |
Use headings to organize content logically and show its importance. |
|
Content |
Organize content in a way that makes it easy to understand and navigate. |
✅ Simplify content discovery for cognitive and learning needs
✅ Direct access to important content and sections for screen reader users
✅ Enhance navigation for keyboard users
✅ Focus on main content for software-dependent users
✅ Provide orientation cues for those with visual impairments
✅ Improve functionality for mobile web users
✅ Support jumping to specific page sections using browser plugins
✅ Boost search result indexing for better SEO
Page regions
To identify a web page by a web browser and assistive technologies, mark up different page regions as follows:
Use HTML5 <header> element to define the top region of a web page, containing site-wide information like the logo, search function, and navigation options.
<header>
<img src="/images/logo.png" alt="Visma.">
</header>
Example of how to use a page region.
Use the HTML5 <footer> element to define the bottom region of a web page, containing site-wide information like copyright information, privacy statements, or disclaimers.
<footer>
<p>© 2024 Visma</p>
</footer>
Example of how to use a page region.
Use the HTML5 <nav> element to mark up a navigation menu on a web page. You can have multiple navigation menus on a page and label each of them for identification purposes.
<nav aria-label="Main">
</nav>
<nav aria-labelledby="regionheading">
<h2 id="regionheading">Title</h2>
</nav>
Example of how to use a page region.
Use the HTML5 <main> element to identify the main content region of a web page.
<main>
<h1>This is main section!</h1>
</main>
Example of how to use a page region.
Use the HTML5 <aside> element to identify regions that support the main content.
<aside>
<h3>Related Articles</h3>
</aside>
Example of how to use a page region.
Use HTML5 elements, and WAI-ARIA roles as fall backs, for maximum compatibility with web browsers and assistive technologies that not yet support HTML5.
Techniques
Labelling regions
To distinguish two-page regions of the same type, such as main-nav and sub-nav menus, use a <nav> element on the same page. This will make it easier to identify different sections of your page.
You can also change the default identification of page regions by using labels. For instance, use advertisement to identify a <aside> region. Unique regions like <main> do not need labels.
Aria-labelledby
To label a region, use aria-labelledby attribute with the ID of an existing element. The content of that element will serve as the label. Keep the labels short and descriptive. If there's a heading in the region, you can use it as the label.
<nav aria-labelledby="regionheading">
<h2 id="regionheading">On this Page</h2>
</nav>
Example of how to use aria-labelledby.
Aria-label
Consider using the WAI-ARIA aria-label attribute to label the region if the label should not be visible on the page.
<nav aria-label="Main">
</nav>
Example of how to use aria-label.
Techniques
- ARIA11: Using ARIA landmarks to identify regions of a page
- H69: Providing heading elements at the beginning of each section of content
Semantic heading tags
Use heading tags (h-tags) to define the structure and hierarchy of headings and subheadings on a page. With clear and organized headings, users can easily navigate through your content. Headings also enable in-page navigation, which allows users to jump directly to the section of the page they need.
- Use aria-labelledby to associate headings with their regions. Visible headings make regions easy to identify for all users.
-
Represent a different level of importance, with <h1> being the highest level (main heading) and <h6> being the lowest level (subheading).
- Provide a clear outline of the content and help search engines and assistive technologies understand the organization of the information on a page.
What is the difference between h-tags and styling?
- Styling refers to the visual presentation of elements on a webpage using CSS (Cascading Style Sheets).
- While H-tags define the structure and hierarchy of headings, styling allows you to customise the appearance of these headings, such as changing the font size, colour, spacing, and other visual properties.
- Styling does not alter the semantic meaning of the content but enhances its visual appeal and user experience.
Techniques:
- ARIA12: Using role=heading to identify headings
- G130: Providing descriptive headings
- G141: Organizing a page using headings
- H42: Using h1-h6 to identify headings
- H69: Providing heading elements at the beginning of each section of content
- H80: Identifying the purpose of a link using link text combined with the preceding heading element
- PDF9: Providing headings by marking content with heading tags in PDF documents