Accessibility Examples in Practical Application

I am writing this short guide to provide practical examples of how to implement accessibility in websites. Accessibility was not emphasized during school nor is it being emphasized enough in the real world of web development. It is my hope that this article, along with many others, will encourage developers to create accessible sites from now on. It has always helped me to get practical hands-on examples of how to do things. So this guide will focus on real-world examples that I have encountered in my day to day life as a web developer.

Skipping Navigation

In order to give visually impaired users a pleasant experience on your website, they need to be able to access content quickly and efficiently. If you have never experienced a website through a screen reader I recommend doing so. It is the best way to test how easily a site can be navigated for non-sighted users. NVDA is a very good screen reader application that is provided free of charge. If you use the screen reader and find it helpful, please consider making a donation to the development team. The screen reader can be downloaded from nvaccess.org.

To allow visually impaired users to skip to the main content of a site and avoid tabbing through all the main navigation links:

  1. Create a “skip navigation link” that lives directly underneath the opening body tag.
<a tabindex="0" class="skip-link" href="#main-content">Skip to Main Content</a>

tabindex="0" is added to ensure the link is keyboard focusable on all browsers. Further information about keyboard accessibility can be found at webaim.org.
2. The “skip navigation” link needs to be associated with the main html tag in your webpage document using the ID tag.

<main id="main-content">
...page content
</main>
  1. Hide the “skip navigation” link by default. This ensures that the link is only visible to sighted users when the link is in focus.
    Create a class for the link that can be styled with CSS. In my example, I have added the class skip-link .
.skip-link {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
border: 0;
}
.skip-link:active, .skip-link:focus {
position: static;
width: auto;
height: auto;
overflow: visible;
clip: auto;
white-space: normal;
-webkit-clip-path: none;
clip-path: none;
}

These CSS styles hide the link by default and only display the link when it is receiving keyboard focus. For more information visit the a11yproject and this blog post.

Accessible Header Structure

  • Role “banner” is added to the header tag to signify to screen readers that this tag is the top most section. The role on the header is depreciated in HTML5 but should be added still in order to support as many screen readers as possible.
  • This role is added to the header element when it is the child of the body element.
<header role="banner">
</header>  

Accessible Main Content Structure

  • Role “main” is added to the main tag to signify to screen readers that this tag is the main content section. Needing to add the role on the main is depreciated in HTML5 but should still be added in order to support as many screen readers as possible.
  • This role is added to the main element when it is the main content section of the page. If there is more than one main element then each element will need an aria-labelledby attribute or an aria-label .
  • More information can be found at the https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/landmarks/main.html.
<main role="main">
</main>