11.2 Accessibility guidelines (WCAG)
12 min read•august 20, 2024
Web accessibility guidelines ensure digital content is usable by everyone, including those with disabilities. The Web Content Accessibility Guidelines (WCAG) provide a framework for creating inclusive websites and applications, covering aspects like perceivability, operability, understandability, and robustness.
WCAG outlines three conformance levels: A, AA, and AAA. Designers and developers can use various tools and techniques to evaluate and improve accessibility. Implementing these guidelines not only benefits users with disabilities but enhances the overall user experience for everyone.
Web Content Accessibility Guidelines (WCAG)
- WCAG is a set of guidelines developed by the World Wide Web Consortium () to ensure web content is accessible to people with disabilities
- The guidelines cover a wide range of recommendations for making web content more accessible to users with visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities
- WCAG is an essential resource for web designers, developers, and content creators to ensure their websites and applications are inclusive and accessible to all users
WCAG principles
Top images from around the web for WCAG principles
WCAG Guidelines and Success Criteria – Introduction to Web Accessibility View original
Is this image relevant?
WCAG Principles – Introduction to Web Accessibility View original
Is this image relevant?
A set of posters on how to design for accessibility - National Resource Hub View original
Is this image relevant?
WCAG Guidelines and Success Criteria – Introduction to Web Accessibility View original
Is this image relevant?
WCAG Principles – Introduction to Web Accessibility View original
Is this image relevant?
1 of 3
Top images from around the web for WCAG principles
WCAG Guidelines and Success Criteria – Introduction to Web Accessibility View original
Is this image relevant?
WCAG Principles – Introduction to Web Accessibility View original
Is this image relevant?
A set of posters on how to design for accessibility - National Resource Hub View original
Is this image relevant?
WCAG Guidelines and Success Criteria – Introduction to Web Accessibility View original
Is this image relevant?
WCAG Principles – Introduction to Web Accessibility View original
Is this image relevant?
1 of 3
- WCAG is organized around four main principles: , , , and
- These principles form the foundation for the specific guidelines and success criteria outlined in WCAG
- By adhering to these principles, web content creators can ensure their content is accessible to the widest possible audience
Perceivable content
- Web content must be presented in ways that users can perceive, regardless of their abilities or the devices they use
- This includes providing for non-text content (images, videos), captions for audio content, and adaptable content that can be presented in different ways without losing meaning
- Examples of perceivable content: for images, video transcripts, and responsive design that adapts to different screen sizes
Operable user interface
- User interfaces must be designed to be operable by all users, including those who use assistive technologies or have limited mobility
- This includes providing keyboard accessibility for all functionality, giving users enough time to read and use content, and helping users navigate and find content
- Examples of operable user interfaces: keyboard-accessible forms, adjustable time limits for completing tasks, and clear headings and labels for navigation
Understandable information
- Web content must be presented in a way that is understandable to users, regardless of their cognitive abilities or language skills
- This includes using clear and simple language, providing explanations for complex terms or jargon, and ensuring content appears and operates in predictable ways
- Examples of understandable information: glossaries for technical terms, consistent navigation across pages, and error messages that clearly explain how to correct input
Robust compatibility
- Web content must be compatible with current and future user agents, including assistive technologies
- This includes using standard web technologies and ensuring content can be reliably interpreted by a wide variety of user agents
- Examples of robust compatibility: valid HTML markup, ARIA attributes for enhanced accessibility, and testing content with different assistive technologies
WCAG conformance levels
- WCAG defines three levels of conformance: A, AA, and AAA
- Each level builds upon the previous one, with Level A being the minimum level of accessibility and Level AAA being the highest
- Conformance levels are determined by how well a website or application meets the specific success criteria outlined in WCAG
Level A requirements
- Level A conformance is the minimum level of accessibility and includes basic requirements for making web content accessible
- This includes providing text alternatives for non-text content, ensuring content can be presented in different ways without losing meaning, and making all functionality available from a keyboard
- Examples of Level A requirements: alt text for images, captions for prerecorded audio, and keyboard-accessible forms
Level AA enhancements
- Level AA conformance includes all Level A requirements plus additional enhancements for improved accessibility
- This includes providing captions for live audio content, ensuring sufficient color contrast between text and background, and making sure content is readable and understandable
- Examples of Level AA enhancements: live captions for streaming video, minimum color contrast ratios of 4.5:1 for normal text, and descriptive headings and labels for content structure
Level AAA optimizations
- Level AAA conformance includes all Level A and Level AA requirements plus additional optimizations for maximum accessibility
- This includes providing sign language interpretation for prerecorded audio, ensuring enhanced color contrast ratios, and offering alternative ways to present content
- Examples of Level AAA optimizations: sign language videos for important audio content, minimum color contrast ratios of 7:1 for normal text, and customizable text spacing and line height
Accessibility evaluation
- Evaluating a website or application for accessibility involves a combination of manual testing, automated tools, and user feedback
- Regular accessibility evaluations help identify and prioritize issues, track progress over time, and ensure ongoing conformance with WCAG and other accessibility standards
- Accessibility evaluations should be integrated into the design and development process, with issues addressed as early as possible for the most effective and efficient remediation
Manual vs automated testing
- Manual testing involves human evaluators using assistive technologies and following established testing protocols to identify accessibility barriers
- uses software tools to scan websites and applications for common accessibility issues and generate reports with suggested improvements
- Both manual and automated testing are important for a comprehensive accessibility evaluation, as automated tools can miss some issues and manual testing can be time-consuming and subjective
Accessibility testing tools
- There are many accessibility testing tools available, ranging from browser extensions to enterprise-level software suites
- Some popular tools include WAVE, aXe, Lighthouse, and Siteimprove
- Accessibility testing tools can help identify issues such as missing alt text, low color contrast, and invalid HTML markup, but should be used in combination with manual testing for the most accurate results
Common accessibility issues
- Some of the most common accessibility issues include missing or inadequate text alternatives for non-text content, low color contrast between text and background, and lack of keyboard accessibility for all functionality
- Other common issues include poor heading structure, inaccessible forms, and multimedia content without captions or transcripts
- Identifying and prioritizing common accessibility issues can help teams focus their efforts on the most impactful improvements and ensure a more accessible user experience for all
Designing for accessibility
- Designing for accessibility means considering the needs of all users, including those with disabilities, from the beginning of the design process
- This involves following inclusive design principles, such as flexibility, simplicity, and perceivability, and incorporating accessibility best practices into design decisions
- By designing with accessibility in mind, teams can create products that are more usable, innovative, and beneficial for all users
Inclusive design principles
- Inclusive design is a methodology that considers the full range of human diversity, including ability, language, culture, gender, and age
- Some key principles of inclusive design include providing multiple ways for users to interact with content, using clear and simple language, and designing for flexibility and adaptability
- Examples of inclusive design in practice: providing both audio and visual feedback for interactions, using plain language in instructions and error messages, and allowing users to customize text size and color contrast
Color contrast considerations
- Adequate color contrast between text and background is essential for readability and accessibility, particularly for users with visual impairments
- WCAG provides specific guidelines for minimum color contrast ratios, depending on the size and weight of the text
- Tools like the WebAIM Color Contrast Checker can help designers evaluate color combinations and ensure sufficient contrast for accessibility
Meaningful text alternatives
- Text alternatives, such as alt text for images and transcripts for audio and video content, provide important information for users who cannot perceive the original content
- Meaningful text alternatives convey the purpose and meaning of the non-text content, rather than just describing its appearance
- Examples of meaningful text alternatives: alt text that describes the content and function of an image (rather than just "image"), and transcripts that include speaker identification and relevant non-speech sounds
Keyboard navigation support
- Keyboard accessibility is essential for users who cannot use a mouse or other pointing device, including many users with motor disabilities
- All functionality of a website or application should be available using only a keyboard, without requiring specific timings for individual keystrokes
- Examples of support: providing visible focus indicators for interactive elements, using logical tab order for navigation, and allowing users to skip repetitive content (such as headers and navigation) with a "skip to main content" link
Developing accessible websites
- Developing accessible websites involves using web technologies and programming practices that support accessibility, such as semantic HTML, ARIA attributes, and accessible forms and multimedia
- Developers should be familiar with WCAG guidelines and work closely with designers and content creators to ensure accessibility is maintained throughout the development process
- Regular accessibility testing and debugging should be integrated into the development workflow to catch and fix issues early
Semantic HTML usage
- Semantic HTML refers to the use of HTML elements that convey meaning and structure, rather than just presentation
- Using semantic HTML helps assistive technologies understand the content and relationships between elements on a page, and makes it easier for users to navigate and interact with the content
- Examples of semantic HTML: using
to<h1>
tags for headings,<h6>
for navigation menus, and<nav>
for interactive controls (rather than generic<button>
or<div>
tags with click events)<span>
ARIA attributes
- ARIA (Accessible Rich Internet Applications) is a set of attributes that can be added to HTML elements to enhance their accessibility and provide additional semantic information
- ARIA attributes can be used to describe the roles, states, and properties of custom widgets and dynamic content that may not be adequately conveyed by standard HTML
- Examples of ARIA usage: using
to indicate a time-sensitive message,role="alert"
to provide a text alternative for an icon button, andaria-label
to indicate the state of a collapsible sectionaria-expanded
Accessible forms
- Forms are a common source of accessibility issues, particularly for users with cognitive or motor disabilities
- Accessible forms should have clear labels, intuitive layout, and helpful error handling and validation
- Examples of accessible form design: using
elements to associate text with form controls, grouping related controls with<label>
and<fieldset>
, and providing clear and specific error messages that help users correct their input<legend>
Accessible multimedia
- Multimedia content, such as audio, video, and animations, can present significant barriers for users with disabilities if not made accessible
- Accessible multimedia should provide text alternatives, such as captions, transcripts, and audio descriptions, and allow users to control playback and adjust settings
- Examples of accessible multimedia: providing closed captions for videos, audio descriptions for visual content, and transcripts for podcasts and other audio-only content
Accessibility laws and regulations
- Many countries have laws and regulations that require websites and applications to be accessible to people with disabilities
- These laws and regulations vary by jurisdiction, but often reference WCAG as a technical standard for accessibility compliance
- Understanding and complying with relevant accessibility laws and regulations is important for avoiding legal risk and ensuring equal access for all users
Americans with Disabilities Act (ADA)
- The is a civil rights law in the United States that prohibits discrimination against people with disabilities in various areas, including public accommodations and commercial facilities
- While the ADA does not specifically mention websites, courts have interpreted the law to apply to web content and services, particularly those that are considered places of public accommodation
- Examples of ADA web accessibility lawsuits: cases against retailers, restaurants, and universities for failing to provide accessible websites and apps
Section 508 compliance
- is a federal law in the United States that requires federal agencies and contractors to make their electronic and information technology accessible to people with disabilities
- The Section 508 standards are based on WCAG and provide specific technical requirements for web content, software, and hardware
- Examples of Section 508 compliance: ensuring all videos on a government website have closed captions, providing text alternatives for images in a federal agency's mobile app, and testing a contractor's software for keyboard accessibility
International accessibility standards
- Many countries and international organizations have their own accessibility laws, regulations, and standards
- Some examples include the European Union's Web Accessibility Directive, the United Kingdom's Equality Act, and the United Nations Convention on the Rights of Persons with Disabilities
- While the specific requirements may vary, most international accessibility standards are based on or aligned with WCAG, promoting a consistent approach to web accessibility worldwide
Accessibility statements
- An accessibility statement is a public document that outlines an organization's commitment to accessibility, the current state of their website or application's accessibility, and plans for future improvements
- Accessibility statements help users understand what to expect from a website or application, and provide a way for them to contact the organization with accessibility feedback or issues
- Effective accessibility statements are easy to find, written in plain language, and regularly updated to reflect changes in the organization's accessibility efforts
Accessibility policy creation
- An accessibility policy is an internal document that sets out an organization's goals, standards, and processes for ensuring accessibility across its digital products and services
- Creating an accessibility policy involves defining roles and responsibilities, setting measurable targets, and establishing procedures for testing, reporting, and remediation
- Examples of accessibility policy elements: designating an accessibility coordinator, requiring all new content to meet WCAG Level AA, and conducting annual accessibility audits
Communicating accessibility efforts
- Communicating accessibility efforts involves sharing information about an organization's accessibility initiatives, progress, and challenges with both internal and external stakeholders
- This can include training employees on accessibility best practices, publishing blog posts or social media updates about accessibility improvements, and presenting at conferences or webinars on accessibility topics
- Examples of communicating accessibility efforts: launching an accessibility newsletter for customers, creating an accessibility champions program for employees, and sharing accessibility success stories in the organization's annual report
Handling accessibility feedback
- Handling accessibility feedback involves providing clear and easy ways for users to report accessibility issues, ask questions, or provide suggestions for improvement
- This can include an accessibility feedback form on the website, a dedicated email address or phone number for accessibility inquiries, and a process for triaging and responding to feedback in a timely and transparent manner
- Examples of handling accessibility feedback: acknowledging receipt of feedback within 24 hours, providing status updates on reported issues, and involving users with disabilities in testing and validating fixes
Continuous accessibility improvement
- Ensuring ongoing accessibility requires a commitment to continuous improvement, with regular testing, monitoring, and updating of websites and applications
- This involves integrating accessibility into all aspects of the design and development process, from initial planning and ideation to post-launch maintenance and support
- By treating accessibility as an ongoing priority, rather than a one-time checklist or compliance exercise, organizations can create more inclusive and sustainable digital experiences for all users
Accessibility training for teams
- Providing accessibility training for all members of a design and development team, as well as other relevant stakeholders (such as content creators, product managers, and customer support staff), is essential for building a culture of accessibility within an organization
- Accessibility training can cover topics such as disability awareness, WCAG principles and guidelines, inclusive design practices, and accessibility testing techniques
- Examples of accessibility training formats: in-person workshops, online courses, webinars, and hands-on practice sessions with assistive technologies
Integrating accessibility in workflows
- Integrating accessibility into existing design and development workflows helps ensure that accessibility considerations are addressed at every stage of the process, rather than being treated as an afterthought or separate concern
- This can involve incorporating accessibility checks and criteria into design reviews, code reviews, and QA testing, as well as using accessibility tools and plugins in design and development software
- Examples of integrating accessibility in workflows: including an accessibility section in design specs, running automated accessibility tests as part of continuous integration, and involving users with disabilities in usability testing
Monitoring accessibility over time
- Monitoring accessibility over time involves regularly assessing the accessibility of a website or application, tracking progress against defined goals and metrics, and identifying areas for improvement
- This can include conducting periodic manual and automated accessibility audits, analyzing user feedback and analytics data for accessibility issues, and reviewing accessibility reports and dashboards to track key performance indicators
- Examples of monitoring accessibility over time: setting quarterly accessibility targets based on WCAG conformance levels, tracking the number and severity of accessibility issues reported by users, and celebrating accessibility milestones and achievements with the team
Key Terms to Review (20)
Accessibilityoz: Accessibilityoz is a term that highlights the importance of making digital content usable and inclusive for people with disabilities. It encompasses various practices and guidelines that aim to ensure that websites and applications can be navigated and understood by all users, regardless of their physical or cognitive abilities. This concept is closely tied to accessibility guidelines, specifically the Web Content Accessibility Guidelines (WCAG), which set standards for how digital content can be made more accessible.
ADA: The Americans with Disabilities Act (ADA) is a landmark piece of legislation that was enacted in 1990 to prevent discrimination against individuals with disabilities in various areas, including employment, public accommodations, transportation, and telecommunications. This act aims to ensure equal opportunities and access for people with disabilities, aligning closely with accessibility guidelines like the WCAG to create an inclusive environment for all users.
Alt text: Alt text, short for alternative text, is a written description that is added to an image on a webpage or digital content. It serves as a critical accessibility feature, allowing users who cannot see the image to understand its context and meaning through screen readers or other assistive technologies. This text not only enhances the user experience but also plays a role in SEO, helping search engines understand the content of images.
Automated testing: Automated testing refers to the use of software tools and scripts to execute tests on software applications automatically, rather than manually. This process helps ensure that applications function as expected, while also allowing for faster feedback and more efficient development cycles. By integrating automated testing into workflows, teams can maintain higher code quality, streamline release processes, and facilitate adherence to design and accessibility standards.
Design for All: Design for All is an approach that aims to create products, services, and environments that are accessible and usable by everyone, regardless of age, ability, or situation. This inclusive design philosophy emphasizes the importance of considering the diverse needs of all users during the design process, ensuring that no one is excluded. By integrating accessibility principles into the design from the outset, designers can create more equitable and user-friendly experiences.
Keyboard Navigation: Keyboard navigation is a method of interacting with digital interfaces using a keyboard rather than a mouse or touch input. It allows users to navigate through websites and applications by using keys like the Tab, Enter, and Arrow keys, which can enhance accessibility for individuals with disabilities and those who prefer keyboard shortcuts. This form of navigation is essential for ensuring that all users can access content efficiently and effectively.
Navigable: Navigable refers to the ease with which users can move through and interact with a digital interface or content. This concept is crucial for ensuring that all users, including those with disabilities, can access and utilize web content efficiently, aligning with guidelines that promote inclusivity and usability.
Operable: Operable refers to the accessibility feature ensuring that all user interface components and navigation methods can be used effectively by everyone, including individuals with disabilities. This concept emphasizes that users should be able to interact with all functionalities of a system, whether it's through keyboard navigation, voice commands, or other assistive technologies. A design that is operable ensures that people can perform actions without facing barriers, enhancing usability for a diverse audience.
Perceivable: Perceivable refers to the principle that information and user interface components must be presented to users in ways they can perceive, regardless of their sensory abilities. This means that all content should be accessible and understandable, ensuring that individuals can perceive visual, auditory, and tactile elements effectively. The goal is to provide alternative methods for accessing information so that no one is excluded from understanding or interacting with digital content.
Robust: Robust refers to the quality of being strong, resilient, and able to withstand challenges or variations without failing. In the context of accessibility guidelines, particularly the Web Content Accessibility Guidelines (WCAG), a robust design ensures that content is compatible with a wide range of user agents, including assistive technologies. This means that the digital content can be easily accessed and understood by all users, regardless of their abilities or the tools they use.
Screen reader: A screen reader is a software application that converts text displayed on a screen into speech or braille, enabling visually impaired users to access digital content. It reads aloud the text and provides information about elements on the screen, such as buttons and links, allowing users to navigate websites and applications. Screen readers are vital for ensuring digital accessibility, particularly in adherence to web content accessibility standards.
Section 508: Section 508 is a federal law that mandates that all electronic and information technology developed, maintained, or used by the federal government must be accessible to people with disabilities. This law is crucial for ensuring that individuals with various disabilities have equal access to information and services provided by government agencies. It aligns closely with accessibility standards like the Web Content Accessibility Guidelines (WCAG), which provide detailed criteria to enhance digital accessibility.
Text Alternatives: Text alternatives are descriptions or text-based representations of non-text content in digital formats, allowing users with visual impairments or other disabilities to access information. This concept is crucial in making web content accessible, as it ensures that images, charts, and other visual elements have meaningful descriptions that can be read by screen readers or converted into other formats.
Understandable: Understandable refers to the clarity and ease with which information can be perceived and comprehended by users. It emphasizes the importance of presenting information in a way that is straightforward, coherent, and logical, enabling all users to grasp the content without confusion.
Universal Design: Universal design refers to the creation of products and environments that are accessible and usable by all people, regardless of their age, ability, or status. It emphasizes the importance of inclusivity in design, ensuring that everyone can benefit from and interact with spaces and products without needing specialized adaptations. This approach is closely connected to accessibility guidelines and inclusive design principles, promoting a more equitable experience for all users.
User testing with assistive technology: User testing with assistive technology involves evaluating how individuals with disabilities interact with digital products using specialized tools designed to support their needs. This process is essential for identifying accessibility issues and ensuring that software and websites meet the standards set by accessibility guidelines, like the WCAG. It focuses on the experiences of users who rely on tools such as screen readers, voice recognition software, and other adaptive devices.
Voice recognition software: Voice recognition software is a technology that enables the conversion of spoken language into text or commands, allowing users to interact with devices and applications using their voice. This type of software plays a crucial role in making technology more accessible to individuals with disabilities and enhancing user experience across various platforms.
W3C: The W3C, or World Wide Web Consortium, is an international community that develops open standards to ensure the long-term growth of the web. Founded in 1994 by Tim Berners-Lee, the W3C plays a vital role in creating guidelines and recommendations that promote accessibility, usability, and interoperability on the web. This is particularly important for enhancing web accessibility standards such as WCAG, which aim to make web content more accessible to individuals with disabilities.
WCAG 2.0: WCAG 2.0, or the Web Content Accessibility Guidelines 2.0, is a set of international standards developed to ensure that web content is accessible to all users, including those with disabilities. These guidelines provide a framework for creating accessible digital content and are crucial for fostering inclusivity on the internet. By adhering to WCAG 2.0, developers and designers can create websites that are usable by people with various disabilities, which aligns with legal requirements in many jurisdictions.
WCAG 2.1: WCAG 2.1, or the Web Content Accessibility Guidelines 2.1, is a set of standards established by the World Wide Web Consortium (W3C) to improve web accessibility for people with disabilities. This guideline builds upon WCAG 2.0, expanding its recommendations to address the needs of a broader range of users, including those with cognitive or learning disabilities and users of mobile devices. It aims to ensure that all web content is perceivable, operable, understandable, and robust for everyone.