WebAIM: Considering the User Perspective - A Summary of Design Issues

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>WebAIM: Considering the User Perspective - A Summary of Design Issues</title> <link rel="shortcut icon" href="/media/favicon.ico"> <link rel="home" href="/"> <link rel="search" href="/search/"> <link rel="alternate" href="https://webaim.org/blog/feed" type="application/rss+xml" title="WebAIM Blog"> <script async src="https://www.googletagmanager.com/gtag/js?id=G-Y41PF8WV9X"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Y41PF8WV9X'); </script> <link href="/styles/main.css" rel="stylesheet" type="text/css"> <link href="/styles/print.css" rel="stylesheet" type="text/css" media="print"> <script src="/media/scripts/jquery.js"></script> <script src="/media/scripts/main.js"></script> <link href='https://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Kameron:400,700' rel='stylesheet' type='text/css'> <link href="/styles/documents.css?ver=2" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700" rel="stylesheet"> <style> th, td {vertical-align:top;} </style>  </head> <body> <div id="headcontainer" class="clearfix" style="background-image: url(/media/banners/articles.jpg)"> <header> <div id="skiptocontent"><a href="#maincontent">skip to main content</a></div> <h2><a href="/"><img src="/media/logo.png" width="315" height="83" alt="WebAIM - Web Accessibility In Mind"></a></h2> <nav> <h2 class="hidden">Main Navigation</h2> <ul> <li><a href="/services/">Services</a></li> <li class="current"><a href="/articles/">Articles</a></li> <li><a href="/resources/">Resources</a></li> <li><a href="/projects/">Projects</a></li> <li><a href="/community/">Community</a></li> </ul> </nav> <div id="search"> <form method="get" role="search" action="/search/" id="sitesearch"> <p class="search"><span><label for="q">Search:</label> <input type="text" name="q" id="q"><input type="image" src="/media/template/search.svg" alt="Submit Search"></span></p> </form> <p class="intro"><a href="/intro">Introduction to Web Accessibility</a></p> <p class="training"><a href="/services/training">WebAIM Training</a></p> </div> </header> </div> <main id="maincontainer" class="clearfix"> <article id="maincontent"> <h1>Considering the User Perspective<br><span class="subtitle">A Summary of Design Issues</span></h1> <p id="breadcrumbs"><span class="hidden">You are here: </span><a href="/">Home</a> > <a href="/articles/">Articles</a> > Considering the User Perspective: A Summary of Design Issues</p> <nav role="navigation"> <h2>Article Contents</h2> <ol> <li><a href="#blindness">Blindness</a></li> <li><a href="#lowvision">Low Vision</a></li> <li><a href="#auditory">Auditory Disabilities</a></li> <li><a href="#motor">Motor Disabilities</a></li> <li><a href="#cognitive">Cognitive Disabilities</a></li> </ol> </nav> <div class="section" id="blindness"> <h2>Blindness</h2> <table> <tr> <th style="width:30%" scope="col">Challenges</th> <th scope="col">Solutions</th> </tr> <tr> <td>Images and graphics cannot be perceived.</td> <td> <ul> <li>Provide <a href="/techniques/alttext/">alternative text</a> and, if necessary, longer explanations.</li> <li>Use proper <a href="/techniques/semanticstructure/">headings and regions</a>.</li> </ul> </td> </tr> <tr> <td>Visual relationships and structure cannot be perceived.</td> <td> <ul> <li>Use proper <a href="/techniques/semanticstructure/">headings and regions</a>.</li> <li>Provide <a href="/techniques/tables/data">column and row headers</a> (<code><th></code>) for data tables.</li> </ul> </td> </tr> <tr> <td>Content is often accessed linearly.</td> <td> <ul> <li>Ensure that the reading and navigation order of CSS or table layouts is logical and intuitive.</li> <li>Create <a href="/techniques/skipnav/">skip links</a> that allow users to jump over navigational menus, long lists of items, and other things that might be difficult or tedious to listen to.</li> </ul> </td> </tr> <tr> <td>Users often navigate from link to link, or view a list of links.</td> <td> <ul> <li>Make sure that the <a href="/techniques/hypertext/link_text">link text</a> makes sense out of context ("click here" is problematic).</li> <li>Ensure that links and buttons contain descriptive text.</li> </ul> </td> </tr> <tr> <td>Users generally do not use a mouse.</td> <td> <ul> <li>Don't require mouse or touch interactions. Ensure content is accessible with the <a href="/techniques/keyboard/">keyboard</a>.</li> </ul> </td> </tr> <tr> <td>Colors are not perceivable.</td> <td> <ul> <li>Do not rely on <a href="/articles/contrast/#sc141">color</a> alone to convey meaning.</li> </ul> </td> </tr> <tr> <td>Visual content in multimedia is not perceivable.</td> <td> <ul> <li>Provide <a href="/techniques/captions/#ad">audio descriptions</a> of content in videos that is not presented via audio.</li> </ul> </td> </tr> </table> </div> <div class="section" id="lowvision"> <h2>Low Vision</h2> <table> <tr> <th style="width:30%" scope="col">Challenges</th> <th scope="col">Solutions</th> </tr> <tr> <td>Users may not be able to distinguish colors of similar contrast.</td> <td> <ul> <li>Make sure that there is <a href="/articles/contrast/">sufficient contrast</a> between text and background, and for icons and graphics.</li> <li>Don't use color alone to convey meaning (supplement the color with text, for example).</li> </ul> </td> </tr> <tr> <td>Content may not enlarge or zoom appropriately.</td> <td> <ul> <li>Limit or eliminate text within graphics.</li> <li>Ensure content is readable and minimizes horizontal scrolling when zoomed</li> <li>Test for loss of content when text sizes are increased by the end user</li> </ul> </td> </tr> </table> </div> <div class="section" id="auditory"> <h2>Auditory Disabilities</h2> <table> <tr> <th style="width:30%" scope="col">Challenges</th> <th scope="col">Solutions</th> </tr> <tr> <td>Users may be unable to hear with audio content.</td> <td> <ul> <li>Provide <a href="/techniques/captions/">captioning</a> for video clips.</li> <li>Provide <a href="/techniques/captions/realtime">real-time captioning</a> for live events.</li> <li>Provide <a href="/techniques/captions/#transcripts">transcripts</a> for audio clips.</li> </ul> </td> </tr> <tr> <td>Users may have difficulty filtering noises.</td> <td> <ul> <li>Avoid having too many noises playing at the same time. </li> <li>Eliminate as much background noise as possible from audio.</li> </ul> </td> </tr> </table> </div> <div class="section" id="motor"> <h2>Motor Disabilities</h2> <table> <tr> <th style="width:30%" scope="col">Challenges</th> <th scope="col">Solutions</th> </tr> <tr> <td>Users may not be able to use the mouse.</td> <td> <ul> <li>Make sure that all functions are available from the <a href="/techniques/keyboard/">keyboard</a> (try tabbing through interactive elements).</li> <li>Make sure that the navigation order is logical.</li> </ul> </td> </tr> <tr> <td>Users may become fatigued when navigating numerous items.</td> <td> <ul> <li>Provide a method for <a href="/techniques/skipnav/">skipping over</a> long lists of redundant links or other lengthy content.</li> </ul> </td> </tr> </table> </div> <div class="section" id="cognitive"> <h2>Cognitive Disabilities</h2> <table> <tr> <th style="width:30%" scope="col">Challenges</th> <th scope="col">Solutions</th> </tr> <tr> <td>Users may become confused at complex layouts or inconsistent navigational schemes.</td> <td> <ul> <li>Simplify the layout as much as possible.</li> <li>Keep the navigational schemes as consistent as possible.</li> </ul> </td> </tr> <tr> <td>Users may have difficulty focusing on or comprehending lengthy sections of text.</td> <td> <ul> <li>Where appropriate, group textual information under logical <a href="/techniques/semanticstructure/">headings</a>.</li> <li>Organize information in manageable "chunks."</li> </ul> </td> </tr> <tr> <td>Users may struggle to interact with some types of content or input.</td> <td> <ul> <li>Where appropriate, supplement text with illustrations or other media, and vice versa.</li> </ul> </td> </tr> </table> </div> </article>  <aside id="articlemeta"> <div id="updated">Last updated: <time datetime="2020-04-17">Apr 17, 2020</time></div> <div id="related"> <h2>Related Resources</h2> <ul> <li><a href="/articles/pour/">Constructing a POUR Website</a></li> <li><a href="/articles/visual/">Visual Disabilities</a></li> <li><a href="/articles/auditory/">Auditory Disabilities</a></li> <li><a href="/articles/motor/">Motor Disabilities</a></li> <li><a href="/articles/cognitive/">Cognitive Disabilities</a></li> <li><a href="/articles/seizure/">Seizure Disorders</a></li> </ul> </div> </aside> </main> <footer> <div id="footerresources"> <div class="footerblock"> <h2 id="copyright">©2025 WebAIM</h2> <p id="contact"> Utah State University<br> 6807 Old Main Hill<br> Logan, UT 84322-6807<br> <a class="phone" href="tel:4357977024">435.797.7024</a></p> <div id="checkpage"> <h2>Check Your Accessibility</h2> <form action="https://wave.webaim.org/report" novalidate> <label for="waveurl">Web site address:</label> <input type="url" id="waveurl" name="url" title="Web site address"> <input type="submit" value="WAVE"> </form> </div> </div> <div class="footerblock"> <h2 id="blog">From the Blog</h2> <ul><li><a href="/blog/salary-survey-results/">Global Digital Accessibility Salary Survey Results</a></li><li><a href="/blog/join-the-discussion/">Join the Discussion鈥擣rom Your Inbox</a></li><li><a href="/blog/severity-ratings/">Using Severity Ratings to Prioritize Web Accessibility Remediation</a></li><li><a href="/blog/25-tips/">25 Accessibility Tips to Celebrate 25 Years</a></li></ul> </div> <div class="footerblock"> <h2 id="popular">Popular Resources</h2> <ul> <li><a href="/training/virtual">WebAIM Training</a></li> <li><a href="/standards/wcag/checklist">WCAG 2 Checklist</a></li> <li><a href="/newsletter">WebAIM Monthly Newsletter</a></li> <li><a href="/resources/contrastchecker">Color Contrast Checker</a></li> <li><a href="/resources/designers/">Web Accessibility for Designers</a></li> <li><a href="http://wave.webaim.org/">WAVE Web Accessibility Evaluation Tool</a></li> </ul> </div> <div id="footerlinks"> <ul> <li><a id="footercontact" href="/contact">Contact</a></li> <li><a id="footerabout" href="/about">About</a></li> <li><a id="footerrss" href="/community/rss">RSS Feeds</a></li> <li><a id="footertwit" href="http://twitter.com/webaim">Twitter</a></li> <li><a id="footercopyright" href="/copyright">Copyright & Terms of Use</a></li> </ul> </div> <div class="clear"></div> </div> </footer> </body> </html>

CINXE.COM

WebAIM: Considering the User Perspective - A Summary of Design Issues