Unlocking Accessibility: Crafting Inclusive Digital Experiences

All of us use mobile phones in our daily lives. Imagine you are lying on your couch on a fine day and want to send a message to your friend on WhatsApp, but here is the catch, you are blindfolded and now you have to do the same. Imagine how tough it would be to navigate through all the chats and find your friend whom you want to message. It is certainly not a pleasing experience. Here is where accessibility comes in!

Accessibility is the idea of creating stuff usable by as many people as possible, from children to the elderly from the disabled to people in different situations. So, it is not only about creating stuff that can be used by people with disabilities in specific, For eg- Alternative text (the text that describes an image on a website, which is not shown on the interface but coded in the web app) is not just used by people with visual impairment to know what the image is about but is also useful to people in remort areas with lower internet bandwidth to load the image fully. So, every one of us will have accessibility needs at some point in our lifetime.

And often, when something doesn't work well for users with no disabilities, that pain point is amplified for people with disabilities. If we come to data then there were approximately 28 Million people who were disabled in some sense or other in 2011 in India. This is approximately 3 times the population of Austria, and so accessibility is key in providing good user experiences to these people. Accessibility focuses on enabling users with disabilities to perceive, interact, understand, and navigate tools, services, and products so that they can contribute equally without barriers.

Role of a designer in inducing Accessibility

Carrying forward the example of WhatsApp we started with earlier. We are the ones who decide who is included in our product and who are excluded, now when we create such concrete personas then we are the ones that create a line of division. Thus, we realize that as designers it is our responsibility to design digital interfaces that are inclusive.

We as designers are the ones that are responsible for the usability of a product and the popularity of a company.

Basics of Accessibility Design

The basic principle of Accessibility design can be understood by the acronym POUR, which stands for Perceivable, Operable, Understandable, Robust.

Here, Perceivable means that the content is available to at least one of their senses(smell, sight, sound, touch). Operable means that the content is in the user’s reach no matter if the user is using a mouse or keyboard for navigation he/she is easily able to access the content. Understandable means that the content is comprehensible so it should be in simple and clear language for example. Finally, Robust means that the content has to be compatible with the technology, which means if someone is using a screen reader then is it compatible with screen readers etc.

Now, the organization that sets standards for accessibility is the WCAG, which stands for Web Content Accessibility Guidelines. The WCAG documents explain how to make web content more accessible to people with disabilities. Web “content” generally refers to the information in a web page or web application, including:

• natural information such as text, images, and sounds
• code or markup that defines structure, presentation, etc.

Currently, the WCAG 2.2 guideline is in use. When designing accessible content it is made sure that these guidelines are fulfilled. The WCAG has set levels of accessibility standards. These levels are A (lowest), AA(mid-range), AAA(Highest). So, if your design is of A grade it means that there can still be various improvements in accessibility but it also means that you have started considering accessibility in your design. If your design is of AA grade this means that your design is decently well accessible but you can still make some improvements to make it just outstanding. An AAA grade means that your design has high standards of accessibility and you have done an excellent job in this context.

Here the first image shows an A grade where the person has considered making an incline for people who use a wheelchair, but it is still a temporary incline. The second image shows AA grade where there is a permanent structure for both staircases as well as inclined. The third image has AAA grade which shows a moving incline, on which normal people as well as people on wheelchairs just have to step on the incline and it will automatically take them up.

So, I hope now you are familiar with the basics of Accessibility!

Accessibility for Digital Interfaces

There are broadly 3 major disabilities for which inclusivity in accessible design is seen. These are:

• Visual Impairment
• Audio Impairment
• Mobile Impairment

Among these, the most commonly worked upon in the world of UI/UX is design for visual impairment. So, let's understand what type of improvements we can make in our user interfaces to make them visually more accessible.

1. Greater Text Size: for people with partial blindness it becomes difficult to read text so to enable easy reading of the text for them the font sizes must be a bit larger. We can also have a custom setting for changing font sizes so that the users can set the font size according to their visibility.
2. Voice-overs or screen readers: for the completely blind, is a compulsory feature, because they can’t see anything all of their actions only depend on their hearing and touch senses.

