Let's talk about Accessibility and UX Design

Accesibilidad, UX / By

Accessibility and UX Design: How to create experiences for every person

Let’s start by talking about usability

It could be said that an interface is (or should be), in the first place, usable, and then, accessible. To be accessible means to be usable to all users disregarding their physical or technological disabilities. 

According to Jakob Nielsen, usability guru and author of books like Usability Engineering and Mobile Usability, usability is a quality attribute that assesses how easy user interfaces are to use. According to Nielsen, the word usability also refers to methods for improving ease of use during the design process. In other words, if something is “usable,” it means that it works fine. A person with poor skills and few experiences can use it for its purpose without getting frustrated or facing obstacles. 

Nielsen presents five quality components to analyse the usability of a product.

  • Learnability: This characteristic is determined by the complexity of the learning curve that users face to perform basic tasks the first time they use the product.
  • Efficiency: This is determined by how quickly users can perform a task once they have learned how to use the product.
  • Memorability: This is determined by how easy it is for users to use the product after a period of not using it.
  • after a period of not using it. Errors: This is determined by the volume and severity of errors made by users when using the product, and how easy they can recover from them.
  • Satisfaction: This is determined by how pleasant it is for users to use the products and how satisfied they are with the user experience.
Usability and UX 

If usability is related to the efficacy, efficiency, and satisfaction that users achieve when interacting with a digital interface, then, are usability and user experience the same? The answer is no. 

Usability is a standard that a well-done design needs to fulfil. It is a concept that has to do with the human-machine interaction, and it does not exceed that space. However, UX design goes beyond that, as it encompasses many more concepts. For example, let’s suppose that we are designing a new screen flow. To do so, we need to consider several things: the research, the context of that flow in relation to the rest of the design, the user context when interacting with it, the voice and tone of the brand of our content designs, etc. After that, we run usability tests with real people to understand how they interact with this flow, and we will make tries until we know if it works, that is, if it is usable and matches the user’s mental model. 

Usability and Accessibility 

It may be common for these two concepts to overlap at some point, but accessibility and usability are not synonyms; even though both are characteristic of a good design. So, what do we mean by “accessibility”? Web accessibility is our way to make sure that everything that we create for a web can be used, interpreted, and operated by a variety of people in different situations. Despite both concepts seeking easy user access, accessibility goes a bit further than that. In this way, an interface is accessible when it is designed and developed for visually, hearing, and motor-impaired people, so they can use it efficiently as non-disabled people do.

It is crucial to think of how important the role of the development team is in terms of accessibility. An accessible design is useless if developers lack the knowledge and tools to execute it. Therefore, it is vital that all members of a digital team are educated on accessibility, not just programmers, so that, whatever the area, they can pursue the actions.

WCAG Standards

The W3C (World Wide Web Consortium) Web Accessibility Initiative establishes three levels of conformance of a website: Level A (basic), level AA (optimum), and level AAA (ideal). At the same time, the initiative establishes three accessibility principles that interfaces must comply with, they must be perceivable, operable, and understandable.

WCAG stands for Web Content Accessibility Guidelines. These guidelines were developed through the cooperation process of the W3C with people and organisations from all over the world to provide a single shared standard to satisfy people, organisations, and governments at an international level. In short, these are the guidelines:

  • Provide text alternatives for any non-text content.
  • All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.
  • Provide subtitles/captions or alternatives for time-based media.
  • Create content that can be presented in different ways (including support technologies) without losing information or structure.
  • Make it easier for users to see and hear content.
  • Make all functionality available from a keyboard.
  • Provide users enough time to read and use content.
  • Do not design content in a way that is known to cause seizures.
  • Provide ways to help users navigate, find content, and determine where they are.
  • Make easier input methods in addition to keyboards.
  • Make text content readable and understandable.
  • Make Web pages appear and operate in predictable ways.
  • Help users avoid and correct mistakes.
Accessibility and Colour

In terms of perception, contrast allows us to tell one object from another, or parts of the same scene as different. In web design, contrast is used to provide proper legibility between background and text, and also to visually differentiate website regions. 

Contrast in UI 

Colour contrast between the foreground (usually text) and background needs to be high enough as to guarantee legibility. When designing legible interfaces for different visual capacities, the W3C guidelines state the following contrast ratios:

  • Normal text: 4.5:1 for AA level, and 7:1 for AAA level.
  • Large text (120-150 % higher than normal text): 3:1 for AA level and 4.5:1 for AAA level.
  • Active user interface components and graphic objects such as icons and graphics:3:1 for AA level. AAA level contrast ratio remains to be defined.
