Key EAA & WCAG Guidelines
It’s important to remember WCAG 2.1’s four principles of accessibility: perceivable, operable, understandable, and robust, or POUR for short.
Perceivable
Perceivable content is flexible, and users can change the way they consume it. This could be as easy as adding subtitles to the video or adjusting the text's font size. This accommodating nature of your website is crucial for accessibility.
To make your content perceivable, you must also include alt text in all of your images. This helps individuals who use screen readers understand and digest all of the content on the page, including visuals. In fact, Missing alt text accounts for 61% of all homepage accessibility errors according to Moz.
Example of a Perceivable Website
The LA City government website is a great example of a “perceivable” design, offering a range of customization options to improve accessibility. Users who rely on screen readers can modify the reading speed, while those with dyslexia can adjust text size and font for better readability. The site also includes contrast and color adjustment features, allowing visitors to fine-tune saturation for visual comfort. Additionally, a built-in dictionary helps users better comprehend the content they’re engaging with.
Operable
This means a website should be operable in more ways than simply by a mouse. When your platform is compatible with keyboard and/or voice commands, it opens up your website to many users who may have cognitive disabilities.
Many individuals use their keyboards to navigate the web, so your website's layout should be logical and fit with that structure. This involves making sure elements such as buttons and forms are accessible via the tab function.
For those who are prone to seizures, we must be cognizant of that and avoid content that flashes more than three times per second. If you can’t maintain that, you must provide obvious warnings before displaying any seizure-inducing content.
Understandable
This one is quite self-explanatory, but your website needs to be understandable throughout the user journey. This especially applies to your navigation–as it should be clear to visitors where they should go for the right information they’re looking for.
Understandable also means your website should be predictable and easy to consume. This requires consistent web design practices and the use of plain language. If your content is jargon-heavy and hard to comprehend quickly, there’s a high probability that the user will bounce.
Example of an Understandable Website
Hounder partnered with the Los Angeles Department of Water & Power to redesign their website, focusing on creating a straightforward and seamless user journey. As shown in the "before" screenshot below, the previous design featured an overwhelming mix of colors and text, making it difficult for users to determine their next steps.
While collaborating with the LADWP team, we were able to work our magic on the website and establish a clear path for users to complete tasks such as paying bills, gathering outage information, starting/stopping services, and more. By crafting a strong website in Drupal, citizens no longer dread using their platform and it’s significantly reduced the amount of support calls. Check out our full case study for all the details!
Robust
Your content should be robust enough to be compatible with most devices and tools like screen readers. By utilizing semantic HTML, you can easily craft a website that assistive technologies can comprehend. Once you’ve complied with accessibility best practices, it's important to conduct user testing with groups of users with different cognitive conditions (like those with Dyslexia, ADHD, hearing impairments, visual impairments, etc.) to make sure your website works for all.
This also means ensuring that user interface components, like form fields, buttons, and links, are assigned recognizable names and roles that can be programmatically detected. By incorporating elements such as WAI-ARIA roles, you'll make your form fields accessible not just to mouse users, but also to individuals who rely on keyboard navigation or screen readers.
Example of a Robust Website
One strong example of a robust website we developed at Hounder is the Cradle to Career platform for San Bernardino County schools. Our design focused on making sure all educational resources and materials are accessible to students, teachers, and parents. Additionally, the contact form was built with programmatic best practices in mind, ensuring it's accessible for anyone needing to get in touch with the school offices.