SUBSCRIBE TODAY
BlueTread’s 13 Days of Accessibility
Lori Werhane, UX/UI Designer, BlueTread
May 15, 2024
This past year BlueTread’s UX/UI Design, Development and QA teams embarked on a journey to understand the requirements of WCAG (Web Content Accessibility Guidelines) in order to make our web content more accessible.
We began by first understanding a bit more about the World Wide Web Consortium (W3C). W3C is an international community that develops open standards to ensure the long-term growth of the Web. Basically adding needed structure and guidance to the massive international community of web products. Founded by Tim Berners-Lee from MIT in 1994, the mission of W3C is to lead the World Wide Web to its full potential by developing protocols and guidelines that ensure the long-term growth and inclusion of the Web.
What is WCAG?
WCAG refers to Web Content Accessibility Guidelines, which are published by the World Wide Web Consortium's (W3C) Web Accessibility Initiative (WAI). WCAG provide recommendations for making Web content more accessible.
A quick summary of WCAG
- The WCAG standards have 12-13 guidelines.
- The guidelines are organized under 4 principles (Perceivable, Operable, Understandable and Robust).
- For each guideline, there are testable success criteria. The success criteria are
at three levels: A, AA, and AAA. - The success criteria are what determine “conformance” to WCAG. That is, in order to meet WCAG, the content needs to meet the success criteria outlined by WCAG.
What are the Primary Principles of WCAG/Accessibility Compliance?
The guidelines prescribed by WCAG fall into four categories (Perceivable, Operable, Understandable, and Robust). They spell POUR to make it easier to remember. Each category has 3-4 guidelines that detail each specific requirements.
(P) Perceivable
Information and user interface components must be presentable to users in ways they can perceive. This means that users must be able to understand the information being presented; it can’t be invisible to any of their senses.
Perceivable Guideline Example:
Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, translations, or simpler language.
(O) Operable
User interface components and navigation must be operable. This means that users must be able to use the interface and it cannot require interaction that a user cannot perform.
Operable Guideline Example:
Make all functionality available from a keyboard or a keyboard interface so that people with disabilities are able to operate websites without needing a mouse.
(U) Understandable
Information and the operation of user interfaces must be understandable. This means that users must be able to comprehend information as well as how to use the interface.
Understandable Guideline Example:
Labels and instructions are provided to users whenever content requires user input, e.g. sign up or login forms.
(R) Robust
& Responsive Design
Content must be robust enough that it can be interpreted reliably by a wide variety of users, including assistive technologies. This means as technologies and user agents advance and evolve, content should remain accessible.
Robust Guideline Example:
Maximize compatibility with current and future user agents, including assistive technologies, by ensuring content created using markup languages are coded correctly and have complete start and end tags. This allows user agents to present content without crashing.
What are the levels of WCAG Compliance?
WCAG is divided into three conformance levels (A-AA-AAA) because the success criteria are organized based on the impact they have on design or visual presentation of the pages. The higher the level, the more restraining it becomes on design.
Software development companies should aim for AA Compliance. AAA is reserved for Federal Government websites who must be compliant with ADA.
Let’s learn together!
When creating a WCAG 2.1 compliant website, it is important to understand the four POUR categories, their 12-13 guidelines, and the 78 success criteria. But, that is a lot of information to digest all at once. Fortunately a developer from Sparkbox named Kasey Bonifacio created a study guide for her team broken into 13 days with all the information put in straight forward terms into a daily bite. All with guidelines and examples. At BlueTread, we decided to create our own version of the Sparkbox 13 Days of Accessibility.
Visit our interactive guide on Figma detailing BlueTread's 13 Days of Accessibility project.
