Design For Accessibility

Hashedin

Pavan Thallapally

22 Oct 2020

1

 
Since its inception, the human era has evolved through cognitive, scientific, and industrial revolutions, and experts around the globe have designated this era as the Information age. With these natural selections, we designed principles of life that are replaced by the digital world. In these physical and virtual environments, humans have started thinking smartly to increase experience, improve productivity, and reach out to the world as identity. This will help humanity to make better decisions and future actions for sustainable movement in human destiny.
 
These digital products enable food, communication, travel, health, and many global society things. Tangibly, human beings are adapting to these products; however, some problems need to be solved for the humans who are impaired permanently, temporarily, and situationally. Solving these accessibility problems discards social boundaries, improves natural ways of interactions, reduces errors, enables seamless transitions, and market reach out.
 
Designers design a product by empathizing with the target personas, who are represented by their mental model, and then being inspired for choices and decisions to add emotions, navigations, and solutions. But to diversify the product, it needs to embrace all the aesthetics to interact with the product. Below are the checklists and common mistakes committed while designing.
 
Quick checklists to consider
 
Textual Representation

  1. Avoid complex vocabulary and describe it with fewer words.
  2. Guide the content with visual hints like icons and images.
  3. Design with simple hierarchy and navigations.
  4. The information should render across all devices, different resolutions, and without overlapping the text.
  5. Develop the text and elements larger by default so that it renders across all types of devices.

Hierarchy

  1. Headings drive navigation of users from one section to another, which also helps the assisting technologies.
  2. Listing the order or groups to describe the collective information.
  3. Notifying warnings, errors, and success statuses for every corresponding input label.
  4. Helping with subtitles and voice over and taking voice commands from the users when engaging with audio, video and other media-related content.

Color Contrast

  1. Keeping interactive elements with better contrast ratios.
  2. Always combine colors with visual cues for better interactions.
  3. All the textures, patterns, and paradigms need to be described with actions and content.
  4. Ensure all the elements will receive and understand equal amounts of information.
  5. Use plugins to your design tools to simulate the color principles like stark etc.

Input Devices

  1. All the elements and content must be operable by keyword, pointing devices, much more.
  2. Make sure the focus of the element is applied on the screen for every navigation.
  3. Adding the visual layout to see the keyboard focus.
  4. All the images, icons, graphs, charts should have an alternative text to understand.

Access to assistive technologies

  1. Allow assistive technologies to read and take the inputs.
  2. Enable the product for various assistive technologies.
  3. Testing all the user journeys with real users for better user experience and usability.

Social Privacy

  1. Awareness of privacy and data access.
  2. Visibility in storing and deleting their data.
  3. Product availability in offline mode.

“ Addressing accessibility in the design system is the right place to start your inclusivity efforts because it’s the foundation of your product.”

Common mistakes committed while designing

Typography
 
Humans with visual impairments can find certain letters and styles confusing. Therefore, potentially confusing letter heights, weights, lengths, and sizes must be clearly defined.

 

2

 
Contrast
 
There are a lot of things to consider when making your content accessible from a color and contrast perspective, including:
 

3

 
Layouts
Remember that a designer and an artist are different professions. In design, we create a product for people, which means your creative impulses can be applied only to not interfere with the user experience.

 

4

 
Navigation
 
Without a doubt, the most stalling aspect of any user interface is usually the navigation. So, dedicating extra attention to this area will inclusively improve the experience for all types of users. Bear in mind the following tips to reduce confusion:
 

5

“Accessibility is solved at the design stage.”

Why designers should consider accessibility while making design decisions.

User actions have a vital role in the application. So, for every action that the user takes is preceded by a designer’s decision and plan. It helps users complete their tasks with a better experience and navigation.

  1. While making decisions, you’re likely to discover and correct usability problems that affect the users so that you are also solving users with the age-related accessibility needs that are rapidly growing customer segments.
  2. Businesses want to avoid claims of discrimination and legal action when they launch the product in the market. So, designers will help them by implementing accessibility standards.
  3. Before it goes to development, design decisions while building the prototype model and usability save development time and stakeholders investments.
  4. One more advantage for developers and designers that websites are created with accessibility in mind is a higher-quality code base. For example, accessibility testing tools such as the a11y® testing platform can also identify errors that make general usability problems.

 
Conclusion

The accessibility principles benefit humans with disabilities, including expanding your customer base, polishing your brand image, increasing your search engine rankings, and making general improvements to usability.

 

References:

  1. https://rangle.io/blog/can-a-design-system-be-accessiblee
  2. https://www.granite5.com/
  3. https://www.bounteous.com/canada/node/63166/?lang=en-ca
  4. https://dzone.com/articles/guide-for-htmlcss-developers-creating-layout-per-w
  5. https://www.aditus.io/patterns/multiple-navigation-landmarks/

Have a question?

Need Technology advice?

Connect

+1 669 253 9011

contact@hashedin.com

linkedIn youtube