Accessibility Design Guide

A UX CASE STUDY

OVERVIEW

The Accessibility Design Guide is an online resource for assisting individuals in designing and developing websites (and mobile applications) to be compliant with the Accessibility for Ontarians with Disabilities Act (AODA).

The premise of this project is to bridge the gap between website accessibility design and applying the appropriate success criteria, to be AODA compliant. The result is a website prototype that serves as a visual reference guide for designers and developers as they strive to incorporate accessibility best practices into common website features and elements.

WCAG Success Criterion Example [Source: W3C]

The PROBLEM

The majority of websites in Ontario are not accessible to users with disabilities, despite legislative mandates for websites to meet accessibility requirements. Web-accessibility can not be accomplished if the appropriate WCAG Success Criteria are not followed during website development. Research indicates that the current methods for achieving accessibility is a difficult undertaking for designers and developers to accomplish. This is mainly attributed to poor online text-based documentation and lack of supporting visual examples; which consequently results in insufficient AODA conformance levels.

As of January 2021, in the province of Ontario, all public, private or non-profit organizational websites must meet the WCAG 2.0 AA accessibility standards that are based upon specific Success Criteria.

[Ref. www.ontario.ca]

Website planning and development that neglects to consider the navigational needs of the disabled user, inadvertently create obstacles that prevent them from participating normally in society. Thus, it is imperative to incorporate accessibility best practices that address the needs of the disabled community so as to not exclude them from participating on the world wide web.

Canadian Survey of Disabilities [Source: Stats Canada]

OBJECTIVE

The goal of the Accessibility Design Guide is to provide designers with examples of the most common website features that cause barriers for people with disabilities, with reference to meeting their corresponding WCAG 2.0 Success Criteria, to help designers meet accessibility guidelines.

The project design considerations focus on providing information about best practices when creating accessible features to enhance the online experience of a user with disabilities. The specific elements and features demonstrated in the prototype relate to a website’s functionality (i.e., menus, carousels, hyperlinks and buttons), content (i.e., forms, semantic structure, images) and appearance (i.e., colour, contrast, and typography).

desktop view

ROLE

Research, prototyping, UX/UI design, development.

TOOLS

Adobe XD, Illustrator

CHALLENGE

The main challenges that I faced through the development of this platform were the same challenges that underlie the purpose of this project. That is, to make the prototype features accessible required me to search through vast amounts of text-based WCAG documentation to uncover the success criteria associated with the features that I was developing. I then needed to interpret the criteria and apply them accordingly. I found this task to be quite tedious and time consuming given the lack of online examples available. From this experience, I realized the value in creating better online resources, like the Accessibility Design Guide, that can aid developers in ensuring web-accessibility for the disabled community.

The PROCESS

RESEARCH

Over twenty percent of the 14 million Ontarians live with a disability. People with color-blindness, partial to complete sight loss or other forms of physical or cognitive disabilities, have difficulty accessing many websites, which prevents them from participating in modern society. Most of us have at one point or another encountered online situations that cause temporary feelings of frustration. Such as, when a submit button fails to work after tediously filling out a webpage form or, perhaps when the navigation is confusing and links are inoperable. Although these experiences may cause momentary feelings of frustration to the able-bodied user, it is only a glimpse into the usability problems that individuals with physical or cognitive impairments experience when operating websites daily. Yet, ultimately a website is not considered accessible until it meets the appropriate WCAG standards.

The users that I am designing for are anyone who intends on creating or designing an accessible website. So I ran a questionnaire on Facebook to find out what designers know about web accessibility standards and how they go about implementing accessibility into their designs. Here are a few samples from the questionnaire:

 

USER QUESTIONNAIRE RESULTS

RESEARCH INSIGHTS

My research revealed that (82) designers were aware of web accessibility guidelines and of their importance, yet faced obstacles in creating accessible web applications. This indicates that the lack of accessible websites can be attributed to the multitude of challenges that website designers and developers face in implementing accessibility.

During website design and development, designers in Ontario who strive to make websites AODA compliant, must refer to these WCAG guidelines and success criteria’s. This daunting task is achieved by navigating through vast amounts of online documentation, which is often difficult to locate and to interpret. See example below.

WCAG Success Criterion Example [Source: W3C]

