Web Accessibility - The Complete Guide
Web accessibility is a topic that should be considered and implemented when it comes to website design today. With an estimated 1.3 billion people facing significant disabilities worldwide, the way they perceive and interact with your website can differ greatly. As conscientious business owners, it becomes imperative to ensure that every user, regardless of their disabilities, limitations, or impairments, can have an equal and seamless experience on your platform. I have compiled a comprehensive guide on web accessibility. This guide is not only a valuable resource but a crucial read for the entire company, fostering a shared understanding and commitment to building a truly inclusive digital environment.
Web accessibility is a set of guidelines developed by the World Wide Web Consortium (W3C). These guidelines show you step by step what to implement so that any and all users can experience your site. There are three levels of success criteria within these guidelines which are Level A, Level AA, and Level AAA. Level A is considered to include the minimum level of accessibility but not all users with disabilities can use the website easily. The appropriate standard is Level AA which indicates that the common barriers have been removed and the website is accessible. The highest level of AAA is the hardest to achieve due to how tight the requirements are. Some websites may not be able to comply with them, therefore unable to achieve this level.
Web Accessibility Standards
Website accessibility standards are broken down into four basic principles known by the acronym of POUR; Perceivable, Operable, Understandable, and Robust.
Perceivable
Users must be able to understand and be aware of the content and information on your websites. Screen readers as well need to be able to “see” your website and convey that to users in an organized and understandable manner. These screen readers convert printed text into automated speech or braille characters.
● Use image alt text for every non-text item on your website
● Offer alternative ways to consume video and audio
● Structure content in an adaptable way
● Make your content easy to see and hear
Operable
All visitors to websites are able to utilize every part of the functionality of the website. This ranges from navigating to a specific link to selecting a specific page to selecting a link from a menu. A good rule of thumb for this standard is that the most operable websites are simple. By making them simple, you remove all the unnecessary fluff and clutter and make it clear and concise with information.
● Ensure complete website functionality through the use of a keyboard
● Avoid blinking or flashing content if possible
● Provide enough time to engage with your website
● Always show navigation to help users know where they are and where they can go
Understandable
Visitors should easily understand all of the content on your website which includes any written and designed content. For the written content, refrain from using technical jargon. In a typical scenario, it’s hard for users to understand, so when you couple that with any sort of impairment, it makes it that much harder.
● Make text content readable
● Structure your pages logically
● Write useful error messages
Robust
When it comes to the content on your website, it should be easily interpreted and digestible by all visitors. This includes any visitors using any sort of assistive technology. Make sure to write out HTML that allows assistive technologies to phrase your code without any sort of visual reference.
● Semantic HTML
● ARIA attributes assigned
Testing for Web Accessibility
As you can see there are a lot of different ways to make sure that your website is accessible for all users. When it comes to testing accessibility, there are both manual and automated options. Automated testing is great, however, according to Accessi.org they only find about 30% of errors and can also generate false positives. With statistics like these, making sure you have a manual checklist is key.
Automated Testing
Automated testing tools can help identify potential accessibility issues in a more efficient and systematic way. There are many online tools, free and paid, that allows you to run these automated tests. With entering just a website url, the program runs and then alerts you to any accessibility issues it finds. This helps from a time perspective, but keep in mind that you shouldn’t only run automated tests. The testing for accessibility doesn’t stop after this, which is where manual testing comes into play. Here are LaunchPad Lab’s top online accessibility tools:
● Wave
● Siteimprove Accessibility Checker
● Axe DevTools
● Are My Colors Accessible
● WCAG Color Contrast Checker
● A11Y Color Contrast Accessibility Validator
Manual Testing
Manual accessibility sounds exactly like it is - it involves an individual or individuals manually examining a website or web application to identify potential accessibility issues. Manual testing allows testers to explore the application from the perspective of users with impairments, disabilities, or limitations and evaluates its usability and inclusivity firsthand. It should be noted that with this form of testing, it’s more complex and time-consuming than automated tests however through this route, you will catch a lot more. Here are our top types of manual tests:
Screen Reader Checks
Testing your website through a screen reader is a great way to see how well they are able to navigate your website. There are tools like CromVox and Voiceover that are available to use to conduct this check.
Keyboard Checks
An accessible website means that a user can properly use it based on solely using a keyboard. To test for this, all you have to do is rely on a few main keys to get your intended results. The main keys relied on are tab, shift+tab, arrows, the spacebar, shift+spacebar, enter, and escape.
Visual Checks
This type of manual check focuses on visual elements of the page. You’ll want to be checking that there are no color contrast issues, the elements on the page are in the proper hierarchy, visually and within the code, proper placed navigation, adequate spacing, as well as making sure nothing flashes.
Content Checks
For content checks, you should be looking at the copy and making sure that it makes sense to all of your users. Make sure that the copy is easy for the user to understand, confirm that there’s only one <h1> on each page, and verify alternative text is provided as well as descriptive.
As business owners, team members, and individuals, we should do our best to create the most inclusive digital experience for all of our users. By following set standards and adding both automated and manual testing to our day to day workflow, we can easily achieve this.
