CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>WebAIM: Articles</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/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>Articles</h1> <p id="breadcrumbs"><span class="hidden">You are here: </span><a href="/">Home</a> > Articles</p> <div class="section" id="usersperspective"> <h2 style="background:url(media/usericon.svg) top right no-repeat; padding:8px 0 2px 0;">The User's Perspective</h2> <ul> <li><a href="/intro/">Introduction to Web Accessibility</a></li> <li><a href="pour/">Constructing a POUR (Perceivable, Operable, Understandable, Robust) Website</a></li> <li>Disability Types <ul> <li><a href="visual/">Visual</a></li> <li><a href="auditory/">Auditory</a></li> <li><a href="motor/">Motor</a></li> <li><a href="cognitive/">Cognitive</a></li> <li><a href="seizure/">Seizure and Vestibular Disorders</a></li> </ul> </li> <li><a href="design/">Design Considerations</a></li> <li><a href="userperspective/">Considering the User Perspective: A Summary of Design Issues</a></li> </ul> </div> <div class="section" id="html"> <h2 style="background:url(media/htmlicon.svg) top right no-repeat; padding:8px 0 2px 0;">HTML, ARIA, and CSS Accessibility</h2> <ul> <li><a href="/techniques/aria/">Accessible Rich Internet Applications (ARIA)</a></li> <li>Content and Structure <ul> <li><a href="/techniques/headings/">Headings</a></li> <li><a href="/techniques/semanticstructure/">Semantic Structure: Regions, Headings, and Lists</a></li> <li><a href="/techniques/screenreader/">Designing for Screen Reader Compatibility</a></li> <li><a href="/techniques/language/">Document and Content Language</a> <li><a href="/techniques/hypertext/">Links & Hypertext</a></li> <li><a href="/techniques/sitetools/">Site Searches, Indexes, and Site Maps</a></li> <li><a href="/techniques/skipnav/">Skip Navigation Links</a></li> <li><a href="/techniques/writing/">Writing Clearly and Simply</a></li> </ul> </li> <li><a href="/techniques/dreamweaver/">Dreamweaver</a></li> <li><a href="/techniques/forms/">Forms</a> <ul> <li><a href="/techniques/formvalidation/">Usable and Accessible Form Validation and Error Recovery</a></li> </ul> </li> <li><a href="/techniques/frames/">Frames and Iframes</a></li> <li><a href="/techniques/images/">Images</a> <ul> <li><a href="/techniques/alttext/">Alternative Text</a></li> </ul> </li> <li><a href="/techniques/javascript/">JavaScript</a></li> <li><a href="/techniques/keyboard/">Keyboard Accessibility</a></li> <li><a href="/techniques/pagetitle/">Page Titles</a></li> <li>Presentation and Style <ul> <li><a href="/techniques/css/">Accessible CSS</a> <ul> <li><a href="/techniques/css/invisiblecontent">CSS in Action: Invisible Content Just for Screen Reader Users</a></li> </ul> </li> <li><a href="contrast/">Contrast and Color Accessibility</a></li> <li><a href="/techniques/reflow/">Responsive Design and Reflow</a></li> <li><a href="/techniques/fonts/">Typefaces and Fonts</a></li> <li><a href="/techniques/textlayout/">Text/Typographical Layout</a></li> </ul> </li> <li><a href="/techniques/tables/">Tables</a></li> </ul> </div> <div class="section" id="richmedia"> <h2 style="background:url(media/mediaicon.svg) top right no-repeat; padding:8px 0 2px 0;">Document and Media Accessibility</h2> <ul> <li>PDF <ul> <li><a href="/techniques/acrobat/">Adobe Acrobat</a></li> <li><a href="/techniques/foxit/">Foxit PhantomPDF (PDF Editor)</a></li> </ul> </li> <li><a href="/techniques/captions/">Captions, Transcripts, and Audio Descriptions</a> <ul> <li><a href="/techniques/captions/realtime">Real-time Captioning</a></li> </ul> </li> <li>Microsoft Office <ul> <li><a href="/techniques/powerpoint">PowerPoint</a></li> <li><a href="/techniques/word/">Word</a></li> <li><a href="/techniques/excel/">Excel</a></li> </ul> </li> </ul> </div> <div class="section" id="evaluation"> <h2 style="background:url(/media/home/evalicon.svg) top right no-repeat; padding:8px 0 2px 0;">Evaluation, Testing, and Tools</h2> <ul> <li><a href="evaluationguide/">Web Accessibility Evaluation Guide</a></li> <li><a href="tools/">Accessibility Evaluation Tools</a></li> <li><a href="framework/">A Conceptual Framework for Accessibility Tools to Benefit Users with Cognitive Disabilities</a></li> <li>Screen Readers <ul> <li><a href="jaws/">Using JAWS to Evaluate Web Accessibility</a></li> <li><a href="nvda/">Using NVDA to Evaluate Web Accessibility</a></li> <li><a href="voiceover/">Using VoiceOver to Evaluate Web Accessibility</a> <ul> <li><a href="voiceover/mobile">VoiceOver on Mobile</a></li> </ul> </li> <li><a href="talkback/">Using TalkBack to Evaluate Web Accessibility</a></li> <li><a href="narrator/">Using Narrator to Evaluate Web Accessibility</a></li> <li><a href="dolphin/">Using Dolphin to Evaluate Web Accessibility</a></li> <li><a href="screenreader_testing/">Testing with Screen Readers: Questions and Answers</a></li> </ul> </li> </ul> </div> <div class="section" id="standards"> <h2 style="background:url(media/lawicon.svg) top right no-repeat; padding:8px 0 2px 0;">Standards and Laws</h2> <ul> <li><a href="/standards/wcag/">The Web Content Accessibility Guidelines (WCAG)</a> <ul> <li><a href="/standards/wcag/checklist">WCAG 2 Checklist</a></li> <li><a href="label-name/">Decoding Label and Name for Accessibility</a> </ul> </li> <li><a href="laws/usa/">United States Laws</a> <ul> <li><a href="/standards/508/checklist">Section 508 Checklist</a></li> </ul> </li> <li><a href="laws/canada/">Canadian Laws</a></li> </ul> </div> <div class="section" id="policy"> <h2 style="background:url(/media/template/bg_training.svg) top right no-repeat; padding:8px 0 2px 0;">Strategy, Policy, and Training</h2> <ul> <li><a href="strategicframework/">The WebAIM Strategic Accessibility Framework: Indicators and Benchmarks for Success</a></li> <li><a href="adaroadmap/">WebAIM's Roadmap to Meeting the ADA Title II Requirements</a></li> <li><a href="procurement/vpat/">Making VPATs and ACRs More Effective in Procurement</a></li> <li><a href="communities/">How Traits of Successful Communities Can Inform Our Accessibility Initiatives</a></li> <li><a href="imp_of_leadership/">The Importance of Leadership</a></li> <li><a href="training/">Training Others</a></li> </ul> </div> <div class="section" id="other"> <h2 style="background:url(media/othericon.svg) top right no-repeat; padding:8px 0 2px 0;">Other Articles</h2> <ul> <li><a href="cognitive/cognitive_too_little/">Cognitive Disabilities Part 1: We Still Know Too Little, and We Do Even Less</a></li> <li><a href="cognitive/conceptualize/">Cognitive Disabilities Part 2: Conceptualizing Design Considerations</a></li> <li><a href="gonewild/">Web Accessibility Gone Wild</a></li> </ul> </div> </div> </article>  <aside id="articlemeta"> </aside> </main> <footer> <div id="footerresources"> <div class="footerblock"> <h2 id="copyright">©2024 WebAIM</h2> <p id="contact">Institute for Disability Research, Policy, and Practice<br> 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/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><li><a href="/blog/celebrating-webaims-25th-anniversary/">Celebrating WebAIM's 25th Anniversary</a></li><li><a href="/blog/introducing-ncademi/">Introducing NCADEMI: The National Center on Accessible Digital Educational Materials & Instruction聽</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>