Getting Started With Web Accessibility

Getting Started With Web Accessibility

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.

-Tim Berners-Lee

My objective is to set you on the right track of building a web that accommodates all through, accessibility. I am going to cover definition, importance, guides in making a website accessible by everyone, and tools to test web accessibility. I assume that you have a basic knowledge of HTML, CSS and JavaScript. Hence, I won't go into the details of building a website.

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 <h1>...<h6>, paragraph <p> and sections <section> <aside> <main> <header> <form> of your webpage. Note that the Screenreaders use them as guideposts.

    A bad semantic HTML code snippet bad semantic HTML code snippet A good semantic HTML code good semantic HTML code snippet

  • Absence of ALT attribute on Images <img>: the ALT text tells the Screenreader how the image looks. To write an ALT text, think of if you do not see the image, how will you want it described to you?

    A bad code snippet for HTML image Bad code snippet of HTML image element A good code snippet for HTML image Bad code snippet of HTML image element

  • Using HTML table <table> for other things aside from displaying tabulated data. A good table should have table headers <th>, scope attribute and caption <caption> element.

  • 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 <input>, button <button>, link <a>, select <select>.

    Take advantage of native keyboard accessibility by using the right elements for the right job.

  • Use the form <form> label element <label> to make them accessible. Labels unquestionably link to their partner input fields <input>. Hence, the for attributes 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:

    An auditing tool in the form of a JavaScript library from Khan Academy is tota11y

  • 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.