The research also revealed that there is a lack of resources that provide comprehensive visual examples to aid in their interpretation. From this, I realize that my prototype designs must demonstrate simple visual features of how to implement WCAG Success Criteria to the most common website features that pose barriers to people with disabilities.

ANALYSIS

EMPATHIZING & UNDERSTANDING

Over twenty percent of the 14 million Ontarians live with a disability. People with disabilities such as color-blindness, partial to complete sight loss, or other forms of physical or cognitive disabilities, have difficulty accessing websites, preventing them from participating in modern society.

Most of us have at one point or another encountered online situations that cause temporary feelings of frustration. Such as, when a submit button fails to work after tediously filling out a webpage form or, perhaps when the navigation is confusing and links are inoperable. Yet, these experiences are only a glimpse into the usability problems that individuals with physical or cognitive impairments experience when operating websites daily.

Now that I have gained insights from the research surrounding web inaccessibility, I will continue to incorporate a user-centered approach by creating the personas. The users I am designing for are any individuals who intend on creating or designing an accessible website. I chose to include a web design/developer and UX/UI designer.

I refer to the personas throughout the entire project.

 

USER PERSONAS

EMPATHY MAP

To empathize for whom I am designing for and understand their needs and goals, I created an empathy map so that I can effectively integrate methods of accessibility.

I incorporated the data from the both user personas because although they represent two different types of users, they incorporate the same goals and frustrations. The empathy map helps me narrow down their needs and wants which are to:

Summary of the user NEEDS and WANTS:

  • Make designs accessibility to meet AODA compliancy.
  • Design features that help users with disabilities access content easily online.
  • See better online example of accessible web features.
  • Understand how to implement the WCAG Success Criteria better.

The challenges faced by designers when following web accessibility standards.

PROBLEM STATEMENT

It is clear that applying the WCAG Success Criteria to make a website AODA compliant is a challenging undertaking for designers and developers due to the lack of comprehensive information and visual examples to aid in their interpretation. It is understandable why so many websites remain inaccessible.

“How can designers be expected to implement the WCAG Success Criteria when they themselves cannot ‘perceive, understand, or navigate’ the guidelines that are provided for them by the World Wide Web Consortium?”

IDEATE

FEATURE EXAMPLES

It is clear that the lack of accessible websites are attributed to the multitude of challenges that website designers and developers face in implementing accessibility into the most common website features. Therefore, the Accessibility Design Guide will serve as a ‘visual guide’ to help make accessible design easier.

Next, I was the faced with the daunting task of sifting through the WCAG documentation to learn how to best implement the associated Success Criteria into the prototype’s examples. To assist me in this process, I first referred to the three main objectives in any web application, according to the Government of Ontario; content, functionality and appearance.

“Web accessibility guidelines and AODA principles target three main objectives in any web application; content, functionality and appearance.”

-The Government of Ontario, (2017)

This gave me direction of how to organize the prototype features which will demonstrate how to apply the appropriate WCAG success criteria. These are organized below:

PROTOTYPE FEATURES

INFORMATION ARCHITECTURE

By having an understanding of these categories, I can then organize the structure of the website to reflect each of these objectives. I began by arranging the main navigation’s top level pages to reflect these categories: Content, Functionality (UX) and finally Appearance (UI). I determined that would be the most comprehensive way to structure the website for the potential user; the individual designing an accessible website; as formulated by The Government of Ontario, (2017).

Initially, I was intending on structuring the website navigation in relation to the WCAG four principles mentioned early; as top-level menu items. However, this would be incorrectly assuming that the designer already has an understanding of the WCAG principles and the guidelines that correspond to the website feature in which they are designing or developing. Therefore, as a website designer myself, I felt it would be more comprehensive to organize the website pages according to the three main objectives described above (Government of Ontario, 2017). This way, if one is designing a carousel feature to be AODA compliant, they can easily navigate to the ‘Carousel’ webpage that shows a working example of the WCAG Criteria that is associated with it, rather than searching through online text-based manuals.

Information Architecture for the Accessibility Design Guide 

DESIGN

Designing the Prototype 

At this stage in the process, it was time to design the wireframes for the project. 

