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?1732542395990846989"; document.body.appendChild(element); } window.addEventListener("load", downloadJSAtOnload, false); </script> <link rel="stylesheet" href="/WAI/assets/css/style.css?1732542395990846989"> <title> Developing Websites for Older People: How Web Content Accessibility Guidelines (WCAG) 2.0 Applies | Web Accessibility Initiative (WAI) | W3C</title> <meta name="generator" content="Jekyll v4.3.3" /> <meta property="og:title" content="Developing Websites for Older People: How Web Content Accessibility Guidelines (WCAG) 2.0 Applies" /> <meta name="author" content="W3C Web Accessibility Initiative (WAI)" /> <meta property="og:locale" content="en" /> <meta name="description" content="Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI)." /> <meta property="og:description" content="Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI)." /> <link rel="canonical" href="https://www.w3.org/WAI/older-users/developing/" /> <meta property="og:url" content="https://www.w3.org/WAI/older-users/developing/" /> <meta property="og:site_name" content="Web Accessibility Initiative (WAI)" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="twitter:title" content="Developing Websites for Older People: How Web Content Accessibility Guidelines (WCAG) 2.0 Applies" /> <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":"Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).","headline":"Developing Websites for Older People: How Web Content Accessibility Guidelines (WCAG) 2.0 Applies","url":"https://www.w3.org/WAI/older-users/developing/"}</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-developing-websites-for-older-people-how-web-content-accessibility-guidelines-wcag-2-0-applies "> <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"> <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> </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/people/"><span>Accessibility is About People</span></a></li><li><a lang="en" href="/WAI/older-users/"><span>Older Users and Accessibility</span></a></li><li><a lang="en" href="/WAI/older-users/developing/" aria-current="page"><span>How WCAG 2 Applies</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/" aria-current="location" 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/" aria-current="location" class="page-link"><span>Older Users and Accessibility</span></a><ul> <li> <a lang="en" href="/WAI/older-users/developing/" aria-current="page" 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/" 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> </div> <main id="main" lang="en"> <header class="in-resource"> <h1> Developing Websites for Older People:<br>How Web Content Accessibility Guidelines (WCAG) 2.0 Applies </h1><p>in <a lang="en" href="/WAI/older-users/"><span>Older Users and Web Accessibility: Meeting the Needs of Ageing Web Users</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>An extensive <a href="https://www.w3.org/WAI/intro/wai-age-literature">literature review</a> identified that existing standards from the W3C Web Accessibility Initiative (<a href="https://www.w3.org/WAI/">WAI</a>) address the accessibility needs of older web users. This page introduces how to use Web Content Accessibility Guidelines (WCAG) 2.0 to improve the accessibility and usability of websites and web applications for older people.</p> <p>Please see <strong><a href="https://www.w3.org/WAI/older-users/">Web Accessibility and Older People: Meeting the Needs of Ageing Web Users</a></strong> for additional background and resources on the overlapping needs of older people and people with disabilities.</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="#wcag" id="markdown-toc-wcag">About WCAG 2.0</a></li> <li><a href="#map" id="markdown-toc-map">How WCAG 2.0 Applies to Older People</a> <ul> <li><a href="#p" id="markdown-toc-p">Perceivable information and user interface</a> <ul> <li><a href="#textsize" id="markdown-toc-textsize">Text size</a></li> <li><a href="#textstyle" id="markdown-toc-textstyle">Text style and text layout</a></li> <li><a href="#color" id="markdown-toc-color">Color and contrast</a></li> <li><a href="#multimedia" id="markdown-toc-multimedia">Multimedia</a></li> <li><a href="#speech" id="markdown-toc-speech">Text-to-speech (speech synthesis)</a></li> <li><a href="#captcha" id="markdown-toc-captcha">CAPTCHA</a></li> </ul> </li> <li><a href="#o" id="markdown-toc-o">Operable user interface and navigation</a> <ul> <li><a href="#links" id="markdown-toc-links">Links</a></li> <li><a href="#navigation" id="markdown-toc-navigation">Navigation and location</a></li> <li><a href="#mouse" id="markdown-toc-mouse">Mouse use</a></li> <li><a href="#keyboard" id="markdown-toc-keyboard">Keyboard use and tabbing</a></li> <li><a href="#distractions" id="markdown-toc-distractions">Distractions</a></li> <li><a href="#timing" id="markdown-toc-timing">Sufficient time</a></li> </ul> </li> <li><a href="#u" id="markdown-toc-u">Understandable information and user interface</a> <ul> <li><a href="#pageorg" id="markdown-toc-pageorg">Page organization</a></li> <li><a href="#language" id="markdown-toc-language">Understandable language</a></li> <li><a href="#consistent" id="markdown-toc-consistent">Consistent navigation and labeling</a></li> <li><a href="#popups" id="markdown-toc-popups">Pop-ups and new windows</a></li> <li><a href="#refresh" id="markdown-toc-refresh">Page refresh and updates</a></li> <li><a href="#instructions" id="markdown-toc-instructions">Instructions and input assistance</a></li> <li><a href="#errors" id="markdown-toc-errors">Error prevention and recovery for forms</a></li> </ul> </li> <li><a href="#r" id="markdown-toc-r">Robust content and reliable interpretation</a> <ul> <li><a href="#oldequip" id="markdown-toc-oldequip">Older equipment/software</a></li> </ul> </li> </ul> </li> </ul> </div> </nav> <h2 id="wcag">About WCAG 2.0</h2> <p>The Web Content Accessibility Guidelines (WCAG) 2.0 includes organizing principles and guidelines, and has success criteria at three levels: A, AA, AAA. WAI recommends meeting at least all WCAG 2.0 Level A and AA success criteria.</p> <p>A related document provides techniques that include specific details on meeting the success criteria, such as code examples. WAI encourages developers to use the <a href="https://www.w3.org/WAI/WCAG20/quickref/">How to Meet WCAG 2.0 quick reference</a> to access the guidelines, success criteria, and techniques, along with the additional descriptions, examples, and resources from “Understanding WCAG 2.0”.</p> <p>To learn more about WCAG, see:</p> <ul> <li><a href="/WAI/standards-guidelines/wcag/">WCAG Overview</a> - provides background, an introduction to WCAG, and links to additional information</li> <li><a href="https://www.w3.org/WAI/intro/wcag20">The WCAG 2.0 Documents</a> - describes the different WCAG 2.0 technical and supporting documents</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/">How to Meet WCAG 2.0</a> - is a customizable quick reference to Web Content Accessibility Guidelines 2.0 requirements (Success Criteria) and techniques</li> </ul> <h2 id="map">How WCAG 2.0 Applies to Older People</h2> <p>This section explains how many of the Web Content Accessibility Guidelines (WCAG) 2.0 guidelines and success criteria specifically meet the needs of older web users. Although not all the WCAG 2.0 success criteria are listed here, WAI recommends meeting at least all WCAG 2.0 Level A and AA success criteria. Some of the Level AAA success criteria that are particularly important for older people are listed in this section too.</p> <p>When implementing WCAG 2.0, developers can use different techniques to meet the success criteria. In some cases, using one technique instead of another can optimize accessibility for certain users. This section lists some of the techniques that can help optimize websites for older people. (Many of the techniques link to additional information; those with “(future link)” will be written up with later edits to the WCAG Techniques.)</p> <p>This section is organized under the four principles of web accessibility from WCAG 2.0: perceivable, operable, understandable, and robust. Success criteria are listed thematically, to help readability. Sometimes they are drawn from different guidelines to address a particular aspect.</p> <h3 id="p">Perceivable information and user interface</h3> <aside class="box box-large"><header class="box-h box-h-large"> <h4 id="textsize">Text size</h4> </header><div class="box-i"> <p>Many older people require large text due to declining vision, including text in form fields and other controls.</p> <p><strong>WCAG 2.0 success criteria:</strong></p> <ul> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#visual-audio-contrast-scale">1.4.4 - Resize text</a> (AA) says “text can be resized without assistive technology up to 200 percent without loss of content or functionality”</li> </ul> <p><strong>Example techniques to consider:</strong></p> <ul> <li>Using relative font-sizes such as percent (<a href="https://www.w3.org/TR/WCAG20-TECHS/C12">C12</a>) or ems (<a href="https://www.w3.org/TR/WCAG20-TECHS/C14">C14</a>) and ensuring text containers resize (<a href="https://www.w3.org/TR/WCAG20-TECHS/C28">C28</a>)</li> <li>Providing large fonts by default (future link)</li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/C17">C17: Scaling form elements which contain text</a></li> <li>Avoiding the use of text in raster images (future link)</li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G178">G178: Providing controls on the Web page that allow users to incrementally change the size of all text on the page up to 200 percent</a></li> </ul> <p>More techniques are listed under <a href="https://www.w3.org/WAI/WCAG20/quickref/#visual-audio-contrast-scale">1.4.4 - Resize text</a> in “How to Meet WCAG 2.0”.</p> <p><strong>Literature review reference:</strong> <a href="https://www.w3.org/TR/wai-age-literature/#whatvision">Vision decline with ageing</a>.</p> </div></aside> <aside class="box box-large"><header class="box-h box-h-large"> <h4 id="textstyle">Text style and text layout</h4> </header><div class="box-i"> <p>Text style and its visual presentation impacts how hard or easy it is for people to read, especially older people with declining vision.</p> <p><strong>WCAG 2.0 success criteria:</strong></p> <ul> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#visual-audio-contrast-visual-presentation">1.4.8 - Visual Presentation</a> (AAA) includes requirements on text style, text justification, line spacing, line length, and horizontal scrolling</li> </ul> <p><strong>Example techniques to consider:</strong></p> <ul> <li>Avoiding fully-aligned text (<a href="https://www.w3.org/TR/WCAG20-TECHS/C19">C19</a>) or center-aligned text (future link)</li> <li>Using readable fonts (future link)</li> <li>Using upper and lower case according to the spelling conventions of the text language (future link)</li> <li>Avoiding chunks of italic text (future link)</li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G188">G188: Providing a button on the page to increase line spaces and paragraph spaces</a></li> <li>Providing sufficient inter-column spacing (future link)</li> <li>Avoiding overuse of different styles on individual pages and in sites (future link)</li> </ul> <p>More techniques are listed under <a href="https://www.w3.org/WAI/WCAG20/quickref/#visual-audio-contrast-visual-presentation">1.4.8 - Visual Presentation</a> in “How to Meet WCAG 2.0”.</p> <p><strong>Literature review references:</strong> <a href="https://www.w3.org/TR/wai-age-literature/#whatvision">Vision decline with ageing</a>, <a href="https://www.w3.org/TR/wai-age-literature/#existguide">Previous approaches to ‘senior friendly’ Web guidelines</a>, and <a href="https://www.w3.org/TR/wai-age-literature/#elderlyusersvision">Studies of elderly Web users’ specific disabilities - Vision</a>.</p> </div></aside> <aside class="box box-large"><header class="box-h box-h-large"> <h4 id="color">Color and contrast</h4> </header><div class="box-i"> <p>Most older people’s color perception changes, and they lose contrast sensitivity.</p> <p><strong>WCAG 2.0 success criteria:</strong></p> <ul> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#visual-audio-contrast-without-color">1.4.1 - Use of Color</a> (A) requires that color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#visual-audio-contrast-contrast">1.4.3 - Contrast (Minimum)</a> (AA) requires a contrast ratio of at least 4.5:1 for the visual presentation of text and images</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#visual-audio-contrast7">1.4.6 - Contrast (Enhanced)</a> (AAA) requires a higher contrast ratio of at least 7:1 for the visual presentation of text and images</li> </ul> <p><strong>Example techniques to consider:</strong></p> <ul> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G18">G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G14">G14: Ensuring that information conveyed by color differences is also available in text</a></li> <li>Using a light pastel background rather than a white background behind black text to create sufficient but not extreme contrast (future link)</li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G183">G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them</a></li> </ul> <p>More techniques are listed under <a href="https://www.w3.org/WAI/WCAG20/quickref/#visual-audio-contrast-without-color">1.4.1 - Use of Color</a>, <a href="https://www.w3.org/WAI/WCAG20/quickref/#visual-audio-contrast-contrast">1.4.3 - Contrast (Minimum)</a> and <a href="https://www.w3.org/WAI/WCAG20/quickref/#visual-audio-contrast7">1.4.6 - Contrast (Enhanced)</a> in “How to Meet WCAG 2.0”.</p> <p><strong>Literature review references:</strong> <a href="https://www.w3.org/TR/wai-age-literature/#whatvision">Vision decline with ageing</a>, and <a href="https://www.w3.org/TR/wai-age-literature/#elderlyusersvision">Studies of elderly Web users’ specific disabilities: vision</a>.</p> </div></aside> <aside class="box box-large"><header class="box-h box-h-large"> <h4 id="multimedia">Multimedia</h4> </header><div class="box-i"> <p>Because many older people’s hearing or vision declines, they often need transcripts, captions, and low background sound.</p> <p><strong>WCAG 2.0 success criteria:</strong></p> <ul> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#media-equiv-av-only-alt">1.2.1 - Audio-only and Video-only (Prerecorded)</a> (A)</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#qr-media-equiv-captions">1.2.2 - Captions (Prerecorded)</a> (A)</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#media-equiv-audio-desc">1.2.3 - Audio Description or Media Alternative (Prerecorded video)</a> (A)</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#qr-media-equiv-real-time-captions">1.2.4 - Captions (Live)</a> (A)</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#media-equiv-audio-desc-only">1.2.5 - Audio Description (Prerecorded video)</a> (AA)</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#media-equiv-extended-ad">1.2.7 - Extended Audio Description (Prerecorded video)</a> (AAA)</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#media-equiv-text-doc">1.2.8 - Media Alternative (Prerecorded)</a> (AAA)</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#qr-media-equiv-live-audio-only">1.2.9 - Audio-only (Live)</a> (AAA)</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#visual-audio-contrast-noaudio">1.4.7 - Low or No Background Audio (Prerecorded)</a> (AAA)</li> </ul> <p><strong>Example techniques to consider:</strong></p> <ul> <li>All transcript, caption, and audio description techniques from the listed success criteria should be considered as appropriate, for example: <ul> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G69">G69: Providing an alternative for time based media</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G158">G158: Providing an alternative for time-based media for audio-only content</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G159">G159: Providing an alternative for time-based media for video-only content</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G93">G93: Providing open (always visible) captions</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G173">G173: Providing a version of a movie with audio descriptions</a></li> </ul> </li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G56">G56: Mixing audio files so that non-speech sounds are at least 20 decibels lower than the speech audio content</a></li> </ul> <p>More techniques are listed under the success criteria for <a href="https://www.w3.org/WAI/WCAG20/quickref/#media-equiv">Guideline 1.2 (Time-based Media)</a> and under <a href="https://www.w3.org/WAI/WCAG20/quickref/#visual-audio-contrast-noaudio">1.4.7 - Low or No Background Audio (Prerecorded)</a> in “How to Meet WCAG 2.0”.</p> <p><strong>Literature review references:</strong> <a href="https://www.w3.org/TR/wai-age-literature/#whatvision">Vision decline with ageing</a> and <a href="https://www.w3.org/TR/wai-age-literature/#whathearing">Hearing loss with age</a>.</p> </div></aside> <aside class="box box-large"><header class="box-h box-h-large"> <h4 id="speech">Text-to-speech (speech synthesis)</h4> </header><div class="box-i"> <p>Some older people use text-to-speech (speech synthesis) software, which is becoming increasingly available in browsers and operating systems.</p> <p><strong>WCAG 2.0 success criteria:</strong></p> <ul> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#text-equiv-all">1.1.1 - Non-text Content</a> (A) says “a text alternative that serves the equivalent purpose” is required</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#content-structure-separation-programmatic">1.3.1 - Info and Relationships</a> (A) says “information, structure, and relationships” to be made available, for example to text-to-speech software</li> </ul> <p><strong>Example techniques to consider:</strong></p> <ul> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G94">G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H44">H44: Using label elements to associate text labels with form controls</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H42">H42: Using h1-h6 to identify headings</a></li> </ul> <p>More techniques are listed under <a href="https://www.w3.org/WAI/WCAG20/quickref/#text-equiv-all">1.1.1 - Non-text Content</a> and <a href="https://www.w3.org/WAI/WCAG20/quickref/#content-structure-separation-programmatic">1.3.1 - Info and Relationships</a> in “How to Meet WCAG 2.0”.</p> </div></aside> <aside class="box box-large"><header class="box-h box-h-large"> <h4 id="captcha">CAPTCHA</h4> </header><div class="box-i"> <p>Older people with declining eyesight may not be able to discern the characters in a CAPTCHA, especially because CAPTCHAs often have low contrast and do not increase in size when users have text sized larger.</p> <p>CAPTCHA stands for ‘Completely Automated Public Turing tests to tell Computers and Humans Apart’. An example of CAPTCHA is:<br /><img src="/WAI/content-images/older-users/captcha.png" alt="the letters 'c a p t c h a' are difficult to read because they are skewed and on a complex background" /></p> <p><strong>WCAG 2.0 success criteria:</strong></p> <ul> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#text-equiv-all">1.1.1 - Non-text Content</a> (A) includes a requirement for alternative CAPTCHAs</li> </ul> <p><strong>Example techniques to consider:</strong></p> <ul> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G143">G143: Providing a text alternative that describes the purpose of the CAPTCHA</a> <em>AND</em> <a href="https://www.w3.org/TR/WCAG20-TECHS/G144">G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality</a></li> <li>Providing more than two modalities of CAPTCHAs (future link)</li> <li>Providing access to a human customer service representative who can bypass CAPTCHA (future link)</li> <li>Not requiring CAPTCHAs for authorized users (future link)</li> </ul> <p><strong>Literature review reference:</strong> <a href="https://www.w3.org/TR/wai-age-literature/#whatvision">Vision decline with ageing</a>.</p> </div></aside> <h3 id="o">Operable user interface and navigation</h3> <aside class="box box-large"><header class="box-h box-h-large"> <h4 id="links">Links</h4> </header><div class="box-i"> <p>Many older people need links to be particularly clear and identifiable due to declining vision and cognition.</p> <p><strong>WCAG 2.0 success criteria:</strong></p> <ul> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-refs">2.4.4 - Link Purpose (In Context)</a> (A) requires that the purpose of a link can be determined from the link text alone, or from the link text together with its surrounding context</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-link">2.4.9 - Link Purpose (Link Only)</a> (AAA) says “a mechanism is available to allow the purpose of each link to be identified from link text alone”</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-focus-visible">2.4.7 - Focus Visible</a> (AA) requires a visible keyboard focus indicator that shows what component on the web page has focus</li> </ul> <p><strong>Example techniques to consider:</strong></p> <ul> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G91">G91: Providing link text that describes the purpose of a link</a></li> <li>Limiting the number of links per page (future link)</li> <li>Making links visually distinct (future link)</li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G195">G195: Using an author-supplied, highly visible focus indicator</a></li> <li>Highlighting a link or control when the mouse hovers over it, or when it receives keyboard focus (future links)</li> </ul> <p>More techniques are listed under <a href="https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-refs">2.4.4 - Link Purpose (In Context)</a>, <a href="https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-link">2.4.9 - Link Purpose (Link Only)</a>, and <a href="https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-focus-visible">2.4.7 - Focus Visible</a> in “How to Meet WCAG 2.0”.</p> <p><strong>Literature review reference:</strong> <a href="https://www.w3.org/TR/wai-age-literature/#existguide">Previous approaches to ‘senior friendly’ Web guidelines</a>.</p> </div></aside> <aside class="box box-large"><header class="box-h box-h-large"> <h4 id="navigation">Navigation and location</h4> </header><div class="box-i"> <p>Many older people need navigation to be particularly clear due to declining cognitive abilities.</p> <p><strong>WCAG 2.0 success criteria:</strong></p> <ul> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-mult-loc">2.4.5 - Multiple Ways</a> (AA) says “more than one way is available to locate a Web page within a set of Web pages”</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-location">2.4.8 - Location</a> (AAA) says “information about the user’s location within a set of Web pages is available”</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-title">2.4.2 - Page Titled</a> (A) says “web pages have titles that describe topic or purpose” (this is important for search results as the page title is usually displayed first in the listing)</li> </ul> <p><strong>Example techniques to consider:</strong></p> <ul> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G63">G63: Providing a site map</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G161">G161: Providing a search function to help users find content</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G88">G88: Providing descriptive titles for Web pages</a> to help understand the results from Search based navigation</li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G65">G65: Providing a breadcrumb trail</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G128">G128: Indicating current location within navigation bars</a></li> <li>Providing a link to the home page or main page (future link)</li> </ul> <p>More techniques are listed under <a href="https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-mult-loc">2.4.5 - Multiple Ways</a>, <a href="https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-location">2.4.8 - Location</a> and <a href="https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-title">2.4.2 - Page Titled</a> in “How to Meet WCAG 2.0”.</p> <p><strong>Literature review references:</strong> <a href="https://www.w3.org/TR/wai-age-literature/#existguide">Previous approaches to ‘senior friendly’ Web guidelines</a> and <a href="https://www.w3.org/TR/wai-age-literature/#elderlyuserscog">Studies of elderly Web users’ specific disabilities - Cognition</a>.</p> </div></aside> <aside class="box box-large"><header class="box-h box-h-large"> <h4 id="mouse">Mouse use</h4> </header><div class="box-i"> <p>It is difficult for some older people to use a mouse due to declining vision or dexterity.</p> <p><strong>WCAG 2.0 success criteria:</strong></p> <ul> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-focus-visible">2.4.7 - Focus Visible</a> (AA) says that focus indicators should be visible</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#minimize-error-cues">3.3.2 - Labels or Instructions</a> (A) says that labels should be provided “when content requires user input”</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#text-equiv">1.1.1 - Text Alternatives</a> (A) says to provide “text alternatives for any non-text content” such as form controls</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#visual-audio-contrast-scale">1.4.4 - Resize Text</a> (AA) says that text should be resizable up to 200 percent</li> </ul> <p><strong>Example techniques to consider:</strong></p> <ul> <li>Highlighting a link or control when the mouse hovers over it (future link)</li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G195">G195: Using an author-supplied, highly visible focus indicator</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H44">H44: Using label elements to associate text labels with form controls</a> which increases the clickable area for form controls</li> <li>Using real text with relative font size (e.g. <a href="https://www.w3.org/TR/WCAG20-TECHS/C12">C12</a>, <a href="https://www.w3.org/TR/WCAG20-TECHS/C14">C14</a>) and avoiding the use of text in raster images (future link) as larger text is easy to click</li> </ul> <p>More techniques are listed under <a href="https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-focus-visible">2.4.7 - Focus Visible</a>, <a href="https://www.w3.org/WAI/WCAG20/quickref/#minimize-error-cues">3.3.2 - Labels or Instructions</a>, <a href="https://www.w3.org/WAI/WCAG20/quickref/#text-equiv">1.1.1 - Text Alternatives</a> and <a href="https://www.w3.org/WAI/WCAG20/quickref/#visual-audio-contrast-scale">1.4.4 - Resize Text</a> in “How to Meet WCAG 2.0”.</p> <p><strong>Literature review references:</strong> <a href="https://www.w3.org/TR/wai-age-literature/#whatmotor">Motor skill diminishment</a> and <a href="https://www.w3.org/TR/wai-age-literature/#elderlyusersmobility">Studies of elderly Web users’ specific disabilities - Mobility</a>.</p> </div></aside> <aside class="box box-large"><header class="box-h box-h-large"> <h4 id="keyboard">Keyboard use and tabbing</h4> </header><div class="box-i"> <p>Some older people cannot use a mouse well or at all and instead use a keyboard.</p> <p><strong>WCAG 2.0 success criteria:</strong></p> <ul> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#keyboard-operation-keyboard-operable">2.1.1 - Keyboard</a> (A) says “the content is operable through a keyboard interface”</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#keyboard-operation-trapping">2.1.2 - No Keyboard trap</a> (A) makes sure that keyboard focus “can be moved away from that component using only a keyboard”</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#keyboard-operation-all-funcs">2.1.3 - Keyboard (No Exception)</a> (AAA) says “all functionality of the content is operable through a keyboard interface”</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-skip">2.4.1 - Bypass Blocks</a> (A) says “a mechanism is available to bypass blocks of content that are repeated”</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-focus-order">2.4.3 - Focus Order</a> (A) says “components receive focus in an order that preserves meaning and operability”</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-focus-visible">2.4.7 - Focus Visible</a> (AA) requires an ability for the “keyboard focus indicator (to be) visible”</li> </ul> <p><strong>Example techniques to consider:</strong></p> <ul> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H91">H91: Using HTML form controls and links</a> to ensure that users can use the form without the mouse</li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G90">G90: Providing keyboard-triggered event handlers</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G1">G1: Adding a link at the top of each page that goes directly to the main content area</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G59">G59: Placing the interactive elements in an order that follows sequences and relationships within the content</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G195">G195: Using an author-supplied, highly visible focus indicator</a></li> <li>Providing a highly visible highlighting mechanism for links or controls when they receive keyboard focus (future link)</li> </ul> <p>More techniques are listed under various success criteria for <a href="https://www.w3.org/WAI/WCAG20/quickref/#keyboard-operation">Guideline 2.1 - Keyboard Accessible</a> and <a href="https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms">Guideline 2.4 - Navigable</a> in “How to Meet WCAG 2.0”.</p> <p><strong>Literature review references:</strong> <a href="https://www.w3.org/TR/wai-age-literature/#whatmotor">Motor skill diminishment</a> and <a href="https://www.w3.org/TR/wai-age-literature/#elderlyusersmobility">Studies of elderly Web users’ specific disabilities - Mobility</a>.</p> </div></aside> <aside class="box box-large"><header class="box-h box-h-large"> <h4 id="distractions">Distractions</h4> </header><div class="box-i"> <p>Some older people are particularly distracted by any movement and sound on web pages.</p> <p><strong>WCAG 2.0 success criteria:</strong></p> <ul> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#time-limits-pause">2.2.2 - Pause, Stop, Hide</a> (A) says “a mechanism for the user to pause, stop, or hide” moving or blinking content</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#time-limits-postponed">2.2.4 - Interruptions</a> (AAA) says “interruptions can be postponed or suppressed”</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#visual-audio-contrast-dis-audio">1.4.2 - Audio Control</a> (A) says “a mechanism is available to pause or stop the audio”</li> </ul> <p><strong>Example techniques to consider:</strong></p> <ul> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G4">G4: Allowing the content to be paused and restarted from where it was paused</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G11">G11: Creating content that blinks for less than 5 seconds</a></li> <li>Providing the user with a means to stop moving content even if it stops automatically within 5 seconds (future link)</li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G76">G76: Providing a mechanism to request an update of the content instead of updating automatically</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G60">G60: Playing a sound that turns off automatically within three seconds</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G171">G171: Playing sounds only on user request</a></li> </ul> <p>More techniques are listed under <a href="https://www.w3.org/WAI/WCAG20/quickref/#time-limits-pause">2.2.2 - Pause, Stop, Hide</a>, <a href="https://www.w3.org/WAI/WCAG20/quickref/#time-limits-postponed">2.2.4 - Interruptions</a>, and <a href="https://www.w3.org/WAI/WCAG20/quickref/#visual-audio-contrast-dis-audio">1.4.2 - Audio Control</a> in “How to Meet WCAG 2.0”.</p> <p><strong>Literature review references:</strong> <a href="https://www.w3.org/TR/wai-age-literature/#whatcog">Cognitive decline with age</a> and <a href="https://www.w3.org/TR/wai-age-literature/#elderlyuserscog">Studies of elderly Web users’ specific disabilities - Cognition.</a></p> </div></aside> <aside class="box box-large"><header class="box-h box-h-large"> <h4 id="timing">Sufficient time</h4> </header><div class="box-i"> <p>It takes some older people longer to read text and complete transactions due to declining vision, dexterity, or cognition.</p> <p><strong>WCAG 2.0 success criteria:</strong></p> <ul> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#time-limits-required-behaviors">2.2.1 - Timing Adjustment</a> (A) says that users can turn off, adjust, or extend any time limits</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#time-limits-no-exceptions">2.2.3 - No Timing</a> (AAA) says “timing is not an essential part of the event or activity presented by the content” (except for multimedia or real-time events)</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#time-limits-pause">2.2.2 - Pause, Stop, Hide</a> (A) says that scrolling content should be able to be paused and that auto updating content can be also paused or controlled</li> </ul> <p><strong>Example techniques to consider:</strong></p> <ul> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G4">G4: Allowing the content to be paused and restarted from where it was paused</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G198">G198: Providing a way for the user to turn the time limit off</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/SCR16">SCR16: Providing a script that warns the user a time limit is about to expire</a> <em>and</em><br /> <a href="https://www.w3.org/TR/WCAG20-TECHS/SCR1">SCR1: Allowing the user to extend the default time limit</a></li> </ul> <p>More techniques are listed under <a href="https://www.w3.org/WAI/WCAG20/quickref/#time-limits-required-behaviors">2.2.1 - Timing Adjustment</a>, <a href="https://www.w3.org/WAI/WCAG20/quickref/#time-limits-no-exceptions">2.2.3 - No Timing</a>, and <a href="https://www.w3.org/WAI/WCAG20/quickref/#time-limits-pause">2.2.2 - Pause, Stop, Hide</a> in “How to Meet WCAG 2.0”.</p> <p><strong>Literature review references:</strong> <a href="https://www.w3.org/TR/wai-age-literature/#whatcog">Cognitive decline with age</a> and <a href="https://www.w3.org/TR/wai-age-literature/#elderlyuserscog">Studies of elderly Web users’ specific disabilities - Cognition.</a></p> </div></aside> <h3 id="u">Understandable information and user interface</h3> <aside class="box box-large"><header class="box-h box-h-large"> <h4 id="pageorg">Page organization</h4> </header><div class="box-i"> <p>Many older people are inexperienced web users without advanced browsing habits and therefore read the whole page, so good page organization is important.</p> <p><strong>WCAG 2.0 success criteria:</strong></p> <ul> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-descriptive">2.4.6 - Headings and Labels</a> (AA) says “headings and labels describe topic or purpose”</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-headings">2.4.10 - Section Headings</a> (AAA) says “section headings are used to organize the content”</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#visual-audio-contrast-visual-presentation">1.4.8 - Visual</a><a href="https://www.w3.org/WAI/WCAG20/quickref/#visual-audio-contrast-visual-presentation">Presentation</a> (AAA) includes techniques to help with text organization</li> </ul> <p><strong>Example techniques to consider:</strong></p> <ul> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G130">G130: Providing descriptive headings</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G131">G131: Providing descriptive labels</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G141">G141: Organizing a page using headings</a></li> <li>Using vertical (bulleted or numbered) lists rather than inline lists (future link)</li> </ul> <p>More techniques are listed under <a href="https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-descriptive">2.4.6 - Headings and Labels</a>, <a href="https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-headings">2.4.10 - Section Headings</a> and <a href="https://www.w3.org/WAI/WCAG20/quickref/#visual-audio-contrast-visual-presentation">1.4.8 - Visual</a><a href="https://www.w3.org/WAI/WCAG20/quickref/#visual-audio-contrast-visual-presentation">Presentation</a> in “How to Meet WCAG 2.0”.</p> <p><strong>Literature review references:</strong> <a href="https://www.w3.org/TR/wai-age-literature/#whatcog">Cognitive decline with age</a> and <a href="https://www.w3.org/TR/wai-age-literature/#existguide">Previous approaches to ‘senior friendly’ Web guidelines</a>.</p> </div></aside> <aside class="box box-large"><header class="box-h box-h-large"> <h4 id="language">Understandable language</h4> </header><div class="box-i"> <p>Many older people find it particularly difficult to understand complex sentences, unusual words, and technical jargon.</p> <p><strong>WCAG 2.0 success criteria:</strong></p> <ul> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#meaning-idioms">3.1.3 - Unusual Words</a> (AAA) says “a mechanism is available for identifying specific definitions of words or phrases used in an unusual or restricted way”</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#meaning-located">3.1.4 - Abbreviations</a> (AAA) says “a mechanism for identifying the expanded form or meaning of abbreviations is available”</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#meaning-supplements">3.1.5 - Reading Level</a> (AAA) requires providing a version that “does not require reading ability more advanced than the lower secondary education level”</li> </ul> <p><strong>Example techniques to consider:</strong></p> <ul> <li>Using the clearest and simplest language appropriate for the content (future link)</li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G102">G102: Providing the expansion or explanation of an abbreviation</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G153">G153: Making the text easier to read</a></li> </ul> <p>More techniques are listed under <a href="https://www.w3.org/WAI/WCAG20/quickref/#meaning-idioms">3.1.3 - Unusual Words</a>, <a href="https://www.w3.org/WAI/WCAG20/quickref/#meaning-located">3.1.4 - Abbreviations</a> and <a href="https://www.w3.org/WAI/WCAG20/quickref/#meaning-supplements">3.1.5 - Reading Level</a> in “How to Meet WCAG 2.0”.</p> <p><strong>Literature review references:</strong> <a href="https://www.w3.org/TR/wai-age-literature/#whatcog">Cognitive decline with age</a> and <a href="https://www.w3.org/TR/wai-age-literature/#existguide">Previous approaches to ‘senior friendly’ Web guidelines</a>.</p> </div></aside> <aside class="box box-large"><header class="box-h box-h-large"> <h4 id="consistent">Consistent navigation and labeling</h4> </header><div class="box-i"> <p>For people who are new to the web, and older people with some types of cognitive decline, consistent navigation and presentation is particularly important.</p> <p><strong>WCAG 2.0 success criteria:</strong></p> <ul> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#consistent-behavior-consistent-locations">3.2.3 - Consistent Navigation</a> (AA) requires that navigation is presented in the same relative order across a website</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#consistent-behavior-consistent-functionality">3.2.4 - Consistent Identification</a> (AA) requires that components with similar functionality are identified consistently</li> </ul> <p><strong>Example techniques to consider:</strong></p> <ul> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G61">G61: Presenting repeated components in the same relative order each time they appear</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G197">G197: Using labels, names, and text alternatives consistently for content that has the same functionality</a></li> </ul> <p>More techniques are listed under <a href="https://www.w3.org/WAI/WCAG20/quickref/#consistent-behavior-consistent-locations">3.2.3 - Consistent Navigation</a> and <a href="https://www.w3.org/WAI/WCAG20/quickref/#consistent-behavior-consistent-functionality">3.2.4 - Consistent Identification</a> in “How to Meet WCAG 2.0”.</p> <p><strong>Literature review references:</strong> <a href="https://www.w3.org/TR/wai-age-literature/#whatcog">Cognitive decline with age</a> and <a href="https://www.w3.org/TR/wai-age-literature/#existguide">Previous approaches to ‘senior friendly’ Web guidelines</a>.</p> </div></aside> <aside class="box box-large"><header class="box-h box-h-large"> <h4 id="popups">Pop-ups and new windows</h4> </header><div class="box-i"> <p>Some older people experiencing cognitive decline can be confused or distracted by pop-ups, new windows, or new tabs.</p> <p><strong>WCAG 2.0 success criteria:</strong></p> <ul> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#consistent-behavior-receive-focus">3.2.1 - On Focus</a> (A) says “when any component receives focus, it does not initiate a change of context”</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#consistent-behavior-no-extreme-changes-context">3.2.5 - Change on Request</a> (AAA) says “changes of context are initiated only by user request or a mechanism is available to turn off such changes”</li> </ul> <p><strong>Example techniques to consider:</strong></p> <ul> <li>Giving users advanced warning when opening a new window (future link)</li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G107">G107: Using “activate” rather than “focus” as a trigger for changes of context</a></li> <li>Opening new windows only when best from an accessibility perspective (future link)</li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/SCR24">SCR24: Using progressive enhancement to open new windows on user request</a></li> <li>Opening new windows by providing normal hyperlinks without the target attribute (future link), because many user agents allow users to open links in a new window or tab</li> </ul> <p>More techniques are listed under <a href="https://www.w3.org/WAI/WCAG20/quickref/#consistent-behavior-receive-focus">3.2.1 - On Focus</a> and <a href="https://www.w3.org/WAI/WCAG20/quickref/#consistent-behavior-no-extreme-changes-context">3.2.5 - Change on Request</a> in “How to Meet WCAG 2.0”.</p> <p><strong>Literature review reference:</strong> <a href="https://www.w3.org/TR/wai-age-literature/#training">Training the elderly to Use ICT and the Web</a></p> </div></aside> <aside class="box box-large"><header class="box-h box-h-large"> <h4 id="refresh">Page refresh and updates</h4> </header><div class="box-i"> <p>Some older people with declining vision or cognition can miss content that automatically updates or refreshes in a page.</p> <p><strong>WCAG 2.0 success criteria:</strong></p> <ul> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#consistent-behavior-receive-focus">3.2.1 - On Focus</a> (A) says “when any component receives focus, it does not initiate a change of context”</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#consistent-behavior-unpredictable-change">3.2.2 - On Input</a> (A) says that changing a setting does not automatically change the context unless the user has been advised beforehand</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#consistent-behavior-no-extreme-changes-context">3.2.5 - Change on Request</a> (AAA) says “changes of context are initiated only by user request or a mechanism is available to turn off such changes”</li> </ul> <p><strong>Example techniques to consider:</strong></p> <ul> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G80">G80: Providing a submit button to initiate a change of context</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G13">G13: Describing what will happen before a change to a form control that causes a change of context to occur is made</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G107">G107: Using “activate” rather than “focus” as a trigger for changes of context</a></li> <li>Not causing persistent changes of state or value when a component receives focus, or providing an alternate means to reset any changes (future link)</li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G76">G76: Providing a mechanism to request an update of the content instead of updating automatically</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/SCR19">SCR19: Using an onchange event on a select element without causing a change of context</a></li> </ul> <p>More techniques are listed under <a href="https://www.w3.org/WAI/WCAG20/quickref/#consistent-behavior-receive-focus">3.2.1 - On Focus</a>, <a href="https://www.w3.org/WAI/WCAG20/quickref/#consistent-behavior-unpredictable-change">3.2.2 - On Input</a> and <a href="https://www.w3.org/WAI/WCAG20/quickref/#consistent-behavior-no-extreme-changes-context">3.2.5 - Change on Request</a> in “How to Meet WCAG 2.0”.</p> <p><strong>Literature review reference:</strong> <a href="https://www.w3.org/TR/wai-age-literature/#elderlyuserscog">Studies of elderly Web users’ specific disabilities - Cognition</a></p> </div></aside> <aside class="box box-large"><header class="box-h box-h-large"> <h4 id="instructions">Instructions and input assistance</h4> </header><div class="box-i"> <p>It is difficult for some older people to understand the requirements of forms and transactions.</p> <p><strong>WCAG 2.0 success criteria:</strong></p> <ul> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#minimize-error-identified">3.3.2 - Labels or Instructions</a> (A) says “labels or instructions are provided when content requires user input”</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#minimize-error-context-help">3.3.5 - Help</a> (AAA) says “context-sensitive help is available”</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#consistent-behavior-consistent-functionality">3.2.4 - Consistent Identification</a> (AA) says “components that have the same functionality within a set of Web pages are identified consistently”</li> </ul> <p><strong>Example techniques to consider:</strong></p> <ul> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G184">G184: Providing text instructions at the beginning of a form or set of fields that describes the necessary input</a></li> <li>Providing linear form design and grouping similar items (future link)</li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G194">G194: Providing spell checking and suggestions for text input</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G89">G89: Providing expected data format and example</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G197">G197: Using labels, names, and text alternatives consistently for content that has the same functionality</a></li> </ul> <p>More techniques are listed under the success criteria for <a href="https://www.w3.org/WAI/WCAG20/quickref/#minimize-error-identified">3.3.2 - Labels or Instructions</a>, <a href="https://www.w3.org/WAI/WCAG20/quickref/#minimize-error-context-help">3.3.5 - Help</a> and <a href="https://www.w3.org/WAI/WCAG20/quickref/#consistent-behavior-consistent-functionality">3.2.4 - Consistent Identification</a> in “How to Meet WCAG 2.0”.</p> <p><strong>Literature review reference:</strong> <a href="https://www.w3.org/TR/wai-age-literature/#designforms">Aspects of Web Design affecting the elderly - Forms</a>.</p> </div></aside> <aside class="box box-large"><header class="box-h box-h-large"> <h4 id="errors">Error prevention and recovery for forms</h4> </header><div class="box-i"> <p>It is difficult for some older people to use forms and complete transactions due to declining cognitive abilities.</p> <p><strong>WCAG 2.0 success criteria:</strong></p> <ul> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#minimize-error-reversible">3.3.4 - Error Prevention (Legal, Financial, Data)</a> (AA) says that pages with legal commitments or financial transactions have reversible submissions and can be checked and corrected</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#minimize-error-context-help">3.3.6 - Error Prevention (All)</a> (AAA) says that users can check and correct any information they submit</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#minimize-error-identified">3.3.1 - Error Identification</a> (A) says “if an input error is automatically detected, the item that is in error is identified and the error is described to the user”</li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#minimize-error-suggestions">3.3.3 - Error Suggestion</a> (AA) says “if an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user”</li> </ul> <p><strong>Example techniques to consider:</strong></p> <ul> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G98">G98: Providing the ability for the user to review and correct answers before submitting</a></li> <li>Accepting input data in a variety of formats (future link)</li> <li>Informing the user what irreversible action is about to happen (future link)</li> <li>Making error messages easy to understand and distinguishable from other text in the Web page (future link)</li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G83">G83: Providing text descriptions to identify required fields that were not completed</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G85">G85: Providing a text description when user input falls outside the required format or values</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G139">G139: Creating a mechanism that allows users to jump to errors</a></li> <li>Re-displaying a form with a summary of errors (future link)</li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G177">G177: Providing suggested correction text</a></li> <li>Providing a text description that contains information about the number of input errors, suggestions for corrections to each item, and instructions on how to proceed (future link)</li> </ul> <p>More techniques are listed under the success criteria for <a href="https://www.w3.org/WAI/WCAG20/quickref/#minimize-error-reversible">Guideline 3.3 - Input Assistance</a> in “How to Meet WCAG 2.0”.</p> <p><strong>Literature review reference:</strong> <a href="https://www.w3.org/TR/wai-age-literature/#designforms">Aspects of Web Design affecting the elderly - Forms</a>.</p> </div></aside> <h3 id="r">Robust content and reliable interpretation</h3> <aside class="box box-large"><header class="box-h box-h-large"> <h4 id="oldequip">Older equipment/software</h4> </header><div class="box-i"> <p>Some older people will be using older browsers that might not be as capable or fault tolerant as current releases.</p> <p><strong>WCAG 2.0 success criteria:</strong></p> <ul> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/#ensure-compat-parses">4.1.1 - Parsing</a> (A) requires that markup is used correctly according to specification</li> </ul> <p><strong>Example techniques to consider:</strong></p> <ul> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G134">G134: Validating Web pages</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G192">G192: Fully conforming to specifications</a></li> </ul> <p>More techniques are listed under <a href="https://www.w3.org/WAI/WCAG20/quickref/#ensure-compat-parses">4.1.1 - Parsing</a> in “How to Meet WCAG 2.0”.</p> </div></aside> <nav class="pager" aria-label="Previous/Next Page"> <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/pages/fundamentals/people/older-users/developing.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-older-users&wai-url=https://www.w3.org/WAI/older-users/developing/" 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>This page has been reviewed and is current as of</strong> 1 January 2018. <a href="/WAI/older-users/changelog/">Latest changes</a>.</p><p><strong>Editors:</strong> <a href="https://www.w3.org/People/Andrew/">Andrew Arch</a> and <a href="https://www.w3.org/People/shadi/">Shadi Abou-Zahra</a>. Contributors: <a href="https://www.w3.org/People/Shawn/">Shawn Henry</a>, Suzette Keith, Kate Roberts. </p> <p>Developed with input from the Education and Outreach Working Group (<a href="https://www.w3.org/WAI/EO/">EOWG</a>), with the <a href="https://www.w3.org/WAI/EO/2008/wai-age-tf.html#participants">WAI-AGE Task Force</a>. Related to the <a href="https://www.w3.org/WAI/WAI-AGE/">WAI-AGE Project</a> funded by the European Commission under the 6th Framework.</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?1732542395990846989"></script>  <script src="/WAI/assets/scripts/svg4everybody.js?1732542395990846989"></script> <script> svg4everybody(); </script><script> var translationStrings = {}; </script> </body> </html>