Cubyts
Cubyts
×

      How to make a product accessible?

      Building a digital product for people with different abilities

      Duration

      1 week

      Complexity

      Advanced

      Contributors

      UX Designer, UX Writer, Developer

      Getting Started:

      • Make sure you’re not doing accessibility only for legal compliance.

      • Understand that creating an accessible product means it will be used by more people.

      • Designing an accessible product doesn’t limit your creativity. It rather helps you create designs that benefit more people.

      Types of Disabilities

      Visual Disabilities

      Color blindness
      Blurred vision
      Partial blindness
      Motor Disabilities

      Wheelchair-bound people
      Auditory Disabilities

      Partial hearing loss
      Cognitive Disabilities

      Dyslexia (difficulty in reading)
      Dysgraphia (difficulty in writing)

       

      Non-disabled Beneficiaries

      There are some users who are not disabled but do benefit from accessible products. These are:

      1. Senior citizens
      2. People with limited literacy
      3. People suffering from Repeated Stress Injuries (RSI)

       

      POUR Principles

      POUR principles to be followed for making products accessible are:

        1. Perceivable

        2. Operable

        3. Understandable

        4. Robust

      Here are details of the Accessibility principles as per WCAG.

       

      When?

      Throughout the design process

      How-to?

      Learning from POUR principles of Accessibility from WCAG, here is how Accessibility could be brought into Product Design.

      1. Use of Colors

          1. Contrast: 

            1. Small text - 4:5:1

            2. Large text - 3:1

            3. WebAIM Contrast Checker is an excellent resource to find out if the colors are compliant with WAG.

            4. If you’re starting a new project, Color Safe is a great tool to check which colors work for accessibility.

          2. Color blindness awareness: Don’t use color combinations that are not visibly differentiable for colorblind people. Avoid color combinations like:
              1. Red + green
              2. Yellow + blue
              3. Red + black

          3. Multi-element support: Important steps in the user journey like completion of a flow, error messages, etc. should be understandable without depending on the color alone. This could be done by using rich media like graphics and typography. 

      2. Focus: 

        Focus is a significant accessibility feature that helps people use a computer with just a keyboard. Follow the below guidelines:
          1. Make sure the focus color is very different from the background color. 
          2. Refocus on the UI element within the context if the element disappears due to the user's action.

      3. Typography

          1. Font size - not less than 14 pts
          2. Don’t use italics as the characters tend to run over each others for people with visual and cognitive disabilities 
          3. Sans serif fonts are better usable for people with cognitive disabilities
          4. In order to ensure readability through Text spacing follow these guidelines:
            1. Line height (line spacing) to at least 1.5 times the font size;
            2. Spacing following paragraphs to at least 2 times the font size;
            3. Letter spacing (tracking) to at least 0.12 times the font size;
            4. Word spacing to at least 0.16 times the font size.

      4. Supporting Text

          1. Provide supporting text or alternative ‘Alt’ text for all graphics
          2. Provide transcripts for audio and video content, to inform people with Auditory disabilities. 

            Here is WCAG reference for Non-text content

      5. Content

          1. Use simple sentences
          2. Avoid using heavy language, complicated examples, metaphors, etc.
          3. Avoid blocks of text. This could be done with using headings, subheadings, images, etc.
          4. Use commonly used words and terminologies
            WCAG reference for Non-text content

      6. Graphics

          1. Use graphics for supporting text and breaking visual monotony
          2. Graphics that need not be read by a screen reader should be marked in code. People with visual impairments use Screen readers extensively. If elements like all icons and supporting graphics are all announced by screen readers, the UI becomes poorly usable.

            Here is a good read on How Screen Readers Make Digital Content Accessible from AudioEye

      7. Interaction design

          1. Avoid quickly moving content like self scrolling carousels. People with cognitive and visual disabilities take time to see and understand the content.
          2. Avoid flashy animation that adds cognitive overload and can confuse people.
          3. Enable keyboard support and shortcuts wherever possible. Keyboard shortcuts improve usability for visually impaired users
          4. Always give controls like Play, Pause, Change speed etc. for Audio and Video content
          5. Do not auto-play media. Here is WCAG reference for multimedia content

      8. Navigation Schema

          1. Retain the sequence of navigation elements throughout the product.
          2. People should be able to navigate through the product well without using search.
            Consistent Navigation guidance from WCAG 

       

      Do’s & Don'ts

      Do's Don'ts
      1. Consider how a screen reader would read a UI while designing.

      2. Whenever possible, use Design Systems like Material Design that are built considering Accessibility.
      1. Don’t design crowded UIs.

      2. Don’t use flashy, unreadable, or illegible information.

       

      Assistive Technology

      • For partial or certain categories of disabilities, accessibility does solve the problem; however, for severe disabilities, assistive technology needs to be used. 
      • Assistive technology refers to any type of device or tool that can be used by individuals with disabilities to help them achieve specific tasks or goals. 
      • Assistive technology products can range from simple tools like magnifying glasses or ergonomic keyboards to more complex devices such as computerized communication systems or powered wheelchairs.

      Want to know more about Assistive Technology? 

      Suggested Tools 

      • GoogleDocs 
      • Office365
      • Asana
      • Cubyts


      Evaluating Web Accessibility


      References