CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>WebAIM: Quick Reference - Web Accessibility Principles</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">  </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>Quick Reference<br><span class="subtitle">Web Accessibility Principles</span></h1> <p id="breadcrumbs"><span class="hidden">You are here: </span><a href="/">Home</a> > <a href="/resources/">Resources</a> > WebAIM Quick Reference: Web Accessibility Principles</p> <nav role="navigation"> <h2>Article Contents</h2> <ol> <li><a href="#principles">Principles</a></li> <li><a href="#alt">Alternative Text</a></li> <li><a href="#readability">Readability</a></li> <li><a href="#navigation">Content Navigation</a></li> <li><a href="#tables">Data Tables</a></li> <li><a href="#color">Color</a></li> <li><a href="#forms">Forms</a></li> <li><a href="#links">Links and Buttons</a></li> <li><a href="#multimedia">Multimedia</a></li> <li><a href="#documents">Documents</a></li> <li><a href="#misc">Miscellaneous</a></li> </ol> </nav> <div class="callout"> <div class="title">WebAIM Accessibility Testing Services</div> <p>The experts at WebAIM can audit your web site and provide a detailed report to help you remediate accessibility and WCAG compliance issues.</p> <p class="calloutlink"><a href="/services/evaluation">Learn more about WebAIM Evaluation Services</a> </div> <div class="note"> <div class="title">Note</div> <p>This resource is designed to be printed as a <a href="quickref.pdf">one page PDF file</a>. An HTML version is also available below.</p> </div> <div class="section" id="principles"> <h2>Principles</h2> <p>Accessibility guidelines and techniques are based on <a href="/articles/pour/">four core principles</a>:</p> <ul> <li><strong>Perceivable</strong> - Available through sight, hearing, or touch.</li> <li><strong>Operable</strong> - Compatible with keyboard, mouse, voice control, and other devices.</li> <li><strong>Understandable</strong> - Easy to comprehend.</li> <li><strong>Robust</strong> - Works across browsers, assistive technologies, mobile devices, etc. Follows standards.</li> </ul> </div> <div class="section" id="alt"> <h2>Alternative Text</h2> <ul> <li>Every non-text element needs a <a href="/techniques/alttext/">text equivalent</a> (often conveyed in the <code>alt</code> attribute) to provide an alternative to the image content.</li> <li>The <code>alt</code> attribute should present the content and function of an image, but not necessarily a detailed description.</li> <li>If an image is decorative, or redundant to nearby text, it should have empty alternative text (<code>alt=""</code>).</li> <li>If an image is a link or hotspot, the <code>alt</code> text must describe the link鈥檚 function.</li> <li>Words like "picture of," "image of," or "link to" are redundant. Screen readers already identify images and links by default.</li> <li>Ensure alternative text is as succinct as necessary.</li> </ul> </div> <div class="section" id="readability"> <h2>Readability</h2> <ul> <li>Use the <a href="/techniques/writing/">simplest language</a> appropriate to your content and audience.</li> <li>Use white space (line length, text spacing) to improve readability.</li> <li>Supplement text with images and icons.</li> <li>Check spelling, grammar, and reading grade level.</li> </ul> </div> <div class="section" id="navigation"> <h2>Content Navigation</h2> <ul> <li>Create semantic structure with <a href="//www.w3.org/WAI/tutorials/page-structure/regions/">regions</a>, <a href="/techniques/semanticstructure/#contentstructure">headings</a>, and <a href="/techniques/semanticstructure/#lists">lists</a>.</li> <li>Provide a <a href="/techniques/skipnav/">skip link</a> to help users get straight to the main page content.</li> </ul> </div> <div class="section" id="tables"> <h2>Data Tables</h2> <ul> <li>Identify <a href="//webaim.org/techniques/tables/data">data table</a> headers with <code><th scope="col"></code> for column headers and <code><th scope="row"></code> for row headers.</li> <li>If appropriate, add a <a href="//www.w3.org/TR/WCAG20-TECHS/H39.html"><code><caption></code></a> for the data table.</li> </ul> </div> <div class="section" id="color"> <h2>Color</h2> <ul> <li>Color can enhance comprehension, but <a href="/articles/visual/colorblind/#designing">do not use color <em>alone</em></a> to convey information. Be especially cautious of <a href="/articles/visual/colorblind/#redgreen">red/green</a> color combinations.</li> <li>Ensure that text, icons, and user interface elements have strong <a href="/resources/contrastchecker/">luminance contrast</a>.</li> </ul> </div> <div class="section" id="forms"> <h2>Forms</h2> <ul> <li>Position form labels adjacent to or near their controls, so the labels are associated visually.</li> <li>Use <code><label></code> to associate labels with controls programmatically.</li> <li>Use <a href="/techniques/forms/controls#checkbox"><code><fieldset></code> and <code><legend></code> to group related controls (like radio buttons) with a higher-level label.</li> <li>Clearly identify <a href="/techniques/forms/controls#requiredfields">required form elements</a>. Don't make a field required if it is not necessary. Ensure all <a href="/techniques/forms/advanced#describedby">directions and cues</a> are readily accessible.</li> <li>Ensure <a href="/techniques/formvalidation/#form">validation errors</a> are obvious to screen reader users, and that users can easily make corrections and resubmit the form.</li> </ul> </div> <div class="section" id="links"> <h2>Links and Buttons</h2> <ul> <li>Ensure <a href="/techniques/hypertext/link_text">links</a> and <a href="/techniques/forms/controls#button">buttons</a> contain descriptive text.</li> <li>Avoid generic phrases such as "click here", "here", "more", "more information", "read more", "continue," etc.</li> <li>Ensure links can be visually differentiated from other page content.</li> </ul> </div> <div class="section" id="multimedia"> <h2>Multimedia</h2> <ul> <li>Videos and live audio must have <a href="/techniques/captions/#captions">captions</a> and a <a href="/techniques/captions/#transcripts">transcript</a>.</li> <li>Captions must be synchronized, equivalent, and accessible.</li> <li>Archived audio must have a transcript.</li> </div> <div class="section" id="documents"> <h2>Documents</h2> <ul> <li>For the most robust accessibility, use HTML instead of proprietary document formats.</li> <li>When only a document will do, <a href="/techniques/acrobat/">PDF</a>, <a href="/techniques/word/">Word</a>, <a href="/techniques/powerpoint/">PowerPoint</a>, and Excel provide basic accessibility features.</li> <li>If document content cannot be made fully accessible, provide an accessible alternative.</li> <li>Test document accessibility in a screen reader.</li> </ul> </div> <div class="section" id="misc"> <h2>Miscellaneous</h2> <ul> <li>Ensure that content <a href="//www.w3.org/WAI/WCAG21/Understanding/reflow.html">reflows</a> without breaking layout up to 400% zoom (from a 1280 pixel wide viewport).</li> <li>Ensure responsive layouts and structures are keyboard accessible.Provide a descriptive <a href="//developer.mozilla.org/en-US/docs/Web/HTML/Element/title">page <code><title></code></a>.</li> <li>Ensure functionality available to mouse users is also available via the keyboard.</li> <li>Make all scripted and dynamic content, dialog pop-ups, and page widgets available to screen readers. <a href="/techniques/aria/">ARIA</a>, when used appropriately, can be helpful.</li> <li>Ensure the web page language is defined (e.g., <code><html lang="en"></code>).</li> <li>Implement and test to the <a href="/standards/wcag/checklist">Web Content Accessibility Guidelines</a>.</li> </ul> </div> </article>  <aside id="articlemeta"> <div id="updated">Last updated: <time datetime="2023-03-03">Mar 3, 2023</time></div> <div id="related"> <h2>Related Resources</h2> <ul> <li><a href="/resources/evalquickref/">Quick Reference: Testing Web Content for Accessibility</a></li> <li><a href="/articles/pour/">Constructing a POUR Website</a></li> <li><a href="/resources/designers/">Web Accessibility for Designers</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>