Accessibility & Inclusion

Medium writing on the fundamentals of accessibility and inclusive designs.

Understanding through the use of Forms, Images, and Tab Function

I got inspired to do a little more research to understand the way designs impact those with special needs and what we have to do as UX designers to better our knowledge.

ONE | Forms

How do we account for those with memory loss or cognitive disability when it comes down to forms? How do we account for those using assistive technology? Here are some suggestions to keep in mind when we’re designing for forms.

  1. Descriptive labels for forms should be visible at all times even when the field is being filled or has been filled in

  2. Users should be provided with a set of instructions at the start of the form to provide context

  3. Validate users’ input by providing them with feedback immediately after they filled in the field to minimize the effort for those using assistive technology without having them to go through the form again

  4. Help users decipher their mistakes or invalid input through constructive instructions

  5. Section longer forms to reduce cognitive load and inform users about their progress

  6. Avoid auto-advance altogether

  7. Pay attention to the colour contrast and text sizes

 

TWO | Images

Whether you’re designing with accessibility in mind or not, I think the following guidelines should be practised by all with regards to the use of images, charts, and graphs. I’ve listed a few approaches we can start to apply to our current designs.

  1. Always add alternative texts to your images, charts, and graphs to describe what users are looking at (for users who are using screen readers or those without data connection)

  2. Images that have links should be labelled to provide context (ex. alt= “home screen”)

  3. Decorative images that aren’t important for understanding the overall content should use empty tags (ie. alt= “ ”) so screen readers will know to skip over it

  4. On the other hand, important images should have useful alt texts that don’t include “image of” or “picture of” (ie. alt= “company CEO, Jane Doe”)

  5. Once again, pay attention to colour contrast and text sizes especially when it comes to charts and graphs

 

THREE | Tab Function

Try to remove your mouse to navigate through a website. Did you find it easy to do so with the tab function? For users that have physical barriers that prevent them using a mouse, the keyboard is their method to get through a site. So what can we do?

 

  1. Identify all the important actionable features within your site that are accessed by the mouse

  2. Ensure that users can use the Tab, Enter, and Spacebar to navigate through each interactive element

  3. Links should be accessed by using the Enter key

  4. Buttons should be accessed by using the Spacebar

  5. All interactive elements should be positioned from a left to right and top to bottom approach even if a simple layout might be the most “logical”

Understanding through Touch Targets, Auditory Difficulties, and Colour Blindness

ONE | Touch Targets

Touch targets are defined as the area in which users can access to initiate the platform’s intended actions. This might include buttons, images, form fields, and such. From an accessibility standpoint, touch targets have to be large enough to encompass users on various screen types, those with limited motor and mobility, and those with general difficulties.

  1. WCAG recommends a minimum target size of 44 x 44 pixels (or 10 mm — an average adult finger pad has a width of 10 mm)

  2. Designate more important features such as the navigation bar to the bottom of the screen

  3. Ensure that primary actions on mobile devices can be accessed by either the right or left thumb

  4. Allow users to undo previous actions easily to avoid user frustrations and abandonment

  5. Avoid the need for quick sequential actions to be carried out by users as success criterion

  6. Work with developers and project managers to find work-around solutions for alternative actions

 

TWO | Auditory Difficulties

More and more of our digital content is being conveyed through video, audio, and multimedia outputs. We need to make sure that we’re addressing users with auditory difficulties appropriately that allow them to experience the same type of information as intended.

  1. Provide transcripts that correspond to pre-recorded audio files

  2. Synchronized video captions and transcripts should be included for video files along with the option for “closed captions”

  3. Recognize the importance of transcripts for users with cognitive difficulties that require extra time to comprehend material and also for users who are deaf and blind

  4. Provide a sign language version of the media if possible to engage a more inclusive experience

  5. Make sure the audio you provide are high-quality and void of background/unnecessary noise

 

 

THREE | Colour Blindness

In the case of colour blindness, majority of the users are able to see a few distinguishable colours. However, it poses as a real difficulty for these users to distinguish between colours that are similar in brightness and hue. There are some colour combinations that are particularly hard for these users. In order to provide users with a comprehensive experience, we should keep these specific colour blindness in mind when we create colour patterns for our designs. We can also always leverage the use of alt-text and other accessible designs as solutions.

Through researching and writing about inclusive designs, I have been able to learn more about the ways accessibility impacts users. Most of us won’t even be able to fathom what these impacts are but we can do our best to put ourselves into their shoes. Our job as designers is to empathize. By staying engaged with this topic, my hope is to be able to spread the world about making our designs available for everyone.

Especially for the 20%.