CASE STUDY: How Accessibility Affects Design

Case study, Tip and Tricks, Web Design, Web Development
12 September 2018

 

Wouldn’t it be great if all people, whether living with a disability or not, could have the same experience with your website as everyone else?

With visual design and user experience playing such a heavy role in modern websites; we are finding that making a WCAG compliant website can be more of a challenge than it once was.

In the JTB Melbourne Studio, we have recently completed two government based websites that needed to conform to the Level AA Web Content Accessibility Guidelines. Our main goals for these sites were to create a fun, engaging and interactive atmosphere while still being accessible to all users.

The following are some of the main considerations for a Level AA WCAG compliant website.

Text Alternatives

Text alternatives are used by screen-readers for people with visual impairments. When the user moves the focus to the particular item, the screen reader will audibly read out the alternative text of the element.

For any non-text content, i.e. images, illustrations and videos, a text alternative must be provided that serves the equivalent purpose. This means that any of these items on the page require a description of what is happening in them. If it is a simple ‘X’ icon, it must have a text alternative of ‘Close’ or if it is a photograph of two people sitting on a park bench, then that alternative text needs to denote that.

Distinguishability

Content like images and text need to be easily seen by the user. Text requires a contrast ratio of at least 4.5:1 between itself and the background that sits behind it. Users also require the ability to change the size of all the text on the page. The user should be able to resize the text up to 200 percent of its original size without the use of any assistive technology.

The main challenge here is that the page and all of its other content are required to display the same way even with the largest size text. When designing for distinguishability, we need to make sure that elements that hold text are large enough to hold text at 200 percent of the size. We need to consider if the element will grow with the text growing, or if the text will be constrained within the element.

 

 

Keyboard Accessibility

The website needs to have the ability to be operated completely using a keyboard. This is important for people who cannot operate a mouse.

A common problem that we found with keyboard accessibility is something called a Keyboard Trap. This occurs when a user can use the keyboard to navigate to a certain element on the page but then cannot go back or move on from that element. Dynamic elements like accordions, hidden modal boxes and other JavasScript functionality often cause keyboard traps.

There are standard controls for using the keyboard to navigate the website. If the website requires any keyboard input that does not comply within the standards, then the user must be advised of how to use these additional methods.

Therefore keyboard accessibility needs to be considered and planned very carefully during the design process. Understanding and creating rules for the order that items will become activated while tabbing through the page is important when considering the user experience of users with impairments.

Predictability

The website needs to be designed in a way that the user can predict what elements are and how they will behave in reference to the rest of the website. Navigation throughout the website must be consistent both in terms of placement and relative order of elements within the navigation. Links and other common elements throughout the page must all behave the same way. ie. The hover colour of links should be consistent throughout. Creating a general style guide helps to ensure predictability.

Input Assistance

We need to ensure that users can avoid and also correct any errors or mistakes made. This consideration is most prevalent when requiring the user to fill in an input form. We must ensure that all input fields have labels and instructions of what needs to be provided by the user. We must also notify the user of any errors they may make when entering text into fields, as well as show them exactly what part of the form has the error.

 

We’d love to say that designing a WCAG compliant website is easy, but the reality is that the above requirements, plus all of the other requirements that I haven’t gone over in this article require very careful consideration both in terms of design and web development.

 

It’s always good to remember that all the extra work that goes into making a website WCAG compliant isn’t just to tick off a requirement, but rather to help people living with disabilities have the same experience as everyone else.

 

Does your website need to meet compliance with WCAG 2.0? Get in touch with JTB Studios today and we will help you create a website that is accessible to all.

 

Blog

You made it this far
Let's chat
1300 66 99 58
88 Langridge Street Collingwood 3066

    Hi, my name is

    I'm from

    You can call me on

    and email me at

    I would like to chat about...

    (optional)
    (optional)

    Wow, so nice of you  
    We’ll be in touch shortly to learn more about your project.

    Projects

    Benchmarque V2

    Education Health & Medical

    Aquila

    Fashion & Beauty Retail
    3

    ELLA

    Education Technology
    4

    Westbourne

    Arts & Culture Education
    3

    NGK

    Manufacturing & Industrial Retail Technology Transport
    3

    CSB

    Banking & Finance Civic & Public Not-For-Profit