Are you building web apps with all types of users in mind?
The power of the web is in its universality. Access by everyone, regardless of disability, is an essential aspect.
What is Accessibility?
Accessibility in this context is the practice of building web applications in a way that will make it usable by all people irrespective of their disability types or level of impairment. Including accessibility features in your web applications will make the use of the web less challenging for the people with disabilities or impairment and thus contribute to building an inclusive World Wide Web.
Disabilities and impairments can be due to trauma, inherent or disease. Some of the disabilities that can be a hindrance to feeling the excellent user experience which you have added to your web applications are:
Visual Impairment: This can be complete or partial blindness, low-vision, colour blindness, or poor eyesight.
Auditory Impairment: It is hearing-related disabilities; people with this impairment are individuals that find it hard to hear. It includes partial or complete deafness.
Cognitive Impairment: It can be Developmental disabilities, learning difficulties, or disabilities affecting memory, attention and logical reasoning.
Mobility Impairment: This is when there is difficulty or inability to use the hands or loss of muscle control. Usually found in individuals with stroke, Parkinson's disease or other issues relating to muscle and neurons.
Sometimes, disabilities are not physical nor intellectual; it can be situational disabilities for example, someone who is situationally one-handed from eating or carrying something—might be a baby. Or socio-economic disability which can be restrictions on bandwidth and internet speed.
Individuals living with disabilities—temporarily or permanently make use of assistive technologies which include but not limited to the following to access web content:
- Screen readers
- Braille terminals
- Screen magnifiers
- Text-to-speech tools,
- Keyboard overlay
- Keyboard inputs
Importance of Web Accessibility
From the list below, you will realise that making web applications accessible does not benefit just individuals with disabilities, everyone including you and your business is beneficiary of a web that works for all:
- Improves SEO (Search Engine Optimisation)
- Projects an outstanding public image because you demonstrate good ethics and morals by including accessibility features in your web applications,
- Ease of use, excellent user experience and customers' satisfaction which can lead to an increase in customer base then, an increase in revenue.
- Demonstrates good design practice.
- Shows that you are law-abiding —well, in a place where there is legislation for building accessible web applications.
Making Your Web Applications Accessible
The W3C (World Wide Web Consortium) has published a detailed document that includes criteria for accessibility conformance; this document is called Web Content Accessibility Guidelines (WCAG). They organised the rules around four principles which specify how your implementation can be perceivable, operable, understandable and Robust.
Consider adding accessibility to your project right from start to avoid technical debt. When planning and designing, factor accessibility into your testing cases. Test early and often and consider testing with disabled users group. Have the mindset that accessibility benefits everyone—you, your business and users and occasionally run surveys to get feedback on how accessible your web applications are.
Some Examples of Common Accessibility Problems with Solutions
At this point, you know what accessibility is and the importance of considering it. For the rest of this guide, I will show you how you can avoid common problems to achieve accessible web applications.
Lack of semantic structure: the fastest route to achieving accessibility is through the use of semantic HTML to structure the headings
<form>of your webpage. Note that the Screenreaders use them as guideposts.
A bad semantic HTML code snippet A good semantic HTML code
ALTattribute on Images
ALTtext tells the Screenreader how the image looks. To write an
ALTtext, think of if you do not see the image, how will you want it described to you?
A bad code snippet for HTML image A good code snippet for HTML image
Using HTML table
<table>for other things aside from displaying tabulated data. A good table should have table headers
scopeattribute and caption
Some elements have native accessibility that is; they have the default behaviour of being able to be selected with the keyboard. Examples of such elements are input
Take advantage of native keyboard accessibility by using the right elements for the right job.
Use the form
<label>to make them accessible. Labels unquestionably link to their partner input fields
<input>. Hence, the
forattributes must match the id of the input field.
Tools to Test Web Accessibility
Auditing tools which provide a field to enter your web URL and return a list of accessibility issues. Some examples are:
- Automation tool in the form of browser extension—check out axe for Chrome and axe for Firefox
- Test with Screenreaders to experience how visually impaired people access your implementation. Some freely available ones are:
- Accessibility user groups — people with disabilities.