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?1732807903713432608"; document.body.appendChild(element); } window.addEventListener("load", downloadJSAtOnload, false); </script> <link rel="stylesheet" href="/WAI/assets/css/style.css?1732807903713432608"> <title> Input - typing, writing, and clicking | Web Accessibility Initiative (WAI) | W3C</title> <meta name="generator" content="Jekyll v4.3.3" /> <meta property="og:title" content="Input - typing, writing, and clicking" /> <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/tools-techniques/input/" /> <meta property="og:url" content="https://www.w3.org/WAI/people-use-web/tools-techniques/input/" /> <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="Input - typing, writing, and clicking" /> <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":"Input - typing, writing, and clicking","image":"https://www.w3.org/WAI/content-images/people-use-web/social.png","url":"https://www.w3.org/WAI/people-use-web/tools-techniques/input/"}</script>  <link rel="alternate" type="application/rss+xml" href="/WAI/feed.xml"> </head> <body id="top" class="page-input-typing-writing-and-clicking "> <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/tools-techniques/"><span>Tools and Techniques</span></a></li><li><a lang="en" href="/WAI/people-use-web/tools-techniques/input/" aria-current="page"><span>Input</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/" aria-current="location" 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/" aria-current="page" 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> Input - typing, writing, and clicking <span class="in-resource-sub"> in <a lang="en" href="/WAI/people-use-web/tools-techniques/"><span>Tools and Techniques</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, #introduction ul { 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>People use different approaches to enter text and activate commands, for example:</p> <ul> <li>Keyboard only by people with cognitive, physical, and visual disabilities;</li> <li>Touch screen only by people with cognitive and physical disabilities;</li> <li>Mouse and keyboard with software that compensates for hand tremor;</li> <li>Speech recognition and other hands-free interaction.</li> </ul> </div> <div class="video-card"> <video controls poster="/WAI/content-images/people-use-web/tools-techniques/input-video-frame.png"> <source src="//media.w3.org/wai/people-use-web/tools-techniques_input.mp4" type="video/mp4"><track src="/WAI/wai-videos/people-use-web/tools-techniques_input.en.vtt" label="English" kind="captions" srclang="en" ></video> <p>This video is available with more accessibility features: <a href="#accessible-video">Video: Tools and Techniques - Input</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="#introduction" id="markdown-toc-introduction">Introduction</a></li> <li><a href="#examples-of-assistive-technologies-and-adaptive-strategies" id="markdown-toc-examples-of-assistive-technologies-and-adaptive-strategies">Examples of assistive technologies and adaptive strategies</a></li> <li><a href="#stories-related-to-input" id="markdown-toc-stories-related-to-input">Stories related to input</a></li> <li><a href="#accessible-video" id="markdown-toc-accessible-video">Video: Tools and Techniques - Input</a></li> </ul> </div> </nav> </aside> <p><strong>Note:</strong> The examples given in this section are not a complete list of all the ways that people interact with digital technology.</p> <h2 id="introduction">Introduction</h2> <p>Some people use software and customized settings to enhance the efficiency of typing, writing, and clicking. For example, some people assign personalized shortcut keys to functions they frequently use. Some people use word prediction software to help complete words and sentences with minimal typing, grammar and spelling tools to help correct text, and tools to help click, select text, and scroll with minimal movement.</p> <p>Digital content needs to be designed to support these different types of approaches. For example, forms, links, and other functionality need to be usable by keyboard. In particular, applications (“client-side scripting”), embedded media players, and other programmatic objects need to provide full keyboard support that does not trap the keyboard focus within the program and larger clickable areas for buttons and links.</p> <p>Accessible content supports people who need more time typing, writing, and clicking, or are more likely to make mistakes. For instance, some people forget to select options and fill out form entries, misspell words and mistype data (such as dates), or unintentionally activate buttons and links. Accessible content also provides enough time to complete tasks, clear and helpful error messages and options for correcting input.</p> <h2 id="examples-of-assistive-technologies-and-adaptive-strategies">Examples of assistive technologies and adaptive strategies</h2> <ul> <li><strong id="accelerators">Accelerators</strong> – software and functionality that help reduce the effort needed to type or click. For example, by providing options to create shortcuts for commands or sequences of commands, by highlighting selection choices such as menu items, links, or options, and by helping to steer the mouse.</li> <li><strong id="input">Alternative keyboard and mouse</strong> – hardware and software primarily used by people with cognitive and physical disabilities to help interact with the computer. Examples include: <ul> <li>Keyboards with larger keys, key labels, key spacing, illuminated keys, or custom layouts;</li> <li>On-screen keyboards, touch-screens, sip-and-puff switches, and single-key switches;</li> <li>Trackballs, joysticks, touchpads, specially designed mice, and other pointing devices;</li> <li><a href="#speech" class="termref">Speech recognition</a>, <a href="#gaze" class="termref">eye tracking</a>, and other approaches for hands-free interaction.</li> </ul> </li> <li><strong id="gaze">Eye tracking</strong> (sometimes called “eye-gaze”) - a system that monitors eye movement to control the mouse pointer and detects blinking to initiate mouse clicks.</li> <li><strong id="kbd">Keyboard customization</strong> – includes changing the mapping of keys, assigning shortcut keys to functions, setting <a href="#filters" class="termref">filters</a>, and setting “sticky keys” to support single-handed typing.</li> <li><strong id="filters">Keyboard and mouse filters</strong> – functions of the operating system or software tools that recognize and compensate for involuntary movements such as tremor and spasms.</li> <li><strong id="mouse">Mouse customization</strong> – includes changing the mapping of buttons, changing the sensitivity of the mouse towards movement, setting <a href="#filters" class="termref">filters</a>, and changing the size and appearance of the mouse pointer.</li> <li><strong id="screenkbd">On-screen keyboard</strong> – virtual keyboard displayed on a screen so that it can be used with a touchscreen, mouse, trackball, joystick, or other pointing devices.</li> <li><strong id="speech">Speech recognition</strong> (sometimes called “speech input” or “voice command”) - software that recognizes the human voice and can be used to dictate text or to issue commands to operate the computer.</li> <li><strong id="lexical">Spelling and grammar tools</strong> – web browser functions, plug-ins, or other software tools to help users write.</li> <li><strong id="prediction">Word prediction</strong> – software that presents selections of matching words, phrases, or sentences based on the current input (and sometimes context) to save typing.</li> </ul> <h2 id="stories-related-to-input">Stories related to input</h2> <ul> <li><a href="/WAI/people-use-web/user-stories/story-one/">Ade, reporter with limited use of his arms</a></li> <li><a href="/WAI/people-use-web/user-stories/story-eight/">Stefan, student with attention deficit hyperactivity disorder and dyslexia</a></li> <li><a href="/WAI/people-use-web/user-stories/story-nine/">Elias, retiree with low vision, hand tremor, and mild short-term memory loss</a></li> <li><a href="/WAI/people-use-web/user-stories/story-five/">Sophie, basketball fan with Down syndrome</a></li> </ul> <details id="video-transcript"><summary> <h2 id="accessible-video">Video: Tools and Techniques - Input</h2> </summary> <div> <div class="video-container" data-video-type="" dir="ltr"> <video preload="metadata" data-youtube-id="HG4PXNRjXoU" data-youtube-nocookie="true" data-description-audible="false" playsinline=""><track src="/WAI/wai-videos/people-use-web/tools-techniques_input.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/tools-techniques_input.mp4">Video: Tools and Techniques - Input (file format: MP4, file size: 305MB)</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: Input - Typing, writing, and clicking</td> <td>How People with Disabilities Use Digital Technology: Input - Typing, writing, and clicking</td> </tr> <tr> <td>When content is accessible, people can use a variety of hardware and software to enter text and activate commands.</td> <td>Collage of four people in various settings using technology.</td> </tr> <tr> <td>Some people do not use keyboards, and use only pointing devices instead. This could include a specialized mouse, joystick, trackball, or touch screen to click links and buttons and to type on on-screen keyboards.</td> <td>Man in wheelchair with non-typical limbs holds and uses tablet.</td> </tr> <tr> <td>However, even when using these tools, people might have difficulty selecting small targets, such as small links, buttons, and controls. Websites and apps with large clickable areas around checkboxes, radio buttons, and other controls, are easier to use for people with limited mobility and reduced dexterity.</td> <td>A website form appears and the man is typing entries such as phone number. For a radio button and checkbox selections, they are able to tap the label text rather than having to tap the actual radio button and checkbox controls.</td> </tr> <tr> <td>Websites and apps also need to provide support for people who use the keyboard only. This includes providing ways to skip over repeated content, such as headers and navigation bars, as well as not breaking the default functionality in browsers and operating systems.</td> <td>Man with irregular hand movement uses a keyboard with large keys to type.</td> </tr> <tr> <td>For example, using the Tab key to move around clickable items in the content, using the Enter key for selecting items, and making the currenlty active item visible by showing a rectangular box around it.</td> <td>A web form with a bold yellow ring around the currently active field. The focus moves from First Name to Last Name with the Tab key (rather than a mouse click).</td> </tr> <tr> <td>Websites and apps that provide word prediction and accelerators, for example for search terms, reduce the amount of typing, and make them more efficient for keyboard users.</td> <td>Man with irregular hand movement continues to use a keyboard with large keys to type.</td> </tr> <tr> <td>Additionally, not everyone using only the keyboard can see the screen; for example, people who are blind. So, in addition to ensuring keyboard support, websites and apps also need to provide clear instructions, labels for form controls, error messages, and status notifications, so that people know what is happening on the screen.</td> <td>A blind man types on his laptop, navigating through a web-based form with several dropdowns. They are able to make selections and move to the next dropdown using just the keyboard commands.</td> </tr> <tr> <td>Websites and apps need to help people find and correct mistakes in their input; for example, by showing a summary of the entered data before submitting it.</td> <td>Woman with Down syndrome uses her mobile phone to complete a form. A confirmation screen appears to confirm the typed entries before submitting.</td> </tr> <tr> <td>They also need to provide sufficient time to complete tasks, or avoid timing limitations altogether. Many people with disabilities require more time to navigate and orient themselves in the content, and to click and type. In particular, people with cognitive and learning disabilities.</td> <td>Woman continues to use her phone while at the gym.</td> </tr> <tr> <td>Finally, websites and apps also need to consider people who do not use keyboard or pointing devices at all, and use speech input instead. For example, websites and apps need to be programmed and designed so that the name of a button in the software code matches the name displayed to the user. “Click send email.”</td> <td>Man in wheelchair with nontypical limbs dictates an email on his laptop. Once complete, he speaks aloud the “send email” command to send it.</td> </tr> <tr> <td>You can help make technology accessible to me.</td> <td>Man smiling at screen while computer speech audio relays his message.</td> </tr> <tr> <td>Accessibility: It’s about people.</td> <td>Collage of 12 different people with colored backgrounds.</td> </tr> <tr> <td>For more information from the Web Accessibility Initiative on how people with disabilities use the 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/tools-techniques/presentation/"> <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">Presentation - distinguishing and understanding</span> </span> </a> </li><li class="pager--item next"> <a href="/WAI/people-use-web/tools-techniques/navigation/"> <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">Interaction - navigating and finding</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/tools-techniques/input.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/tools-techniques/input/" 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>.<br /> First published as a draft in 1999.</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><strong>Editor:</strong> Shadi Abou-Zahra. Previous editor: Judy Brewer. Contributors listed 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?1732807903713432608"></script>  <script src="/WAI/assets/scripts/svg4everybody.js?1732807903713432608"></script> <script> svg4everybody(); </script><script> var translationStrings = {}; </script> </body> </html>