I began this process with the design of the home page because as a landing page, it takes on a separate role from the rest of the pages. The content on the homepage is prioritized to meet the needs of a first-time visitor to the website by describing the purpose of the website, as well as giving an overview of the importance of meeting AODA website compliance standards. I will not assume that all users of the website have a thorough understanding of the WGAC or AODA regulations nor, how to meet their guidelines. Furthermore, given the amount of external online information currently available, the prototype includes only a basic summary to these topics with links to their resources.

The remaining pages are devoted to demonstrating the most common website features that prevent users with disabilities from accomplishing their goals on a website

Lo-Fidelity Prototypes

Accessibility Design Guide Home Page
Accessibility Design Guide Feature Example Page 
While there is undoubtedly an unlimited amount of information to include about accessibility, my goal is to make the content simple, organized and consistent. For instance, each page generally follows the same format of topic sections, as characterized in the headings below:

Importance and Best Practices:

This section gives a brief overview as to the importance of the feature in relation to the Success Criteria it meets, along with examples of best practices for its applications. For example, assigning the appropriate ARIA <role=” “> to navigational page regions are crucial for screen readers to communicate the meaning of elements to users.

Feature Example(s):

Here the actual working example(s) for a feature is provided; for instance, a Horizontal Drop Down Menu. Depending upon the complexity of the code, sometimes I create these as separate HTML documents and then insert them as “iFrames” into the webpage (e.g., SEMANTIC PAGE STRUCTURE). This is essentially inserting one HTML page into another.

How This Benefits People:

This describes the users with different needs, such as people with visual impairments or a person with a motor impairment. This is important section to include, as a reminder to the designer for whom they are designing for.

The Related WCAG 2.0 Success Criteria:

Although these are provided in the actual working examples; within the pop ups, they are also provided in list form in this section.

Maintaining consistency among pages is vital to the design because not only is it part of building an accessible website that adheres to AODA guidelines but it benefits individuals with cognitive disabilities.

The example below demonstrates the WCAG Success Criteria related to this section that have been implemented consistently in the project’s page structure.

Two WCAG Success Criteria met by incorporating consistency into web design.

BRANDING DESIGN CONSIDERATIONS

Now that I have a clear understanding of the main structure of the website and the common features to include as examples in this prototype, next comes the task of addressing the visual aspects of the interface. 

With the user-interface as a central component to designing for accessibility, I proceeded to delve into the visual aspects of this project by addressing colour and contrast. My goal was to seek out an appropriate colour scheme to avoid usability problems that can be attributed to poor colour contrast between the content (text) and background colours. I ran the colour combinations through an online Color-Contrast Checker:

Accessibility Design Guide’s Colour Scheme:

Typography

{  Logo  }   Roboto  –  Bold
{  Tagline  }   Roboto  –  Light

{  H1  }   Roboto  –  Bold
{  H2  }   Roboto  –  Semi-bold
{  H3  }   Roboto-  Regular 

I chose Roboto because it’s a simple and easy to read typeface. I wanted to keep in mind that individuals with vision and cognitive impairments require certain typographic considerations be made during web design and development that affect design choices.

I had to consider colour, font-size, spacing, heading tags, placement (e.g., proximity and whitespace) in all areas of the design.

Brand Identity

My aim here was to make the logo simple, legible, easy to read. Again, for this, I had to consider colour/contrast, font-size, spacing/proximity in all areas of the design.

logo

According to W3C, if the logo image used does not contain the name of the company or convey information to that affect, a descriptive text link should be provided in conjunction with alternative text. So for this reason I was motivated to incorporate a clean company name.

Nevertheless, Alternative text is incorporated in the HTML code.

Final Designs

ADG carousel
ADG
ADG

THE TAKE AWAYS

Designing for Accessibility

  • My research indicates that the current methods for achieving accessibility is a difficult undertaking for designers and developers to accomplish. This is mainly due to poor text-based documentation and lack of visual examples that support the documentation; consequently resulting in insufficient AODA conformance levels.
  • Designers and developers must consider all aspects of a web applications to successfully create a web-compliant product that meets all the needs of disabled users.
  • Considerations of people with disabilities should be integrated into user the experience design process.
  • Designing with accessibility in mind ensures all users needs are met well before website development is initiated.

Ready to Start a Project?

I'm Available for Hire or Freelance
Get in Touch