Within OU Campus, our developers embrace a topic that can either make you want to hide or get dirty. Web accessibility.
Accessibility is an important aspect of any website, yet it’s treated with a begrudging “Fiiiiiine, I guess I’ll look into it.” Kind of like getting back into running after a 6-month hiatus. But the best part of getting started is how easy it is to maintain and build an awareness of accessibility moving forward.
Why It’s Important
The Experience Is Not the Same for All
According to eCampus News, 11% of post-secondary students report having a disability. Consider this — if thousands of students visit your site, hundreds may interact with your website via keyboard, screen readers, or other tools to help find the content of interest. How does their experience with your website fare? With first impressions becoming an increasingly important factor in a student’s decision, ensure your site is ready to impress every potential student.
It Improves the Experience for Everyone
Ensuring that your website is compliant with any web standard not only provides a better experience for impaired users, it makes it better for everyone. Text is a great example of how it improves readability. When text and its background color have a low contrast, it also means that there is a higher cognitive strain to view and understand displayed text.
If it’s hard to read with no visual impairments, it may be even harder for those that do have one.
Where to Start
A Central Knowledge Base
It’s okay to have no knowledge in this area; the important thing is to start. I recommend starting at the A11Y Project. It’s an amazing resource made for everyone and it’s filled with articles, tools, checklists, and more. Their library of patterns provides invaluable examples on how to incorporate best practices into your code.
Web Page Auditors
There are two great tools created by SquizLabs and WebAIM for reviewing individual web pages. With my primary focus in design, SquizLabs is awesome due to recommending color options if there are contrast issues. I also find it non-obtrusive to the page with its user-friendly widget.
If you have particular colors in mind for your site, Contrast Ratio is an open source tool where you provide CSS3 backgrounds and text values to determine if it is WCAG 2.0 compliant (AA or AAA). This tool provides the numeric value to the hundredth on whether the color combination would pass or fail. I can’t praise this resource enough when checking text against transparencies and gradients.
For those that aren’t as color-savvy, there are some great color matching sites to see that not all hope is lost for a trendy and accessible website design. Color Safe generates color palettes based on a provided background color, WCAG 2.0 level, and font size.
Inventory of the Site
Establish an audit of your entire site and ensure all pages are compliant. For OU
Campus users, OmniUpdate’s OU Insights makes it easy to do a quick inventory of your website for accessibility and more.
This tool will list all web compliance issues for the entire site (as well as on a
page-level basis) and how the issues can be resolved.
Tools Can’t Find Everything
While there are many great tools out there, they can’t catch everything. Think of all the times spell check didn’t find the correct use of “there”, “they’re”, and “their”. In the words of my alma mater — “Learn by Doing.”
It’s crucial to conduct manual testing. A11Y Project provides a checklist that can come in handy for review of your site to identify issues that cannot be found with automated tools. Here are a few ways to build understanding and empathy for how impaired users experience your site:
Navigate with a Keyboard
Were you able to tab through your navigation in the expected order of items? Could you easily escape modals? Did you discover every hidden option available to those that use a mouse? Was this process consistent across all pages of your site?
Keyboard navigation can expose navigation and discoverability issues on your site. These are two major components for a great user experience, and by resolving issues quickly, you will improve the time it takes to accomplish tasks.
Navigate with the Audible Cues of a Screen Reader
Were image descriptions useful? Did you hear odd pronunciations of words? Was it easy to navigate through a form?
What screen readers do well is take design out of the equation. Images that grab your attention will not have the same effect on users that linearly discover your site’s elements. Your code and content are the important factors here. Provide quality alt descriptions, check for misspelled words, and check that forms have labels and aria-attributes. For a primer on screen readers and their importance, check out an article by WebAIM.
Set Up Feedback Sessions
For the best feedback, conduct user feedback sessions with those that use your site with only a keyboard or screen reader. Observe how they accomplish tasks, discover their pain points, learn and understand their needs. Ask questions, listen to their stories, and build empathy for their journey through your site as well as other sites.
Be Proactive, Not Reactive
It’s never too late to begin this process. Higher ed institutions may be required to provide an accessible website for all users, or else be penalized. Waiting until legal action is forced upon your institution leaves little room for a quality review. Starting today keeps the process in your control.
For more information on web accessibility, check out our Training Tuesday video!