Designing for Accessibility Case Study: The Connected Website

Digital Design & Accessibility

It’s becoming more apparent to me that the field of web design is one of the most boundless parts of the design industry. Thanks to services like SquareSpace and WordPress themes, the majority of us now have the ability to create and upload web content and produce a decent website and/or landing pages. However, at Connected we know that building better products means building for everyone, so it’s crucial that all designers who work with these tools consider accessibility when making each design choice.

“Beginning January 1, 2021: all public websites and web content posted after January 1, 2012 must meet WCAG 2.0 Level AA other than criteria 1.2.4 (live captions) and 1.2.5 (pre-recorded audio descriptions).” 

When we were faced with the need to redesign our own website to meet new accessibility guidelines, we decided to start from scratch. This way, we could infuse accessibility into our new designs rather than searching our site for low contrast text styles, auditing the header hierarchy of each page, and renaming our links and buttons to provide clear interactions and information. Not only was this a necessary opportunity to enhance the accessibility of our website, but it was the perfect chance to update and elevate our brand. In the past two years (since we last launched our website), Connected has grown and evolved.

Bridging the gap between developers and designers

At Connected, our teams perform as a cross-disciplinary function where we break down silos in order to build better products. When this redesign project kicked off, it was important to me to maintain this model with our external developers, Day Shift Digital. As I mentioned under the Connector Spotlight, from the very beginning, the process was a highly collaborative one, in which everyone’s concerns and opinions were brought forward before anything was finalized. Here are some examples of decisions that were made with both myself (the designer) and the developers in mind:

• Avoid excessive spacing rules (have all margins and padding be divisible by a specific number),
• Design two layouts (desktop & tablet) so that the flow to HD desktop and mobile would be natural rather than constraining,
• Provide a style guide to streamline the development process and avoid extra time in the design QA period, and
• Provide developer notes for each page.

Major Accessibility Considerations

As mentioned by Fable, being perceivable is where some of the most discussed features of accessibility come in. There is much to be covered on the topic of accessible website design but the main elements I had to keep my eye out for were creating a style guide, keeping a proper header hierarchy on all pages, checking for colour contrast, form design, clear interactions, and image alt text.

1) Creating a Style Guide

Similar to constructing a component library, creating a UI style guide alleviates a lot of the pain points for product developers and designers. Most of all, it ensures consistency and provides a reference point, ultimately facilitating faster building. Through an accessibility lens, a style guide provides visual consistency so that the user can identify the elements on each page easier. Each header and paragraph style is designed around the same set of rules. There are also alternative background colours and button hover states depending on the contrast levels of the other elements in the block. Lastly, creating and following a style guide guarantees that no text or button style is too small or low contrast for any users with visual impairments.

2) Header Hierarchy

For someone who uses a screen reader, a proper header hierarchy is crucial. A clear and well-designed header hierarchy means that the user can understand what content is relating to what on the page. If all the text on a page was in the order of P, P, H1, H1, P, this user wouldn’t be able to decipher what the paragraph text is referring to and which title is more important; therefore, they could not perceive the content the way others are able to. Not only does a header hierarchy allow individuals using screen readers to absorb the content in the appropriate way, but it also provides individuals with sight differences some visual consistency. Additionally, a proper header hierarchy means that a user can identify the elements on each page easier and is good for improving SEO.

3) Colour Contrast

Colour contrast should be a consideration from the very first stage of building a brand. Low contrast colour pairings and colour pairings that “vibrate” can dissuade and/or completely derail the user from interacting with a brand. To make sure that none of Connected’s online colour pairings were inaccessible, I used the WebAIM Contrast Checker. There was one instance where a certain colour pairing passed this test but several designers in the critique process flagged the pairing because it was uncomfortable to look at. Although it passed the WCAG test, a computer test can’t measure how humans perceive colour; consequently, the pairing was removed from the site.

4) Form Design

Proper form design is an artform in itself. I’m sure I’m not alone when I say that I’ve had to fill out forms that were not user friendly. It can be a frustrating experience for anyone, for example, if they are repeatedly notified that there is an error in the form but they can’t figure out how to correct it or where the error was in the first place. If the user runs into any roadblocks when filling out a form on your site, they will most likely abandon the form. Not only can confusing error messages make a user abandon it, but not knowing what the form field is actually asking can also be a reason for abandonment. For example, form fields labelled “name” should be more specifically labelled “First Name”, “Last Name”, or “Full Name” to avoid confusion as well as error messages. 

The form in question should be easy to use and should provide helpful indicators to achieve a successful submission. Required fields can no longer be signified with just an asterisk. In the form on our Connected site, we have used a signifying colour, an asterisk, and text so that individuals of different abilities can understand that this field is required. 

One of the biggest changes to our form design is a global error list at the top of the form. This means that if the user is unsuccessful in form submission, they do not need to search for the errors or guess why the error exists. The global error list defines which fields were incorrectly inputted and why it was incorrect (e.g., “incorrect email format” or “this field is required”). This global error list supplements the error messages that are in each field.

5) Clear Interactions

Even if all the accessibility considerations I have already mentioned are met, it won’t matter if the website is not easy to interact with and navigate. That’s why interaction may be one of the most important aspects of our redesign. 

Clearly Labelled Buttons & Links

All “controls (buttons, links, form fields, etc.) must be correctly labelled”. For example, a button with the text “See More” is not specific enough. Instead of something generic like “See More”, we would place “Apply” if the button leads to a job posting. As well as being more specific about where a button will lead, the buttons need to be consistent with the page they lead to. For example, a button titled “Our Services” must lead to a page titled “Our Services”.

No Hidden Pages

Users must be able to visit all web pages from the home page, rather than having to navigate through a specific journey to arrive at a hidden page. We’ve solved this by providing a longer menu at the bottom of the home page that shows all of our website’s separate pages.

We’re Not Done Yet

Accessible design coincides with everything we stand for at Connected. We can’t build better products without considering how everyone interacts with them. With our values in mind, we must be kind to all user groups, smart enough to inject these principles into our product building processes, reliable for those that want to use the products like everyone else, and keep teaching and learning from one another as the field of accessibility continues to grow.