Making your website more accessible to those with disabilities, such as colorblindness, low-vision, or blind users, benefits everyone. And one of the best ways to do that is with the use of an accessibility overlay.
More people are using web browsers with accessibility features turned on, whether the user themselves choose to enable these settings – perhaps out of preference – or websites making their content more accessible without the user needing to change their browser settings. In addition, screen readers are becoming increasingly popular, with an estimated 10% of internet users – over 54 million people – using screen readers to browse the web.
An accessibility overlay is a great way to increase your website’s ranking on search engines, especially considering that Google announced recently that searchers would soon be able better to find more accessible content through their search feature.
The concept of an accessibility overlay is similar to alt text – except you’re adding a small piece of content rather than an image. What content does an overlay provide? It can include things like:
– alternative text for images and videos
– skip links
– descriptions for every element on the page
– labels for form fields and buttons
– text for complex graphs and charts
Each of these can be added using simple HTML tags, which act as instructions. For instance, adding the alternative text to an image is done using this line of code (shown in red ):
<img src=”myimage.png” alt=”a green apple on a tree branch” />
As you can see, this is nothing special. All it’s doing is providing the reader with an alternative text for what they are seeing. You can also add labels to form fields and buttons, like with this example (shown in blue ):
<label>Your name here.</label> – <input type=”text” id=”myname”>
As you can see, the label element acts as a descriptor for the text input field. The id=”myname” piece of code here is used so that when javascript is enabled on your website, the user will be able to click anywhere within this form field and have it automatically fill in their name.
With this accessibility overlay you can also add alternative text to graphs and charts, which might otherwise not have any descriptive text.
<figure>
<img src=”piechart.gif” alt=”Chart showing the percentage of numbers 1-5.” />
</figure>
By default, screen readers will speak aloud whatever content is inside the tags – so all the text shown above will be spoken aloud to the reader.
One final accessibility feature to consider adding is a skip link which allows users with disabilities, such as blindness, to navigate directly to the content on your page rather than having to scroll through all the content. This is done using two pieces of code – one for showing the link, one for hiding it (shown in green ):
<a title=”Skip Navigation” href=”#maincontent” id=”skiplink”>Skip Navigation</a>
<style type=”text/css”> #skiplink { visibility: hidden; } </style>
Closing thoughts
Providing an accessibility overlay is a great way to make your website more accessible for users with disabilities without having to spend too much time coding. Using these simple HTML tags, you can provide key pieces of information used in the alternative text description for images and videos – or you can even add visual cues when there is no other way to describe graphs and charts.
