Guide to Accessibility

What is web accessibility testing?

Accessibility testing usually involves using software tools to establish if a website or prototype falls short in terms of accessibility. It checks whether a website’s content is suitable to be consumed using assistive technology (AT).

Accessibility testing usually also includes some form of disabled user testing and interviewing. Some companies even hire an expert in the field of accessibility testing to oversee the accessibility side of the design as a website is being developed.

Why is accessibility testing important?

Website accessibility testing is an often overlooked aspect when it comes to website design and development. Reasons why it’s overlooked generally boil down to ignorance about its importance and fears over additional cost and labor time.

Accessibility in UI design leads to a better experience for all users, regardless of ability. Here are a few ways to create more accessible user experiences

User-centered design is the philosophy that our web and mobile apps should be clear and coherent. But do clarity and coherency inherently mean accessibility in UI design is achieved?

An untapped market

According to the WHO, roughly 285 million people are visually impaired, between 110 million and 190 million adults have significant mobility difficulties and 360 million people worldwide have disabling hearing loss.

That’s a lot of people. As designers who want to deliver a user experience which people love, it’s important that we don’t neglect those who have different needs and requirements and this means designing in a way that’s accessible.

70% of websites are inaccessible to people with disabilities

That means there’s an enormous global population that isn’t being catered for, and a market that’s not being leveraged to its fullest potential. To emphasize this missed opportunity, that same study discovered that two thirds of top US ecommerce companies are losing up to $6.9 billion in potential revenue as a result failing to cater to this demographic.

Accessibility Aspects in UI Design

• Skip Links to help screen readers to skip to the main content of the page instead of tabbing through all the unnecessary icons links and images in between.
  1. Visible link at the top of the page
  2. Visible link else where on the page
  3. Making the link invisible
  4. Making the link invisible until it receives the keyboard focus

Alternatives to Skip Navigation links:

1. Navigating by headings – use headings as nav links rather. Better organization of content.

2. Alternate reading orders – change the order of the contents. Bring main content to the top or beginning of the screen.

Programmatically managing focus: 

Bringing focus to the desired elements such as to the button whose click launched the modal after closing the modal.

1. Accessible Forms
   • Labelling: 
     • Using element’s content – <a href=”tequila.html”>Chamukos tequila</a>
       speech recognition tool would say something like “Click chamukos tequila link”
     • Using an attribute – <img src=”tequila.png” alt=”Chamukos tequila”> alt attribute is used here by the screen reader users
     • Using an associated element –
       <input type=”checkbox” id=”tequila”>

    <label for=”tequila”>Chamukos tequila</label>
The for attribute on the <label> and the id attribute on the <input> share the same value. This creates an association between the two elements that instructs the browser to expose the content of the label as the accessible name for the checkbox

• Using ARIA – 
  • With aria-label –
    <button aria-label=”Add Chamukos tequila to cart”>Add to cart</button>
    • The accessible name for this button is “Add Chamukos tequila to cart”, not “Add to cart” because the ARIA overrides the HTML.
  • With aria-labelledby –
    <input type=”search” aria-labelledby=”this”>
    <button id=”this”>Search</button>
    • The aria-labelledby attribute takes an id ref as its value. It’s used when the text you want to use as an accessible name is located elsewhere on the page.

• Notifying the user of errors –  have cleaner ways to populate the error such that the screen reader users can utilize them.
• Semantic HTML –
  Such as using <Fragment withprops> or <> elements instead of <div> tags to group elements that breaks the HTML semantics.
  

Use color and contrast to create distinction

• Achieve accessible UI design with visual hierarchy
  Don’t crowd your screens. That’ll only scare your user. Note that people with impaired vision may require items on-screen to be magnified, so make your content scalable and look into the power of responsive typography.

• Think too about the other typographic choices you’re making in your design process

Use your interactive UI elements to drive meaning – Affordances and Feedback

Affordances are properties of objects which show users the actions they can take.

Feedback is good for any user, not just children. But explicit feedback is necessary for users who can’t interact with applications is a traditional manner.

Adaptable design improves web accessibility – 

By having a design that is customizable – say adjusting content depending on screen size – you’re giving the user more options and more access.

 Web accessibility design and user testing –
– Your web UI might look accessible. It might feel accessible. But is it? Until you get real people in on the game, you won’t truly know. Enter user testing.

There are several other ways of achieving accessibility on our web applications and this is just a beginning to cater to the large audience that has been left unheard. Let’s make every single user count.