CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>WebAIM: Web Accessibility for Designers</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 type="text/css">  </style>  </head> <body> <div id="headcontainer" class="clearfix" style="background-image: url(/media/banners/resources.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><a href="/articles/">Articles</a></li> <li class="current"><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>Web Accessibility for Designers</h1> <p id="breadcrumbs"><span class="hidden">You are here: </span><a href="/">Home</a> > <a href="/resources/">Resources</a> > Web Accessibility for Designers</p> <nav role="navigation"> <h2>Article Contents</h2> <ol> <li><a href="#infographic">Infographic</a></li> <li><a href="#text">Text Version</a></li> <li><a href="#embed">Embed Code</a></li> </ol> </nav> <div class="section" id="intro"> <p>The focus of web accessibility is often on web development – the things that happen in HTML, CSS, or JavaScript. Optimal accessibility should start much earlier, as part of the visual design process. This infographic highlights many important principles of accessible design.</p> </div> <div class="section" id="infographic"> <h2>Infographic</h2> <p><img src="media/designers.svg" alt="Web Accessibility for Designers infographic with text description below" width="650"></p> </div> <p>View a <a href="media/designers-light.svg">dark-on-light version of the infographic</a>.</p> <div class="section" id="text"> <h2>Text Version</h2> <div class="icons section"> <h3>Plan Heading Structure Early</h3> <p>Ensure all content and design fits into a <a href="/techniques/semanticstructure/">logical heading structure</a>.</p> <h3>Ensure Logical Reading Order</h3> <p>The <a href="/techniques/screenreader/">reading order for screen reader users</a> should align with the visual order.</p> <h3>Provide Good Contrast</h3> <p>Be especially careful with shades of orange, yellow, and light gray. Check your contrast levels with our <a href="/resources/contrastchecker/">color contrast checker</a>.</p> <h3>Use True Text Instead of Images of Text</h3> <p><a href="/techniques/images/text_graphic">True text</a> enlarges better, loads faster, and is easier to translate and customize.</p> <h3>Use Adequate Font Size</h3> <p>Small text is difficult for all users to see. Ensure text is optimally readable.</p> <h3>Remember Line Length</h3> <p>Don’t make lines too long or too short.</p> <h3>Make Sure Links are Recognizable</h3> <p>Distinguish <a href="/techniques/hypertext/">links</a> from body text using more than just color (e.g., underline).</p> <h3>Design Keyboard Focus Indicators</h3> <p>When navigating with the keyboard, the focused item must be visually distinctive.</p> <h3>Design a "Skip to Main Content" Link</h3> <p>A keyboard accessible <a href="/techniques/skipnav/">link for users to skip navigation</a> should be at the top of the page.</p> <h3>Ensure Link Text Makes Sense on Its Own</h3> <p>Avoid "Click Here" or other ambiguous <a href="/techniques/hypertext/">link text</a> such as "More" or "Continue".</p> <h3>Design Usable Widgets and Controls</h3> <p>Dialogs, tooltips, menus, carousels, etc. must be easy to use and accessible.</p> <h3>Use Animation, Video, and Audio Carefully</h3> <p>Provide play/pause buttons. Avoid distracting movement.</p> <h3>Don’t Convey Content Using Only Color</h3> <p>Users may override or may not be able to see differences between colors.</p> <h3>Design Accessible Form Controls</h3> <p>Ensure <a href="/techniques/forms/">form controls</a> have descriptive labels, instructions, and error messages.</p> </div> </div> <div class="section" id="embed"> <h2>Embed Code</h2> <p><label for="textarea">You can embed this infographic into your own page by copying and pasting the following code:</label><br> <textarea name="textarea" cols="60" rows="5" readonly="readonly" id="textarea"><a href="http://webaim.org/resources/designers/"><img src="http://webaim.org/resources/designers/media/designers.svg" alt="Web Accessibility for Designers infographic with link to text version at WebAIM.org"></a> </textarea> </p> </div> </article>  <aside id="articlemeta"> <div id="translations"> <h2>Translations</h2> <ul> <li><a href="http://financesonline.com/WebAIM_Designers.html"><img src="/media/common/flags/si.png" alt="">Slovenian</a> by <a href="http://financesonline.com/">Finances Online</a></li> <li><a href="http://www.xn--prfung-ratgeber-0vb.de/web_accessibility/barrierefreiheit-fuer-designer/"><img src="/media/common/flags/de.png" alt="">German</a></li> <li><a href="https://www.languagemarketplace.com/WebAIM-U-R-Spanish-Designers-translation.html"><img src="/media/common/flags/es.png" alt="">Spanish</a> by <a href="https://www.languagemarketplace.ca/">Language Marketplace Inc.</a></li> </ul> </div> <div id="related"> <h2>Related Resources</h2> <ul> <li><a href="/resources/quickref/">Quick Reference: Web Accessibility Principles</a></li> <li><a href="/resources/evalquickref/">Quick Reference: Testing Web Content for Accessibility</a></li> <li><a href="/articles/design/">Design Considerations - One Size Fits All?</a></li> <li><a href="/articles/userperspective/">Considering the User Perspective - A Summary of Design Issues</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—From 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>