When designing websites, we tend to envision users with good eyesight, good hearing and the ability to use a mouse or touchpad. We may forget about users who are differently-abled. How do they access online business and content?
Optimizing websites to be accessible and usable for every kind of user should be a key item in any design and development checklist. By meeting accessibility guidelines, you will not only be including a huge segment of the population into your target audience but will also be gaining added SEO benefits.
We will explain just how easy it is to do this.
Before we begin, here’s a quick overview of what we will cover-
- What web accessibility really is
- Why you should implement it-the obvious and not-so-obvious reasons
- How to implement it-an introduction to ARIA, code snippets, checklists, etc.
- Web accessibility evaluation tools
What is web accessibility:
An accessible website is designed and coded to be more usable for people who are both differently abled and those with a temporary disability.
Why you should implement it:
1.To increase reach and conversion:
An accessible website will cover several demographics such as:
- The differently abled-
To put it into perspective- around 285 million people worldwide have some kind of visual impairment with around 360 million with some kind of hearing impairment. - The temporarily disabled i.e. due to sickness or injury
- The aged
- Those in areas with poor network
2. Improve your website’s SEO
A website optimized for accessibility is also better optimized for search engines. Search engines and web accessibility devices like screen readers read the code of your website in a similar way. They rely on code alone to understand content.
While optimizing for SEO does not necessarily translate into a properly accessible site, the base is the same.All of the guidelines we have mentioned below, however, cover both the overlap in good SEO and accessibility design and much more.
3. Fulfill a human right
Web accessibility is a human right recognized by the United Nations.
The tech world is getting more serious about designing apps and products for every kind of person to use. From Apple’s announcement of a new website to promote accessibility to improvements in the latest version of Android N.
How to implement it:-
- Visual guidelines:
This largely involves providing text equivalents for graphics so that devices like screen readers can help the visually impaired access content. Some of these guidelines are:
- Ensure content is based in HTML and not CSS
This is because screen readers navigate by reading text within the page structure with tables, links, lists, etc.
2.Ensure HTML headings are clear and in logical order
This helps users jump from one topic to another easily and also gives them a clear outline of the structure and content of the page through their screen readers.
3.Use descriptive text for hypertext links. Do not let users guess what ‘Click here’ refers to or directs to.
4.Follow these guidelines for images:
- Add a long description for plain images and informative images with graphs.
- E.g.-
. This will display it on another page.
- Provide ‘null’ values for graphics that have no other purpose than structure. E.g. –divider bars.
- Create infographics in HTML or CSS rather than using an image file which will make it more accessible to both the visually impaired and search engines.
5.Do not rely only on colour alone to convey information and choice.
6.Conform to colour contrast standards.
Colorsafe.co’s contrast checker will help ensure you meet current web standards.
7.Ensure forms and buttons are labeled appropriately
If this makes you think that aesthetics will need to be sacrificed for accessibility –check out feedmusic.com.
- Auditory guidelines:
- Provide captions, subtitles and transcripts for video content
- Motor guidelines:
These guidelines ensure that websites can be accessed without touching the screen by using a keyboard or other input device. This is done largely by use of the TAB key to navigate sections and let users know where they are on a page-
- Highlight location on a page for users who will navigate only with a keyboard :
This simple example shared on the accessibility website for the University of Washington shows you how to change the visible style of a link when it has focus for both mouse and keyboard users.
CSS code for a hyperlink
a {
color: black;
background-color: white;
text-decoration: underline;
}
Code to highlight the text when both a mouse and keyboard user hovers over the link:
a:hover, a:focus{
color: white;
background-color: black;
text-decoration: none;
}
2.Use event handlers for mouse and keyboard users
e.g. <onclick=openWin(index.html) onkeypress=openWin(index.html)>
3.Ensure all forms on your website are keyboard accessible.
- Cognitive guidelines:
- Have fewer distracting movements and flashy, blinking, flickering elements and animations.
- Build clear, well-structured navigation
- Have content with easy-to-understand language
Use ARIA:
ARIA or Accessible Rich Internet Applications is a collection of attributes used along with HTML specifically designed to help make the web more accessible to the differently-abled.
Click here for a list of ARIA tags to use in your code.
Web accessibility evaluation tools
Find out if your website meets accessibility guidelines by using one of several tools compiled by the W3C.
For good examples of accessible websites-take a look at:
What about mobile?
By now, you’ve probably been wondering why we haven’t discussed accessibility guidelines for mobile. We actually plan to dedicate our next blog solely to accessibility for mobile apps.
Most of the guidelines we’ve mentioned above will apply to mobile websites as well. However, here are two key pain issues to keep in mind specifically for a mobile website:
1. Responsiveness:
Your website should be clearly visible and accessible on all screen sizes and modes. Users should also not have to scroll both vertically and horizontally.
2. Input ease:
Whether differently-abled or not, it can be difficult for any user to input text onto a mobile screen. Having elements such as radio buttons, checkboxes etc. will aid those with both visual difficulties and those struggling to use the on-screen keyboard.
Ensure on-screen buttons are large and sufficiently spaced-out to avoid user input mistakes. For ‘delete’ buttons, consider giving users a ‘confirmation prompt’. Similarly, provide a visible and functioning ‘back button’ for your users to go back if a mistake has been made.
We hope you found this blog valuable. Give us your thoughts in the comment section below!
There is no ads to display, Please add some
