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> Ade, reporter with limited use of his arms | Web Accessibility Initiative (WAI) | W3C</title> <meta name="generator" content="Jekyll v4.3.3" /> <meta property="og:title" content="Ade, reporter with limited use of his arms" /> <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/people-use-web/user-stories/story-one/" /> <meta property="og:url" content="https://www.w3.org/WAI/people-use-web/user-stories/story-one/" /> <meta property="og:site_name" content="Web Accessibility Initiative (WAI)" /> <meta property="og:image" content="https://www.w3.org/WAI/content-images/people-use-web/social.png" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="twitter:image" content="https://www.w3.org/WAI/content-images/people-use-web/social.png" /> <meta property="twitter:title" content="Ade, reporter with limited use of his arms" /> <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":"Ade, reporter with limited use of his arms","image":"https://www.w3.org/WAI/content-images/people-use-web/social.png","url":"https://www.w3.org/WAI/people-use-web/user-stories/story-one/"}</script>  <link rel="alternate" type="application/rss+xml" href="/WAI/feed.xml"> </head> <body id="top" class="page-ade-reporter-with-limited-use-of-his-arms "> <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/people-use-web/user-stories/"><span>Stories of Web Users</span></a></li><li><a lang="en" href="/WAI/people-use-web/user-stories/story-one/" aria-current="page"><span>Ade's Story</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/" aria-current="location" class="page-link"><span>Stories of Web Users</span></a><ul> <li> <a lang="en" href="/WAI/people-use-web/user-stories/story-one/" aria-current="page" class="page-link"><span>Ade's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-two/" class="page-link"><span>Ian's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-three/" class="page-link"><span>Lakshmi's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-four/" class="page-link"><span>Lexie's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-five/" class="page-link"><span>Sophie's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-six/" class="page-link"><span>Dhruv's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-seven/" class="page-link"><span>Marta's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-eight/" class="page-link"><span>Stefan's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-nine/" class="page-link"><span>Elias' Story</span></a></li></ul></li><li> <a lang="en" href="/WAI/people-use-web/abilities-barriers/" class="page-link"><span>Diverse Abilities and Barriers</span></a><ul><li> <a lang="en" href="/WAI/people-use-web/abilities-barriers/auditory/" class="page-link"><span>Auditory</span></a></li><li> <a lang="en" href="/WAI/people-use-web/abilities-barriers/cognitive/" class="page-link"><span>Cognitive and Learning</span></a></li><li> <a lang="en" href="/WAI/people-use-web/abilities-barriers/physical/" class="page-link"><span>Physical</span></a></li><li> <a lang="en" href="/WAI/people-use-web/abilities-barriers/speech/" class="page-link"><span>Speech</span></a></li><li> <a lang="en" href="/WAI/people-use-web/abilities-barriers/visual/" class="page-link"><span>Visual</span></a></li></ul></li><li> <a lang="en" href="/WAI/people-use-web/tools-techniques/" class="page-link"><span>Tools and Techniques</span></a><ul><li> <a lang="en" href="/WAI/people-use-web/tools-techniques/perception/" class="page-link"><span>Perception</span></a></li><li> <a lang="en" href="/WAI/people-use-web/tools-techniques/presentation/" class="page-link"><span>Presentation</span></a></li><li> <a lang="en" href="/WAI/people-use-web/tools-techniques/input/" class="page-link"><span>Input</span></a></li><li> <a lang="en" href="/WAI/people-use-web/tools-techniques/navigation/" class="page-link"><span>Interaction</span></a></li></ul></li><li> <a lang="en" href="/WAI/older-users/" class="page-link"><span>Older Users and Accessibility</span></a><ul><li> <a lang="en" href="/WAI/older-users/developing/" class="page-link"><span>How WCAG 2 Applies</span></a></li><li> <a lang="en" href="/WAI/older-users/literature/" class="page-link"><span>Literature Review</span></a></li></ul></li><li> <a lang="en" href="/WAI/fundamentals/accessibility-usability-inclusion/" class="page-link"><span>Accessibility, Usability, Inclusion</span></a></li></ul></li><li> <a lang="en" href="/WAI/fundamentals/components/" class="page-link"><span>Components of Web Accessibility</span></a></li><li> <a lang="en" href="/WAI/fundamentals/accessibility-principles/" 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> Ade, reporter with limited use of his arms <span class="in-resource-sub"> in <a lang="en" href="/WAI/people-use-web/user-stories/"><span>Stories of Web Users</span></a>, <a lang="en" href="/WAI/people-use-web/"><span>How People with Disabilities Use the Web</span></a></span> </h1> </header> <style> #introduction p { font-size:120%; margin: 0.5em 0 0 0; } #introduction .box-i { } #introduction nav { border: 0; margin-top: 0; } #introduction nav header { padding: 8px 16px; } #introduction .video-card { margin: 1em; float: none !important; max-width: inherit !important; min-width: 45% !important; } #introduction .video-card p { font-size: 90%; margin: 0; } #introduction .video-card p:first-child { height: 190px; } #introduction img.video { border-radius: 5px; width: 300px; max-width: 300px; } #introduction .video-card .play-button { position: relative; top: -55px; left: -185px; width: 60px; height: 60px; } @media all and (min-width: 576px) { #introduction .box-i { display: flex; flex: 0 1; } #introduction .video-card .play-button { position: relative; top: -120px; left: 120px; width: 60px; height: 60px; } } </style> <blockquote class="pull alt-2"> <p>Accessibility: It's about people</p></blockquote> <aside id="introduction" class="box"><div class="box-i"> <div> <p>Ade is a reporter who has limited use of his arms. He has several strategies for navigating websites, including using his palm to operate a joystick, using one finger to press keys on the keyboard, which allows him to move up and down the page and tab from link to link, and more recently, using speech recognition. All of these methods, however, have drawbacks. When using the joystick, it is hard to click on small targets such as placing the cursor between words or at the end of a sentence. When using the keyboard, it’s sometimes hard to know which page element has focus, plus the order of links often doesn’t match what he sees when looking at the page. Speech recognition has promise but it involves a whole new way of working to someone who is used to typing. So that Ade can switch from one method to another, it is important to make sure links and other page elements have visual focus indicators and match the order that they appear on the page and that content flows correctly when the site is zoomed to make everything appear larger.</p> </div> <div class="video-card"> <video controls poster="/WAI/content-images/people-use-web/user-stories/ade-video-frame.png"> <source src="//media.w3.org/wai/people-use-web/user-stories_1.mp4" type="video/mp4"><track src="/WAI/wai-videos/people-use-web/user-stories_1.en.vtt" label="English" kind="captions" srclang="en" ></video> <p>This video is available with more accessibility features: <a href="#accessible-video">Video: Ade, reporter with limited use of his arms</a>.</p> </div> </div> <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="#about-ade" id="markdown-toc-about-ade">About Ade</a></li> <li><a href="#barrier-examples" id="markdown-toc-barrier-examples">Barrier examples</a></li> <li><a href="#assistive-technologies-and-adaptive-strategies-used" id="markdown-toc-assistive-technologies-and-adaptive-strategies-used">Assistive technologies and adaptive strategies used</a></li> <li><a href="#related-wai-resources" id="markdown-toc-related-wai-resources">Related WAI resources</a></li> <li><a href="#related-principles" id="markdown-toc-related-principles">Related principles</a></li> <li><a href="#accessible-video" id="markdown-toc-accessible-video">Video: Ade, reporter with limited use of his arms</a></li> </ul> </div> </nav> </aside> <p><strong>Note:</strong> This user story is an example of a person with this type of disability. Other people with this disability may have different experiences.</p> <h2 id="about-ade">About Ade</h2> <blockquote> <p>It’s not like I can’t use a keyboard or pointer, I just can’t use them for long periods because it is tiring.</p> </blockquote> <p>Ade was involved in a accident which caused a spinal cord injury. This left him with limited use of his arms and no movement or sensation in his legs. He has worked as a reporter for many years. Ade sometimes uses a keyboard with larger keys to help him more easily hit the correct key and a joystick instead of a mouse. However, using these for extended periods can be tiring so he has started using speech recognition software for some tasks, such as dictating long pieces.</p> <p>Rather than using his fingers, Ade uses the palm of his hand to operate a joystick that has an enlarged lever. This can be inaccurate to use, particularly when pointing to and clicking on small areas. When this happens, he sometimes switches to using the keyboard for navigation. He can use the tab key to move through links and form elements. When using the keyboard, Ade has found that on some sites he couldn’t see which field or link had focus. He also found that sometimes the links weren’t in a logical order, which made it hard to find the element he was interested in. He could always use his joystick but that can interrupt his flow and slow him down. Sites often include good visual styling when you hover over a link but sometimes don’t include this when the link has keyboard focus. For Ade, it is important that websites clearly show which link has the current focus and to navigate through links in a logical order, that is, following the visual order of links on the page.</p> <p>When using a keyboard, Ade has found some features which really help. For example, a skip link that moves focus past all the navigation on the page is a big help. Ade tries to avoid sites that don’t have this feature. However, it limits his research sources a bit.</p> <p>Ade has started using speech control software which helps him to avoid having to use the joystick and keyboard. The software allows him to select and ‘click’ on links by speaking but only when the links are clear and coded correctly. The software also has a speech-to-text dictation feature. As someone who has spent years typing out his articles, Ade is having to train himself in a new way of working. He would still prefer to type as he thinks he is much slower with dictation but he is hopeful that his speed will improve.</p> <p>Outside of work, Ade finds his mobile device easier to use than the computer because there is limited navigation and no pointer device. Since it is hand-held, he has more options to place it in a position that he is comfortable with. He wishes his employer would create a mobile-friendly or responsive site that he could use for his job.</p> <h2 id="barrier-examples">Barrier examples</h2> <dl> <dt>Focus styling barrier</dt> <dd><strong>Barrier:</strong> “When I tab through links and form fields there is no visual styling to show me which element I am on.”</dd> <dd><strong>Works well:</strong> “There is clear and strong visual styling for links and form fields when they receive focus.”</dd> <dt>Process time outs barrier</dt> <dd><strong>Barrier:</strong> “I usually take much longer to complete long forms or processes and often get timed out.”</dd> <dd><strong>Works well:</strong> “At the start of a long form or process, I am told that there is a time out and given the option to set it to be slightly longer.”</dd> <dt>Saving progress barrier</dt> <dd><strong>Barrier:</strong> “Completing long forms with no way to save progress and take a break can be tiring.”</dd> <dd><strong>Works well:</strong> “I have an option to save progress and take a break when completing long, multi-step forms like when I have to get a code in email or text and type it in.”</dd> <dt>Popup windows barrier</dt> <dd><strong>Barrier:</strong> “When a window opens and I can’t close it using only the keyboard it can be difficult.”</dd> <dd><strong>Works well:</strong> “New windows have a close icon that I can access using the keyboard and some include the option to press the escape key to close them.”</dd> </dl> <h2 id="assistive-technologies-and-adaptive-strategies-used">Assistive technologies and adaptive strategies used</h2> <ul> <li><a href="/WAI/people-use-web/tools-techniques/input/#accelerators">Accelerators (Input)</a></li> <li><a href="/WAI/people-use-web/tools-techniques/input/#input">Alternative keyboard and mouse (Input)</a></li> <li><a href="/WAI/people-use-web/tools-techniques/input/#speech">Speech recognition (Input)</a></li> <li><a href="/WAI/people-use-web/tools-techniques/input/#prediction">Word prediction (Input)</a></li> <li><a href="/WAI/people-use-web/tools-techniques/navigation/#keyboard">Keyboard navigation (Interaction)</a></li> <li><a href="/WAI/people-use-web/tools-techniques/navigation/#skip">Skip links (Interation)</a></li> </ul> <h2 id="related-wai-resources">Related WAI resources</h2> <ul> <li>Video: <a href="/WAI/perspective-videos/voice/">Speech Recognition</a></li> <li>Tip: <a href="/WAI/tips/writing/#use-headings-to-convey-meaning-and-structure">Use headings to convey meaning and structure</a></li> <li>Tip: <a href="/WAI/tips/writing/#make-link-text-meaningful">Make link text meaningful</a></li> <li>Tip: <a href="/WAI/tips/designing/#ensure-that-interactive-elements-are-easy-to-identify">Ensure that interactive elements are easy to identify</a></li> <li>Tip: <a href="/WAI/tips/developing/#associate-a-label-with-every-form-control">Associate a label with every form control</a></li> <li>Tip: <a href="/WAI/tips/developing/#ensure-that-all-interactive-elements-are-keyboard-accessible">Ensure that all interactive elements are keyboard accessible</a></li> <li>Check: <a href="/WAI/test-evaluate/preliminary/#interaction">Keyboard access and visual focus</a></li> <li>Check: <a href="/WAI/test-evaluate/preliminary/#forms">Forms, labels, and errors</a></li> </ul> <h2 id="related-principles">Related principles</h2> <ul> <li><a href="/WAI/fundamentals/accessibility-principles/#alternatives">Text alternatives for non-text content (Perceivable)</a></li> <li><a href="/WAI/fundamentals/accessibility-principles/#adaptable">Content can be presented in different ways (Perceivable)</a></li> <li><a href="/WAI/fundamentals/accessibility-principles/#keyboard">Functionality is available from a keyboard (Operable)</a></li> <li><a href="/WAI/fundamentals/accessibility-principles/#time">Users have enough time to read and use the content (Operable)</a></li> <li><a href="/WAI/fundamentals/accessibility-principles/#navigable">Users can easily navigate, find content, and determine where they are (Operable)</a></li> <li><a href="/WAI/fundamentals/accessibility-principles/#predictable">Content appears and operates in predictable ways (Understandable)</a></li> <li><a href="/WAI/fundamentals/accessibility-principles/#tolerant">Users are helped to avoid and correct mistakes (Understandable)</a></li> <li><a href="/WAI/fundamentals/accessibility-principles/#compatible">Content is compatible with current and future user tools (Robust)</a></li> </ul> <details id="video-transcript"><summary> <h2 id="accessible-video">Video: Ade, reporter with limited use of his arms</h2> </summary> <div> <div class="video-container" data-video-type="" dir="ltr"> <video preload="metadata" data-youtube-id="Z5dMdJzUy7w" data-youtube-nocookie="true" data-description-audible="false" playsinline=""><track src="/WAI/wai-videos/people-use-web/user-stories_1.en.vtt" label="English" kind="captions" srclang="en" default="" /></video> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="//cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script> <script src="/WAI/assets/ableplayer/build/ableplayer.min.js"></script> <script> var youTubeDataAPIKey = "AIzaSyBzq155tA3E3gaYlRdx2S9U9FM78U1-568"; var googleApiReady = false; function initGoogleClientApi() { googleApiReady = true; } </script> <script src="//apis.google.com/js/client.js?onload=initGoogleClientApi"></script> <script> (function () { 'use strict'; let player1 = new AblePlayer($('[data-video-type=""] video')); const audiodescribed = document.querySelectorAll('[data-video-type="audio-described"]'); const nonaudiodescribed = document.querySelectorAll('[data-video-type=""]'); if (audiodescribed.length > 0) { let player2 = new AblePlayer($('[data-video-type="audio-described"] video')); Array.prototype.forEach.call(audiodescribed, function(el, i){ el.setAttribute('hidden', true); }); const adbutton = document.querySelector('#audio_description_button'); adbutton.addEventListener('click', function(e){ player1.pauseMedia(); player2.pauseMedia(); if (e.currentTarget.getAttribute('data-status') === "audio-described") { Array.prototype.forEach.call(nonaudiodescribed, function(el, i){ el.removeAttribute("hidden"); }); Array.prototype.forEach.call(audiodescribed, function(el, i){ el.setAttribute('hidden', true); }); e.currentTarget.setAttribute('data-status', 'non-audio-described'); e.currentTarget.querySelector('span').textContent = 'Enable Audio Description'; } else { Array.prototype.forEach.call(nonaudiodescribed, function(el, i){ el.setAttribute('hidden', true); }); Array.prototype.forEach.call(audiodescribed, function(el, i){ el.removeAttribute("hidden"); }); e.currentTarget.setAttribute('data-status', 'audio-described'); e.currentTarget.querySelector('span').textContent = 'Disable Audio Description'; } }); } }()); </script> <p><em>This video is also available on a W3C server: <a href="https://media.w3.org/wai/people-use-web/user-stories_1.mp4">Video: Ade, reporter with limited use of his arms (file format: MP4, file size: 162MB)</a>.</em></p> <h3 id="transcript">Text Transcript with Description of Visuals</h3> <table> <thead> <tr> <th>Audio</th> <th>Visual</th> </tr> </thead> <tbody> <tr> <td>How people with disabilities use digital technology; Ade, reporter with limited use of his arms.</td> <td>How people with disabilities use the digital technology; Ade, reporter with limited use of his arms.</td> </tr> <tr> <td>Hello! I’m Ade. I’m quadriplegic, which means I have limited movement in my arms as well as in my legs.</td> <td>A man in a wheelchair speaks directly to the camera.</td> </tr> <tr> <td>The technology I use is really important to me. I use a lot of keyboard shortcuts, especially for the programs that I use often. For example, scrolling a page is much easier with the arrow keys on the keyboard than by clicking on that button in the scroll bar.</td> <td>The man is sitting at a desk using a laptop. He uses the arrow keys to scroll up and down a web page.</td> </tr> <tr> <td>Unfortunately, many websites and apps don’t work well with my keyboard. Often what has focus isn’t clear or jumps around completely out of order.</td> <td>The man uses the Tab key to complete sections of a form.</td> </tr> <tr> <td>Sometimes that doesn’t work well because some websites and apps don’t work in landscape orientation, which is how I setup my tablet so that the buttons are big enough for me to click.</td> <td>The man is sitting and using his tablet in landscape orientation. The web page he is trying to view does not rotate to a landscape orientation.</td> </tr> <tr> <td>While I can use a keyboard and joystick, I can’t use them for long periods because it’s tiring. So, I recently started using speech control software as well. It allows me to dictate text instead of typing, and to say certain commands instead of clicking. It’s really hard to learn a new way of working after so many years, but I’ve been patient with it and I’m slowly getting used to it. The most difficult thing is buttons without labels – it’s not clear which voice command would activate them.</td> <td>The man is sitting at a desk. He is talking to his laptop to write an email.</td> </tr> <tr> <td>You can help make technology accessible to me. Accessibility: It’s about people.</td> <td>The man speaks directly to the camera.</td> </tr> <tr> <td>For more information from the Web Accessibility Initiative on how people with disabilities use digital technology, visit w3.org/WAI/people</td> <td>Accessibility: It’s about people; w3.org/WAI/people</td> </tr> </tbody> </table> </div> </details> <nav class="pager" aria-label="Previous/Next Page" style="clear: both;"> <ul><li class="pager--item previous"> <a href="/WAI/people-use-web/user-stories/"> <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">User Stories</span> </span> </a> </li><li class="pager--item next"> <a href="/WAI/people-use-web/user-stories/story-two/"> <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">Ian</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/pages/fundamentals/people/people-use-web/user-stories/story-one.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-people-use-web&wai-url=https://www.w3.org/WAI/people-use-web/user-stories/story-one/" 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> 25 June 2024. <a href="/WAI/people-use-web/changelog/">Latest changes</a>.</p><p>Note about video description: The video on this page does not include synchronized audio description because the visuals only illustrate the audio and do not provide additional information. In this case, audio description would be more distracting than useful to most people, including people who cannot see the visuals. Description of visual information is available in the Text Transcript with Description of Visuals (“descriptive transcript”).</p> <p>First posted as a draft in 1999.</p> <p><strong>Editors:</strong> Kevin White and Shadi Abou-Zahra. Previous editors: Judy Brewer and Norah Sinclair. Contributors: Brent Bakken, Jade Matos Carew, Jayne Schurick, Michele Williams, and others in <a href="/WAI/people-use-web/acknowledgements/">Acknowledgements</a>.</p> <p>Developed by the Education and Outreach Working Group (<a href="https//www.w3.org/WAI/EO/">EOWG</a>) with support from the <a href="https://www.w3.org/WAI/about/projects/wai-guide/">WAI-Guide Project</a> and <a href="https://www.w3.org/WAI/WAI-AGE/">WAI-AGE Project</a> co-funded by the European Commission (EC).</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>