Colour is not everything

Did you know that there are (approximately) 350 million people who suffer from colour blindness? I am sure this figure is higher than you thought. Therefore, it is vital that we thoroughly analyse the contrast level we pick for our interface, and that we do grey scale testing. For example, this is one of the reasons why we cannot show error alerts or ask users to make decisions based on just colours.

Temporal Difficulties

It is important to understand that not only visually impaired people may struggle to perceive colour and contrast. There are many temporal limitations that a person can experience, like recovering from eye surgery or treatment which may alter the user’s vision for a short period. The context in which users use the product may also affect their vision. If the place has hard or soft light, or if for any reason they need to reduce the brightness of their screen because they are at the cinema, for example. As UX designers, we need to think of the countless contexts of use of the product and act upon them. 

Accessible Colour Palettes

Let’s get practical! After reviewing the above concepts, here are three useful tools that will allow you to create an accessible colour palette for your UI.

  • Palett.es: This tool allows you to create chromatic random palettes, even from a particular colour.
  • Colorsafe.co: It picks the ideal text colour according to the background you set. In this way, you will get the ideal contrast for your interface colour.
  • Accesible color palette builder: By clicking on the button “edit palette,” you will be able to enter the colours of your interface, and the software will provide you with the ideal accessible colour combinations. 

Also, I recommend you use the tool Funkify, which is a Chrome extension that helps you navigate the web and interfaces through the eyes of disabled users.

Accessibility and UX Writing

Creating an accessible product implies working in teams and following philosophy and work standards that include every area involved. It turns out that in developing an accessible interface, not only visual and programming aspects matter, but also word choice. One of the most controversial aspects regarding accessibility and content in the Spanish language is the use of the masculine gender as neutral gender. The Spanish language uses the masculine gender to refer to all identities, be they masculine or not. 

What about “x”, “@” and “e”?

The use of “x” and “@” is not recommended because they make texts inaccessible, as those special characters are not readable for screen readers. Also, in our minds, they still refer to a masculine image. The use of “e” is not advisable, as it is a practice that has not been fully adopted nor accepted by society in different countries. Nevertheless, you may be able to use it if the previous research for your target audience proves otherwise.

The most accessible conciliatory option is to go for a no-sexist language that shifts the focus from the masculine gender. There are numerous techniques, such as paraphrasing and using relative pronouns that we can use to sound more gender-neutral without excluding feminine or non-binary identities. 

These are a few of gender-neutral options in Spanish:

  • Instead of “Bienvenido” use “Te damos la bienvenida”.
  • Instead of “Bienvenido” use “Hola”.
  • Instead of “Los argentinos” use “La población argentina”.
  • Instead of “Los que compren el producto” use “Quienes compren el producto”.
  • Instead of “Médicos” use “Personal de salud”
  • Instead of “Todos tienen derechos” use “Todas las personas tienen derechos”.
  • Instead of “Los interesados deben llenar el formulario” use “El formulario debe ser llenado”.

Avoiding sexism in language is key to making our writing inclusive for all people. This way, everyone feels included in our digital products. The Spanish language is incredibly rich and there are numerous options to include everyone.

Online Tools to Test Accessibility

In w3.org you can find hundreds of tools, but these are five of them that called my attention: 

  • Tawdis: This tool is developed by the CTIC Foundation which allows you to automatically check different web accessibility aspects.
  • Accessibility Checker: This free audit tool scans the site and inspects that it complies with current WCAG standards. With every error the scan identifies, you will get detailed feedback: who it affects and multiple options to solve the issue.
  • Color a11y: This website provides free colour contrast analysis tools that will display the colour contrast issues of a web page or chosen colour pair; per WCAG 2.1 Guidelines. 
  • A11y-sitecheker: This is a tool to check a site against accessibility criteria. It uses axe-core with the option to combine results of multiple sites.
  •  A11yWatch: This tool automatises web accessibility tests with useful tools to improve productivity in all sites in a fast and reliable way.

Conclusion

As designers of experiences, it is our job to get educated on accessibility to generate actual significant experiences for our product users. Of course, not all responsibility relies on us. As I mentioned earlier, the entire development team is in charge of executing these actions at the end of the day. However, we must bear in mind that if we claim that our main job is to seek good experiences, we need to keep that promise to all people. 

The world we live in is diverse, people are diverse and, if we are not capable of noticing that, it will get harder to move towards a more civilised world. The way in which we create technology matters, and we must reckon that if it is not us who take the initiative, then, who will?