Small side note. For those looking for the official and extensive resource on web accessibility standards then I would recommend reading the Web Content Accessibility Guidelines (WCAG) which is the global standard for web accessibility and is also referenced when working with ADA (The Americans with Disabilities Act). The WCAG provides recommendations for using WCAG 2.0 and 2.1 along with other resources that aid in the process of ensuring your website is accessible.
Web accessibility is both a large and murky topic at the moment with so many companies and web sites coming under fire for not being accessible to individuals with disabilities. Being a web developer and working with several large enterprise companies has afforded me some insight into this topic and help others navigate the topic a little better. However, for those individuals or businesses that run web sites but don’t have ready access to development resources the topic of web accessibility can be about as easy as understanding tax law.
Web accessibility is an important topic and shouldn’t be overlooked when building a web site, however, it often goes neglected when launching new sites only because it isn’t fully understood what needs to be done in order to achieve it.
What is WCAG 2.0?
The Web Content Accessibility Guidelines or WCAG is basically the criteria that has been provided to understand what is considered accessible in regards to the web. WCAG also provides a checklist for each area that may need to be addressed when looking to make your site accessible.
Within the standard there are 3 levels of compliance: A, AA, and AAA. Generally, using the AA standard is the best way to address the biggest barriers for helping users with disabilities navigate your web site since the level A only fixes the most basic issues of web accessibility.
The basic principles of WCAG 2.0 are:
Perceivable: information and user interface components must be presentable to users that they can perceive what is necessary (e.g., alt tags on images, transcripts for videos, and understandable text on form submit buttons)
Operable: user interface components and navigation must be operable (e.g., you should be able to navigate pages with a keyboard, as well as, a mouse)
Understandable: information and operation of the user interface must be understandable (e.g., text on error messages should explain the error or issue easily)
Robust: content must be robust enough so that it can be interpreted reliably by a wide variety of user agents and assistive technologies.
Basic WCAG Breakdown for Areas to Cover
The following list is a breakdown of all the various items that is provided by WCAG 2.0 and will help in creating both an understanding of what is being looked for and how to start implementing web accessibility standards on your web site.
Text alternatives — provide alternatives for non-text content, such as images. (e.g., images)
Time-based media — for time-based media, such as audio or video, provide an alternative or transcript that provides equivalent information.
Adaptable — create content that can be offered in different ways without loss of information.
Distinguishable — make it easier for users to see and hear content by using readable or larger font sizes, using high-contrast colors on links and backgrounds.
Keyboard Accessible — make all site functionality usable via a keyboard without any restrictions.
Timing — provide ample time for users to read and use content.
Seizures — do not use or include design elements that are known to cause seizures, such as rapid flashing.
Navigable — provide multiple ways for users to navigate content either by prominent links or being able to use tabs on a keyboard.
Readable — make text content readable and understandable with styles.
Predictable — make your web site and pages appear and operate in predictable ways.
Input Assistance — assist users with their web experience by correcting mistakes or describe errors in text
Compatible — provide increased compatibility with current and future user agents and assistive technologies.
Use a Tool to Check your Web Site
While the information provided above is only a primer towards understanding web accessibility and getting started with implementing it there still requires a place to start from. There are several tools that provide web accessibility checks and I would recommend looking at more than one in order to ensure that one tool is not missing something that another might cover.
Plus having a list of items to start working on with a web developer or agency is great way to get the conversation started on what is needed to make your site accessible and ready for the future.
For our own testing and projects we utilize a tool called Lighthouse by Google that provides not only accessibility checks, but also looks at other criteria: performance, best practices, and search engine optimizations (SEO). It has provided for our team a good way to continually check and test any new changes against having any issues before it reaches the public.
Some other useful web accessibility tools:
WAVE Web Accessibility Evaluation Tool (provides a visual view of the actual web page with examples)
Are you interested in more?
At Hounder, we work on a wide variety of web projects across e-commerce, startups, enterprise and more to ensure that everything we develop is clean, tested, scalable, and accessible for all users. We have spent a lot of time iterating and adapting our coding practices to provide the best possible user experiences.
If you’re interested in learning more about what Hounder can offer then check out our ADA Website Compliance and Accessibility Services.
Banner photo by Marvin Meyer on Unsplash
