More than 1 billion people in the world and 1-in-4 U.S. adults have a disability. Websites not developed to be accessible are challenging for people with disabilities to navigate and use, and inaccessible websites put their owners at risk of receiving an accessibility complaint or lawsuit. It is increasingly important for developers in the U.S., Canada, and EU to ensure the websites they build are accessible.
Not sure what website accessibility is and how to ensure the websites you build are accessible? You’re in the right place. This tutorial covers the fundamentals for understanding web accessibility as a developer and how to test your website for accessibility issues.
What Exactly Is Web Accessibility?
Web accessibility refers to a website’s usability for people with a variety of permanent or situational limitations. Examples of disabilities that can impact people’s ability to use a website without specific coding considerations include blindness, hearing impairments, motor impairments that limit the ability to use a mouse or keyboard, and cognitive disabilities.
An accessible website is one that users of all abilities, including assistive technology users, can easily access, interact with, and navigate. Since 2008, there have been internationally-agreed upon standards that designers and developers can follow to ensure their websites are accessible. These standards are called the Web Content Accessibility Guidelines (WCAG).
Key Features of Accessible Websites
The Web Content Accessibility Guidelines consist of “success criteria” that can be used to measure a website’s level of accessibility. The criteria were created to ensure that websites are:
- Perceivable: the information and elements on the website can be perceived by users regardless of how they experience it. For example, blind users can have their screen readers read the website text that they cannot see, and d/Deaf users can read a transcript or captions if a video is present that they cannot hear.
- Operable: All people on all devices can use all user interface components, interactive elements, and the site’s navigation. The website needs to be fully functional for people who do not use a traditional keyboard and mouse to navigate the web.
- Understandable: The website’s content and functionality must be understandable. This applies equally to elements like the reading level of the page and the actual text content on the website, as well as to the website’s functionality.
- Robust: How the website is built, both through code and content entry, must be able to be accessed and interpreted by a variety of devices and assistive technologies.
The best way to ensure websites you develop are accessible to people of all abilities is to perform manual accessibility testing alongside running an automated AI scan.
How to Choose an Automated Accessibility Scanning Tool
Automated accessibility scanners are a good first step to identifying if accessibility errors are present on a website and if it fails to meet web accessibility standards. Automated accessibility checking tools use the guidelines mentioned above to flag accessibility errors that can be identified programmatically by looking at the website’s code.
When choosing an automated tool, it is crucial to consider the following:
- How many pages and posts do I have on my website? Will this tool be able to handle scanning all of them?
- Do I want a tool that is separate from my website or a tool that I can use without leaving my website?
- Will I need to use this tool on more than one website? If so, can I use this tool on more than one website simultaneously?
- What if I need help with the accessibility errors that this tool flags on my website? Does the tool developer offer additional support?
With answers to these questions in mind, you can find an automated accessibility tool that will work best for you. Below are a few examples of tools commonly used to scan websites for accessibility errors or problems.
WAVE
WAVE is a free service developed by WebAIM, an organization dedicated to web accessibility practices. WAVE evaluates web content and flags accessibility and WCAG errors.
WAVE is perfect for smaller websites that can scan pages one by one. To use this tool, visit the WAVE accessibility evaluation page, enter the URL of the page that you want to scan, and WAVE will provide you with a list of all the accessibility errors found on the page. WAVE also provides details about the errors and how you can fix them.
If you want to scan more than one page at a time, WAVE has an API that developers can hook into to do bulk scanning of multiple web pages or entire websites. API credits start at $.025 each. Depending upon how much information you want to receive about the page, each scan can utilize 1-4 credits. If you are developing a website with a large budget for ongoing website accessibility monitoring or if you’re okay with doing one-off single page scans, WAVE might be a good option for your needs.
axe
axe is an accessibility scanning tool from Deque. axe offers a free Google Chrome extension, as well as three paid options for accessibility scanning: axe DevTools, axe Auditor, and axe Monitor. DevTools help web developers achieve accessibility with guided testing. Auditor performs automated WCAG audits on web content and applications. Monitor scans websites and reports accessibility errors.
axe is a great tool for web developers and content creators who need separate accessibility reports. The free axe Chrome extension is available for instant download, and, like WAVE, is an excellent tool for single page, manually triggered scanning.
Accessibility Checker
Accessibility Checker is an automated accessibility scanning WordPress plugin from Equalize Digital. Offered in both free and pro versions, Accessibility Checker can bulk scan pages and posts for accessibility errors and provides reports right within the WordPress editor. The plugin scans web content for WCAG 2.1 compliance and helps both developers and content managers test websites for accessibility problems on an ongoing basis.
Accessibility Checker can be used by WordPress users of all skill levels, whether you need it for one site or multiple. The free Accessibility Checker plugin can be downloaded on WordPress.org, and the Accessibility Checker Pro plugin can be purchased from Equalize Digital. With Accessibility Checker there are no limits to the number of pages scanned (or associated API fees), and reports are visible right on the post edit screen.
This allows content managers – who may be less familiar with accessibility – to see if the content they are adding or editing is accessible after you hand the website off to them.
The Pro version of Accessibility Checker includes centralized lists of open issues and bulk scanning on a schedule, saving time over running single-page scans one-by-one.
How to Use an AI Scan to Make Your Website Accessible
Once you have selected your automated accessibility testing tool, testing your website is as easy as triggering a scan and reviewing the reports. With Accessibility Checker, for example, you can see a list of any errors or warnings identified in a scan on the edit screen for that particular page or post.
No matter which tool you’ve used to scan, you’ll need to go through each error or warning and determine if they were correctly flagged, and develop an action plan for addressing the problem. If you’re not sure if a flagged issue is genuinely an accessibility problem, manually testing the page can help you determine how big of a problem it might be.
What Is Manual Accessibility Testing?
Manual accessibility testing is when a person reviews a web page (rather than an AI scanner) and determines if there are accessibility problems present. Some examples of manual testing include:
- Checking embedded media, like video and audio files, for closed captions and transcripts.
- Using only a keyboard to navigate through the website.
- Scanning website content with a screen reader.
- Examining the website on different devices and with different resolutions.
It is important to note that manual accessibility is different from user testing. User testing involves hiring individuals with disabilities to test a website for accessibility and provide feedback.
Manual accessibility testing is a vital part of identifying accessibility errors, as only 30-40% of accessibility problems can be identified by an automated testing tool.
How to Perform Manual Accessibility Testing
The way that you manually test your website for accessibility will depend on whether your website is already live or not.
For live websites, it is best to test the pages of your website in this order:
- Test the page on your website that receives the most traffic. You can use whichever tracking software you prefer to find this information, but Google Analytics is commonly used.
- Test all pages where a conversion is expected to happen. Examples include shopping cart pages, pages with web forms, contact pages, and advertisement landing pages.
- Test your home page.
- Test a representative page from each post type. Post types could include a blog, employee bio page, event calendar pages, and so on. You should also test the archive page for each of these post types.
- Test the rest of the pages and posts on your website, in order from pages with the most traffic to pages with the least traffic. Continue until you have manually reviewed every public URL on your website.
If your website is not live yet, you can manually test your content by starting with the home page and then moving through the rest of the website in whatever order makes the most sense to you.
Test keyboard navigation
The best way to start manual accessibility testing is with a keyboard navigation test.
Some people who visit your website will have to use their keyboard to navigate through it instead of a mouse. This may include blind or visually impaired users or users with motor injuries or impairments.
To keyboard test your website, load the page that you would like to test first. Use the tab and arrow keys to move through your website’s pages and interact with each one’s features. Your goal is to accomplish everything that you could with a mouse using only your keyboard.
While keyboard testing your website, consider the following:
- Can you see where the focus state is and where you are on a page at all times?
- Do the focus states for buttons and links have enough contrast with the background?
- Are you able to go to different pages using only your keyboard?
- Does your web page have a link that allows you to skip to the page’s main content?
- Can you interact with special page features, like image sliders, maps, or videos?
- Are you able to submit web forms and complete product purchases?
Test with screen readers
After you have tested your website for keyboard navigation, you can begin testing it with screen readers.
A screen reader is a type of assistive technology that blind and visually impaired people will often use to navigate through a website and read web content. If you have a Mac, you can test your website using VoiceOver, a screen reading software built into your computer. If you do not have a Mac, you can download NVDA, a free, open-source screen reader. You may also want to consider testing with JAWS, a paid screen reader that is very popular with blind and visually impaired users.
You may test your website with only one of these screen readers, but testing with two or more will offer better results as not all screen readers read out the same thing when encountering elements.
To test your website with a screen reader, install the screen reading software on your computer, turn it on, and load the page you want to test. Move through the page as you did when you were performing manual keyboard testing, using the tab and arrow keys. Listen to what the screen reader says, and make a note of anything that sounds confusing or incorrect, such as:
- A link that does not describe its purpose. For example, you might hear “clickable link” or “learn more.” Links should explain what they are supposed to do or where they are taking a user.
- Automatic elements. If you have videos or sliders that play automatically, they may disrupt screen readers and confuse the user.
- Complex page elements. If your page has complex elements, like tabbed content or accordions, you need to ensure that the focus state moves to the content inside the accordion. If it does not, screen reader users will not be able to find and read the content.
Check embedded media
Various media elements must be tested manually, including YouTube videos, image and text sliders, embedded documents, and third-party widgets or iFrames. Each of these embeds must be accessible.
To test embedded media for accessibility, you will need to visit the front end of your website and visually observe its appearance. Review the transition and timing of sliders and videos. Ensure that videos have closed captions or separate transcripts. Test each of the embeds for screen reader and keyboard navigation.
How Do I Fix Identified Accessibility Problems?
Once you have completed your automated scans and manual testing, you’ll need to resolve any identified problems in order to ensure the website is accessible and compliant with applicable laws.
Because there are many moving parts within WordPress sites, different accessibility problems may require different solutions. Within WordPress, achieving accessibility may mean modifying the theme’s code, re-entering content in the editor, or changing how a page’s design to be more accessible.
If the problem exists in a third-party plugin, you may be able to reach out to the plugin developer to ask them to make the change. If they are not amenable to making the change, then you can either code a patch into your theme or a plugin, or you may need to replace that plugin with another plugin altogether.
For some accessibility problems, it may make sense to contract an accessibility remediation company to resolve some of the more challenging issues.
Keep reading the article at WPShout. The article was originally written by Amber Hinds on 2021-01-26 10:15:00.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.