Making webpages accessible is essential to ensure that everyone can interact with and use online content regardless of ability. An accessible website benefits all users, including those with disabilities who use assistive technologies like screen readers, keyboard navigation, or speech recognition software. Accessible websites improve usability for everyone, contribute to SEO, and ensure you reach the widest audience possible.
The Web Content Accessibility Guidelines (WCAG) 2.1 are the most widely accepted standards for web accessibility. They provide a comprehensive set of guidelines to make web content more accessible to a broader range of people with disabilities, including visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities. Following WCAG 2.1 ensures that your website is more usable for everyone and helps you comply with legal requirements like the ADA and Section 508. The guidelines are organized under three levels of conformance: A (minimum level), AA (recommended for most websites), and AAA (highest level), with Level AA being the standard target for most organizations. By adhering to WCAG 2.1, you reduce legal risks and create a more inclusive digital experience.
The POUR principles—Perceivable, Operable, Understandable, and Robust—are the foundation of the WCAG guidelines. They represent the core principles necessary for ensuring web accessibility. Perceivable means that users must be able to perceive the presented information; for example, by providing text alternatives for non-text content. Operable ensures that users can navigate and interact with the website, such as by making all functionality available from a keyboard. Understandable means that the information and operation of the user interface must be clear and easy to comprehend, using consistent navigation and plain language. Robust ensures that content is accessible across different technologies, including assistive devices. Adhering to the POUR principles ensures that your website can be effectively used by people with a wide variety of disabilities, making it truly accessible.
Practical Tips for Creating Accessible Webpages:
1. Use Semantic HTML
Structure your content with proper headings (<h1>, <h2>, etc.), paragraphs, lists, and links to convey meaning. Semantic HTML helps both assistive technologies and search engines understand the structure of the page.
Learn more: HTML Semantic Elements at W3Schools.com.
2. Ensure Sufficient Color Contrast
Make sure text and background colors have enough contrast to be readable for users with low vision or color blindness. Use tools like the WebAIM Contrast Checker to verify contrast ratios.
Learn more: Contrast and Color Accessibility at WebAim
3. Provide Alt Text for Images
Include descriptive alternative text (alt attribute) for all images to ensure screen readers can convey image content to users who cannot see them. Focus on the image’s purpose rather than a literal description.
Learn more: Everything you need to know to write effective alt text from Microsoft.
4. Create Accessible Forms
Label form fields using the <label> element and group related fields with <fieldset> and <legend> to ensure form elements are understandable to assistive technologies. Provide error messaging that is descriptive and easy to follow.
Learn more: Forms Tutorial from the W3C Web Accessibility Initiative (WAI)
5. Use Descriptive Link Text
Instead of using vague terms like “click here,” make link text descriptive, explaining the destination or purpose of the link. This helps users with screen readers who may navigate the page by links alone.
Learn more: Writing Meaningful Link Text from the Web Content Accessibility Guidelines (WCAG) blog.
6. Make Your Website Keyboard Navigable
Ensure that all interactive elements (links, forms, buttons, etc.) can be accessed and operated using just the keyboard. Test using the Tab key to move through the site and the Enter key to activate elements.
Learn more: Take the No Mouse Challenge, from the Minnesota Office of Accessibility
7. Ensure Content is Readable by Screen Readers
Ensure that screen readers can correctly interpret all content, especially dynamic content. Use ARIA (Accessible Rich Internet Applications) attributes to make dynamic elements like menus and popups accessible.
8. Use Plain Language
Write clearly and simply to make your content easier to understand. Avoid jargon, use short sentences, and organize information logically to benefit users with cognitive or learning disabilities.
Learn more: Federal plain language guidelines from PlainLanguage.gov
9. Avoid or Label Auto-Playing Media
Auto-playing videos or audio can confuse users who rely on screen readers or keyboard navigation. If auto-playing media is necessary, provide clear controls to pause or stop it.
10. Add Closed Captions and Transcripts
Provide closed captions for all video content and transcripts for audio content to ensure accessibility for users who are deaf or hard of hearing.
11. Optimize Page Load Time
Ensure fast loading times to accommodate users on slower connections and those with cognitive disabilities. Compress images, use efficient code, and minimize the use of large resources.
12. Test for Responsiveness
Ensure your website is responsive and works across different devices and screen sizes. Many users rely on mobile or tablet devices, so testing on all platforms is important.
13. Provide Keyboard Shortcuts for Frequent Actions
Allow users to perform frequent actions through keyboard shortcuts where applicable, improving the usability of those who cannot use a mouse.
14. Ensure Focus Visibility
Make sure that when users navigate using the keyboard, they can easily see which element is currently focused. Use CSS to style the :focus state.
Learn more: CSS :focus Selector from W3Schools.com
15. Use Landmarks and Navigation Regions
Structure your pages with landmarks such as <header>, <nav>, <main>, and <footer> to help screen reader users quickly navigate the site.
16. Test Accessibility Regularly
Incorporate accessibility testing into your development workflow. Regular testing ensures that new content or updates don’t inadvertently break accessibility.
Learn more:
- Using WAVE to test accessibility
- Using ANDI to test accessibility
17. Provide Skippable Content
Add skip navigation links so users can bypass repetitive content, like menus, and jump straight to the main content.
18. Avoid Content that Requires a Mouse
Avoid hover-based interactions and other elements that depend solely on mouse usage. Instead, ensure that all content and functions are accessible via keyboard or touch.
19. Limit the Use of Flashing or Moving Content
Avoid flashing content that could trigger seizures in users with photosensitive epilepsy. If moving content is necessary, provide a way for users to stop or pause it.
20. Provide Feedback for Interactive Elements
Provide clear, accessible feedback for actions like form submissions or errors. Visual and auditory feedback should be perceivable by all users.
Free Testing Tools
Color Contrast analyser
WAVE Web Accessibility Evaluation Tool (WebAIM)
The WAVE tool, developed by WebAIM, is a free online tool that helps web developers, designers, and content creators check their web pages for accessibility issues. It provides visual feedback on potential problems based on the Web Content Accessibility Guidelines (WCAG) and offers suggestions for improvement. WAVE highlights errors, alerts, and features, such as alternative text and structural elements, to help users understand and fix accessibility barriers. It is available as an online service at wave.webaim.org and also as a browser extension for Chrome and Firefox, making it easy to use during the development process.
How to Use WAVE to Check a Webpage for Accessibility
1. Access the WAVE Tool
Go to WAVE’s website or install the WAVE browser extension for Chrome or Firefox from their respective web stores.
2, Enter the web page URL
In the WAVE online tool, enter the URL of the webpage you want to check in the search box and click the arrow button. If you’re using the browser extension, simply navigate to the webpage and click the WAVE icon in your browser’s toolbar.
3. Analyze the Results
WAVE will analyze the page and display results directly on the webpage. Different icons and indicators will appear, showing accessibility issues and features. For example, red error icons indicate accessibility errors, while green icons indicate accessible features.
4. Review the Sidebar Panel
The sidebar on the left provides a summary of the issues found, including errors, alerts, structural elements, ARIA, and contrast issues. Click on any category to get detailed information about the issues.
5. Examine Specific Issues
Click on the icons on the webpage or in the sidebar to get detailed information about each issue. WAVE provides an explanation of the problem, the corresponding WCAG reference, and suggestions for fixing it.
6. Check Contrast
Use the “Contrast” tab in the sidebar to review color contrast issues. WAVE will highlight text that does not meet the required contrast ratio and suggest necessary changes.
7. Inspect Structural Elements
The “Structure” tab will show the document structure, including headings, landmarks, and links. Ensure that headings are used correctly and that the page structure is logical and easy to navigate.
8. Toggle Off Icons
If the overlay becomes too cluttered, use the “Toggle Icons” button in the sidebar to hide the icons while still retaining the summary and information in the sidebar.
9. Make Corrections
Based on WAVE’s feedback, correct the identified issues in your HTML code or CMS. You can recheck the page by refreshing it or rerunning the WAVE tool to ensure all issues are resolved.
10 Use the Browser Extension for Local Files
For pages that are not live on the web (e.g., local files or pages behind a login), use the WAVE browser extension, which can analyze these pages directly without needing a public URL.
Using WAVE provides a quick, visual way to identify and understand accessibility issues, helping to ensure that your web pages are usable by everyone, including people with disabilities.
ANDI Accessibility Testing Tool
The ANDI (Accessible Name & Description Inspector) tool was developed by the Social Security Administration (SSA) to help web developers, designers, and content creators identify and fix accessibility issues on their web pages. As a free, browser-based tool, ANDI visually highlights accessibility information and potential problems directly on the page, making it easier for users to assess and improve the accessibility of their web content. It is especially useful for those without extensive technical knowledge, providing step-by-step guidance and suggestions in line with the Web Content Accessibility Guidelines (WCAG).
How to use ANDI to check a webpage for accessibility
1. Install ANDI Tool
Go to the ANDI website and follow the instructions to install the tool as a bookmarklet in your browser. Click the ANDI bookmark to activate the tool on any webpage.
2. Activate ANDI on the Webpage
Click the ANDI bookmark in your browser’s toolbar to start analyzing the current webpage. ANDI will overlay visual indicators on the page elements it analyzes.
3. Check for Accessible Names on Interactive Elements
Hover over links, buttons, and form controls to check if ANDI provides an accessible name or label. If a name or description is missing or unclear, add a descriptive label or aria-label (WCAG 2.5.3).
4. Verify Alt Text for Images
Select the “Graphics” module in ANDI by clicking on the “g” button. ANDI will highlight images and display their alt text. Ensure that all meaningful images have descriptive alt text and that decorative images have an empty alt attribute (WCAG 1.1.1).
5. Check for Form Labeling and Instructions
Click the “Forms” module by pressing the “f” button in ANDI. Check that all form fields have a visible label or aria-label attribute and that instructions are provided for complex inputs. If labels are missing, add them to match the input fields (WCAG 3.3.2).
6. Test for Required Fields and Error Handling
In the “Forms” module, ANDI will identify required fields and those with error messages. Verify that error messages are clear and appear when you submit the form without the required information. Add ARIA alerts if necessary (WCAG 3.3.1 & 3.3.3).
7. Check for Accessible Links
In the default “Focusable Elements” view, hover over each link and ensure that the accessible name (link text or aria-label) describes the link’s destination or function. Avoid using links like “click here” without context (WCAG 2.4.4).
8. Verify Color Contrast
Click the “Graphics” module and look for color contrast issues reported by ANDI. Adjust the colors of text and background to meet contrast ratio requirements of 4.5:1 for normal text and 3:1 for large text (WCAG 1.4.3).
9. Check for ARIA Roles and Properties
Activate the “Landmarks” module by clicking the “l” button. ANDI will display ARIA landmarks and roles on the page. Verify that these are used correctly for navigation menus, regions, and other interactive elements (WCAG 4.1.2).
10. Check Keyboard Navigation
Use your keyboard (Tab, Shift + Tab, Enter, Space) to navigate the page while ANDI is active. ANDI highlights each element as you navigate to it. Ensure all focusable elements are accessible and operable using just the keyboard (WCAG 2.1.1).
11. Review Headings and Landmarks
Click the “Headings” module in ANDI to review the page’s heading structure. Ensure that headings (<h1>, <h2>, etc.) are used in a logical, hierarchical order and that there are no skipped levels (WCAG 1.3.1).
12. Check for Focus Order
Use the “Focusable Elements” view in ANDI to test the focus order. Navigate through interactive elements and ensure that the focus order is logical and follows the visual reading order (WCAG 2.4.3).
13. Test for Language Declaration
Hover over the ANDI menu bar and check for a warning about missing language declaration. If ANDI reports that the language is not set, add the correct lang attribute to the <html> tag (e.g., <html lang=”en”>) (WCAG 3.1.1).
14. Identify Hidden Content
Click the “Hidden Content” module by pressing the “h” button. ANDI will show elements that are visually hidden but available to assistive technologies. Make sure that any hidden content is not confusing or misleading to screen readers (WCAG 1.3.1).
15. Verify Dynamic Content with ARIA Live Regions
In the “Landmarks” module, look for ARIA live regions. Test if these regions correctly announce dynamic content changes (e.g., notifications, status updates) to screen readers (WCAG 4.1.3).
16. Check for Skippable Content
Look for “skip to main content” links using the “Focusable Elements” module. If missing, add a skip link to help keyboard users bypass repetitive navigation (WCAG 2.4.1).
17. Check for Sensory Characteristics
If ANDI identifies elements with issues related to visual or sensory characteristics, ensure that instructions do not rely solely on color, shape, size, or sound. Provide additional cues, like text or labels (WCAG 1.3.3).
18. Identify Moving or Flashing Content
ANDI will highlight elements with autoplaying or flashing content. Check if these can be paused or stopped and ensure they don’t flash more than three times per second to avoid triggering seizures (WCAG 2.3.1).
19. Verify Consistent Navigation
Ensure that the navigation and layout are consistent across pages. Use the “Landmarks” module to see if all navigational regions are properly labeled and accessible (WCAG 3.2.3).
20. Run a Final Review with ANDI
After addressing identified issues, run a final review by clicking through each ANDI module and rechecking your fixes. Confirm that the tool shows no warnings and that all elements are accessible (WCAG 4.1.1).
By following these steps with the ANDI tool, non-technical users can effectively identify and address many accessibility issues on their web pages, ensuring compliance with WCAG 2.1 standards and creating a more inclusive user experience.
Free Training Resources available through Oklahoma ABLE Tech
Introduction to Digital Accessibility
The “Introduction to Digital Accessibility” course is a self-paced, foundational course aimed at learners interested in disability, accessibility, assistive technology, and digital accessibility. The program helps participants understand different accessibility issues and solutions.
Accessible Webpage Design & Content Authoring
The “Accessible Webpage Design and Content Authoring” course is a self-paced, free course aimed at teaching the basics of accessible web design. It consists of five modules covering webpage structure, images, color, text, and data tables. The course is suitable for beginners and provides practical knowledge in creating accessible digital content. It takes approximately 2-4 hours to complete, and upon successful completion, participants receive a certificate.
Describing Complex Images
The course “Describing Complex Images” teaches participants how to effectively describe complex images like maps, graphs, charts, and infographics for accessibility. It covers evaluating image types, understanding context, and providing meaningful text alternatives, highlighting the importance of accessible descriptions for all users, including those with disabilities. The self-paced, intermediate-level course takes about one hour to complete, and participants receive a certificate upon completion.
Web Accessibility Testing: Basic
The “Web Accessibility Testing: Basic” course is a self-paced, introductory course designed to teach learners the fundamentals of web accessibility testing. It covers creating checklists, setting up a testing toolbox, selecting webpages or components to test, performing tests, logging results, and reporting findings. It is recommended for those who have completed the “Accessible Webpage Design & Content Authoring” course. The course takes about 1-2 hours and offers a completion certificate. By following these tips and utilizing the listed resources, you can create and maintain accessible web pages that benefit all users while staying compliant with current legal standards.