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?1732321439590790613"; document.body.appendChild(element); } window.addEventListener("load", downloadJSAtOnload, false); </script> <link rel="stylesheet" href="/WAI/assets/css/style.css?1732321439590790613"> <title> Designing for Web Accessibility – Tips for Getting Started | Web Accessibility Initiative (WAI) | W3C</title><link rel="stylesheet" href="/WAI/tips/css/tips.css?1732321439590790613"> <meta name="generator" content="Jekyll v4.3.3" /> <meta property="og:title" content="Designing for Web Accessibility – Tips for Getting Started" /> <meta name="author" content="W3C Web Accessibility Initiative (WAI)" /> <meta property="og:locale" content="en" /> <meta name="description" content="Summary" /> <meta property="og:description" content="Summary" /> <link rel="canonical" href="https://www.w3.org/WAI/tips/designing/" /> <meta property="og:url" content="https://www.w3.org/WAI/tips/designing/" /> <meta property="og:site_name" content="Web Accessibility Initiative (WAI)" /> <meta property="og:type" content="article" /> <meta property="article:published_time" content="2024-11-23T00:23:59+00:00" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="twitter:title" content="Designing for Web Accessibility – Tips for Getting Started" /> <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":"BlogPosting","author":{"@type":"Person","name":"W3C Web Accessibility Initiative (WAI)"},"dateModified":"2024-11-23T00:23:59+00:00","datePublished":"2024-11-23T00:23:59+00:00","description":"Summary","headline":"Designing for Web Accessibility – Tips for Getting Started","mainEntityOfPage":{"@type":"WebPage","@id":"https://www.w3.org/WAI/tips/designing/"},"url":"https://www.w3.org/WAI/tips/designing/"}</script>  <meta name="twitter:image" property="og:image" content="https://www.w3.org/WAI/assets/images/social-sharing-default.jpg"> <link rel="alternate" type="application/rss+xml" href="/WAI/feed.xml"> </head> <body id="top" class="page-designing-for-web-accessibility-tips-for-getting-started resource-tips"> <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/tips/designing/fr" lang="fr" dir="auto" translate="no">français</a></li> <li><a style="text-transform: capitalize;" href="/WAI/tips/designing/id" lang="id" dir="auto" translate="no">Bahasa Indonesia</a></li> <li><a style="text-transform: capitalize;" href="/WAI/tips/designing/ja" lang="ja" 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/design-develop/"><span>Design & Develop</span></a></li><li><a lang="en" href="/WAI/tips/designing/" aria-current="page"><span>Tips for Designing</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/design-develop/" class="page-link"><span>Design & Develop</span></a></li><li> <a lang="en" href="/WAI/tips/writing/" class="page-link"><span>Tips for Writing</span></a></li><li> <a lang="en" href="/WAI/tips/designing/" aria-current="page" class="page-link"><span>Tips for Designing</span></a></li><li> <a lang="en" href="/WAI/tips/developing/" class="page-link"><span>Tips for Developing</span></a></li><li> <a lang="en" href="/WAI/media/av/" class="page-link"><span>Audio & Video Media</span></a><ul><li> <a lang="en" href="/WAI/media/av/users-orgs/" class="page-link"><span>User Needs</span></a></li><li> <a lang="en" href="/WAI/media/av/planning/" class="page-link"><span>Planning</span></a></li><li> <a lang="en" href="/WAI/media/av/av-content/" class="page-link"><span>Audio Content & Video Content</span></a></li><li> <a lang="en" href="/WAI/media/av/description/" class="page-link"><span>Description</span></a></li><li> <a lang="en" href="/WAI/media/av/captions/" class="page-link"><span>Captions/Subtitles</span></a></li><li> <a lang="en" href="/WAI/media/av/transcripts/" class="page-link"><span>Transcripts</span></a></li><li> <a lang="en" href="/WAI/media/av/transcribing/" class="page-link"><span>Transcribing Audio to Text</span></a></li><li> <a lang="en" href="/WAI/media/av/sign-languages/" class="page-link"><span>Sign Languages</span></a></li><li> <a lang="en" href="/WAI/media/av/player/" class="page-link"><span>Media Player</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/" class="page-link"><span>Tutorials</span></a><ul><li> <a lang="en" href="/WAI/tutorials/page-structure/" class="page-link"><span>Page Structure</span></a><ul><li> <a lang="en" href="/WAI/tutorials/page-structure/regions/" class="page-link"><span>Page Regions</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/labels/" class="page-link"><span>Labeling Regions</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/headings/" class="page-link"><span>Headings</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/content/" class="page-link"><span>Content Structure</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/example/" class="page-link"><span>Full Example</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/menus/" class="page-link"><span>Menus</span></a><ul><li> <a lang="en" href="/WAI/tutorials/menus/structure/" class="page-link"><span>Structure</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/styling/" class="page-link"><span>Styling</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/flyout/" class="page-link"><span>Fly-Out Menus</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/application-menus/" class="page-link"><span>Application Menus</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/application-menus-code/" class="page-link"><span>Application Menu Example & Code</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/images/" class="page-link"><span>Images</span></a><ul><li> <a lang="en" href="/WAI/tutorials/images/informative/" class="page-link"><span>Informative Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/decorative/" class="page-link"><span>Decorative Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/functional/" class="page-link"><span>Functional Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/textual/" class="page-link"><span>Images of Text</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/complex/" class="page-link"><span>Complex Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/groups/" class="page-link"><span>Groups of Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/imagemap/" class="page-link"><span>Image Maps</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/decision-tree/" class="page-link"><span>An <code style="color: inherit;">alt</code> Decision Tree</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/tips/" class="page-link"><span>Tips and Tricks</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/tables/" class="page-link"><span>Tables</span></a><ul><li> <a lang="en" href="/WAI/tutorials/tables/one-header/" class="page-link"><span>One Header</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/two-headers/" class="page-link"><span>Two Headers</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/irregular/" class="page-link"><span>Irregular Headers</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/multi-level/" class="page-link"><span>Multi-level Headers</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/caption-summary/" class="page-link"><span>Caption & Summary</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/tips/" class="page-link"><span>Tips and Tricks</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/forms/" class="page-link"><span>Forms</span></a><ul><li> <a lang="en" href="/WAI/tutorials/forms/labels/" class="page-link"><span>Labeling Controls</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/grouping/" class="page-link"><span>Grouping Controls</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/instructions/" class="page-link"><span>Form Instructions</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/validation/" class="page-link"><span>Validating Input</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/notifications/" class="page-link"><span>User Notifications</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/multi-page/" class="page-link"><span>Multi-page Forms</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/custom-controls/" class="page-link"><span>Custom Controls</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/carousels/" class="page-link"><span>Carousels</span></a><ul><li> <a lang="en" href="/WAI/tutorials/carousels/structure/" class="page-link"><span>Structure</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/functionality/" class="page-link"><span>Functionality</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/animations/" class="page-link"><span>Animations</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/styling/" class="page-link"><span>Styling</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/working-example/" class="page-link"><span>Working Example</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/full-code/" class="page-link"><span>Complete Code</span></a></li></ul></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/tips/designing/fr" dir="auto" translate="no" lang="fr">français</a></li><li style="margin-bottom: 2px;"><a style="text-transform: capitalize;" href="/WAI/tips/designing/id" dir="auto" translate="no" lang="id">Bahasa Indonesia</a></li><li style="margin-bottom: 2px;"><a style="text-transform: capitalize;" href="/WAI/tips/designing/ja" dir="auto" translate="no" lang="ja">日本語</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 class="in-resource"> <h1> <svg class="icon-in-title" aria-hidden="true"><use xlink:href="/WAI/content-images/tips/icons.svg#designing"></use></svg> Designing for Web Accessibility </h1><p>in <a lang="en" href="/WAI/tips/"><span>Tips for Getting Started</span></a></p></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 basic considerations to help you get started making your user interface design and visual design more accessible to people with disabilities. These tips are good practice to help you meet Web Content Accessibility Guidelines (WCAG) requirements. Follow the links to the related WCAG requirements, detailed background in the “Understanding” document, guidance from Tutorials, user stories, and more.</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="#provide-sufficient-contrast-between-foreground-and-background" id="markdown-toc-provide-sufficient-contrast-between-foreground-and-background">Provide sufficient contrast between foreground and background</a></li> <li><a href="#dont-use-color-alone-to-convey-information" id="markdown-toc-dont-use-color-alone-to-convey-information">Don’t use color alone to convey information</a></li> <li><a href="#ensure-that-interactive-elements-are-easy-to-identify" id="markdown-toc-ensure-that-interactive-elements-are-easy-to-identify">Ensure that interactive elements are easy to identify</a></li> <li><a href="#provide-clear-and-consistent-navigation-options" id="markdown-toc-provide-clear-and-consistent-navigation-options">Provide clear and consistent navigation options</a></li> <li><a href="#ensure-that-form-elements-include-clearly-associated-labels" id="markdown-toc-ensure-that-form-elements-include-clearly-associated-labels">Ensure that form elements include clearly associated labels</a></li> <li><a href="#provide-easily-identifiable-feedback" id="markdown-toc-provide-easily-identifiable-feedback">Provide easily identifiable feedback</a></li> <li><a href="#use-headings-and-spacing-to-group-related-content" id="markdown-toc-use-headings-and-spacing-to-group-related-content">Use headings and spacing to group related content</a></li> <li><a href="#create-designs-for-different-viewport-sizes" id="markdown-toc-create-designs-for-different-viewport-sizes">Create designs for different viewport sizes</a></li> <li><a href="#include-image-and-media-alternatives-in-your-design" id="markdown-toc-include-image-and-media-alternatives-in-your-design">Include image and media alternatives in your design</a></li> <li><a href="#provide-controls-for-content-that-starts-automatically" id="markdown-toc-provide-controls-for-content-that-starts-automatically">Provide controls for content that starts automatically</a></li> </ul> </div> </nav> <h2 id="provide-sufficient-contrast-between-foreground-and-background">Provide sufficient contrast between foreground and background</h2> <p>Foreground text needs to have sufficient contrast with background colors. This includes text on images, background gradients, buttons, and other elements. This does not apply for logos, or incidental text, such as text that happens to be in a photograph. The links below provide more information on the minimum contrast ratio as required by the <abbr>WCAG</abbr> and how to check contrast. “Contrast ratio” is a short version of the more technically correct term “luminance contrast ratio”.</p> <aside class="box box-example"><header class="box-h box-h-example"> <strong>Example:</strong> Contrast ratio</header><div class="box-i"> <div class="two-column"> <figure> <figcaption><svg focusable="false" aria-label="Wrong" class="icon-ex-circle "><use xlink:href="/WAI/assets/images/icons.svg#icon-ex-circle"></use></svg> Insufficient</figcaption> <div> <p style="color: #999;">Some people cannot read text if there is not sufficient contrast between the text and background. For others, bright colors (high luminance) are not readable; they need low luminance.</p> </div> </figure> <figure> <figcaption><svg focusable="false" aria-label="OK" class="icon-check-circle "><use xlink:href="/WAI/assets/images/icons.svg#icon-check-circle"></use></svg> Sufficient</figcaption> <div> <p class="pass">Some people cannot read text if there is not sufficient contrast between the text and background. For others, bright colors (high luminance) are not readable; they need low luminance.</p> </div> </figure> </div> </div></aside> <aside class="box box-simple"><header class="box-h box-h-simple"> More Information</header><div class="box-i"> <ul> <li><strong>WCAG</strong> <ul> <li><a href="/WAI/WCAG21/quickref/#contrast-minimum">Contrast (Minimum) 1.4.3</a> (<a href="/WAI/WCAG21/Understanding/contrast-minimum">Understanding 1.4.3</a>)</li> </ul> </li> <li><strong>User Stories</strong> <ul> <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-nine/">Elias, retiree with low vision, hand tremor, and mild short-term memory loss</a></li> </ul> </li> <li><strong>Easy Check</strong> <ul> <li><a href="/WAI/test-evaluate/preliminary/#contrast">How to check contrast ratio</a></li> </ul> </li> <li><strong>Support Tools</strong> <ul> <li><a href="/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#visual-audio-contrast-contrast-resources-head">List of tools to help determine contrast ratio</a></li> </ul> </li> </ul> </div></aside> <h2 id="dont-use-color-alone-to-convey-information">Don’t use color alone to convey information</h2> <p>While color can be useful to convey information, color should not be the only way information is conveyed. When using color to differentiate elements, also provide additional identification that does not rely on color perception. For example, use an asterisk in addition to color to indicate required form fields, and use labels to distinguish areas on graphs.</p> <aside class="box box-example"><header class="box-h box-h-example"> Example: Using color to convey meaning</header><div class="box-i"> <div class="color-alone two-column"> <figure class="reference fail"> <figcaption><svg focusable="false" aria-label="Wrong" class="icon-ex-circle "><use xlink:href="/WAI/assets/images/icons.svg#icon-ex-circle"></use></svg> Color only</figcaption> <div> <form action="#" method="post"> <p class="instruction"><span class="required" style="color: #992929;">Required fields are in red</span></p> <div class="row"> <label for="name1">Name</label> <input type="text" id="name1" name="name" /> </div> <div class="row"> <label class="required" style="color: #992929;" for="email1">Email</label> <input type="text" id="email1" name="email" /> </div> </form> </div> </figure> <figure class="reference pass"> <figcaption><svg focusable="false" aria-label="OK" class="icon-check-circle "><use xlink:href="/WAI/assets/images/icons.svg#icon-check-circle"></use></svg> Color and symbol</figcaption> <div> <form action="#" method="post"> <p class="instruction"><span class="required" style="color: #992929;">Required fields</span> are in red and marked with an <span class="required" style="color: #992929;">*</span></p> <div class="row"> <label for="name2">Name</label> <input type="text" id="name2" name="name" /><br /> </div> <div class="row"> <label class="required" style="color: #992929;" for="email2">Email *</label> <input type="text" id="email2" name="email" /> </div> </form> </div> </figure> </div> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Example: Refer to something using color alone</header><div class="box-i"> <div class="color-alone two-column"> <figure class="question fail"> <figcaption><svg focusable="false" aria-label="Wrong" class="icon-ex-circle "><use xlink:href="/WAI/assets/images/icons.svg#icon-ex-circle"></use></svg> Color only</figcaption> <div> <svg version="1.1" width="153" height="154" aria-labelledby="inaccessible-triangles-title" role="img"> <g> <title id="inaccessible-triangles-title">Four triangles with different angles</title> <path d="m2.06902,49.92402l91.82715,-48.2264l-42.35869,75.85164l-49.46846,-27.62524z" fill="#09610D" /> <path d="m147.18413,95.39555l-41.64554,-80.62148l43.24728,27.76369l-1.60175,52.85779z" fill="#0000CC" /> <path d="m110.9136,148.01692l-27.57392,-82.3039l69.97661,50.70448l-42.40269,31.59943z" fill="#AA0402" /> <path d="m21.07534,112.17733l48.69831,-22.53485l-4.90304,52.17411l-43.79528,-29.63926z" fill="#DDDD00" /> </g> </svg> <form action="#" method="post"> <fieldset> <legend style="width: 100%;">Which is the right-angled triangle?</legend> <input id="answer-green1" name="answer1" value="green" type="radio" /> <label for="answer-green1">Green</label><br /> <input id="answer-blue1" name="answer1" value="blue" type="radio" /> <label for="answer-blue1">Blue</label><br /> <input id="answer-red1" name="answer1" value="red" type="radio" /> <label for="answer-red1">Red</label><br /> <input id="answer-yellow1" name="answer1" value="yellow" type="radio" /> <label for="answer-yellow1">Yellow</label><br /> <input id="answer-pass1" name="answer1" value="pass" type="radio" /> <label for="answer-pass1">Don't know</label> </fieldset> </form> </div> </figure> <figure class="question pass"> <figcaption><svg focusable="false" aria-label="OK" class="icon-check-circle "><use xlink:href="/WAI/assets/images/icons.svg#icon-check-circle"></use></svg> Color and number</figcaption> <div> <svg version="1.1" width="153" height="154"> <g> <path d="m2.06902,49.92402l91.82715,-48.2264l-42.35869,75.85164l-49.46846,-27.62524z" fill="#09610D" /> <text fill="#f4f4f4" y="51" x="44"><tspan>1</tspan><tspan dx="100" style="opacity:0">Green triangle: Angles are 30°, 60°, 90°</tspan></text> <path d="m147.18413,95.39555l-41.64554,-80.62148l43.24728,27.76369l-1.60175,52.85779z" fill="#0000CC" /> <text fill="#f4f4f4" y="54" x="132"><tspan>2</tspan><tspan dx="100" style="opacity:0"> Blue triangle: Angles are 30°, 30°, 120°</tspan></text> <path d="m110.9136,148.01692l-27.57392,-82.3039l69.97661,50.70448l-42.40269,31.59943z" fill="#AA0402" /> <text fill="#f4f4f4" y="114" x="110"><tspan>3</tspan><tspan dx="100" style="opacity:0"> Red triangle: Angles are 40°, 70°, 70°</tspan></text> <path d="m21.07534,112.17733l48.69831,-22.53485l-4.90304,52.17411l-43.79528,-29.63926z" fill="#DDDD00" /> <text fill="#333" y="118" x="48"><tspan>4</tspan><tspan dx="100" style="opacity:0"> Yellow triangle: Angles are 60°, 60°, 60°</tspan></text> </g> </svg> <form action="#" method="post"> <fieldset> <legend style="width: 100%;">Which is the right-angled triangle?</legend> <input id="answer-green2" name="answer2" value="green" type="radio" /> <label for="answer-green2">Green (1)</label><br /> <input id="answer-blue2" name="answer2" value="blue" type="radio" /> <label for="answer-blue2">Blue (2)</label><br /> <input id="answer-red2" name="answer2" value="red" type="radio" /> <label for="answer-red2">Red (3)</label><br /> <input id="answer-yellow2" name="answer2" value="yellow" type="radio" /> <label for="answer-yellow2">Yellow (4)</label><br /> <input id="answer-pass2" name="answer2" value="pass" type="radio" /> <label for="answer-pass2">Don't know</label> </fieldset> </form> </div> </figure> </div> </div></aside> <aside class="box box-simple"><header class="box-h box-h-simple"> More Information</header><div class="box-i"> <ul> <li><strong>WCAG</strong> <ul> <li><a href="/WAI/WCAG21/quickref/#use-of-color">Use of Color 1.4.1</a> (<a href="/WAI/WCAG21/Understanding/use-of-color">Understanding 1.4.1</a>)</li> </ul> </li> <li><strong>User Story</strong> <ul> <li><a href="/WAI/people-use-web/user-stories/story-four/">Lexie, online shopper who cannot distinguish between certain colors (color blindness)</a></li> </ul> </li> </ul> </div></aside> <h2 id="ensure-that-interactive-elements-are-easy-to-identify">Ensure that interactive elements are easy to identify</h2> <p>Provide distinct styles for interactive elements, such as links and buttons, to make them easy to identify. For example, change the appearance of links on mouse hover, keyboard focus, and touch-screen activation. Ensure that styles and naming for interactive elements are used consistently throughout the website.</p> <aside class="box box-example"><header class="box-h box-h-example"> Example: Unique styles for different link states</header><div class="box-i"> <div class="focus two-column"> <div> <figure> <figcaption><svg focusable="false" aria-label="OK" class="icon-check-circle "><use xlink:href="/WAI/assets/images/icons.svg#icon-check-circle"></use></svg> Style links to stand out from text</figcaption> <div> <p>Some people can't use a mouse and use only a <a href="javascript:return false;" aria-label="Link is styled to stand out from main text">keyboard to navigate</a> through web pages.</p> <p>It is important that users can reach all interactive elements using the keyboard, and that it is clear which element has focus.</p> <p>Visible keyboard focus could be a border or highlight that moves as you tab through the web page.</p> </div> </figure> </div> <div> <figure class="hover"> <figcaption><svg focusable="false" aria-label="OK" class="icon-check-circle "><use xlink:href="/WAI/assets/images/icons.svg#icon-check-circle"></use></svg> Mouse hover style</figcaption> <div> <p style="text-align: center; position:relative;"><a href="javascript:return false;" aria-label="Link is styled with a subtle background to highlight hover state" style="color: #850BAC; background-color: rgba(253, 247, 15, 0.3)">keyboard to navigate</a><img src="/WAI/content-images/tips/pointer.png" style="position: absolute; left: 50%; top:1em;" width="20" alt="" /></p> </div> </figure> <figure class="keyboard"> <figcaption><svg focusable="false" aria-label="OK" class="icon-check-circle "><use xlink:href="/WAI/assets/images/icons.svg#icon-check-circle"></use></svg> Keyboard focus style</figcaption> <div> <p style="text-align: center; position:relative;"><a href="javascript:return false;" aria-label="Link is styled with a stronger version of the hover style to make it stand out" style="color: #850BAC; background-color: #fdf70f">keyboard to navigate</a></p> </div> </figure> <figure class="active"> <figcaption><svg focusable="false" aria-label="OK" class="icon-check-circle "><use xlink:href="/WAI/assets/images/icons.svg#icon-check-circle"></use></svg> Touch or click style</figcaption> <div> <p style="text-align: center; position:relative;"><a href="javascript:return false;" aria-label="Link is given a strong styling to show an action will occur" style="background: #850BAC; color: #f4f4f4">keyboard to navigate</a><img src="/WAI/content-images/tips/pointer.png" style="position: absolute; left: 50%; top:1em;" width="20" alt="" /></p> </div> </figure> </div> </div> </div></aside> <aside class="box box-simple"><header class="box-h box-h-simple"> More Information</header><div class="box-i"> <ul> <li><strong>WCAG</strong> <ul> <li><a href="/WAI/WCAG21/quickref/#focus-visible">Focus Visible 2.4.7</a> (<a href="/WAI/WCAG21/Understanding/focus-visible">Understanding 2.4.7</a>)</li> <li><a href="/WAI/WCAG21/quickref/#consistent-identification">Consistent Identification 3.2.4</a> (<a href="/WAI/WCAG21/Understanding/consistent-identification">Understanding 3.2.4</a>)</li> </ul> </li> <li><strong>User Stories</strong> <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-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> </li> </ul> </div></aside> <h2 id="provide-clear-and-consistent-navigation-options">Provide clear and consistent navigation options</h2> <p>Ensure that navigation across pages within a website has consistent naming, styling, and positioning. Provide more than one method of website navigation, such as a site search or a site map. Help users understand where they are in a website or page by providing orientation cues, such as breadcrumbs and clear headings.</p> <aside class="box box-simple"><header class="box-h box-h-simple"> More Information</header><div class="box-i"> <ul> <li><strong>WCAG</strong> <ul> <li><a href="/WAI/WCAG21/quickref/#consistent-navigation">Consistent Navigation 3.2.3</a> (<a href="/WAI/WCAG21/Understanding/consistent-identification">Understanding 3.2.3</a>)</li> <li><a href="/WAI/WCAG21/quickref/#multiple-ways">Multiple Ways 2.4.5</a> (<a href="/WAI/WCAG21/Understanding/multiple-ways">Understanding 2.4.5</a>)</li> </ul> </li> <li><strong>User Stories</strong> <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-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-nine/">Elias, retiree with low vision, hand tremor, and mild short-term memory loss</a></li> </ul> </li> </ul> </div></aside> <h2 id="ensure-that-form-elements-include-clearly-associated-labels">Ensure that form elements include clearly associated labels</h2> <p>Ensure that all fields have a descriptive label adjacent to the field. For left-to-right languages, labels are usually positioned to the left or above the field, except for checkboxes and radio buttons where they are usually to the right. Avoid having too much space between labels and fields.</p> <aside class="box box-example"><header class="box-h box-h-example box-h-icon"> <svg focusable="false" aria-hidden="true" class="icon-check-circle "><use xlink:href="/WAI/assets/images/icons.svg#icon-check-circle"></use></svg> Example: Labels and input fields associated by proximity</header><div class="box-i"> <div class="labels"> <figure> <div> <form action="#" method="post"> <fieldset> <legend>Add a comment</legend> <div class="row"> <label for="email4">Your E-mail</label> <input type="text" id="email4" name="email" /> </div> <div class="row checkbox"> <input type="checkbox" id="contact1" name="contact" /> <label for="contact1">I am happy for you to contact me</label> </div> <div class="row"> <label for="website2">Your Website</label> <input type="text" id="website2" name="website" /> </div> <div class="row"> <label for="comment2">Comment</label> <textarea name="comment" id="comment2"></textarea> </div> </fieldset> </form> </div> </figure> </div> </div></aside> <aside class="box box-simple"><header class="box-h box-h-simple"> More Information</header><div class="box-i"> <ul> <li><strong>WCAG</strong> <ul> <li><a href="/WAI/WCAG21/quickref/#labels-or-instructions">Labels or Instructions 3.3.2</a> (<a href="/WAI/WCAG21/Understanding/labels-or-instructions">Understanding 3.3.2</a>)</li> <li><a href="/WAI/WCAG21/quickref/#headings-and-labels">Headings and Labels 2.4.6</a> (<a href="/WAI/WCAG21/Understanding/headings-and-labels">Understanding 2.4.6</a>)</li> </ul> </li> <li><strong>Tutorial</strong> <ul> <li><a href="/WAI/tutorials/forms/labels/#visual-position-of-label-text">Visual position of label text</a></li> </ul> </li> </ul> </div></aside> <h2 id="provide-easily-identifiable-feedback">Provide easily identifiable feedback</h2> <p>Provide feedback for interactions, such as confirming form submission, alerting the user when something goes wrong, or notifying the user of changes on the page. Instructions should be easy to identify. Important feedback that requires user action should be presented in a prominent style.</p> <aside class="box box-example"><header class="box-h box-h-example box-h-icon"> <svg focusable="false" aria-hidden="true" class="icon-check-circle "><use xlink:href="/WAI/assets/images/icons.svg#icon-check-circle"></use></svg> Example: Using error list, icon, and background color to make errors stand out</header><div class="box-i"> <div class="errors"> <figure> <div> <div class="error-list"> <p>Please correct the following errors:</p> <ol> <li id="error_email"><svg focusable="false" aria-label="Error" class="icon-warning "><use xlink:href="/WAI/assets/images/icons.svg#icon-warning"></use></svg> <a href="javascript:document.getElementById('email5').focus()">Email address is invalid</a></li> <li id="error_comment"><svg focusable="false" aria-label="Error" class="icon-warning "><use xlink:href="/WAI/assets/images/icons.svg#icon-warning"></use></svg> <a href="javascript:document.getElementById('comment3').focus()">A Comment is required</a></li> </ol> </div> <form action="#" method="post"> <fieldset> <legend>Add a comment</legend> <p class="instruction"><span class="required">Required fields</span> are in red and marked with an <span class="required">*</span></p> <div class="row"> <label for="name5">Name</label> <input type="text" id="name5" name="name" value="Superbear" /> </div> <div class="row error"> <label class="required" for="email5"><svg focusable="false" aria-label="Error" class="icon-warning "><use xlink:href="/WAI/assets/images/icons.svg#icon-warning"></use></svg> E-mail *</label> <input type="text" id="email5" name="email" value="superbear@@hq.example.com" aria-invalid="true" aria-describedby="error_email" /> </div> <div class="row"> <label for="website3">Website</label> <input type="text" id="website3" name="website" /> </div> <div class="row error"> <label class="required" for="comment3"><svg focusable="false" aria-label="Error" class="icon-warning "><use xlink:href="/WAI/assets/images/icons.svg#icon-warning"></use></svg> Comment *</label> <textarea name="comment" id="comment3" aria-invalid="true" aria-describedby="error_comment"></textarea> </div> </fieldset> </form> </div> </figure> </div> </div></aside> <aside class="box box-simple"><header class="box-h box-h-simple"> More Information</header><div class="box-i"> <ul> <li><strong>WCAG</strong> <ul> <li><a href="/WAI/WCAG21/quickref/#error-identification">Error Identification 3.3.1</a> (<a href="/WAI/WCAG21/Understanding/error-identification">Understanding 3.3.1</a>)</li> <li><a href="/WAI/WCAG21/quickref/#labels-or-instructions">Labels or Instructions 3.3.2</a> (<a href="/WAI/WCAG21/Understanding/labels-or-instructions">Understanding 3.3.2</a>)</li> <li><a href="/WAI/WCAG21/quickref/#error-suggestion">Error Suggestion 3.3.3</a> (<a href="/WAI/WCAG21/Understanding/error-suggestion">Understanding 3.3.3</a>)</li> </ul> </li> <li><strong>Tutorial</strong> <ul> <li><a href="/WAI/tutorials/forms/notifications/">User Notifications</a></li> </ul> </li> <li><strong>User Stories</strong> <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-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> </li> </ul> </div></aside> <h2 id="use-headings-and-spacing-to-group-related-content">Use headings and spacing to group related content</h2> <p>Use whitespace and proximity to make relationships between content more apparent. Style headings to group content, reduce clutter, and make it easier to scan and understand.</p> <aside class="box box-example"><header class="box-h box-h-example"> Example: Spacing highlights relationship between content</header><div class="box-i"> <div class="headings two-column"> <figure class="fail"> <figcaption id="inaccessible-headings-title"><svg focusable="false" aria-label="Wrong" class="icon-ex-circle "><use xlink:href="/WAI/assets/images/icons.svg#icon-ex-circle"></use></svg> Little spacing and unclear relationship</figcaption> <div> <svg version="1.1" height="173" aria-labelledby="inaccessible-headings-title" aria-describedby="inaccessible-headings-desc" role="img"> <g> <desc id="inaccessible-headings-desc">Single heading with large blocks of text, poor separation of sub-headings, and unclear image relationship</desc> <text class="heading" x="0" y="14">Main heading</text> <rect x="0" y="18" width="247" height="3" /> <rect x="0" y="24" width="244" height="3" /> <rect x="0" y="30" width="249" height="3" /> <rect class="image" x="180" y="36" width="70" height="55" /> <line x1="181" y1="37" x2="249" y2="90" stroke-width="1" /> <line x1="181" y1="90" x2="249" y2="37" stroke-width="1" /> <rect x="0" y="36" width="168" height="3" /> <rect x="0" y="42" width="171" height="3" /> <rect x="0" y="48" width="166" height="3" /> <rect x="0" y="54" width="172" height="3" /> <rect x="0" y="60" width="120" height="3" /> <text class="sub-heading" x="0" y="74">Sub heading</text> <rect x="0" y="76" width="144" height="3" /> <rect x="0" y="82" width="136" height="3" /> <rect x="0" y="88" width="142" height="3" /> <rect x="0" y="94" width="236" height="3" /> <rect x="0" y="100" width="249" height="3" /> <rect x="0" y="106" width="239" height="3" /> <rect x="0" y="112" width="205" height="3" /> <text class="sub-heading" x="0" y="126">Sub heading</text> <rect x="0" y="128" width="236" height="3" /> <rect x="0" y="134" width="242" height="3" /> <rect x="0" y="140" width="243" height="3" /> <rect x="0" y="146" width="250" height="3" /> <rect x="0" y="152" width="245" height="3" /> <rect x="0" y="158" width="187" height="3" /> </g> </svg> </div> </figure> <figure class="pass"> <figcaption id="accessible-headings-title"><svg focusable="false" aria-label="OK" class="icon-check-circle "><use xlink:href="/WAI/assets/images/icons.svg#icon-check-circle"></use></svg> More spacing and clearer relationship</figcaption> <div> <svg version="1.1" height="173" aria-labelledby="accessible-headings-title" aria-describedby="accessible-headings-desc" role="img"> <g> <desc id="accessible-headings-desc">Main heading, multiple sub headings, lists, and no large text blocks</desc> <text class="heading" x="0" y="14">Main heading</text> <rect x="0" y="21" width="175" height="3" /> <rect x="0" y="27" width="170" height="3" /> <rect x="0" y="33" width="159" height="3" /> <rect x="0" y="39" width="95" height="3" /> <rect x="0" y="51" width="175" height="3" /> <rect x="0" y="57" width="170" height="3" /> <rect x="0" y="63" width="159" height="3" /> <rect x="0" y="69" width="172" height="3" /> <rect x="0" y="75" width="143" height="3" /> <rect class="image" x="180" y="21" width="70" height="55" /> <line x1="181" y1="22" x2="249" y2="75" /> <line x1="181" y1="75" x2="249" y2="22" /> <text class="sub-heading" x="0" y="98">Sub heading</text> <rect x="0" y="103" width="106" height="3" /> <rect x="0" y="109" width="99" height="3" /> <rect x="0" y="115" width="114" height="3" /> <rect x="0" y="121" width="110" height="3" /> <rect x="0" y="127" width="110" height="3" /> <rect x="0" y="139" width="99" height="3" /> <rect x="0" y="145" width="114" height="3" /> <rect x="0" y="151" width="110" height="3" /> <rect x="0" y="157" width="84" height="3" /> <text class="sub-heading" x="135" y="98">Sub heading</text> <rect x="135" y="103" width="106" height="3" /> <rect x="135" y="109" width="99" height="3" /> <rect x="135" y="115" width="114" height="3" /> <rect x="135" y="127" width="114" height="3" /> <rect x="135" y="133" width="110" height="3" /> <rect x="135" y="139" width="99" height="3" /> <rect x="135" y="145" width="108" height="3" /> <rect x="135" y="151" width="110" height="3" /> <rect x="135" y="157" width="62" height="3" /> </g> </svg> </div> </figure> </div> </div></aside> <aside class="box box-simple"><header class="box-h box-h-simple"> More Information</header><div class="box-i"> <ul> <li><strong>WCAG</strong> <ul> <li><a href="/WAI/WCAG21/quickref/#headings-and-labels">Headings and Labels 2.4.6</a> (<a href="/WAI/WCAG21/Understanding/headings-and-labels">Understanding 2.4.6</a>)</li> <li><a href="/WAI/WCAG21/quickref/#section-headings">Section Headings 2.4.10</a> (<a href="/WAI/WCAG21/Understanding/section-headings">Understanding 2.4.10</a>)</li> </ul> </li> <li><strong>Tutorial</strong> <ul> <li><a href="/WAI/tutorials/page-structure/headings/">Headings</a></li> </ul> </li> <li><strong>User Stories</strong> <ul> <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> </li> </ul> </div></aside> <h2 id="create-designs-for-different-viewport-sizes">Create designs for different viewport sizes</h2> <p>Consider how page information is presented in different sized viewports, such as mobile phones or zoomed browser windows. Position and presentation of main elements, such as header and navigation can be changed to make best use of the space. Ensure that text size and line width are set to maximize readability and legibility.</p> <aside class="box box-example"><header class="box-h box-h-example"> Example: Content and navigation adapt to smaller mobile screen</header><div class="box-i"> <div class="responsive"> <figure> <div> <img src="/WAI/content-images/tips/content_in_browser.png" alt="" /> <img src="/WAI/content-images/tips/content_in_phone.png" alt="" /> <p>Display in a wide window with small text uses multiple columns for primary content, visible navigation options, and visible secondary information.</p> <p>Display in a narrow window, such as a mobile phone, or with large text uses single column for primary content, navigation options are revealed using an icon, and secondary information is also revealed via icon.</p> </div> </figure> </div> </div></aside> <aside class="box box-simple"><header class="box-h box-h-simple"> More Information</header><div class="box-i"> <ul> <li><strong>Background</strong> <ul> <li><a href="/TR/mobile-accessibility-mapping/#h-small-screen-size">Small Screen Size</a></li> <li><a href="/TR/mobile-accessibility-mapping/#mobile-accessibility-considerations-related-primarily-to-principle-3-understandable">Mobile considerations related to Understandability</a></li> </ul> </li> </ul> </div></aside> <h2 id="include-image-and-media-alternatives-in-your-design">Include image and media alternatives in your design</h2> <p>Provide a place in your design for alternatives for images and media. For example, you might need:</p> <ul> <li>Visible links to transcripts of audio</li> <li>Visible links to audio described versions of videos</li> <li>Text along with icons and graphical buttons</li> <li>Captions and descriptions for tables or complex graphs</li> </ul> <p>Work with content authors and developers to provide alternatives for non-text content.</p> <aside class="box box-example"><header class="box-h box-h-example"> Example: Design includes links to a transcript and to an audio described video</header><div class="box-i"> <div class="text-alt"> <figure> <div> <img src="/WAI/content-images/tips/example_media_player.png" alt="A media player is shown. In additon to the standard play/pause buttons, progress bar and volume, a closed captions (CC) button is available as well as links to a transcript and a version with audio description." /> </div> </figure> </div> </div></aside> <aside class="box box-simple"><header class="box-h box-h-simple"> More Information</header><div class="box-i"> <ul> <li><strong>WCAG</strong> <ul> <li><a href="/WAI/WCAG21/quickref/#non-text-content">Non-text Content 1.1.1</a> (<a href="/WAI/WCAG21/Understanding/non-text-content">Understanding 1.1.1</a>)</li> </ul> </li> <li><strong>Tutorial</strong> <ul> <li><a href="/WAI/tutorials/images/">Images</a></li> </ul> </li> <li><strong>User Story</strong> <ul> <li><a href="/WAI/people-use-web/user-stories/story-six/">Dhruv, older adult student who is deaf</a></li> </ul> </li> </ul> </div></aside> <h2 id="provide-controls-for-content-that-starts-automatically">Provide controls for content that starts automatically</h2> <p>Provide visible controls to allow users to stop any animations or auto-playing sound. This applies to carousels, image sliders, background sound, and videos.</p> <aside class="box box-example"><header class="box-h box-h-example"> Example: Show play/stop and selection controls in carousel design</header><div class="box-i"> <div class="autoplay"> <figure> <div> <img src="/WAI/content-images/tips/carousel_controls.png" alt="Example of carousel with play and slide selection controls" /> </div> </figure> </div> </div></aside> <aside class="box box-simple"><header class="box-h box-h-simple"> More Information</header><div class="box-i"> <ul> <li><strong>WCAG</strong> <ul> <li><a href="/WAI/WCAG21/quickref/#audio-control">Audio Control 1.4.2</a> (<a href="/WAI/WCAG21/Understanding/audio-control">Understanding 1.4.2</a>)</li> <li><a href="/WAI/WCAG21/quickref/#pause-stop-hide">Pause, Stop, Hide 2.2.2</a> (<a href="/WAI/WCAG21/Understanding/pause-stop-hide">Understanding 2.2.2</a>)</li> </ul> </li> <li><strong>Tutorial</strong> <ul> <li><a href="/WAI/tutorials/carousels/">Carousel Concepts</a></li> </ul> </li> <li><strong>User Story</strong> <ul> <li><a href="/WAI/people-use-web/user-stories/story-six/">Dhruv, older adult student who is deaf</a></li> </ul> </li> </ul> </div></aside> <aside class="box box-large"><header class="box-h box-h-large box-h-icon"> <svg focusable="false" aria-hidden="true" class="icon-readmore "><use xlink:href="/WAI/assets/images/icons.svg#icon-readmore"></use></svg> Learn More About Accessibility</header><div class="box-i"> <p>These tips are a few of the things you need to consider for web accessibility. The following resources help you learn why accessibility is important, and about guidelines for making the web more accessible to people with disabilities.</p> <ul> <li><a href="/WAI/fundamentals/accessibility-intro/">Introduction to Web Accessibility</a> — covers broad issues, such as the business case, and links to helpful resources</li> <li><a href="/WAI/fundamentals/accessibility-principles/">Accessibility Principles</a> — introduces the concepts behind the web accessibility requirements</li> <li><a href="/WAI/people-use-web/">How people with disabilities use the web</a> — explores the impact of accessible design with real-life examples</li> <li><a href="/WAI/tutorials/">Web Accessibility Tutorials</a> — includes some guidance related to designing, for example, <a href="/WAI/tutorials/images/">providing alternative text for images</a></li> <li><a href="/WAI/demos/bad/">Before and After Demonstration</a> — shows an inaccessible and accessible version of the same website, with annotations on accessibility barriers and repairs</li> <li><a href="/WAI/WCAG21/quickref/">How to Meet WCAG (Quick Reference)</a> — customizable reference of all WCAG requirements and techniques</li> <li><a href="/WAI/ER/tools/">Web Accessibility Evaluation Tools List</a> — includes tools to help explore contrast ratio</li> </ul> </div></aside> <nav class="pager" aria-label="Previous/Next Page" style="clear: both;"> <ul><li class="pager--item previous"> <a href="/WAI/tips/writing/"> <svg focusable="false" aria-hidden="true" class="icon-arrow-left pager--item-icon"><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-left"></use></svg> <span class="pager--item-text"> <span class="pager--item-text-direction">Previous:</span> <span class="pager--item-text-target">Tips for Writing</span> </span> </a> </li><li class="pager--item next"> <a href="/WAI/tips/developing/"> <svg focusable="false" aria-hidden="true" class="icon-arrow-right pager--item-icon"><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-right"></use></svg> <span class="pager--item-text"> <span class="pager--item-text-direction">Next:</span> <span class="pager--item-text-target">Tips for Developing</span> </span> </a> </li> </ul></nav><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/collections/_tips/designing.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-tips&wai-url=https://www.w3.org/WAI/tips/designing/" 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> 16 July 2024. <a href="/WAI/tips/changelog/">Latest changes</a>.</p><p><strong>Date:</strong> Minor update 16 July 2024. Updated 16 July 2024. First published September 2015.</p> <p><strong>Editors:</strong> <a href="https://www.w3.org/People/kevin">Kevin White</a>, <a href="https://www.w3.org/People/shadi">Shadi Abou-Zahra</a>, and <a href="https://www.w3.org/People/Shawn">Shawn Lawton Henry</a>. <a href="/WAI/tips/acknowledgements/">Acknowledgements</a>.</p> <p>Developed by the <a href="https://www.w3.org/WAI/EO/">Education and Outreach Working Group (EOWG)</a>. Developed with support from the <a href="https://www.w3.org/WAI/DEV/">WAI-DEV project</a>, co-funded by the European Commission <abbr title="Information Society Technologies">IST</abbr> Programme.</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 © 2024 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?1732321439590790613"></script>  <script src="/WAI/assets/scripts/svg4everybody.js?1732321439590790613"></script> <script> svg4everybody(); </script><script> var translationStrings = {}; </script> </body> </html>