CINXE.COM

<!DOCTYPE html> <html class="no-js" lang="en" dir="ltr" prefix="og: http://ogp.me/ns#"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script> document.documentElement.className = document.documentElement.className.replace('no-js', 'has-js'); function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "/WAI/assets/scripts/main.js?1739541174349523255"; document.body.appendChild(element); } window.addEventListener("load", downloadJSAtOnload, false); </script> <link rel="stylesheet" href="/WAI/assets/css/style.css?1739541174349523255"> <title> Accessibility Principles | Web Accessibility Initiative (WAI) | W3C</title> <meta name="generator" content="Jekyll v4.3.3" /> <meta property="og:title" content="Accessibility Principles" /> <meta name="author" content="W3C Web Accessibility Initiative (WAI)" /> <meta property="og:locale" content="en" /> <meta name="description" content="An overview of the fundamental web accessibility requirements for websites, web applications, browsers, and other tools." /> <meta property="og:description" content="An overview of the fundamental web accessibility requirements for websites, web applications, browsers, and other tools." /> <link rel="canonical" href="https://www.w3.org/WAI/fundamentals/accessibility-principles/" /> <meta property="og:url" content="https://www.w3.org/WAI/fundamentals/accessibility-principles/" /> <meta property="og:site_name" content="Web Accessibility Initiative (WAI)" /> <meta property="og:image" content="https://www.w3.org/WAI/content-images/accessibility-principles/social.png" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="twitter:image" content="https://www.w3.org/WAI/content-images/accessibility-principles/social.png" /> <meta property="twitter:title" content="Accessibility Principles" /> <meta name="twitter:site" content="@w3c_wai" /> <meta name="twitter:creator" content="@W3C Web Accessibility Initiative (WAI)" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebPage","author":{"@type":"Person","name":"W3C Web Accessibility Initiative (WAI)"},"description":"An overview of the fundamental web accessibility requirements for websites, web applications, browsers, and other tools.","headline":"Accessibility Principles","image":"https://www.w3.org/WAI/content-images/accessibility-principles/social.png","url":"https://www.w3.org/WAI/fundamentals/accessibility-principles/"}</script>  <link rel="alternate" type="application/rss+xml" href="/WAI/feed.xml"> </head> <body id="top" class="page-accessibility-principles "> <nav aria-label="Skip Link and Language Selector" id="controls" class="default-grid"> <ul> <li><a href="#main">Skip to Content</a></li> <li class="opt"><a href="/WAI/meta/customize/">Change Text Size or Colors</a></li> <li class="opt languagelist"> <strong>This page in:</strong> <ul class="languagelistul"><li><strong style="text-transform: capitalize;">English</strong></li><li><a style="text-transform: capitalize;" href="/WAI/fundamentals/accessibility-principles/ar" lang="ar" dir="auto" translate="no">العربية</a></li> <li><a style="text-transform: capitalize;" href="/WAI/fundamentals/accessibility-principles/cs" lang="cs" dir="auto" translate="no">čeština</a></li> <li><a style="text-transform: capitalize;" href="/WAI/fundamentals/accessibility-principles/es" lang="es" dir="auto" translate="no">español</a></li> <li><a style="text-transform: capitalize;" href="/WAI/fundamentals/accessibility-principles/fr" lang="fr" dir="auto" translate="no">français</a></li> <li><a style="text-transform: capitalize;" href="/WAI/fundamentals/accessibility-principles/ja" lang="ja" dir="auto" translate="no">日本語</a></li> <li><a style="text-transform: capitalize;" href="/WAI/fundamentals/accessibility-principles/ko" lang="ko" dir="auto" translate="no">한국어</a></li> <li><a style="text-transform: capitalize;" href="/WAI/fundamentals/accessibility-principles/ru" lang="ru" dir="auto" translate="no">русский язык</a></li> <li><a style="text-transform: capitalize;" href="/WAI/fundamentals/accessibility-principles/zh-hans" lang="zh-hans" dir="auto" translate="no">简体中文</a></li> </ul> </li> <li class="opt"> <a href="/WAI/translations/">All Translations <svg focusable="false" aria-hidden="true" class="icon-translations "><use xlink:href="/WAI/assets/images/icons.svg#icon-translations"></use></svg></a> </li> <li><button id="showoptions" data-showhidebuttonid="header-showoptions" class="showhidebutton button-inline" data-target="#controls .opt" aria-expanded="false" data-large-aria-expanded="true" data-showtext='<svg focusable="false" aria-hidden="true" class="icon-languages "><use xlink:href="/WAI/assets/images/icons.svg#icon-languages"></use></svg> Show Customization, Languages, Translations' data-hidetext='Hide Options'><svg focusable="false" aria-hidden="true" class="icon-languages "><use xlink:href="/WAI/assets/images/icons.svg#icon-languages"></use></svg> Show Customization, Languages, Translations</button></li> </ul> </nav> <header id="site-header" class="default-grid with-gap"> <div class="logos"> <a lang="en" class="home w3c" href="https://www.w3.org/"> <svg role="img" aria-label="W3C" viewBox="0 0 68 34" xmlns="http://www.w3.org/2000/svg"><g><path d="m16.117 1.006 5.759 19.58 5.759-19.58h4.17 11.444v1.946l-5.879 10.128c2.065.663 3.627 1.868 4.686 3.615 1.059 1.748 1.589 3.799 1.589 6.155 0 2.914-.775 5.363-2.324 7.348s-3.555 2.978-6.017 2.978c-1.854 0-3.469-.589-4.845-1.767-1.377-1.178-2.396-2.773-3.058-4.786l3.256-1.35c.477 1.218 1.106 2.178 1.887 2.879.781.702 1.701 1.052 2.76 1.052 1.112 0 2.052-.622 2.82-1.866.768-1.245 1.152-2.74 1.152-4.489 0-1.933-.411-3.429-1.231-4.488-.954-1.244-2.45-1.867-4.489-1.867h-1.588v-1.906l5.56-9.612h-6.712l-.382.65-8.163 27.548h-.397l-5.958-19.937-5.957 19.937h-.397l-9.53-32.168h4.17l5.759 19.58 3.892-13.185-1.906-6.395z"/><path d="m64.92 1.006c-.819 0-1.554.295-2.111.861-.591.6-.92 1.376-.92 2.178s.313 1.545.887 2.128c.583.591 1.334.912 2.145.912.793 0 1.562-.321 2.161-.903.574-.557.887-1.3.887-2.136 0-.811-.321-1.57-.878-2.136-.584-.592-1.344-.904-2.171-.904zm2.643 3.065c0 .701-.271 1.351-.768 1.832-.524.507-1.174.777-1.892.777-.675 0-1.342-.278-1.84-.785s-.777-1.157-.777-1.849.287-1.368.802-1.891c.481-.49 1.131-.751 1.84-.751.726 0 1.376.271 1.883.785.49.489.752 1.147.752 1.882zm-2.559-1.807h-1.3v3.445h.65v-1.469h.642l.701 1.469h.726l-.769-1.57c.498-.102.785-.439.785-.929 0-.625-.472-.946-1.435-.946zm-.118.422c.608 0 .886.169.886.591 0 .405-.278.549-.87.549h-.549v-1.14z"/><path d="m59.807.825.676 4.107-2.391 4.575s-.918-1.941-2.443-3.015c-1.285-.905-2.122-1.102-3.431-.832-1.681.347-3.587 2.357-4.419 4.835-.995 2.965-1.005 4.4-1.04 5.718-.056 2.113.277 3.362.277 3.362s-1.452-2.686-1.438-6.62c.009-2.808.451-5.354 1.75-7.867 1.143-2.209 2.842-3.535 4.35-3.691 1.559-.161 2.791.59 3.743 1.403 1 .854 2.01 2.721 2.01 2.721z"/><path d="m60.102 24.063s-1.057 1.889-1.715 2.617c-.659.728-1.837 2.01-3.292 2.651s-2.218.762-3.656.624c-1.437-.138-2.772-.97-3.24-1.317s-1.664-1.369-2.34-2.322-1.733-2.859-1.733-2.859.589 1.91.958 2.721c.212.467.864 1.894 1.789 3.136.863 1.159 2.539 3.154 5.086 3.604 2.547.451 4.297-.693 4.73-.97s1.346-1.042 1.924-1.66c.603-.645 1.174-1.468 1.49-1.962.231-.36.607-1.092.607-1.092z"/></g></svg> </a> <a lang="en" class="home" href="/WAI/"> <span class="wai"><span class="wa">Web Accessibility</span> <span class="i"><span class="initieative">Initiative</span> <span>WAI</span></span></span> </a> <div class="claim"> <span>Strategies, standards, resources to make the Web accessible to people with disabilities</span> </div> <button class="button button-menu" aria-haspopup="true" aria-expanded="false" id="openmenu"><span><svg focusable="false" aria-hidden="true" class="icon-menu "><use xlink:href="/WAI/assets/images/icons.svg#icon-menu"></use></svg> Menu</span></button> </div> <div class="navigations"> <nav class="metanav" aria-label="Meta & Search" lang="en"> <ul> <li><a href="/WAI/about/participating/">Get Involved</a></li> <li><a href="/WAI/about/">About W3C WAI</a></li> <li> <form action="/WAI/search/" role="search"> <div> <label for="header-search"> <span class="visuallyhidden">Search:</span> <input id="header-search" type="search" name="q" placeholder="Search" aria-label="Search"> </label> <button class="button button-icon button-nobg button-noborder"><span><svg focusable="false" aria-label="Submit Search" class="icon-search "><use xlink:href="/WAI/assets/images/icons.svg#icon-search"></use></svg></span></button> </div> </form> </li> </ul> </nav> </div> </header><nav class="mainnav" aria-label="Main" lang="en"><ul><li><a lang="en" href="/WAI/fundamentals/"><span>Accessibility Fundamentals</span></a></li><li><a lang="en" href="/WAI/planning/"><span>Planning & Policies</span></a></li><li><a lang="en" href="/WAI/design-develop/"><span>Design & Develop</span></a></li><li><a lang="en" href="/WAI/test-evaluate/"><span>Test & Evaluate</span></a></li><li><a lang="en" href="/WAI/teach-advocate/"><span>Teach & Advocate</span></a></li><li><a lang="en" href="/WAI/standards-guidelines/"><span>Standards/<wbr>Guidelines</span></a></li></ul></nav><nav class="default-grid breadcrumb" aria-label="Breadcrumb" lang="en"> <ul style="align-self: center;"> <li><a href="/WAI/" lang="en">Home</a></li><li><a lang="en" href="/WAI/fundamentals/"><span>Accessibility Fundamentals</span></a></li><li><a lang="en" href="/WAI/fundamentals/accessibility-principles/" aria-current="page"><span>Accessibility Principles</span></a></li></ul> </nav> <div class="default-grid with-gap leftcol"> <div class="sidenav"><nav class="sn-contents" aria-label="Secondary"> <ul class="sidenav--list"> <li> <a lang="en" href="/WAI/fundamentals/" class="page-link"><span>Accessibility Fundamentals</span></a></li><li> <a lang="en" href="/WAI/fundamentals/accessibility-intro/" class="page-link"><span>Introduction to Accessibility</span></a><ul><li> <a lang="en" href="/WAI/videos/standards-and-benefits/" class="page-link"><span>Video Introduction</span></a></li></ul></li><li> <a lang="en" href="/WAI/people/" class="page-link"><span>Accessibility is About People</span></a><ul><li> <a lang="en" href="/WAI/perspective-videos/" class="page-link"><span>Perspectives Videos</span></a><ul><li> <a lang="en" href="/WAI/perspective-videos/keyboard/" class="page-link"><span>Keyboard Compatibility</span></a></li><li> <a lang="en" href="/WAI/perspective-videos/contrast/" class="page-link"><span>Colors with Good Contrast</span></a></li><li> <a lang="en" href="/WAI/perspective-videos/layout/" class="page-link"><span>Clear Layout and Design</span></a></li><li> <a lang="en" href="/WAI/perspective-videos/speech/" class="page-link"><span>Text to Speech</span></a></li><li> <a lang="en" href="/WAI/perspective-videos/controls/" class="page-link"><span>Large Links, Buttons, and Controls</span></a></li><li> <a lang="en" href="/WAI/perspective-videos/captions/" class="page-link"><span>Video Captions</span></a></li><li> <a lang="en" href="/WAI/perspective-videos/customizable/" class="page-link"><span>Customizable Text</span></a></li><li> <a lang="en" href="/WAI/perspective-videos/voice/" class="page-link"><span>Speech Recognition</span></a></li><li> <a lang="en" href="/WAI/perspective-videos/understandable/" class="page-link"><span>Understandable Content</span></a></li><li> <a lang="en" href="/WAI/perspective-videos/notifications/" class="page-link"><span>Notifications and Feedback</span></a></li></ul></li><li> <a lang="en" href="/WAI/people-use-web/" class="page-link"><span>How People with Disabilities Use the Web</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/" class="page-link"><span>Stories of Web Users</span></a><ul><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-one/" class="page-link"><span>Ade's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-two/" class="page-link"><span>Ian's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-three/" class="page-link"><span>Lakshmi's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-four/" class="page-link"><span>Lexie's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-five/" class="page-link"><span>Sophie's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-six/" class="page-link"><span>Dhruv's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-seven/" class="page-link"><span>Marta's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-eight/" class="page-link"><span>Stefan's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-nine/" class="page-link"><span>Elias' Story</span></a></li></ul></li><li> <a lang="en" href="/WAI/people-use-web/abilities-barriers/" class="page-link"><span>Diverse Abilities and Barriers</span></a><ul><li> <a lang="en" href="/WAI/people-use-web/abilities-barriers/auditory/" class="page-link"><span>Auditory</span></a></li><li> <a lang="en" href="/WAI/people-use-web/abilities-barriers/cognitive/" class="page-link"><span>Cognitive and Learning</span></a></li><li> <a lang="en" href="/WAI/people-use-web/abilities-barriers/physical/" class="page-link"><span>Physical</span></a></li><li> <a lang="en" href="/WAI/people-use-web/abilities-barriers/speech/" class="page-link"><span>Speech</span></a></li><li> <a lang="en" href="/WAI/people-use-web/abilities-barriers/visual/" class="page-link"><span>Visual</span></a></li></ul></li><li> <a lang="en" href="/WAI/people-use-web/tools-techniques/" class="page-link"><span>Tools and Techniques</span></a><ul><li> <a lang="en" href="/WAI/people-use-web/tools-techniques/perception/" class="page-link"><span>Perception</span></a></li><li> <a lang="en" href="/WAI/people-use-web/tools-techniques/presentation/" class="page-link"><span>Presentation</span></a></li><li> <a lang="en" href="/WAI/people-use-web/tools-techniques/input/" class="page-link"><span>Input</span></a></li><li> <a lang="en" href="/WAI/people-use-web/tools-techniques/navigation/" class="page-link"><span>Interaction</span></a></li></ul></li><li> <a lang="en" href="/WAI/older-users/" class="page-link"><span>Older Users and Accessibility</span></a><ul><li> <a lang="en" href="/WAI/older-users/developing/" class="page-link"><span>How WCAG 2 Applies</span></a></li><li> <a lang="en" href="/WAI/older-users/literature/" class="page-link"><span>Literature Review</span></a></li></ul></li><li> <a lang="en" href="/WAI/fundamentals/accessibility-usability-inclusion/" class="page-link"><span>Accessibility, Usability, Inclusion</span></a></li></ul></li><li> <a lang="en" href="/WAI/fundamentals/components/" class="page-link"><span>Components of Web Accessibility</span></a></li><li> <a lang="en" href="/WAI/fundamentals/accessibility-principles/" aria-current="page" class="page-link"><span>Accessibility Principles</span></a></li><li> <a lang="en" href="/WAI/research/" class="page-link"><span>Research</span></a><ul><li> <a lang="en" href="/WAI/research/user-requirements/" class="page-link"><span>User Requirements</span></a></li><li> <a lang="en" href="/WAI/research/ai2023/" class="page-link"><span>AI and Accessibility</span></a></li></ul></li><li> <a lang="en" href="/WAI/courses/" class="page-link"><span>Digital Accessibility Courses</span></a><ul><li> <a lang="en" href="/WAI/courses/foundations-course/" class="page-link"><span>W3C Foundations Online Course</span></a></li><li> <a lang="en" href="/WAI/courses/list/" class="page-link"><span>Course List</span></a></li></ul></li></ul></nav><nav class="sidenav-languages" aria-labelledby="languagehead"> <header id="languagehead">Languages/Translations</header> <ul class="langlist"> <li style="margin-bottom: 2px;"><strong style="text-transform: capitalize;">English (original)</strong></li><li style="margin-bottom: 2px;"><a style="text-transform: capitalize;" href="/WAI/fundamentals/accessibility-principles/ar" dir="auto" translate="no" lang="ar">العربية</a></li><li style="margin-bottom: 2px;"><a style="text-transform: capitalize;" href="/WAI/fundamentals/accessibility-principles/cs" dir="auto" translate="no" lang="cs">čeština</a></li><li style="margin-bottom: 2px;"><a style="text-transform: capitalize;" href="/WAI/fundamentals/accessibility-principles/es" dir="auto" translate="no" lang="es">español</a></li><li style="margin-bottom: 2px;"><a style="text-transform: capitalize;" href="/WAI/fundamentals/accessibility-principles/fr" dir="auto" translate="no" lang="fr">français</a></li><li style="margin-bottom: 2px;"><a style="text-transform: capitalize;" href="/WAI/fundamentals/accessibility-principles/ja" dir="auto" translate="no" lang="ja">日本語</a></li><li style="margin-bottom: 2px;"><a style="text-transform: capitalize;" href="/WAI/fundamentals/accessibility-principles/ko" dir="auto" translate="no" lang="ko">한국어</a></li><li style="margin-bottom: 2px;"><a style="text-transform: capitalize;" href="/WAI/fundamentals/accessibility-principles/ru" dir="auto" translate="no" lang="ru">русский язык</a></li><li style="margin-bottom: 2px;"><a style="text-transform: capitalize;" href="/WAI/fundamentals/accessibility-principles/zh-hans" dir="auto" translate="no" lang="zh-hans">简体中文</a></li></ul> <p><a href="/WAI/translations/">All Translations</a></p> <p><a href="/WAI/about/translating/">Translating WAI Resources</a></p> </nav> </div> <main id="main" lang="en"> <header> <h1> Accessibility Principles </h1></header> <aside class="box box-full"><header class="box-h box-h-full"> <h2> Summary </h2></header><div class="box-i"> <p>This page introduces some of the web accessibility requirements for websites, web applications, browsers, and other tools. It provides references to the international standards from W3C Web Accessibility Initiative (WAI) and to <a href="/WAI/people-use-web/user-stories/">stories of web users</a>.</p> <p><strong>Note:</strong> This is not a complete list of all accessibility requirements.</p> </div></aside> <nav class="box box-simple box-full" aria-labelledby="tocheading" id="toc"> <header id="tocheading" class="box-h box-h-simple box-h-full"> Page Contents</header> <div class="box-i"> <ul id="markdown-toc"> <li><a href="#standards" id="markdown-toc-standards">Web accessibility standards</a></li> <li><a href="#perceivable" id="markdown-toc-perceivable">Perceivable information and user interface</a> <ul> <li><a href="#alternatives" id="markdown-toc-alternatives">Text alternatives for non-text content</a></li> <li><a href="#captions" id="markdown-toc-captions">Captions and other alternatives for multimedia</a></li> <li><a href="#adaptable" id="markdown-toc-adaptable">Content can be presented in different ways</a></li> <li><a href="#distinguishable" id="markdown-toc-distinguishable">Content is easier to see and hear</a></li> </ul> </li> <li><a href="#operable" id="markdown-toc-operable">Operable user interface and navigation</a> <ul> <li><a href="#keyboard" id="markdown-toc-keyboard">Functionality is available from a keyboard</a></li> <li><a href="#time" id="markdown-toc-time">Users have enough time to read and use the content</a></li> <li><a href="#safe" id="markdown-toc-safe">Content does not cause seizures and physical reactions</a></li> <li><a href="#navigable" id="markdown-toc-navigable">Users can easily navigate, find content, and determine where they are</a></li> <li><a href="#modalities" id="markdown-toc-modalities">Users can use different input modalities beyond keyboard</a></li> </ul> </li> <li><a href="#understandable" id="markdown-toc-understandable">Understandable information and user interface</a> <ul> <li><a href="#readable" id="markdown-toc-readable">Text is readable and understandable</a></li> <li><a href="#predictable" id="markdown-toc-predictable">Content appears and operates in predictable ways</a></li> <li><a href="#tolerant" id="markdown-toc-tolerant">Users are helped to avoid and correct mistakes</a></li> </ul> </li> <li><a href="#robust" id="markdown-toc-robust">Robust content and reliable interpretation</a> <ul> <li><a href="#compatible" id="markdown-toc-compatible">Content is compatible with current and future user tools</a></li> </ul> </li> </ul> </div> </nav> <div class="excol-all"></div> <h2 id="standards">Web accessibility standards</h2> <p>Web accessibility relies on several components that work together. Some of these include:</p> <ul> <li><strong id="webcontent">Web content</strong> - refers to any part of a website, including text, images, forms, and multimedia, as well as any markup code, scripts, applications, and such.</li> <li><strong id="useragents">User agents</strong> - software that people use to access web content, including desktop graphical browsers, voice browsers, mobile phone browsers, multimedia players, plug-ins, and some <a href="/WAI/people-use-web/tools-techniques/#at" title="definition">assistive technologies</a>.</li> <li><strong id="authoringtools">Authoring tools</strong> - software or services that people use to produce web content, including code editors, document conversion tools, content management systems, blogs, database scripts, and other tools.</li> </ul> <details><summary> <h3 class="no_toc" id="more-about-web-accessibility-standards">More about web accessibility standards</h3> </summary> <div> <p>These components inter-relate and support each other. For instance, <strong>web content</strong> needs to include text alternatives for images. This information needs to be processed by <strong>web browsers</strong> and then conveyed to <strong>assistive technologies</strong>, such as screen readers. To create such text alternatives, authors need <strong>authoring tools</strong> that support them to do so. More background is provided in <a href="/WAI/fundamentals/components/">Essential Components of Web Accessibility</a>.</p> <p>Standards play a vital role in defining accessibility requirements for each of these components. Some accessibility requirements are easy to meet, yet understanding the basics of how people with disabilities use the Web helps implement them more effectively and efficiently. Some aspects of accessibility require more technical skills or advanced knowledge of how people use the Web. In all cases, <a href="/WAI/test-evaluate/involving-users/">involving users early and throughout your web projects</a> will make your work better and easier.</p> <p>The W3C Web Accessibility Initiative (WAI) provides a set of guidelines that are internationally recognized as the standard for web accessibility. These include:</p> <ul> <li><strong><a href="/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines (WCAG)</a></strong></li> <li><strong><a href="/WAI/standards-guidelines/uaag/">User Agent Accessibility Guidelines (UAAG)</a></strong></li> <li><strong><a href="/WAI/standards-guidelines/atag/">Authoring Tool Accessibility Guidelines (ATAG)</a></strong></li> </ul> <p>There is also a WAI specification for <strong><a href="/WAI/standards-guidelines/aria/">Accessible Rich Internet Applications (WAI-ARIA)</a></strong>, which include dynamic content and advanced user interface controls developed with Ajax, JavaScript, and related web technologies.</p> </div> </details> <h2 id="perceivable">Perceivable information and user interface</h2> <h3 id="alternatives">Text alternatives for non-text content</h3> <p>Text alternatives are equivalents for non-text content. Examples include:</p> <ul> <li>Short equivalents for images, including icons, buttons, and graphics</li> <li>Description of data represented on charts, diagrams, and illustrations</li> <li>Brief descriptions of non-text content such as audio and video files</li> <li>Labels for form controls, input, and other user interface components</li> </ul> <p>Text alternatives convey the purpose of an image or function to provide an equivalent user experience. For instance, an appropriate text alternative for a search button would be “<em>search</em>” rather than “<em>magnifying lens</em>”.</p> <p>Text alternatives can be presented in a variety of ways. For instance, they can be read aloud for people who cannot see the screen and for people with reading difficulties, enlarged to custom text sizes, or displayed on braille devices. Text alternatives serve as labels for controls and functionality to aid keyboard navigation and navigation by voice recognition (speech input). They also act as labels to identify audio, video, and files in other formats, as well as applications that are embedded as part of a website.</p> <details><summary> <h4 class="no_toc" id="accessibility-requirements-related-to-text-alternatives-links-to-technical-specification">Accessibility requirements related to text alternatives (links to technical specification)</h4> </summary> <div> <p><strong>WCAG</strong></p> <ul> <li><a href="https://www.w3.org/WAI/WCAG22/quickref/#text-alternatives">Guideline 1.1 - Text Alternatives</a></li> </ul> <p><strong>UAAG</strong></p> <ul> <li><a href="https://www.w3.org/TR/UAAG20/#gl-access-alternative-content">Guideline 1.1 - Alternative content</a></li> </ul> <p><strong>ATAG</strong></p> <ul> <li><a href="https://www.w3.org/TR/ATAG20/#principle_a1">Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines</a></li> <li><a href="https://www.w3.org/TR/ATAG20/#gl_a21">Guideline A.2.1: (For the authoring tool user interface) Make alternative content available to authors</a></li> <li><a href="https://www.w3.org/TR/ATAG20/#gl_a22">Guideline A.2.2: (For the authoring tool user interface) Ensure that editing-view presentation can be programmatically determined</a></li> <li><a href="https://www.w3.org/TR/ATAG20/#gl_a37">Guideline A.3.7: (For the authoring tool user interface) Ensure that previews are at least as accessible as in-market user agents</a></li> <li><a href="https://www.w3.org/TR/ATAG20/#part_b">Part B. Support the production of accessible content</a></li> </ul> </div> </details> <details><summary> <h4 id="stories-related-to-text-alternatives" class="no_toc">Stories related to text alternatives</h4> </summary> <div> <ul> <li><a href="/WAI/people-use-web/user-stories/story-one/">Ade, reporter with limited use of his arms</a></li> <li><a href="/WAI/people-use-web/user-stories/story-three/">Lakshmi, senior accountant who is blind</a></li> <li><a href="/WAI/people-use-web/user-stories/story-six/">Dhruv, older adult student who is deaf</a></li> <li><a href="/WAI/people-use-web/user-stories/story-seven/">Marta, marketing assistant who is deaf and blind</a></li> <li><a href="/WAI/people-use-web/user-stories/story-eight/">Stefan, student with attention deficit hyperactivity disorder and dyslexia</a></li> <li><a href="/WAI/people-use-web/user-stories/story-nine/">Elias, retiree with low vision, hand tremor, and mild short-term memory loss</a></li> </ul> </div> </details> <h3 id="captions">Captions and other alternatives for multimedia</h3> <p>People who cannot hear audio or see video need alternatives. Examples include:</p> <ul> <li>Text transcripts and captions for audio content, such as recordings of a radio interview</li> <li>Audio descriptions, which are narrations to describe important visual details in a video</li> <li>Sign language interpretation of audio content, including relevant auditory experiences</li> </ul> <p>Well-written text transcripts containing the correct sequence of any auditory or visual information provide a basic level of accessibility and facilitate the production of captions and audio descriptions.</p> <details><summary> <h4 class="no_toc" id="accessibility-requirements-related-to-multimedia-links-to-technical-specification">Accessibility requirements related to multimedia (links to technical specification)</h4> </summary> <div> <p><strong>WCAG</strong></p> <ul> <li><a href="https://www.w3.org/WAI/WCAG22/quickref/#time-based-media">Guideline 1.2 - Time-based Media</a></li> </ul> <p><strong>UAAG</strong></p> <ul> <li><a href="https://www.w3.org/TR/UAAG20/#gl-access-alternative-content">Guideline 1.1 - Alternative content</a></li> </ul> <p><strong>ATAG</strong></p> <ul> <li><a href="https://www.w3.org/TR/ATAG20/#principle_a1">Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines</a></li> <li><a href="https://www.w3.org/TR/ATAG20/#gl_a21">Guideline A.2.1: (For the authoring tool user interface) Make alternative content available to authors</a></li> <li><a href="https://www.w3.org/TR/ATAG20/#gl_a37">Guideline A.3.7: (For the authoring tool user interface) Ensure that previews are at least as accessible as in-market user agents</a></li> <li><a href="https://www.w3.org/TR/ATAG20/#part_b">Part B. Support the production of accessible content</a></li> </ul> </div> </details> <details><summary> <h4 id="stories-related-to-multimedia" class="no_toc">Stories related to multimedia</h4> </summary> <div> <ul> <li><a href="/WAI/people-use-web/user-stories/story-three/">Lakshmi, senior accountant who is blind</a></li> <li><a href="/WAI/people-use-web/user-stories/story-six/">Dhruv, older adult student who is deaf</a></li> <li><a href="/WAI/people-use-web/user-stories/story-seven/">Marta, marketing assistant who is deaf and blind</a></li> </ul> </div> </details> <h3 id="adaptable">Content can be presented in different ways</h3> <p>For users to be able to change the presentation of content, it is necessary that:</p> <ul> <li>Headings, lists, tables, input fields, and content structures are marked-up properly</li> <li>Sequences of information or instructions are independent of any presentation</li> <li>Browsers and assistive technologies provide settings to customize the presentation</li> </ul> <p>Meeting this requirement allows content to be correctly read aloud, enlarged, or adapted to meet the needs and preferences of different people. For instance, it can be presented using custom color combinations, text size, or other styling to facilitate reading. This requirement also facilitates other forms of adaptation, including automatic generation of page outlines and summaries to help people get an overview and to focus on particular parts more easily.</p> <details><summary> <h4 class="no_toc" id="accessibility-requirements-related-to-adaptability-links-to-technical-specification">Accessibility requirements related to adaptability (links to technical specification)</h4> </summary> <div> <p><strong>WCAG</strong></p> <ul> <li><a href="https://www.w3.org/WAI/WCAG22/quickref/#adaptable">Guideline 1.3 - Adaptable</a></li> </ul> <p><strong>UAAG</strong></p> <ul> <li><a href="https://www.w3.org/TR/UAAG20/#gl-text-config">Guideline 1.4 - Text configuration</a></li> <li><a href="https://www.w3.org/TR/UAAG20/#gl-volume-config">Guideline 1.5 - Volume configuration</a></li> <li><a href="https://www.w3.org/TR/UAAG20/#gl-speech-config">Guideline 1.6 - Synthesized speech configuration</a></li> <li><a href="https://www.w3.org/TR/UAAG20/#gl-style-sheets-config">Guideline 1.7 - User style sheet configuration</a></li> <li><a href="https://www.w3.org/TR/UAAG20/#gl-alternative-views">Guideline 1.9 - Alternative views</a></li> <li><a href="https://www.w3.org/TR/UAAG20/#gl-info-link">Guideline 1.10 - Element information</a></li> </ul> <p><strong>ATAG</strong></p> <ul> <li><a href="https://www.w3.org/TR/ATAG20/#principle_a1">Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines</a></li> <li><a href="https://www.w3.org/TR/ATAG20/#gl_a22">Guideline A.2.2: (For the authoring tool user interface) Ensure that editing-view presentation can be programmatically determined</a></li> <li><a href="https://www.w3.org/TR/ATAG20/#gl_a37">Guideline A.3.7: (For the authoring tool user interface) Ensure that previews are at least as accessible as in-market user agents</a></li> <li><a href="https://www.w3.org/TR/ATAG20/#part_b">Part B. Support the production of accessible content</a></li> </ul> </div> </details> <details><summary> <h4 class="no_toc" id="stories-related-to-adaptability">Stories related to adaptability</h4> </summary> <div> <ul> <li><a href="/WAI/people-use-web/user-stories/story-one/">Ade, reporter with limited use of his arms</a></li> <li><a href="/WAI/people-use-web/user-stories/story-two/">Ian, data entry clerk with autism</a></li> <li><a href="/WAI/people-use-web/user-stories/story-four/">Lexie, online shopper who cannot distinguish between certain colors (color blindness)</a></li> <li><a href="/WAI/people-use-web/user-stories/story-five/">Sophie, basketball fan with Down syndrome</a></li> <li><a href="/WAI/people-use-web/user-stories/story-seven/">Marta, marketing assistant who is deaf and blind</a></li> <li><a href="/WAI/people-use-web/user-stories/story-eight/">Stefan, student with attention deficit hyperactivity disorder and dyslexia</a></li> <li><a href="/WAI/people-use-web/user-stories/story-nine/">Elias, retiree with low vision, hand tremor, and mild short-term memory loss</a></li> </ul> </div> </details> <h3 id="distinguishable">Content is easier to see and hear</h3> <p>Distinguishable content is easier to see and hear. Such content includes:</p> <ul> <li>Color is not used as the only way of conveying information or identifying content</li> <li>Default foreground and background color combinations provide sufficient contrast</li> <li>When users resize text up to 400% or change text spacing, no information is lost</li> <li>Text reflows in small windows (“viewports”) and when users make the text larger</li> <li>Images of text are resizable, replaced with actual text, or avoided where possible</li> <li>Users can pause, stop, or adjust the volume of audio that is played on a website</li> <li>Background audio is low or can be turned off, to avoid interference or distraction</li> </ul> <p>Meeting this requirement helps separate foreground from background, to make important information more distinguishable. This includes considerations for people who do not use assistive technologies and for people using assistive technologies who may observe interference from prominent audio or visual content in the background. For instance, many people with color blindness do not use any particular tools and rely on a proper design that provides sufficient color contrast between text and its surrounding background. For others, audio that is automatically played could interfere with text-to-speech or with <a href="/WAI/teach-advocate/accessible-presentations/#ald" title="definition">assistive listening devices (ALDs)</a>.</p> <details><summary> <h4 class="no_toc" id="accessibility-requirements-related-to-distinguishability-links-to-technical-specification">Accessibility requirements related to distinguishability (links to technical specification)</h4> </summary> <div> <p><strong>WCAG</strong></p> <ul> <li><a href="https://www.w3.org/WAI/WCAG22/quickref/#distinguishable">Guideline 1.4 - Distinguishable</a></li> </ul> <p><strong>UAAG</strong></p> <ul> <li><a href="https://www.w3.org/TR/UAAG20/#gl-interaction-highlight">Guideline 1.3 - Highlighting</a></li> <li><a href="https://www.w3.org/TR/UAAG20/#gl-text-config">Guideline 1.4 - Text configuration</a></li> <li><a href="https://www.w3.org/TR/UAAG20/#gl-volume-config">Guideline 1.5 - Volume configuration</a></li> <li><a href="https://www.w3.org/TR/UAAG20/#gl-speech-config">Guideline 1.6 - Synthesized speech configuration</a></li> <li><a href="https://www.w3.org/TR/UAAG20/#gl-style-sheets-config">Guideline 1.7 - User style sheet configuration</a></li> <li><a href="https://www.w3.org/TR/UAAG20/#gl-viewport-orient">Guideline 1.8 - Orientation in viewports</a></li> <li><a href="https://www.w3.org/TR/UAAG20/#gl-alternative-views">Guideline 1.9 - Alternative views</a></li> <li><a href="https://www.w3.org/TR/UAAG20/#gl-info-link">Guideline 1.10 - Element information</a></li> </ul> <p><strong>ATAG</strong></p> <ul> <li><a href="https://www.w3.org/TR/ATAG20/#principle_a1">Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines</a></li> <li><a href="https://www.w3.org/TR/ATAG20/#gl_a37">Guideline A.3.7: (For the authoring tool user interface) Ensure that previews are at least as accessible as in-market user agents</a></li> <li><a href="https://www.w3.org/TR/ATAG20/#part_b">Part B. Support the production of accessible content</a></li> </ul> </div> </details> <details><summary> <h4 class="no_toc" id="stories-related-to-distinguishability">Stories related to distinguishability</h4> </summary> <div> <ul> <li><a href="/WAI/people-use-web/user-stories/story-two/">Ian, data entry clerk with autism</a></li> <li><a href="/WAI/people-use-web/user-stories/story-three/">Lakshmi, senior accountant who is blind</a></li> <li><a href="/WAI/people-use-web/user-stories/story-four/">Lexie, online shopper who cannot distinguish between certain colors (color blindness)</a></li> <li><a href="/WAI/people-use-web/user-stories/story-six/">Dhruv, older adult student who is deaf</a></li> <li><a href="/WAI/people-use-web/user-stories/story-seven/">Marta, marketing assistant who is deaf and blind</a></li> <li><a href="/WAI/people-use-web/user-stories/story-nine/">Elias, retiree with low vision, hand tremor, and mild short-term memory loss</a></li> </ul> </div> </details> <h2 id="operable">Operable user interface and navigation</h2> <h3 id="keyboard">Functionality is available from a keyboard</h3> <p>Many people do not use the mouse and rely on the keyboard to interact with the Web. This requires keyboard access to all functionality, including form controls, input, and other user interface components.</p> <p>Keyboard accessibility includes:</p> <ul> <li>All functionality that is available by mouse is also available by keyboard</li> <li>Keyboard focus does not get trapped in any part of the content</li> <li>Web browsers, authoring tools, and other tools provide keyboard support</li> </ul> <p>Meeting this requirement helps keyboard users, including people using alternative keyboards such as keyboards with ergonomic layouts, on-screen keyboards, or switch devices. It also helps people using voice recognition (speech input) to operate websites and to dictate text through the keyboard interface.</p> <details><summary> <h4 class="no_toc" id="accessibility-requirements-related-to-keyboard-accessibility-links-to-technical-specification">Accessibility requirements related to keyboard accessibility (links to technical specification)</h4> </summary> <div> <p><strong>WCAG</strong></p> <ul> <li><a href="https://www.w3.org/WAI/WCAG22/quickref/#keyboard-accessible">Guideline 2.1 - Keyboard accessible</a></li> </ul> <p><strong>UAAG</strong></p> <ul> <li><a href="https://www.w3.org/TR/UAAG20/#gl-keyboard-access">Guideline 2.1 - Keyboard access</a></li> <li><a href="https://www.w3.org/TR/UAAG20/#gl-sequential-navigation">Guideline 2.2 - Sequential navigation</a></li> <li><a href="https://www.w3.org/TR/UAAG20/#gl-direct-navigation-and-activation">Guideline 2.3 - Direct navigation and activation</a></li> <li><a href="https://www.w3.org/TR/UAAG20/#gl-other-devices">Guideline 2.11 - Other Input Devices</a></li> </ul> <p><strong>ATAG</strong></p> <ul> <li><a href="https://www.w3.org/TR/ATAG20/#principle_a1">Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines</a></li> <li><a href="https://www.w3.org/TR/ATAG20/#gl_a31">Guideline A.3.1: (For the authoring tool user interface) Provide keyboard access to authoring features</a></li> <li><a href="https://www.w3.org/TR/ATAG20/#part_b">Part B. Support the production of accessible content</a></li> </ul> </div> </details> <details><summary> <h4 class="no_toc" id="stories-related-to-keyboard-accessibility">Stories related to keyboard accessibility</h4> </summary> <div> <ul> <li><a href="/WAI/people-use-web/user-stories/story-one/">Ade, reporter with limited use of his arms</a></li> <li><a href="/WAI/people-use-web/user-stories/story-three/">Lakshmi, senior accountant who is blind</a></li> </ul> </div> </details> <h3 id="time">Users have enough time to read and use the content</h3> <p>Some people need more time than others to read and use the content. For instance, some people require more time to type text, understand instructions, operate controls, or to otherwise complete tasks on a website.</p> <p>Examples of providing enough time include providing mechanisms to:</p> <ul> <li>Stop, extend, or adjust time limits, except where necessary</li> <li>Pause, stop, or hide moving, blinking, or scrolling content</li> <li>Postpone or suppress interruptions, except where necessary</li> <li>Re-authenticate when a session expires without losing data</li> </ul> <details><summary> <h4 class="no_toc" id="accessibility-requirements-related-to-sufficient-time-links-to-technical-specification">Accessibility requirements related to sufficient time (links to technical specification)</h4> </summary> <div> <p><strong>WCAG</strong></p> <ul> <li><a href="https://www.w3.org/WAI/WCAG22/quickref/#enough-time">Guideline 2.2 - Enough time</a></li> </ul> <p><strong>UAAG</strong></p> <ul> <li><a href="https://www.w3.org/TR/UAAG20/#gl-time-independent">Guideline 2.8 - Time-independent interaction</a></li> <li><a href="https://www.w3.org/TR/UAAG20/#gl-control-inaccessible-content">Guideline 2.10 - Time-based media</a></li> </ul> <p><strong>ATAG</strong></p> <ul> <li><a href="https://www.w3.org/TR/ATAG20/#principle_a1">Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines</a></li> <li><a href="https://www.w3.org/TR/ATAG20/#gl_a32">Guideline A.3.2: (For the authoring tool user interface) Provide authors with enough time</a></li> <li><a href="https://www.w3.org/TR/ATAG20/#part_b">Part B. Support the production of accessible content</a></li> </ul> </div> </details> <details><summary> <h4 class="no_toc" id="stories-related-to-sufficient-time">Stories related to sufficient time</h4> </summary> <div> <ul> <li><a href="/WAI/people-use-web/user-stories/story-one/">Ade, reporter with limited use of his arms</a></li> <li><a href="/WAI/people-use-web/user-stories/story-five/">Sophie, basketball fan with Down syndrome</a></li> <li><a href="/WAI/people-use-web/user-stories/story-seven/">Marta, marketing assistant who is deaf and blind</a></li> <li><a href="/WAI/people-use-web/user-stories/story-eight/">Stefan, student with attention deficit hyperactivity disorder and dyslexia</a></li> <li><a href="/WAI/people-use-web/user-stories/story-nine/">Elias, retiree with low vision, hand tremor, and mild short-term memory loss</a></li> </ul> </div> </details> <h3 id="safe">Content does not cause seizures and physical reactions</h3> <p>Content that flashes at certain rates or patterns can cause photosensitive reactions, including seizures. Flashing content is ideally avoided entirely or only used in a way that does not cause known risks. Also animations and moving content can cause discomfort and physical reactions.</p> <p>Examples of avoiding causing seizures and physical reactions:</p> <ul> <li>Do not include content that flashes at particular rates and patterns</li> <li>Warn users before flashing content is presented, and provide alternatives</li> <li>Provide mechanisms to switch off animations, unless they are essential</li> </ul> <details><summary> <h4 class="no_toc" id="accessibility-requirements-related-to-seizures-links-to-technical-specification">Accessibility requirements related to seizures (links to technical specification)</h4> </summary> <div> <p><strong>WCAG</strong></p> <ul> <li><a href="https://www.w3.org/WAI/WCAG22/quickref/#seizures-and-physical-reactions">Guideline 2.3 - Seizures</a></li> </ul> <p><strong>UAAG</strong></p> <ul> <li><a href="https://www.w3.org/TR/UAAG20/#gl-prevent-flash">Guideline 2.9 - Flashing</a></li> </ul> <p><strong>ATAG</strong></p> <ul> <li><a href="https://www.w3.org/TR/ATAG20/#principle_a1">Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines</a></li> <li><a href="https://www.w3.org/TR/ATAG20/#gl_a33">Guideline A.3.3: (For the authoring tool user interface) Help authors avoid flashing that could cause seizures</a></li> <li><a href="https://www.w3.org/TR/ATAG20/#part_b">Part B. Support the production of accessible content</a></li> </ul> </div> </details> <details><summary> <h4 class="no_toc" id="stories-related-to-seizures">Stories related to seizures</h4> </summary> <div> <ul> <li><a href="/WAI/people-use-web/user-stories/story-two/">Ian, data entry clerk with autism</a></li> </ul> </div> </details> <h3 id="navigable">Users can easily navigate, find content, and determine where they are</h3> <p>Well organized content helps users to orient themselves and to navigate effectively. Such content includes:</p> <ul> <li>Pages have clear titles and are organized using descriptive section headings</li> <li>There is more than one way to find relevant pages within a set of web pages</li> <li>Users are informed about their current location within a set of related pages</li> <li>There are ways to bypass blocks of content that are repeated on multiple pages</li> <li>The keyboard focus is visible, and the focus order follows a meaningful sequence</li> <li>The purpose of a link is evident, ideally even when the link is viewed on its own</li> </ul> <p>Meeting this requirement helps people to navigate through web pages in different ways, depending on their particular needs and preferences. For instance, while some people rely on hierarchical navigation structures such as menu bars to find specific web pages, others rely on search functions on websites instead. Some people may be seeing the content while others may be hearing it or seeing and hearing it at the same time. Some people may be using the content with only a mouse or a keyboard, while others may be using both.</p> <details><summary> <h4 class="no_toc" id="accessibility-requirements-related-to-navigation-links-to-technical-specification">Accessibility requirements related to navigation (links to technical specification)</h4> </summary> <div> <p><strong>WCAG</strong></p> <ul> <li><a href="https://www.w3.org/WAI/WCAG22/quickref/#navigable">Guideline 2.4 - Navigable</a></li> </ul> <p><strong>UAAG</strong></p> <ul> <li><a href="https://www.w3.org/TR/UAAG20/#gl-sequential-navigation">Guideline 2.2 - Sequential navigation</a></li> <li><a href="https://www.w3.org/TR/UAAG20/#gl-direct-navigation-and-activation">Guideline 2.3 - Direct navigation and activation</a></li> <li><a href="https://www.w3.org/TR/UAAG20/#gl-search-text">Guideline 2.4 - Text search</a></li> <li><a href="https://www.w3.org/TR/UAAG20/#gl-nav-structure">Guideline 2.5 - Structural navigation</a></li> <li><a href="https://www.w3.org/TR/UAAG20/#gl-configure-controls">Guideline 2.7 - Graphical controls</a></li> </ul> <p><strong>ATAG</strong></p> <ul> <li><a href="https://www.w3.org/TR/ATAG20/#principle_a1">Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines</a></li> <li><a href="https://www.w3.org/TR/ATAG20/#gl_a22">Guideline A.2.2: (For the authoring tool user interface) Ensure that editing-view presentation can be programmatically determined</a></li> <li><a href="https://www.w3.org/TR/ATAG20/#gl_a34">Guideline A.3.4: (For the authoring tool user interface) Enhance navigation and editing via content structure</a></li> <li><a href="https://www.w3.org/TR/ATAG20/#gl_a35">Guideline A.3.5: (For the authoring tool user interface) Provide text search of the content</a></li> <li><a href="https://www.w3.org/TR/ATAG20/#part_b">Part B. Support the production of accessible content</a></li> </ul> </div> </details> <details><summary> <h4 class="no_toc" id="stories-related-to-navigation">Stories related to navigation</h4> </summary> <div> <ul> <li><a href="/WAI/people-use-web/user-stories/story-one/">Ade, reporter with limited use of his arms</a></li> <li><a href="/WAI/people-use-web/user-stories/story-two/">Ian, data entry clerk with autism</a></li> <li><a href="/WAI/people-use-web/user-stories/story-three/">Lakshmi, senior accountant who is blind</a></li> <li><a href="/WAI/people-use-web/user-stories/story-five/">Sophie, basketball fan with Down syndrome</a></li> <li><a href="/WAI/people-use-web/user-stories/story-seven/">Marta, marketing assistant who is deaf and blind</a></li> <li><a href="/WAI/people-use-web/user-stories/story-eight/">Stefan, student with attention deficit hyperactivity disorder and dyslexia</a></li> <li><a href="/WAI/people-use-web/user-stories/story-nine/">Elias, retiree with low vision, hand tremor, and mild short-term memory loss</a></li> </ul> </div> </details> <h3 id="modalities">Users can use different input modalities beyond keyboard</h3> <p>Input modalities beyond keyboard, such as touch activation, voice recognition (speech input), and gestures make content easier to use for many people. Yet not everyone can use each of these input modalities, and to the same degree. Particular design considerations maximize the benefit of these input modalities. This includes:</p> <ul> <li>Gestures that require dexterity or fine movement have alternatives that do not require high dexterity</li> <li>Components are designed to avoid accidental activation, for example by providing undo functionality</li> <li>Labels presented to users match corresponding object names in the code, to support activation by voice</li> <li>Functionality that is activated by movement can also be activated through user interface components</li> <li>Buttons, links, and other active components are large enough to make them easier to activate by touch</li> </ul> <p>Meeting this requirement makes the content easier to use for many people with a wide range of abilities using a wide range of devices. This includes content used on mobile phones, tablet computers, and self-service terminals such as ticketing machines.</p> <details><summary> <h4 class="no_toc" id="accessibility-requirements-related-to-input-modalities-links-to-technical-specification">Accessibility requirements related to input modalities (links to technical specification)</h4> </summary> <div> <p><strong>WCAG</strong></p> <ul> <li><a href="https://www.w3.org/WAI/WCAG22/quickref/#input-modalities">Guideline 2.5 - Input Modalities</a></li> </ul> </div> </details> <details><summary> <h2 id="understandable">Understandable information and user interface</h2> <h3 id="readable">Text is readable and understandable</h3> <p>Content authors need to ensure that text content is readable and understandable to the broadest audience possible, including when it is read aloud by text-to-speech. Such content includes:</p> <ul> <li>Identifying the primary language of a web page, such as Arabic, Dutch, or Korean</li> <li>Identifying the language of text passages, phrases, or other parts of a web page</li> <li>Providing definitions for any unusual words, phrases, idioms, and abbreviations</li> <li>Using the clearest and simplest language possible, or providing simplified versions</li> </ul> <p>Meeting this requirement helps software, including assistive technology, to process text content correctly. For instance, this requirement helps software to read the content aloud, to generate page summaries, and to provide definitions for unusual words such as technical jargon. It also helps people who have difficulty understanding more complex sentences, phrases, and vocabulary. In particular, it helps people with different types of cognitive disabilities.</p> <details><summary> <h4 class="no_toc" id="accessibility-requirements-related-to-readability-links-to-technical-specification">Accessibility requirements related to readability (links to technical specification)</h4> </summary> <div> <p><strong>WCAG</strong></p> <ul> <li><a href="https://www.w3.org/WAI/WCAG22/quickref/#readable">Guideline 3.1 - Readable</a></li> </ul> <p><strong>ATAG</strong></p> <ul> <li><a href="https://www.w3.org/TR/ATAG20/#principle_a1">Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines</a></li> <li><a href="https://www.w3.org/TR/ATAG20/#gl_b42">Guideline A.4.2: (For the authoring tool user interface) Document the user interface, including all accessibility features</a></li> <li><a href="https://www.w3.org/TR/ATAG20/#part_b">Part B. Support the production of accessible content</a></li> </ul> </div> </details> <details><summary> <h4 class="no_toc" id="stories-related-to-readability">Stories related to readability</h4> </summary> <div> <ul> <li><a href="/WAI/people-use-web/user-stories/story-two/">Ian, data entry clerk with autism</a></li> <li><a href="/WAI/people-use-web/user-stories/story-three/">Lakshmi, senior accountant who is blind</a></li> <li><a href="/WAI/people-use-web/user-stories/story-five/">Sophie, basketball fan with Down syndrome</a></li> <li><a href="/WAI/people-use-web/user-stories/story-six/">Dhruv, older adult student who is deaf</a></li> <li><a href="/WAI/people-use-web/user-stories/story-eight/">Stefan, student with attention deficit hyperactivity disorder and dyslexia</a></li> <li><a href="/WAI/people-use-web/user-stories/story-nine/">Elias, retiree with low vision, hand tremor, and mild short-term memory loss</a></li> </ul> </div> </details> <h3 id="predictable">Content appears and operates in predictable ways</h3> <p>Many people rely on predictable user interfaces and are disoriented or distracted by inconsistent appearance or behavior. Examples of making content more predictable include:</p> <ul> <li>Navigation mechanisms that are repeated on multiple pages appear in the same place each time</li> <li>User interface components that are repeated on web pages have the same labels each time</li> <li>Significant changes on a web page do not happen without the consent of the user</li> </ul> <p>Meeting this requirement helps people to quickly learn the functionality and navigation mechanisms provided on a website, and to operate them according to their specific needs and preferences. For instance, some people assign personalized shortcut keys to functions they frequently use to enhance keyboard navigation. Others memorize the steps to reach certain pages or to complete processes on a website. Both rely on predictable and consistent functionality.</p> <details><summary> <h4 class="no_toc" id="accessibility-requirements-related-to-predictability-links-to-technical-specification">Accessibility requirements related to predictability (links to technical specification)</h4> </summary> <div> <p><strong>WCAG</strong></p> <ul> <li><a href="https://www.w3.org/WAI/WCAG22/quickref/#predictable">Guideline 3.2 - Predictable</a></li> </ul> <p><strong>UAAG</strong></p> <ul> <li><a href="https://www.w3.org/TR/UAAG20/#gl-predictable-operation">Guideline 3.3 - Predictable</a></li> </ul> <p><strong>ATAG</strong></p> <ul> <li><a href="https://www.w3.org/TR/ATAG20/#principle_a1">Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines</a></li> <li><a href="https://www.w3.org/TR/ATAG20/#gl_a22">Guideline A.2.2: (For the authoring tool user interface) Ensure that editing-view presentation can be programmatically determined</a></li> <li><a href="https://www.w3.org/TR/ATAG20/#gl_b42">Guideline A.4.2: (For the authoring tool user interface) Document the user interface, including all accessibility features</a></li> <li><a href="https://www.w3.org/TR/ATAG20/#part_b">Part B. Support the production of accessible content</a></li> </ul> </div> </details> <details><summary> <h4 class="no_toc" id="stories-related-to-predictability">Stories related to predictability</h4> </summary> <div> <ul> <li><a href="/WAI/people-use-web/user-stories/story-one/">Ade, reporter with limited use of his arms</a></li> <li><a href="/WAI/people-use-web/user-stories/story-two/">Ian, data entry clerk with autism</a></li> <li><a href="/WAI/people-use-web/user-stories/story-three/">Lakshmi, senior accountant who is blind</a></li> <li><a href="/WAI/people-use-web/user-stories/story-five/">Sophie, basketball fan with Down syndrome</a></li> <li><a href="/WAI/people-use-web/user-stories/story-seven/">Marta, marketing assistant who is deaf and blind</a></li> <li><a href="/WAI/people-use-web/user-stories/story-eight/">Stefan, student with attention deficit hyperactivity disorder and dyslexia</a></li> <li><a href="/WAI/people-use-web/user-stories/story-nine/">Elias, retiree with low vision, hand tremor, and mild short-term memory loss</a></li> </ul> </div> </details> <h3 id="tolerant">Users are helped to avoid and correct mistakes</h3> <p>Forms and other interaction can be confusing or difficult to use for many people, and, as a result, they may be more likely to make mistakes. Examples of helping users to avoid and correct mistakes include:</p> <ul> <li>Descriptive instructions, error messages, and suggestions for correction</li> <li>Context-sensitive help for more complex functionality and interaction</li> <li>Opportunity to review, correct, or reverse submissions if necessary</li> </ul> <p>Meeting this requirement helps people who do not see or hear the content, and may not recognize implicit relationships, sequences, and other cues. It also helps people who do not understand the functionality, are disoriented or confused, forget, or make mistakes using forms and interaction for any other reason.</p> <details><summary> <h4 class="no_toc" id="accessibility-requirements-related-to-input-assistance-links-to-technical-specification">Accessibility requirements related to input assistance (links to technical specification)</h4> </summary> <div> <p><strong>WCAG</strong></p> <ul> <li><a href="https://www.w3.org/WAI/WCAG22/quickref/#input-assistance">Guideline 3.3 - Input assistance</a></li> </ul> <p><strong>UAAG</strong></p> <ul> <li><a href="https://www.w3.org/TR/UAAG20/#gl-avoid-mistakes">Guideline 3.1 - Mistakes</a></li> </ul> <p><strong>ATAG</strong></p> <ul> <li><a href="https://www.w3.org/TR/ATAG20/#principle_a1">Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines</a></li> <li><a href="https://www.w3.org/TR/ATAG20/#gl_a22">Guideline A.2.2: (For the authoring tool user interface) Ensure that editing-view presentation can be programmatically determined</a></li> <li><a href="https://www.w3.org/TR/ATAG20/#gl_b41">Guideline A.4.1: (For the authoring tool user interface) Help authors avoid and correct mistakes</a></li> <li><a href="https://www.w3.org/TR/ATAG20/#part_b">Part B. Support the production of accessible content</a></li> </ul> </div> </details> <details><summary> <h4 class="no_toc" id="stories-related-to-input-assistance">Stories related to input assistance</h4> </summary> <div> <ul> <li><a href="/WAI/people-use-web/user-stories/story-one/">Ade, reporter with limited use of his arms</a></li> <li><a href="/WAI/people-use-web/user-stories/story-five/">Sophie, basketball fan with Down syndrome</a></li> <li><a href="/WAI/people-use-web/user-stories/story-eight/">Stefan, student with attention deficit hyperactivity disorder and dyslexia</a></li> <li><a href="/WAI/people-use-web/user-stories/story-nine/">Elias, retiree with low vision, hand tremor, and mild short-term memory loss</a></li> </ul> </div> </details> <h2 id="robust">Robust content and reliable interpretation</h2> <h3 id="compatible">Content is compatible with current and future user tools</h3> <p>Robust content is compatible with different browsers, assistive technologies, and other user agents. Examples of how this can be achieved include:</p> <ul> <li>Ensuring markup can be reliably interpreted, for instance by ensuring it is valid</li> <li>Providing a name, role, and value for non-standard user interface components</li> </ul> <p>Meeting this requirement helps maximize compatibility with current and future user agents, including assistive technologies. In particular, it enables assistive technologies to process the content reliably, and to present or to operate it in different ways. This includes non-standard (scripted) buttons, input fields, and other controls.</p> <details><summary> <h4 class="no_toc" id="accessibility-requirements-related-to-compatibility-links-to-technical-specification">Accessibility requirements related to compatibility (links to technical specification)</h4> </summary> <div> <p><strong>WCAG</strong></p> <ul> <li><a href="https://www.w3.org/WAI/WCAG22/quickref/#compatible">Guideline 4.1 - Compatible</a></li> </ul> <p><strong>UAAG</strong></p> <ul> <li><a href="https://www.w3.org/TR/UAAG20/#gl-store-prefs">Guideline 2.6 - Preference settings</a></li> <li><a href="https://www.w3.org/TR/UAAG20/#gl-AT-access">Guideline 4.1 - Assistive technology</a></li> <li><a href="https://www.w3.org/TR/UAAG20/#gl-obs-env-conventions">Guideline 5.1 - Follow specifications</a></li> </ul> <p><strong>ATAG</strong></p> <ul> <li><a href="https://www.w3.org/TR/ATAG20/#principle_a1">Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines</a></li> <li><a href="https://www.w3.org/TR/ATAG20/#part_b">Part B. Support the production of accessible content</a></li> </ul> </div> </details> <details><summary> <h4 class="no_toc" id="stories-related-to-compatibility">Stories related to compatibility</h4> </summary> <div> <ul> <li><a href="/WAI/people-use-web/user-stories/story-one/">Ade, reporter with limited use of his arms</a></li> <li><a href="/WAI/people-use-web/user-stories/story-three/">Lakshmi, senior accountant who is blind</a></li> <li><a href="/WAI/people-use-web/user-stories/story-four/">Lexie, online shopper who cannot distinguish between certain colors (color blindness)</a></li> <li><a href="/WAI/people-use-web/user-stories/story-five/">Sophie, basketball fan with Down syndrome</a></li> <li><a href="/WAI/people-use-web/user-stories/story-seven/">Marta, marketing assistant who is deaf and blind</a></li> <li><a href="/WAI/people-use-web/user-stories/story-eight/">Stefan, student with attention deficit hyperactivity disorder and dyslexia</a></li> <li><a href="/WAI/people-use-web/user-stories/story-nine/">Elias, retiree with low vision, hand tremor, and mild short-term memory loss</a></li> </ul> </div> </details> <div class="excol-all"></div> </summary></details> <aside class="box box-icon box-space-above" id="helpimprove" aria-label="feedback"><header class="box-h box-h-icon box-h-space-above box-h-icon"> <svg focusable="false" aria-hidden="true" class="icon-comments "><use xlink:href="/WAI/assets/images/icons.svg#icon-comments"></use></svg> <h2> Help improve this page </h2></header><div class="box-i"><p>Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list <a href="mailto:wai@w3.org?body=%5Binclude%20a%20relevant%20email%20Subject%5D%0A%0A%5Bput%20comment%20here...%5D%0A%0AI%20give%20permission%20to%20share%20this%20to%20a%20publicly-archived%20e-mail%20list.">wai@w3.org</a> or via GitHub.</p> <div class="button-group"> <a href="mailto:wai@w3.org?body=%5Binclude%20a%20relevant%20email%20Subject%5D%0A%0A%5Bput%20comment%20here...%5D%0A%0AI%20give%20permission%20to%20share%20this%20to%20a%20publicly-archived%20e-mail%20list." class="button"><span>E-mail</span></a><a href=" https://github.com/w3c/wai-website/edit/main/pages/fundamentals/accessibility-principles/index.md " class="button"><span>Fork & Edit on GitHub</span></a><a href="https://github.com/w3c/wai-website/issues/new?template=content-issue.yml&wai-resource-id=wai-accessibility-principles&wai-url=https://www.w3.org/WAI/fundamentals/accessibility-principles/" class="button"><span>New GitHub Issue</span></a></div></div></aside> <a class="button button-backtotop" href="#top"><span><svg focusable="false" aria-hidden="true" class="icon-arrow-up "><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-up"></use></svg> Back to Top</span></a> </main> </div> <footer id="wai-site-footer" class="page-footer default-grid" aria-label="Page"> <div class="inner"><p><strong>Updated:</strong> 15 July 2024. <a href="/WAI/fundamentals/accessibility-principles/changelog/">Latest changes</a>.</p><p><strong>Editors:</strong> <a href="https://www.w3.org/People/shadi/">Shadi Abou Zahra</a>. <a href="https://www.w3.org/WAI/intro/people-use-web/acknowledgments">Acknowledgments</a>.</p> <p>Developed by the Education and Outreach Working Group (<a href="https//www.w3.org/WAI/EO/">EOWG</a>). Previously developed with the <a href="https://www.w3.org/WAI/EO/2008/wai-age-tf">WAI-AGE Task Force</a>, with support of the <a href="https://www.w3.org/WAI/WAI-AGE/">WAI-AGE Project</a>.</p> </div> </footer> <footer class="site-footer grid-4q" aria-label="Site"> <div class="q1-start q3-end about"> <div> <p><a class="largelink" href="https://www.w3.org/WAI/" lang="en" dir="auto" translate="no">W3C Web Accessibility Initiative (WAI)</a></p> <p>Strategies, standards, and supporting resources to make the Web accessible to people with disabilities.</p> </div> <div class="social" lang="en" dir="auto" translate="no"> <ul> <li><a href="https://w3c.social/@wai"><svg focusable="false" aria-hidden="true" class="icon-mastodon "><use xlink:href="/WAI/assets/images/icons.svg#icon-mastodon"></use></svg> Mastodon</a></li> <li><a href="https://www.linkedin.com/company/w3c-wai/"><svg focusable="false" aria-hidden="true" class="icon-linkedin "><use xlink:href="/WAI/assets/images/icons.svg#icon-linkedin"></use></svg> LinkedIn</a></li> <li><a href="https://www.w3.org/WAI/feed.xml"><svg focusable="false" aria-hidden="true" class="icon-rss "><use xlink:href="/WAI/assets/images/icons.svg#icon-rss"></use></svg> Feed</a></li> <li><a href="https://www.youtube.com/channel/UCU6ljj3m1fglIPjSjs2DpRA/playlists/"><svg focusable="false" aria-hidden="true" class="icon-youtube "><use xlink:href="/WAI/assets/images/icons.svg#icon-youtube"></use></svg> YouTube</a></li> <li><a href="https://www.w3.org/WAI/news/subscribe/" class="button">Get News in Email</a></li> </ul> </div> <div lang="en" dir="auto" translate="no"> <p>Copyright © 2025 World Wide Web Consortium (<a href="https://www.w3.org/">W3C</a><sup>®</sup>). See <a href="/WAI/about/using-wai-material/">Permission to Use WAI Material</a>.</p> </div> </div> <div lang="en" dir="auto" translate="no" class="q4-start q4-end"> <ul style="margin-bottom:0"> <li><a href="/WAI/about/contacting/">Contact WAI</a></li> <li><a href="/WAI/sitemap/">Site Map</a></li> <li><a href="/WAI/news/">News</a></li> <li><a href="/WAI/sitemap/#archive">Archive</a></li> <li><a href="/WAI/about/accessibility-statement/">Accessibility Statement</a></li> <li><a href="/WAI/translations/"> Translations</a></li> <li><a href="/WAI/roles/">Resources for Roles</a></li> </ul> </div> </footer> <script src="/WAI/assets/scripts/details4everybody.js?1739541174349523255"></script>  <script src="/WAI/assets/scripts/svg4everybody.js?1739541174349523255"></script> <script> svg4everybody(); </script><script> var translationStrings = {}; </script> </body> </html>