Implementing web accessibility into your website.
Hi Everyone,
Being UI developer, it’s a part of our job to code web accessibility.
In this article you will get to know what is accessibility, why it is so important & which things should we know for testing the web page and implementing it with accessibility rules.
Let’s understand some concepts first in details,
What is accessibility ?
According to google dictionary,
“Accessibility refers to the quality of being available when needed”
Similarly web accessibility implies web application should be available to everyone when needed, including people with physical disabilities and I think we should add every time(not just when needed).
According to Wikipedia,
“Web accessibility is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with disabilities. When sites are correctly designed, developed and edited, generally all users have equal access to information and functionality.”
In simple terms we can say, accessibility is everyone having overall access for a something.
Why there is need for web accessibility?
Web is the rich source of information, e-commerce, business and a lot more and every user should be accessible to it in equal manner.
There is large number for people in the world with disabilities. According to WHO(World Health Organisation), almost 1 billion people are having disability among which most are living in developed countries.
As this is really huge number of people contributing the internet, so web should be made accessible with considering these users.
Most of the websites are mandated by governments to be build with W3C’s Web Content Accessibility Guidelines (WCAG) for people with disabilities.
All type of users who can access internet through devices, no matter how their physical condition is.
Mostly disability includes Blindness, deafness, color blindness (permanently disabled) or may be due to some situations like slow internet or temporary disability.
Some of acts, US compliance’s & guidelines in order to make web accessible
There are standards, guidelines and compliance’s are available to make sure application should be developed with accessibility in mind and ensures that all the technical and functional specifications are in a right way to to build accessible websites.
Section 508, an amendment to the United States Workforce Rehabilitation Act of 1973, is a federal law mandating that all electronic and information technology developed, procured, maintained, or used by the federal government be accessible to people with disabilities.
The Americans with Disabilities Act of 1990 is a civil rights law that prohibits discrimination based on disability.
WCAG:
The Web Content Accessibility Guidelines (WCAG) which are produced by the W3C are universally accepted technical guidelines for ensuring web accessibility.
WAI-ARIA is a spec defining support for accessible web apps. ARIA attributes can be used by the web app developer to provide additional information about the semantics of the various elements to assistive technologies like screen readers.
How to make it happen (Developers task) ?
Now we know web accessibility and need for it. Let’s see how we can achieve this…
There are 3 main aspects that needs to be focused by developers while developing
- Vision support: for the people with blindness and color blindness.
- Keyboard support: for the people who don’t use mouse and people with eye disabilities.
- Auditory support: for the people who are using assistive technologies (for e.g. Screen readers) for accessing web pages.
Below mentioned checklist should be kept in mind by UI developers, while developing a web app in consideration with web accessibility.
- By writing alternative text:
Alternative text should be added on images, graphics and logos. That way, people who use a assistive technologies for accessing websites will know what’s on the website.
2. Hyperlinks:
hypertext links should be included with the self-explanatory text. Most of the time users might, for instance, skip from link to link without reading anything else on the page.
Get Sawan Rathod’s stories in your inbox
Join Medium for free to get updates from this writer.
The links should also be clickable using the keyboard.
3. Association of labels with form fields:
Every input field on the web page inside form should be associated with labels.
Also association can be made by writing ARIA attributes on HTML elements.
Many accessibility analysing tools ensure web pages are accessible with features such as labels for any drop-down lists or check boxes with text, and easy navigation with a keyboard.
4. Organized web pages:
Web pages should include headings and lists, for instance, to make it easier for people to make their way around the site, especially if they’re using assistive technology.
5. Using captioned media:
All video, audio files should be captioned or transcribed for people with hearing disability.
6. Maintaining color contrast ratio of background color with the text color :
people with vision disabilities will never going to know if color is used to communicate information.
For example, Using red text color to show which products are the hottest sellers.
There are accepted standard for color contrast that should be used.
7. Writing more descriptions:
ARIA attributes can be used by the web app developer to provide additional information about the semantics of the various elements to assistive technologies like screen readers.
8. Using tabindex attribute on inputs:
tabindex can be added on every inputs on the form so that all fields are reachable by using keyboard.
Adding tabindex=”0” on each input field will navigate in a sequence as they appear on html page from top to bottom, & left to right.
If situation demands, you can add tabindex using an order from 0,1,2,3 and so on then it will navigate through incremental order from 0 to onwards.
9. Adding visual indication on focus:
Browser has functionality to highlight the elements when focus is on them, but if missed by browser you can add using CSS with pseudo selector.
10. In case of no HTML control:
This can be observed when you are using some 3rd party library for having UI component in your application, it might be situation that all UI(HTML) is generated through JavaScript at the run time.
In this case you can use Jquery or JavaScript code for performing DOM manipulation.
You can add attribute, text or styling to particular HTML element inside your JavaScript file.
The checklist has more entries and it is easily available on internet but you can always start with above changes, as per my experience it covers most of the accessibility criteria.
If you are developing application from the scratch it will become more easy to achieve accessibility. If application is already developed, then also no worries you can always revisit your code to make it accessible to everyone.
Testing the accessibility:
Testing the web page for accessibility is as important as implementing it.
Tools for analysing accessibility of the web page
AXE: (Chrome/Firefox Browser Plugin)
Axe is an open-source accessibility rule set for automated accessibility validation.
After running it within chrome developer tool, it gives analytics about issues and warnings on the web page. Axe has good documentation on how to solve this issues in order to make web page accessible.
WAVE: (Chrome Browser Plugin)
WAVE is a web accessibility evaluation tool developed by WebAIM.org. It provides visual feedback about the accessibility of your web content by injecting icons and indicators into your page. No automated tool can tell you if your page is accessible, but WAVE facilitates human evaluation and educates about accessibility issues.
Screen reader testing:
Running screen reader with the web app will help you to get idea of having more information about web content on the page.
Chromevox: (Free screen reader plugin available in chrome browser).
NVDA: By using this assistive technology people can access Windows machine and other third party software.
This is the nice stuff provided by axe plugin, where you can achieve certain ratio for color contrast to pass the accessibility criteria.
There are many tools available, but basically they all provide rules and checklist that should be followed while developing an application and how to test an application.
Conclusion
By following above guidelines you can add accessibility into your website easily.
