“User experience can — and should — be the same for everyone.”
This article will enable readers to understand what accessibility means and evaluate the importance of accessibility and how we can achieve in building products that are usable.
Accessibility
Accessibility is the practice of crafting experiences for all people, including those of us with visual, speech, auditory, physical, or cognitive disabilities. We have the power to create a product(s) we’re all proud of: an inclusive product(s) made for and consumable by all people.
Before we learn how to build an inclusive product(s). Let’s learn why do we have to consider building such products in the first place. There are different types of disabilities and scenarios people have in accessing a product(s). These are categorized as below,
Type of Disabilities
Permanent Disability
- Colorblindness — There are 3 million population have different levels of colorblindness. Keeping appropriate color contrast in the apps is crucial.
- Sight problem: Short-sight or sight weakness of old people causes them hard to read the screen especially condensed or small fonts. Dynamic type provides users to adjust the fonts to fit their needs.
Temporary Disability
- Surgery or injury: Eyes, hands, arms injuries or surgery disable or make users harder to use apps. Accessibility support can let users optionally choose to use in order to continuously enjoy the features of an app during injuries or recovery.
Situational Disability
- Hands not free: For some situations, the hands of users are not free to pick up the phone or interact with the apps. AI, like Siri or Google Assistant, helps users to perform tasks through their voices.
Accessibility focuses on enabling users with disabilities to perceive, interact, understand, and navigate tools and services, and products, and that they can contribute equally without barriers.
Now, some of the guidelines we think about with accessibility, such as clear color contrast or clear concise writing are useful not only to users with disabilities but also those that might be or that don’t have disabilities but might be in different situations
Another example, it’s clear that providing enough time for users to interact with and read content on the screen is useful for users who might have a motor/cognitive impairment. This extra time is also useful for users that might be learning a new language or the ones who are usually distracted.
Accessibility is a key component in inclusive design. Inclusive design is considering the wide range of human abilities. A tool kit of ideas to make products usable.
How to design inclusive products?
Use Contrasting Colors
When building products with diversity in mind, color choice is important. Color choice is all about communication and is usually a decision marketing and visual design sometimes fight over. The color can convey your brand identity, help users understand information, etc. Unfortunately, not everybody gets to experience colors the same way. To have a legible experience. Easier to scan and ensures a better visual hierarchy for user call-to-action much easier to spot.
- Don’t use color as the only visual means of conveying information, action, etc.
- Ensure sufficient contrast ratio between foreground (text or icons but this also now applied to form borders and other elements) and their background. It means that the contrast between text (or foreground elements) and color should be,
- 4.5 to 1 for text smaller than 18 points and smaller than 14 points if bold.
- 2. 3 to 1 for text bigger than 18 points and at least 14 points if bold.
WCAG Standards — https://webaim.org/articles/contrast/
Figma plugin https://www.figma.com/community/plugin/748533339900865323/Contrast
Add Alternate Text(alt-text)
Alt Text is the attribute inside the image tag that helps you to define the image in the textual form which might be read by an AI software reader for the person who can’t read the text. For example, we know that alt text can be useful for users who are blind and can’t see the screen, it describes the imagery and visual icons. Alternative text can also be useful to users who might be out in remote locations with low bandwidth.
Add Labels to Form Field
Adding labels on the side of the field helps users to easily guess what they have to enter inside the field. If you remove the labels from the front of the field it’ll make the whole thing more complex as it would be difficult to guess what the field actually wants. For users who depend on reading assistant technologies, these tools look up the name of the field to read it out loud for the user. So having a meaning fun and distinguished label for every interactive element is crucial.
Group related content and controls
This makes it easier to understand and easier to reach for people with motor disabilities, especially for people with ALS or a traveler on a bumpy train.
Add Keyboard Support
Designing the tab interaction model and the arrow keys creates overall a better and productive user experience for power users and assistive tech users alike.
Focus State and element size on screen
Always have a large touch target size, for example when a user selects a movie seat that they want and that they know their selection was successful. And on mobile, this means having a touch target size of 48 dp by 48 dp, or about 7 millimeters wide, which is calibrated against the size of an adult fingertip. And on the web try to ensure that your focus is highly visible.
Mention Required Fields
Forms are no fun. They require users to do a lot of work. In fact, many forms end up being abandoned because filling them is too hard or too tedious. To increase the chance that your form will get completed, minimize the effort that your users will have to put in and the information that they need to remember. There are many aspects that contribute to these, but marking the required fields (and, optionally, the optional ones) is an easy one to address.
Use Real Text rather than Text on Image
The text takes less time to load rather than a 1MB image. So keep this thing in mind and never use images with text in them. Instead, you can use CSS to make the text look much bigger.
Consider Screen Readers
With Writing, we have the power to guide all users with accessible onscreen text, as well as meaning fun off-screen text that’ll be verbalized by the screen reader. A screen reader is software that sits between you and the application, and it works in tandem with the keyboard. The keyboard moves the focus, and the screen reader will verbalize w whatever has come into focus.
For example, when we look up for www.google.com, the screen reader will read the button as “Google search Button”. First read the label, Google search, and the control type, button. We all can be champions for screen readers by writing accessory labels in addition to the default verbalization provided by the screen reader.
Screen readers — https://www.afb.org/blindness-and-low-vision/using-technology/assistive-technology-products/screen-readers
Motion Design
To ensure that your motion design is accessible, present alerts for a longer time and easily dismiss them. Easily escape hover information on-screen magnification.
Conclusion
Supporting accessibility is not just for an exclusive, small group of people. By knowing three types of disability, 1. permanent, 2. temporary, and 3. situational, accessibility helps a wide portion of users. It brings much better user experiences and hence makes the product(s) more usable. Let us all innovate — but never compromise on accessibility.
