How We Made Our Website Accessible
browseemall
Can a color blind person still use your website without any problems? What about visual impaired visitors using a screenreader? As you surely know there are common web accessibility standards every website should strive to follow. After all it is possible to make your website great and accessible without too much work or high costs. And why would you neglect this and therefor drive potential customers away? In this post I’ll show you tools and techniques we used to make our own homepage follow the web accessibility guidelines.
The WAVE Evaluation Tool
To get a feel for the current state of our website we used the web accessibility evaluation tool (WAVE). This is dead simple to use, enter the URL you want to test and presto you can see a visual reference on what you need to improve. In our case it came back with 11 errors and 7 alerts.
Define Your Language
The first problem that the WAVE tool pointed out was our lack of language definition. You see screenreaders need to know the language your page is written in (the spoken language not the programming language) so it can read and translate it accordingly. Luckily this can be fixed by adding a single attribute in your code:
<!-- No language -->
<html>
<!-- With language -->
<html lang="en">Links Without Text
On our page we had quite a few links which do not include any test. These are mostly links which can be identified by a small icon like the link to our Facebook page or Twitter account. But the missing text makes it impossible for a screenreader to properly read the link out to the user. After all it cannot describe the icon reliably. To fix this we added a text to describe the link for screenreaders using Bootstrapps sr-only css class.
<!-- Link without text -->
<a href="https://twitter.com/BrowseEmAll">
<i class="fa fa-twitter-square"></i>
</a>
<!-- Link with invisible text -->
<a href="https://twitter.com/BrowseEmAll">
<i class="fa fa-twitter-square"></i>
<span class="sr-only">Visit BrowseEmAll on Twitter</span>
</a>Images Without Alternative Text
As we have seen in the last point screenreaders are not able to describe images to the user unless you give it a little help. For images you should do so by providing the alt attribute for every image in which you describe the image. This alt text will be used by the screen reader to describe the image to the user. A quick example:
<!-- Image without description -->
<img src="/Content/img/logo.png" id="logoicon">
<!-- Image with correct description -->
<img src="/Content/img/logo.png" alt="BrowseEmAll Logo" id="logoicon">Summary
We used the above changes to our website to make it accessible and compatible with devices like screenreaders in less than 1 hour of work. Now of course this is just the beginning and there are many more accessibility rules you can follow to improve the experience for your users but in our case we think our target audiences needs can be satisfied with the above modifications. You disagree? Feel free to reach out to us or tell us in the comments.
Photo by Jil Wright
