Case Study

Putting the Pieces Together

Semantic Elements

When we designed the structure of our site, we began by trying to make the navigation as simple and predictable as possible. For sighted users, it’s easy enough to identify the various parts of a website. Headers and footers, menus, and form elements are all immediately, visually apparent. But for a machine or a screen reader, these visual semantics aren’t so obvious. By using HTML5 Semantic elements and H-Level tags appropriately, our site is easier to navigate for users and for assistive technologies, as well as

Alt Text for Images

We spent a lot of time learning how to write and implement effective alternative text (alt text) for all the images on our site in an effort to provide the most useful context for our content. Alt text is read by screen readers in place of images, allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities. It is also loaded in place of an image in the event that the image cannot be loaded by the browser, or the user has chosen to disable images. Writing useful alt text—that is, alt text that provides true value and meaning to the user—is a skill, and when done properly, can also improve a website's SEO.

Paragraph Structure

When possible, we tried to place the distinguishing or most important information of a paragraph at the beginning. This allows screen readers to quickly gauge the content of each paragraph, in the same way a sighted user would "skim" a paragraph.

 

Person-Centred Language

We chose to use person-centred language—that is, language that emphasizes the person first, such as “people with disabilities” instead of“disabled people”—on our website as a means to humanize our inclusive practices and strategies. Part of our commitment to inclusivity involves putting people first. People are our clients, our users, our customers, as well as our friends and family, and we believe their identities should not be defined by their ability or capacity.

 

Colour Palette

Our brand colours are both attractive and WCAG 2.0 compliant. In developing a colour palette for web use, we ensured that our colours for text and iconography met at least WCAG 2.0 AA contrast ratios for every element. By keeping the palette simple—white (neutral), navy (dark), teal (midtone), and grey (neutral)—we were able to achieve a high level of versatility and contrast without having the site be visually overwhelming. Keeping a consistent aesthetic for elements such as buttons (which only appear in white and navy), and interactions such as hover effects (which all appear in teal), helps create uniformity and allows the user to navigate the site more easily because they know what to expect from each element.

MID Website Colour Palette

 

Font Styling

In choosing fonts for our site, we considered aesthetic style, flexibility, and accessibility. We chose a limited set of three fonts that are sans serif and easily distinguishable from each other for easier readability.

MID Website Typography and Styling
MID Website Typography

 

We chose to style these fonts using ems. An em is a relative unit of measure, which means that it will scale appropriately across all devices, unlike pixels and points which are absolute. By styling our fonts in ems, we ensure that all text is legible and can easily be zoomed to the user’s preference without loss of integrity.

We also kept the styling consistent across titles, subtitles, and paragraphs to achieve visual predictability, which allows users with low sight to scan the page more easily.

  

Mobile Screen Reachability

When designing the user interface (UI) of our mobile site, we wanted to ensure that users could reach the menu—arguably the most important UI element. The most common design for mobile navigation is to have the navbar at the top of the screen; however, for both left and right-handed users, as well as those with limited dexterity, this area of the screen is the most difficult to reach with your thumb.

Mobile Phone Screen Reachability Map

In mapping reachability areas, we determined that a vertical navbar with a menu placed in the centre would be a more accessible design choice, benefitting all users.

 

USERWAY Widget

The USERWAY widget is an incredible accessibility tool that is easy to implement, allowing a user to quickly customize the look and feel of a webpage to accommodate their individual needs—such as changing the text size, page contrast, or enabling the screen reader. While we made every effort to incorporate inclusive and accessible strategies during the design and build process, the widget is a quick way for a user unfamiliar with the site to access the accessibility features. We also believe that having a visual cue (icon) on the page provides every user with an empathetic opportunity to consider their own position as a web user and how their experience may differ from others.

Are you looking to make your website more inclusive? Contact us today for a free quote!

Posted on:

Sunday, September 22, 2019

in

Case Study

category

by

Bex McKnight