Gradex square small
Gradex banner
Graduate Studies

Inclusive Design (MDes)

Chloe Typert-Morrison

Accessibility Compliance Checker

Digital Media
2022
An accessibility compliance checker is a tool that can scan a website’s content to see if it meets most Web Content Accessibility Guidelines. If a website is compliant, the web content will be accessible to most people who access it. A website can never be 100% accessible because no one can design for every kind of human diversity.The checker appears as a side panel that constantly scans for accessibility errors as content is added to the website. When no errors are found, the checker will display a list of content that the creator must manually check. The list explains that even though the tool did not find any accessibility errors, this still does not mean that the website is entirely compliant.This compliance integration aims to help content creators address accessibility errors as they appear rather than after completing a page to help people integrate accessibility from the beginning. The goal is to remove the stigma that making accessible websites takes more time and effort than inaccessible ones.When errors appear, content creators have the option to open a dropdown that will show a brief definition of the error with explanations for why making this content accessible is important. The description will also show a list of tips and examples to help provide more context.When there are multiple errors on the page, they are grouped by error type. Each error type has a representative symbol. These symbols help people identify what is causing an error or where the description is in the side panel.The side panel and icons on the content are linked to help the content creators find what content is creating the error. When hovering over an error in the side panel, it will highlight, and the icon will grow larger and vice versa. People can also click either the error or the icon, and the page will move to display the corresponding information.Selecting an error will make a popup appear with a solution prompt. Errors with multiple solutions will provide multiple options to choose from. Selecting one of the solutions will take the content creator to the interface that will add or change the required content.

Share with someone

Semantic Heading Error Definition
Semantic Heading Error Definition
Accessibility Compliance Checker Error Groupings
Accessibility Compliance Checker Error Groupings
Error Solution Popup
Error Solution Popup

Work by

Chloe Typert-Morrison

Inclusive Design, Accessible Web Design

“Giving everyone the power to create accessible content shifts the onus to the content creators from the people affected by the inaccessibility. Accessible websites benefit everyone, and I hope this...” [More]