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 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:
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:-
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:
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:
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.
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-
CSS code for a hyperlink
Code to highlight the text when both a mouse and keyboard user hovers over the link:
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.
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:
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!