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> Stefan, student with attention deficit hyperactivity disorder and dyslexia | Web Accessibility Initiative (WAI) | W3C</title> <meta name="generator" content="Jekyll v4.3.3" /> <meta property="og:title" content="Stefan, student with attention deficit hyperactivity disorder and dyslexia" /> <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-eight/" /> <meta property="og:url" content="https://www.w3.org/WAI/people-use-web/user-stories/story-eight/" /> <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="Stefan, student with attention deficit hyperactivity disorder and dyslexia" /> <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":"Stefan, student with attention deficit hyperactivity disorder and dyslexia","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-eight/"}</script>  <link rel="alternate" type="application/rss+xml" href="/WAI/feed.xml"> </head> <body id="top" class="page-stefan-student-with-attention-deficit-hyperactivity-disorder-and-dyslexia "> <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-eight/" aria-current="page"><span>Stefan'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/" 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/" aria-current="page" 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> Stefan, student with attention deficit hyperactivity disorder and dyslexia <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>Stefan is a student who has dyslexia and attention deficit hyperactivity disorder (ADHD). Stefan finds it hard to maintain focus on his schoolwork, especially when reading a lot of dense text or following written instructions. He likes digital textbooks and websites that allow him to use text-to-speech software because he can follow both the written and auditory words. It’s important though that websites and other digital technology use plain language, a consistent layout, and don’t display pop-up ads or moving images, which are very distracting and confusing. Mobile apps and websites are often less cluttered and easier to use.</p> </div> <div class="video-card"> <video controls poster="/WAI/content-images/people-use-web/user-stories/stefan-video-frame.png"> <source src="//media.w3.org/wai/people-use-web/user-stories_8.mp4" type="video/mp4"><track src="/WAI/wai-videos/people-use-web/user-stories_8.en.vtt" label="English" kind="captions" srclang="en" ></video> <p>This video is available with more accessibility features: <a href="#accessible-video">Video: Stefan, student with attention deficit hyperactivity disorder and dyslexia</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-stefan" id="markdown-toc-about-stefan">About Stefan</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: Stefan, student with attention deficit hyperactivity disorder and dyslexia</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-stefan">About Stefan</h2> <blockquote> <p>My text reader helps me focus on what I am reading. I don’t use it all the time but for long text it is super helpful.</p> </blockquote> <p>Stefan is a student with dyslexia and attention deficit hyperactivity disorder (ADHD). As a person with ADHD, Stefan has difficulty following multi-step or long tasks. This can make it hard to maintain focus on his schoolwork. Visual supports, such as icons and images, and good use of whitespace around what he is looking at can help him to focus. He can become lost in dense text and is unable to find the meaning. When this happens he gives up because it takes too long and is tiring. This has caused him to fall behind in his work compared to other students.</p> <p>Stefan’s school has recently transitioned to using digital textbooks. This has been a huge improvement for Stefan who can now use his text-to-speech software to aid his understanding of what are sometimes complex texts. Stefan also uses the web for research. Unfortunately, his experience on the web can be varied. Often sites contain content such as animated advertisments and graphics which he can find distracting.</p> <p>Stefan finds it easier to use websites that have a simple and consistent layout with content written in plain language. Images or icons can also help to reinforce the meaning of the text. Sometimes he uses functionality in his text-to-speech software that allows him to change the page background color. This is especially helpful when he is tired. Stefan also uses captions when watching videos because both hearing and seeing the words reinforces their meaning.</p> <p>Stefan is a fan of old science fiction movies and spends a lot of time on fan made sites and forums. He has spending limits on his card and he uses this to buy fan memorabilia. The design of these sites and purchasing process can make this difficult. They are often quite busy with distracting advertisements and complicated checkout forms. He has found that he can access these sites on his mobile phone where he can switch on the browser reading mode to remove a lot of the background clutter. This allows him to focus on the task and makes the steps much clearer.</p> <p>Stefan experiences problems with sites where the navigation of the site is unclear. He finds it much easier to use sites that include functions such as a sitemap, breadcrumb trails, or a search function. Stefan has difficulty with spelling so benefits from search functionality, which suggests alternative spellings and error corrections.</p> <h2 id="barrier-examples">Barrier examples</h2> <dl> <dt>Spelling suggestions</dt> <dd><strong>Barrier:</strong> “I have difficulty with spelling and sometimes misspell words. Sometimes I don’t get the search results I’m looking for.”</dd> <dd><strong>Works well:</strong> “I like when search tools offer alternative spellings or alternative search suggestions instead of just returning no results.”</dd> <dt>Browser settings aren’t respected</dt> <dd><strong>Barrier:</strong> “I use browser settings to specify the font, text size, and line spacing I need but some sites don’t display my settings.”</dd> <dd><strong>Works well:</strong> “When I change settings in my browser, websites show those settings.”</dd> </dl>  <dl> <dt>Complex language</dt> <dd><strong>Barrier:</strong> “Complex language and sentence structure are confusing to me and hard to read and retain.</dd> <dd><strong>Works well:</strong> Use short sentences and plain language as much as possible.”</dd> <dt>Excessive acronyms and abbreviations</dt> <dd><strong>Barrier:</strong> “Excessive use of acronyms and abbreviations is distracting and I often must reread several times or sometimes just get stuck and give up.”</dd> <dd><strong>Works well:</strong> “Spell out the complete words of an acronym at least the first time it is used. Avoid or explain abbreviations.”</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/perception/#captions">Captions (Perception)</a></li> <li><a href="/WAI/people-use-web/tools-techniques/perception/#sr">Screen reader (Perception)</a></li> <li><a href="/WAI/people-use-web/tools-techniques/perception/#tts">Text-to-speech (Perception)</a></li> <li><a href="/WAI/people-use-web/tools-techniques/presentation/#blockers">Pop-up and animations blockers (Presentation)</a></li> <li><a href="/WAI/people-use-web/tools-techniques/presentation/#reading">Reading assistants (Presentation)</a></li> <li><a href="/WAI/people-use-web/tools-techniques/input/#lexical">Spelling and grammar tools (input)</a></li> <li><a href="/WAI/people-use-web/tools-techniques/navigation/#consistency">Consistency and predictability (Interaction)</a></li> <li><a href="/WAI/people-use-web/tools-techniques/navigation/#messages">Helpful error and success messages (Interaction)</a></li> <li><a href="/WAI/people-use-web/tools-techniques/navigation/#search">Keyword search (Interaction)</a></li> <li><a href="/WAI/people-use-web/tools-techniques/navigation/#navigating">Multiple navigation mechanisms (Interaction)</a></li> </ul> <h2 id="related-wai-resources">Related WAI resources</h2> <ul> <li>Use case: <a href="https://www.w3.org/TR/coga-usable/#tal-a-student-who-has-dyslexia-and-impaired-eye-hand-coordination">Tal: A Student who has Dyslexia and Impaired Eye Hand Coordination</a></li> <li>Use case: <a href="https://www.w3.org/TR/coga-usable/#yuki-a-yoga-teacher-who-has-ad-h-d">Yuki: A Yoga Teacher who has AD(H)D</a></li> <li>Video: <a href="/WAI/perspective-videos/layout/">Clear Layout and Design</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/writing/#provide-clear-instructions">Provide clear instructions</a></li> <li>Tip: <a href="/WAI/tips/writing/#keep-content-clear-and-concise">Keep content clear and concise</a></li> <li>Tip: <a href="/WAI/tips/developing/#include-alternative-text-for-images">Include alternative text for images</a></li> <li>Tip: <a href="/WAI/tips/developing/#help-users-avoid-and-correct-mistakes">Help users avoid and correct mistakes</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/designing/#provide-easily-identifiable-feedback">Provide easily identifiable feedback</a></li> <li>Tip: <a href="/WAI/tips/designing/#use-headings-and-spacing-to-group-related-content">Use headings and spacing to group related content</a></li> <li>Check: <a href="/WAI/test-evaluate/preliminary/#images">Image text alternatives (“alt text”)</a></li> <li>Check: <a href="/WAI/test-evaluate/preliminary/#headings">Headings</a></li> <li>Check: <a href="/WAI/test-evaluate/preliminary/#forms">Forms, labels, and errors</a></li> <li>Check: <a href="/WAI/test-evaluate/preliminary/#moving">Moving, Flashing, or Blinking Content</a></li> <li>Check: <a href="/WAI/test-evaluate/preliminary/#structure">Basic structure check</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/#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/#readable">Content is readable and understandable (Understandable)</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="https://www.w3.org/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: Stefan, student with attention deficit hyperactivity disorder and dyslexia</h2> </summary> <div> <div class="video-container" data-video-type="" dir="ltr"> <video preload="metadata" data-youtube-id="Ie-RaV7UTCU" data-youtube-nocookie="true" data-description-audible="false" playsinline=""><track src="/WAI/wai-videos/people-use-web/user-stories_8.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_8.mp4">Video: Stefan, student with attention deficit hyperactivity disorder and dyslexia (file format: MP4, file size: 346MB</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; Stefan, student with attention deficit hyperactivity disorder and dyslexia.</td> <td>How people with disabilities use digital technology; Stefan, student with attention deficit hyperactivity disorder and dyslexia.</td> </tr> <tr> <td>Hello! I’m Stefan. I have dyslexia and attention deficit hyperactivity disorder – ADHD.</td> <td>A man speaks directly to the camera.</td> </tr> <tr> <td>I have difficulty recognizing or sounding out written words, even though I use those same words in conversation all the time. It affects my spelling and my reading comprehension. It often takes me a long time to figure out the individual words I’m reading, and then it’s hard for me to remember how the words in a sentence fit together in a meaningful way.</td> <td>The man is sitting down in a living room reading a magazine.</td> </tr> <tr> <td>Digital books and documents are often much better for me. On the computer, on a tablet, or – my favorite – on my new e-reader. I can change the font type, text size, and line spacing, which makes it easier for me to read. I also use the read-aloud function because I read better when I can see and hear the text at the same time. It also highlights the words being read aloud and has a reading ruler, so that I can follow along more easily.</td> <td>The man is sitting down in a living room reading from a tablet. He is changing the text formatting by adjusting the settings on the device. He then puts on his headphones to listen to the text and follows along with the highlighted text.</td> </tr> <tr> <td>Sometimes, though, digital books and documents don’t work well. Sometimes they are just scanned images. These also can’t be read aloud and I can’t change the text size and font. Some don’t have bookmarks, which I use to jump to the parts I want to focus on. Or, there are long chunks or text without any headings, so I have difficulty focusing on the content. It’s so much easier when text has more spacing and graphics to make them easier to follow.</td> <td>The man is sitting down in a living room reading from a laptop. He is scrolling through a complex document.</td> </tr> <tr> <td>Another problem is when I have to do online research. I type in words, but sometimes I do it wrong, or use a different word that sounds the same, like “brake” when I mean “break”. Sometimes I land on websites with all these ads and things popping up and moving around the screen. With ADHD, I get distracted by these ads and videos, and sometimes I click on them and forget what I was meant to be doing. I use several pop-up blockers but they don’t always work.</td> <td>The man is sitting down in a living room reading from a laptop. We see word options Brake/Break appear on screen. He then looks at a website which contains a number of advertisements and pop-ups.</td> </tr> <tr> <td>When I find an article I want to read, I try to remember to switch to reading mode in my browser. This usually removes all the stuff around the page and lets me focus on the text. But some websites don’t work well and the ads still appear, or the text is too difficult for me to read. I love it when websites work well with my settings and extensions. Like, the extension for spelling and grammar, which helps me when I’m typing things like email. That’s very important for me.</td> <td>The man is sitting down in a living room using a laptop. He types a short text and corrects an error using the spell checker.</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/story-seven/"> <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">Marta</span> </span> </a> </li><li class="pager--item next"> <a href="/WAI/people-use-web/user-stories/story-nine/"> <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">Elias</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-eight.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-eight/" 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>