Accessibility (Photo by Paul Green _ Unsplash)

Web Accessibility – part 1 : Overview


Getting all users to fully experience the web without anyone being left out is on today’s front-end developer’s agenda. We then call “accessible” any web application which provides the same equivalent experience to a wide variety of users. In this article, we’ll discuss the following:

  • What is accessibility?
  • What are the different types of web impairment?
  • What’s make an application accessible?

If these questions appeal to your curiosity, then let’s proceed shall we?


Accessibility guarantees a seamless experience for a widest possible range of web users.


What is Accessibility?

Accessibility can be defined as the process of insuring that a product can be fully used and experienced in a similar fashion by the widest possible range of users.

Developers are often assuming that everyone else is experiencing the interface the same way they do, which leads them to create an experience that is only enjoyable by a small range of people, leaving the rest of the audience with issues (content not properly visible, understandable or audible). Therefore, accessibility adapts the experience to any user’s specific condition or situaton (it doesn’t matter whether users are in possession of all their faculties or have poor vision, bad hearing, etc …).

Accessibility goes beyond disability:

Accessibility integrate many elements of user experience, which minimize confusion and errors in people transactions on the web (for instance purchasing the wrong product because of the badly positioned call to action button). Accessibility therefore guarantees a seamless experience for a widest possible range of web users.


Accessibility incorporates User Experience


Example of accessibility and User Experience:

The following figure represents an inaccessible form. The issues are:

  • The username and price detail texts are low in contrast (hard for low vision readers to capture)
  • Labels and filters are each at the opposite side of the form (hard for people to associate them or to zoom into the page)
Form with accessibility issues (courtesy of, web accessibility course)
Form with accessibility issues (courtesy of, web accessibility course)


Now, here is the same form made more accessible by the following changes:

  • Low contrast text has been made darker (username and price detail texts)
  • The design has been modified to have label right next to their target (checking the label now affects the checkbox’s state)
Form optimized for accessibility (courtesy of, web accessibility course)
Form optimized for accessibility (courtesy of, web accessibility course)


Accessibility guarantees a seamless experience for a widest possible range of web users.


Understanding the diversity of  web impairments:

Impaired web usage is commonly associated with blindness, which is far from being accurate. In reality, there is four types of impairments on the web:

  • Visual : People with low visual acuity, poor color vision or suffering from concussion
  • Motor : People with a disabled arm or some other kind of dexterity impairment (they’ll probably use a special keyboard navigation, an eye tracking or voice dictation software)
  • Hearing : People who don’t or can’t listen. In this case, the content that uses a sound should provide some kind of visual alternative (a messenger app could be using a flashing alert as well as sound notification)
  • Cognitive : People suffering from concussion, ADD, dyslexia or autism (they’ll need to zoom in the content). A minimal design is well suited in this case because it will minimize distraction or cognitive load

It is also important to note that impairments are associated with temporalities, therefore a broken arm or concussion are considered as temporary impairments, blindness in considered a permanent impairment and being for example in a position where you can’t listen because of loud noise in your seroundings is considered as a situational impairment.


There is four types of impairments of the web: Visual, motor, hearing and cognitive.


Checklists: What makes an application accessible:

Accessibility is so broad and the user-ship is so diverse that a road map is needed in other to fully grasp it. The WCAG (Web Content Accessibility Guidelines) is a set of guidelines and best practices which had been put together by the experts to define accessibility in a methodical way.

WCAG is organized around four core principles:

  • Perceivable: Making sure users can perceive the content (sight, hearing or maybe touch)
  • Operable: Making sure users can use UI components and navigate the content (for instance avoiding to conceal crucial information in a hover effect because users using keyboards or screen readers might be deprived of it)
  • Understandable: Making sure users can understand the concept or the interface (Is the interface consistent enough to avoid confusion?)
  • Robust: Making sure the application is robust enough to be consumed by a wide variety of user agents and ensuring it works with assistive technology.



Today, we looked into the definition of accessibility, we showed an example of inacessibility/accessibility, we looked at the diversity of impairments and we finished by looking into what makes an application accessible.

Do you have experience with accessibility? Please feel free to share your thoutghs with me.

Thank you.



Published by

Eric Njanga

Web front-end developer passionate about finding the most efficient workflow for creating the most effective user-interfaces. His dream is to become a front-end instructor. /