Accessible Web
The internet is an information medium based in 95% on visual transmission. It would seem therefore that it is virtually unusable for people unable to see. This, however, is not true. Indeed, we (the developers) can make browsing our sites a truly great experience by making it a more accessible. Here are the 9 simple ways to help vision-impaired users can access the internet.
Tab Key
A blind person (or visually-impaired) can interact with the computer using text-to-speech software or other specialised devices such as Braille display. They can access the internet via the standard web browser and search engines (again with text-to-speech software or read using a Braille display). On the websites, users often navigate by using a tab key which jumps between the interactable elements.
It is usually a good idea to set internal search engine as one of the very first ones (if not the first) to focus on.
- Make sure your website can be easily navigated using tab key
Headers
Headers serve the same purpose as in newspapers – the larger and bolder a font is, the more important news is. The same principle applies to websites, the more significant the content, the higher header number should be. For example, a page title would use the <h1> tag, the subheaders within the section would use <h2> – e.g. titles of articles, then <h3> – subtitles, and so on. A blind person can navigate between these headers by using key shortcuts. If, for some reason, you don’t want a header to be visible for normal users, they can be hidden using style sheets.
It is important that headers are not used to enlarge the text as this make the site more difficult to visualize.
- Tags
<h1> – <h6>, are not meant to enlarge your text! They should be used as headers.
Hyperlinks
Almost equally necessary is proper implementation of hyperlinks on your website. When an able person sees a link that says “See More…” or “Click Here”, they can deduce where this link will lead, for a blind person this is much harder to conceive. Therefore, in order to avoid damaging the layout of the webpage, we can use the attribute “title” to help e.g.
|
1 |
<a title="Download PDF file about accessibility" href="#">Guide To Accessibility</a> |
- Use attribute
<a title="..."> </a>in hyperlinks to make them less ambiguous
Magnification
Visually-impaired people tend to enlarge the font using keys Ctrl + + and Ctrl + -. The also frequently other magnifying tools e.g. Magnifier.
- Make sure your site doesn’t break when enlarged
Font Size
Using a simple JavaScript code, developers can enable users to increase a font size themselves: AAA making the website more flexible. For a partially sighted people, a font size of 9-12 pt is a minimum. Sometimes 16 may be needed. This way they won't have to enlarge the website.
Colours
It is also very helpful if the web page offers to change contrast so individuals can adjust the appearance of the site that would suit their needs. There are some tools which allow you to check how the web page is perceived by colour blind people e.g. http://colorfilter.wickline.org/
- Remember about colours
Image Descriptions
Image description is crucial. The attribute alt="" specifies the alternate text for an image. However, if you use an image as a decoration you should leave the attribute alt="" empty. In HTML5, <figure> tag was introduced, which can be used with tags <img> and <figcaption> to define an image.
- Remember to add meaningful/clear image descriptions
Forms
For each input field assign a label. If you don’t do this, people with sight problems cannot fill the forms in. There are special tags e.g. <fieldset> and <label>, that help screen readers. Again, if you don’t want it, hide it (e.g. by using absolute positioning with a massive offset), but use them.
- Remember to name your forms properly
- Use
<label>to give an even more meaningful description
Accesskey Attribute
For more important elements on the page, you can assign special attributes e.g. use accesskey="" (press a key to focus on a particular element). Blind people cannot see or point a mouse at your local search from. Assign a key e.g. s, this will help them.
- Assign access keys for the most important elements on your page
Conclusion
As a web developer myself, I have to confess I had never taken accessibility strongly into consideration until I realised it can benefit for so many people. We should attempt to make the internet as welcoming and accessible as possible for everyone. The respect and justice for every human being should be maintained because disabled people certainly ought not to be less authorised to use the internet than any other people.