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> Large Links, Buttons, and Controls | Web Accessibility Initiative (WAI) | W3C</title> <meta name="generator" content="Jekyll v4.3.3" /> <meta property="og:title" content="Large Links, Buttons, and Controls" /> <meta name="author" content="W3C Web Accessibility Initiative (WAI)" /> <meta property="og:locale" content="en" /> <meta name="description" content="Short video about large links, buttons, and controls for web accessibility - what is it, who depends on it, and what needs to happen to make it work." /> <meta property="og:description" content="Short video about large links, buttons, and controls for web accessibility - what is it, who depends on it, and what needs to happen to make it work." /> <link rel="canonical" href="https://www.w3.org/WAI/perspective-videos/controls/" /> <meta property="og:url" content="https://www.w3.org/WAI/perspective-videos/controls/" /> <meta property="og:site_name" content="Web Accessibility Initiative (WAI)" /> <meta property="og:image" content="https://www.w3.org/WAI/content-images/perspective-videos/controls.jpg" /> <meta property="og:type" content="article" /> <meta property="article:published_time" content="2024-11-23T00:23:59+00:00" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="twitter:image" content="https://www.w3.org/WAI/content-images/perspective-videos/controls.jpg" /> <meta property="twitter:title" content="Large Links, Buttons, and Controls" /> <meta name="twitter:site" content="@w3c_wai" /> <meta name="twitter:creator" content="@W3C Web Accessibility Initiative (WAI)" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"W3C Web Accessibility Initiative (WAI)"},"dateModified":"2024-11-23T00:23:59+00:00","datePublished":"2024-11-23T00:23:59+00:00","description":"Short video about large links, buttons, and controls for web accessibility - what is it, who depends on it, and what needs to happen to make it work.","headline":"Large Links, Buttons, and Controls","image":"https://www.w3.org/WAI/content-images/perspective-videos/controls.jpg","mainEntityOfPage":{"@type":"WebPage","@id":"https://www.w3.org/WAI/perspective-videos/controls/"},"url":"https://www.w3.org/WAI/perspective-videos/controls/"}</script>  <link rel="alternate" type="application/rss+xml" href="/WAI/feed.xml"> </head> <body id="top" class="page-large-links-buttons-and-controls resource-perspective-videos"> <nav aria-label="Skip Link and Language Selector" id="controls" class="default-grid"> <ul> <li><a href="#main">Skip to Content</a></li> <li class="opt"><a href="/WAI/meta/customize/">Change Text Size or Colors</a></li> <li class="opt languagelist"> <strong>This page in:</strong> <ul class="languagelistul"><li><strong style="text-transform: capitalize;">English</strong></li><li><a style="text-transform: capitalize;" href="/WAI/perspective-videos/controls/fr" lang="fr" dir="auto" translate="no">français</a></li> </ul> </li> <li class="opt"> <a href="/WAI/translations/">All Translations <svg focusable="false" aria-hidden="true" class="icon-translations "><use xlink:href="/WAI/assets/images/icons.svg#icon-translations"></use></svg></a> </li> <li><button id="showoptions" data-showhidebuttonid="header-showoptions" class="showhidebutton button-inline" data-target="#controls .opt" aria-expanded="false" data-large-aria-expanded="true" data-showtext='<svg focusable="false" aria-hidden="true" class="icon-languages "><use xlink:href="/WAI/assets/images/icons.svg#icon-languages"></use></svg> Show Customization, Languages, Translations' data-hidetext='Hide Options'><svg focusable="false" aria-hidden="true" class="icon-languages "><use xlink:href="/WAI/assets/images/icons.svg#icon-languages"></use></svg> Show Customization, Languages, Translations</button></li> </ul> </nav> <header id="site-header" class="default-grid with-gap"> <div class="logos"> <a lang="en" class="home w3c" href="https://www.w3.org/"> <svg role="img" aria-label="W3C" viewBox="0 0 68 34" xmlns="http://www.w3.org/2000/svg"><g><path d="m16.117 1.006 5.759 19.58 5.759-19.58h4.17 11.444v1.946l-5.879 10.128c2.065.663 3.627 1.868 4.686 3.615 1.059 1.748 1.589 3.799 1.589 6.155 0 2.914-.775 5.363-2.324 7.348s-3.555 2.978-6.017 2.978c-1.854 0-3.469-.589-4.845-1.767-1.377-1.178-2.396-2.773-3.058-4.786l3.256-1.35c.477 1.218 1.106 2.178 1.887 2.879.781.702 1.701 1.052 2.76 1.052 1.112 0 2.052-.622 2.82-1.866.768-1.245 1.152-2.74 1.152-4.489 0-1.933-.411-3.429-1.231-4.488-.954-1.244-2.45-1.867-4.489-1.867h-1.588v-1.906l5.56-9.612h-6.712l-.382.65-8.163 27.548h-.397l-5.958-19.937-5.957 19.937h-.397l-9.53-32.168h4.17l5.759 19.58 3.892-13.185-1.906-6.395z"/><path d="m64.92 1.006c-.819 0-1.554.295-2.111.861-.591.6-.92 1.376-.92 2.178s.313 1.545.887 2.128c.583.591 1.334.912 2.145.912.793 0 1.562-.321 2.161-.903.574-.557.887-1.3.887-2.136 0-.811-.321-1.57-.878-2.136-.584-.592-1.344-.904-2.171-.904zm2.643 3.065c0 .701-.271 1.351-.768 1.832-.524.507-1.174.777-1.892.777-.675 0-1.342-.278-1.84-.785s-.777-1.157-.777-1.849.287-1.368.802-1.891c.481-.49 1.131-.751 1.84-.751.726 0 1.376.271 1.883.785.49.489.752 1.147.752 1.882zm-2.559-1.807h-1.3v3.445h.65v-1.469h.642l.701 1.469h.726l-.769-1.57c.498-.102.785-.439.785-.929 0-.625-.472-.946-1.435-.946zm-.118.422c.608 0 .886.169.886.591 0 .405-.278.549-.87.549h-.549v-1.14z"/><path d="m59.807.825.676 4.107-2.391 4.575s-.918-1.941-2.443-3.015c-1.285-.905-2.122-1.102-3.431-.832-1.681.347-3.587 2.357-4.419 4.835-.995 2.965-1.005 4.4-1.04 5.718-.056 2.113.277 3.362.277 3.362s-1.452-2.686-1.438-6.62c.009-2.808.451-5.354 1.75-7.867 1.143-2.209 2.842-3.535 4.35-3.691 1.559-.161 2.791.59 3.743 1.403 1 .854 2.01 2.721 2.01 2.721z"/><path d="m60.102 24.063s-1.057 1.889-1.715 2.617c-.659.728-1.837 2.01-3.292 2.651s-2.218.762-3.656.624c-1.437-.138-2.772-.97-3.24-1.317s-1.664-1.369-2.34-2.322-1.733-2.859-1.733-2.859.589 1.91.958 2.721c.212.467.864 1.894 1.789 3.136.863 1.159 2.539 3.154 5.086 3.604 2.547.451 4.297-.693 4.73-.97s1.346-1.042 1.924-1.66c.603-.645 1.174-1.468 1.49-1.962.231-.36.607-1.092.607-1.092z"/></g></svg> </a> <a lang="en" class="home" href="/WAI/"> <span class="wai"><span class="wa">Web Accessibility</span> <span class="i"><span class="initieative">Initiative</span> <span>WAI</span></span></span> </a> <div class="claim"> <span>Strategies, standards, resources to make the Web accessible to people with disabilities</span> </div> <button class="button button-menu" aria-haspopup="true" aria-expanded="false" id="openmenu"><span><svg focusable="false" aria-hidden="true" class="icon-menu "><use xlink:href="/WAI/assets/images/icons.svg#icon-menu"></use></svg> Menu</span></button> </div> <div class="navigations"> <nav class="metanav" aria-label="Meta & Search" lang="en"> <ul> <li><a href="/WAI/about/participating/">Get Involved</a></li> <li><a href="/WAI/about/">About W3C WAI</a></li> <li> <form action="/WAI/search/" role="search"> <div> <label for="header-search"> <span class="visuallyhidden">Search:</span> <input id="header-search" type="search" name="q" placeholder="Search" aria-label="Search"> </label> <button class="button button-icon button-nobg button-noborder"><span><svg focusable="false" aria-label="Submit Search" class="icon-search "><use xlink:href="/WAI/assets/images/icons.svg#icon-search"></use></svg></span></button> </div> </form> </li> </ul> </nav> </div> </header><nav class="mainnav" aria-label="Main" lang="en"><ul><li><a lang="en" href="/WAI/fundamentals/"><span>Accessibility Fundamentals</span></a></li><li><a lang="en" href="/WAI/planning/"><span>Planning & Policies</span></a></li><li><a lang="en" href="/WAI/design-develop/"><span>Design & Develop</span></a></li><li><a lang="en" href="/WAI/test-evaluate/"><span>Test & Evaluate</span></a></li><li><a lang="en" href="/WAI/teach-advocate/"><span>Teach & Advocate</span></a></li><li><a lang="en" href="/WAI/standards-guidelines/"><span>Standards/<wbr>Guidelines</span></a></li></ul></nav><nav class="default-grid breadcrumb" aria-label="Breadcrumb" lang="en"> <ul style="align-self: center;"> <li><a href="/WAI/" lang="en">Home</a></li><li><a lang="en" href="/WAI/fundamentals/"><span>Accessibility Fundamentals</span></a></li><li><a lang="en" href="/WAI/people/"><span>Accessibility is About People</span></a></li><li><a lang="en" href="/WAI/perspective-videos/"><span>Perspectives Videos</span></a></li><li><a lang="en" href="/WAI/perspective-videos/controls/" aria-current="page"><span>Large Links, Buttons, and Controls</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/" aria-current="location" 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/" aria-current="page" class="page-link"><span>Large Links, Buttons, and Controls</span></a></li><li> <a lang="en" href="/WAI/perspective-videos/captions/" class="page-link"><span>Video Captions</span></a></li><li> <a lang="en" href="/WAI/perspective-videos/customizable/" class="page-link"><span>Customizable Text</span></a></li><li> <a lang="en" href="/WAI/perspective-videos/voice/" class="page-link"><span>Speech Recognition</span></a></li><li> <a lang="en" href="/WAI/perspective-videos/understandable/" class="page-link"><span>Understandable Content</span></a></li><li> <a lang="en" href="/WAI/perspective-videos/notifications/" class="page-link"><span>Notifications and Feedback</span></a></li></ul></li><li> <a lang="en" href="/WAI/people-use-web/" class="page-link"><span>How People with Disabilities Use the Web</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/" class="page-link"><span>Stories of Web Users</span></a><ul><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-one/" class="page-link"><span>Ade's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-two/" class="page-link"><span>Ian's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-three/" class="page-link"><span>Lakshmi's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-four/" class="page-link"><span>Lexie's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-five/" class="page-link"><span>Sophie's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-six/" class="page-link"><span>Dhruv's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-seven/" class="page-link"><span>Marta's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-eight/" class="page-link"><span>Stefan's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-nine/" class="page-link"><span>Elias' Story</span></a></li></ul></li><li> <a lang="en" href="/WAI/people-use-web/abilities-barriers/" class="page-link"><span>Diverse Abilities and Barriers</span></a><ul><li> <a lang="en" href="/WAI/people-use-web/abilities-barriers/auditory/" class="page-link"><span>Auditory</span></a></li><li> <a lang="en" href="/WAI/people-use-web/abilities-barriers/cognitive/" class="page-link"><span>Cognitive and Learning</span></a></li><li> <a lang="en" href="/WAI/people-use-web/abilities-barriers/physical/" class="page-link"><span>Physical</span></a></li><li> <a lang="en" href="/WAI/people-use-web/abilities-barriers/speech/" class="page-link"><span>Speech</span></a></li><li> <a lang="en" href="/WAI/people-use-web/abilities-barriers/visual/" class="page-link"><span>Visual</span></a></li></ul></li><li> <a lang="en" href="/WAI/people-use-web/tools-techniques/" class="page-link"><span>Tools and Techniques</span></a><ul><li> <a lang="en" href="/WAI/people-use-web/tools-techniques/perception/" class="page-link"><span>Perception</span></a></li><li> <a lang="en" href="/WAI/people-use-web/tools-techniques/presentation/" class="page-link"><span>Presentation</span></a></li><li> <a lang="en" href="/WAI/people-use-web/tools-techniques/input/" class="page-link"><span>Input</span></a></li><li> <a lang="en" href="/WAI/people-use-web/tools-techniques/navigation/" class="page-link"><span>Interaction</span></a></li></ul></li><li> <a lang="en" href="/WAI/older-users/" class="page-link"><span>Older Users and Accessibility</span></a><ul><li> <a lang="en" href="/WAI/older-users/developing/" class="page-link"><span>How WCAG 2 Applies</span></a></li><li> <a lang="en" href="/WAI/older-users/literature/" class="page-link"><span>Literature Review</span></a></li></ul></li><li> <a lang="en" href="/WAI/fundamentals/accessibility-usability-inclusion/" class="page-link"><span>Accessibility, Usability, Inclusion</span></a></li></ul></li><li> <a lang="en" href="/WAI/fundamentals/components/" class="page-link"><span>Components of Web Accessibility</span></a></li><li> <a lang="en" href="/WAI/fundamentals/accessibility-principles/" class="page-link"><span>Accessibility Principles</span></a></li><li> <a lang="en" href="/WAI/research/" class="page-link"><span>Research</span></a><ul><li> <a lang="en" href="/WAI/research/user-requirements/" class="page-link"><span>User Requirements</span></a></li><li> <a lang="en" href="/WAI/research/ai2023/" class="page-link"><span>AI and Accessibility</span></a></li></ul></li><li> <a lang="en" href="/WAI/courses/" class="page-link"><span>Digital Accessibility Courses</span></a><ul><li> <a lang="en" href="/WAI/courses/foundations-course/" class="page-link"><span>W3C Foundations Online Course</span></a></li><li> <a lang="en" href="/WAI/courses/list/" class="page-link"><span>Course List</span></a></li></ul></li></ul></nav><nav class="sidenav-languages" aria-labelledby="languagehead"> <header id="languagehead">Languages/Translations</header> <ul class="langlist"> <li style="margin-bottom: 2px;"><strong style="text-transform: capitalize;">English (original)</strong></li><li style="margin-bottom: 2px;"><a style="text-transform: capitalize;" href="/WAI/perspective-videos/controls/fr" dir="auto" translate="no" lang="fr">français</a></li></ul> <p><a href="/WAI/translations/">All Translations</a></p> <p><a href="/WAI/about/translating/">Translating WAI Resources</a></p> </nav> </div> <main id="main" lang="en"> <header class="in-resource"> <h1> Large Links, Buttons, and Controls </h1><p>in <a lang="en" href="/WAI/perspective-videos/"><span>Web Accessibility Perspectives Videos: Explore the Impact and Benefits for Everyone</span></a></p></header> <p>Web accessibility is essential for people with disabilities and useful for all. Learn about the impact of accessibility and the benefits for everyone in a variety of situations.</p> <h2 id="film" class="no-display">Video on Large Links, Buttons, and Controls</h2> <div class="video-container" data-video-type="" dir="ltr"> <video preload="metadata" data-youtube-id="CzfKB3PuuIY" data-youtube-nocookie="true" data-description-audible="false" playsinline=""><track src="/WAI/wai-videos/perspective-videos/en/controls.en.vtt" label="English" kind="captions" srclang="en" default="" /><track src="/WAI/wai-videos/perspective-videos/fr/controls.fr.vtt" label="français" kind="subtitles" srclang="fr" /></video> </div> <div class="video-container" data-video-type="audio-described"> <video preload="metadata" data-youtube-id="65G_twR47OQ" data-youtube-nocookie="true" data-description-audible="false" playsinline=""><track src="/WAI/wai-videos/perspective-videos/en/controls_ad.en.vtt" label="English" kind="captions" srclang="en" default="" /><track src="/WAI/wai-videos/perspective-videos/fr/controls_ad.fr.vtt" label="français" kind="subtitles" srclang="fr" /><track src="/WAI/wai-videos/perspective-videos/en/controls_ad_desc.en.vtt" label="English" kind="descriptions" srclang="en" default="" /><track src="/WAI/wai-videos/perspective-videos/fr/controls_ad_desc.fr.vtt" label="français" kind="descriptions" srclang="fr" /></video> </div> <p><button id="audio_description_button"><svg aria-hidden="true" class="icon-audio-description "><use xlink:href="/WAI/assets/images/icons.svg#icon-audio-description"></use></svg> <span>Enable Audio Description</span></button></p> <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>This video information is available as a <a href="#transcript">Text Transcript with Description of Visuals</a> below.</p> <h2 id="what">What is “Large Links, Buttons, and Controls”?</h2> <p>The area for clicking and tapping controls must be large enough for people to activate them. This includes links, buttons, checkboxes, and other controls. Small controls, and controls that are placed too close to each other, are difficult for many people to use. This is particularly relevant on mobile devices with small screens.</p> <h2 id="who">Who depends on this feature?</h2> <ul> <li>People with physical disabilities who have reduced dexterity.</li> </ul> <h2 id="others">What are the additional benefits?</h2> <ul> <li>Content is more usable on touch screens, especially on smaller mobile devices.</li> <li>Content is more usable for people who are not experienced with the mouse or touch-pad on the computer they are using.</li> <li>Content is more usable in situations where the device cannot be held steady.</li> </ul> <h2 id="action">What needs to happen for this to work?</h2> <p>Design large controls or activation areas around the controls. (Increasing the font size of the control sometimes isn’t enough.) Provide adequate separation between selectable controls. Provide labels for controls, which enlarges the activation area in many browsers because the label for checkboxes and option buttons is also clickable.</p> <h2 id="resources">Learn more</h2> <ul> <li><strong>Accessibility Principle:</strong> <ul> <li><a href="/WAI/fundamentals/accessibility-principles/#navigable">Users can easily navigate, find content, and determine where they are</a></li> </ul> </li> <li><strong>Getting Started:</strong> <ul> <li><a href="/WAI/tips/designing/#create-designs-for-different-viewport-sizes">Create designs for different viewport sizes</a></li> <li><a href="/WAI/tips/designing/#ensure-that-form-elements-include-clearly-associated-labels">Ensure that form elements include clearly associated labels</a></li> </ul> </li> <li><strong>Easy Check:</strong> <ul> <li><a href="/WAI/test-evaluate/preliminary/#forms">Forms, labels, and errors</a></li> </ul> </li> <li><strong>User Story:</strong> <ul> <li><a href="/WAI/people-use-web/user-stories/archived/#retiree">Yun, retiree with low vision, hand tremor, and mild short-term memory loss</a></li> </ul> </li> <li><strong>Web Content Accessibility Guidelines (<a href="/WAI/standards-guidelines/wcag/">WCAG Overview</a>):</strong> <ul> <li><a href="https://www.w3.org/WAI/WCAG21/quickref/?tags=labels">Success Criteria relating to “labels”</a></li> </ul> </li> </ul> <h2 id="transcript">Text Transcript with Description of Visuals</h2> <table> <thead> <tr> <th width="65%">Audio</th> <th>Visual</th> </tr> </thead> <tbody> <tr> <td>Web Accessibility Perspectives: Large Links, Buttons, and Controls</td> <td>Web Accessibility Perspectives:<br /> Large Links, Buttons, and Controls</td> </tr> <tr> <td>Trying to hit a small target requires lots of effort.</td> <td><p>A woman tries to thread a needle but misses.<br /> </p></td> </tr> <tr> <td>Many websites and applications try to thread the needle.</td> <td>The woman fails to tap small links on a website. </td> </tr> <tr> <td>But on the Web, we can make areas for clicking and tapping easier to use.</td> <td>The links become larger in size and the woman now easily taps them.</td> </tr> <tr> <td>Which is handy on mobile devices especially when we might be moving around at the time.</td> <td>The woman is using a tablet while preparing a coffee.</td> </tr> <tr> <td>Which is critical for people with reduced dexterity.</td> <td>Another woman with a hand tremor is unable to navigate precisely with the mouse and fails to click small buttons on a website.<br /></td> </tr> <tr> <td>Web accessibility: Essential for some, useful for all.</td> <td>The buttons become larger and the woman with the tremor is now able to click them.</td> </tr> <tr> <td>Visit w3.org/WAI/perspectives for more information on Large Links, Buttons, and Controls</td> <td>Visit<br /> w3.org/WAI/perspectives<br /> for more information on<br /> Large Links, Buttons, and Controls. <br /> W3C Web Accessibility Initiative logo</td> </tr> </tbody> </table> <nav class="pager" aria-label="Previous/Next Page"> <ul><li class="pager--item previous"> <a href="/WAI/perspective-videos/speech/"> <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">Text to Speech</span> </span> </a> </li><li class="pager--item next"> <a href="/WAI/perspective-videos/captions/"> <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">Video Captions</span> </span> </a> </li> </ul></nav><aside class="box box-icon box-space-above" id="helpimprove" aria-label="feedback"><header class="box-h box-h-icon box-h-space-above box-h-icon"> <svg focusable="false" aria-hidden="true" class="icon-comments "><use xlink:href="/WAI/assets/images/icons.svg#icon-comments"></use></svg> <h2> Help improve this page </h2></header><div class="box-i"><p>Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list <a href="mailto:wai@w3.org?body=%5Binclude%20a%20relevant%20email%20Subject%5D%0A%0A%5Bput%20comment%20here...%5D%0A%0AI%20give%20permission%20to%20share%20this%20to%20a%20publicly-archived%20e-mail%20list.">wai@w3.org</a> or via GitHub.</p> <div class="button-group"> <a href="mailto:wai@w3.org?body=%5Binclude%20a%20relevant%20email%20Subject%5D%0A%0A%5Bput%20comment%20here...%5D%0A%0AI%20give%20permission%20to%20share%20this%20to%20a%20publicly-archived%20e-mail%20list." class="button"><span>E-mail</span></a><a href=" https://github.com/w3c/wai-website/edit/main/collections/_perspective-videos/controls.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-perspective-videos&wai-url=https://www.w3.org/WAI/perspective-videos/controls/" 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> 23 January 2019. <a href="/WAI/perspective-videos/changelog/">Latest changes</a>.</p><p><strong>Editor and project lead:</strong> <a href="https://www.w3.org/People/shadi">Shadi Abou-Zahra</a>. Developed by the <a href="https://www.w3.org/WAI/EO/">Education and Outreach Working Group (EOWG)</a> with support from the <a href="https://www.w3.org/WAI/DEV/">WAI-DEV project</a>, co-funded by the European Commission. Updated with support from the Ford Foundation. <a href="/WAI/perspective-videos/acknowledgements/">Acknowledgements</a>.</p> </div> </footer> <footer class="site-footer grid-4q" aria-label="Site"> <div class="q1-start q3-end about"> <div> <p><a class="largelink" href="https://www.w3.org/WAI/" lang="en" dir="auto" translate="no">W3C Web Accessibility Initiative (WAI)</a></p> <p>Strategies, standards, and supporting resources to make the Web accessible to people with disabilities.</p> </div> <div class="social" lang="en" dir="auto" translate="no"> <ul> <li><a href="https://w3c.social/@wai"><svg focusable="false" aria-hidden="true" class="icon-mastodon "><use xlink:href="/WAI/assets/images/icons.svg#icon-mastodon"></use></svg> Mastodon</a></li> <li><a href="https://www.linkedin.com/company/w3c-wai/"><svg focusable="false" aria-hidden="true" class="icon-linkedin "><use xlink:href="/WAI/assets/images/icons.svg#icon-linkedin"></use></svg> LinkedIn</a></li> <li><a href="https://www.w3.org/WAI/feed.xml"><svg focusable="false" aria-hidden="true" class="icon-rss "><use xlink:href="/WAI/assets/images/icons.svg#icon-rss"></use></svg> Feed</a></li> <li><a href="https://www.youtube.com/channel/UCU6ljj3m1fglIPjSjs2DpRA/playlists/"><svg focusable="false" aria-hidden="true" class="icon-youtube "><use xlink:href="/WAI/assets/images/icons.svg#icon-youtube"></use></svg> YouTube</a></li> <li><a href="https://www.w3.org/WAI/news/subscribe/" class="button">Get News in Email</a></li> </ul> </div> <div lang="en" dir="auto" translate="no"> <p>Copyright © 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>