Try it out: Everyones phones have a basic phone reader inbuilt. Just have a try using these screen readers and blind folding yourself or just closing your eyes and using your phone using those screen readers. You as a designer will get to know the challenges the visually disabled experience and you would be able to think on those lines while designing for accessibility. This is the link to enable screen readers on android it also tells how to use screen readers, here is the link for IOS.

Fun Fact: From the above activity you know how your android and IOS machines also have accessibility features 😉. Apple is one of the leading companies in achieving exeptional accessibility features and design in it’s products.

3. Detailed and descriptive alternate text: for every element on the screen there must be an alternative text so that the screen readers and the voice-over features can give a clear insight into what that item on the screen denotes. Eg: to mention an alt text for a send payment button, alt text: “button: send payment”. The alt text should especially mention the label of each item displayed i.e.; button, icon, image, text, etc.

While writing the blog I found out that even Medium uses accessibility in design for its users who might be using screen readers to listen to blogs so that they don’t miss upon any content even in the form of pictures. Kudos to the Medium team for that!

4. Use easy-to-read font styles: generally prefer sans-serif over serif as it is a little difficult to interpret and difficult to differentiate alphabets in serif as compared to sans-serif.

5. Don’t just use colors to give out information, instead use vibrations or notification tones, for these 3 types of input messages:

- Input with ‘success’, eg: payment complete

- Input with a ‘warning’, eg: Wrong Password

- Input with ‘danger’

6. There are people with color blindness who can’t see certain colors accurately. Color combinations to avoid for text and background or such combinations:

• Green and Red

• Light Green and Yellow

• Blue and Purple

• Green and Brown

• Green and Blue

• Green and Black

• Green and Grey

• Blue and Grey

7. Use minimal design while keeping in mind to generate enough contrast between various elements so that even a person with visual disability can differentiate between them.

8. Make clear and simple layouts: the elements must be organized on the screen in a particular order from top to bottom and from left to right. So, it is easy to navigate through all the items on the screen.

9. Use textures instead of just solid colors to differentiate between 2 different fields.

Accessibility Testing

By now you might have understood what accessibility testing might mean. It is nothing but a way to verify how well we have induced accessibility design and does it follows the WCAG standards.

You might be wondering how we check the degree of accessibility of our website. So some software and Figma plugins help us with the same. Let’s Explore these:

1. Stark: It is an amazing Figma plugin you can use to test basic accessibility features in your design. With tools like Contrast Checker, Focus Order, Alt-Text Annotations, Vision Simulator, and more all in one place, you can find accessibility issues in a design. Follow this link to know more.

Here we are testing this frame of a mobile app using Stark, and we get to know that the design doesn’t comply with AA or AAA standards.

Here the plugin suggests a better color than pink, making the contrast between elements high and making them easily perceivable. This color also fulfills AA and AAA standards.

2. Accessibility Heuristics by Deque: They provide an exhaustive checklist of 10 major Heuristics and help you take an in-depth analysis of the accessibility of your design. Follow this link to know more.

This is a screenshot of the list. It has total of 10 pointers.

The 10 points on which accessibility is checked.

3. Focus Orderer: It is a tool that is not just necessary for accessibility but for User Experience in general. The exact flow in which various options present on the screen are put forward to the user is of extreme importance. Especially for the people who use screen readers. Follow this link to learn more.

Design Process

So, now that you know everything you need to know about Accessibility design, here are the steps in the design process for accessibility. The First step is to identify the areas of improvement in your design by analyzing the existing product. The second step is to define clearly the types of personas you would want to include as your users and then the next step would be to research upon how you would implement features for them. Now it is the time to design and last but not the least to test your accessibility design.

These are the 5 steps to integrate accessibility into your designs. Hope, you got to learn a lot about this branch of accessibility in Design and as a designer would now have an extra eye on the accessibility features that are engraved in the platform you are using. Keep Creating, Happy Designing!