CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>WebAIM: Introduction to Web Accessibility</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>Introduction to Web Accessibility</h1> <p id="breadcrumbs"><span class="hidden">You are here: </span><a href="/">Home</a> > <a href="/articles/">Articles</a> > Introduction to Web Accessibility</p> <link href="/styles/fontawesome.css" rel="stylesheet" type="text/css"> <nav role="navigation"> <h2>Article Contents</h2> <ol> <li><a href="#intro">Introduction</a></li> <li><a href="#people">People with Disabilities on the Web</a></li> <li><a href="#implementing">Implementing Web Accessibility</a></li> <li><a href="#principles">Principles of Accessible Design</a></li> <li><a href="#conclusion">Conclusion</a></li> </ol> </nav> <div class="section" id="intro"> <h2>Introduction</h2> <p><b>Most of us can hardly conceive of life without the internet.</b> Some have argued that no other single invention has been more revolutionary since Gutenberg's printing press in the 1400s. The world can be “at your fingertips” at the click of a mouse—if you can use a mouse... and see the screen... and hear the audio.</p> <div class="section" id="opportunities"> <h3>The Web Offers Unprecedented Opportunities</h3> <p><b>The internet is one of the best things that has ever happened to people with disabilities.</b> Recall the pre-internet days: How could blind people read printed newspapers? They could travel to a library for an audio tape or bulky Braille version, or they could ask someone to read to them at home. This made blind people dependent upon others, but it was all we could do.</p> <img class="fullwidth" src="media/mobile-screen-reader.jpg" alt="person using a screen reader with a mobile phone"> <p>Today we can do better. <a href="/techniques/screenreader/">Screen reader software</a> is designed to read online content aloud. Blind people no longer need to rely on others to read to them. They simply open a browser and interact with content independently, on their schedule, and as soon as the content is published.</p> <p>People with <a href="/articles/motor/">motor disabilities</a> interact with online content using assistive devices that map their abilities to their hardware. Some are simple, like a mouth wand to interact with the keyboard. Others are more sophisticated, such as alternative keyboards, or eye-tracking software that allows people to use a computer with nothing more than eye movements.</p> <img class="fullwidth" src="media/mouth-wand.jpg" alt="person using a mouth wand to operate a computer keyboard"> <p>People who are <a href="/articles/auditory/">deaf or hearing-impaired</a> rely on <a href="/techniques/captions/">captions and transcripts</a> of multimedia. Many people with <a href="/articles/cognitive/">cognitive disabilities</a> also benefit greatly from the structure and flexibility of web content.</p> </div> <div class="section" id="short"> <h3>Falling Short of the Web's Potential</h3> <p><b>The web's great potential for people with disabilities remains <a href="/projects/million/">largely unrealized</a>.</b> For example, some sites can only be navigated using a mouse, and some multimedia is not captioned. What if you can’t use a mouse? What if you can't hear the audio?</p> <img class="fullwidth" src="media/captions.jpg" alt="person watching a closed-captioned video"> <p>As soon as we begin asking these types of questions, we begin to see how the internet can create barriers to people with disabilities—harming the internet's potential, frustrating users (<em>customers</em>), and leaving them dependent on others.</p> <p>However, once we recognize the barriers, we can begin to remove them.</p> </div> </div> <div class="section" id="people"> <h2>People with Disabilities on the Web</h2> <p><a href="//www.cdc.gov/ncbddd/disabilityandhealth/infographic-disability-impacts-all.html">One in four adults in the United States has a disability.</a> Although not all disabilities impact internet use, businesses would be unwise to purposely exclude 25, 15, or even five percent of their potential customers. In education and government, in many cases it is <a href="/articles/laws/usa/">illegal discrimination</a>.</p> <h3 id="types">Disability Categories</h3> <ul class="tiles"> <li><a href="/articles/visual/"><span class="fas fa-eye-slash"></span>Visual</a> Blindness, low vision, color‑blindness.</li> <li><a href="/articles/auditory/"><span class="fas fa-deaf"></span>Auditory</a> Deafness and hard-of-hearing.</li> <li><a href="/articles/motor/"><span class="fas fa-hand-pointer"></span>Motor</a> Inability to use a mouse, slow response time, limited fine motor control.</li> <li><a href="/articles/cognitive/"><span class="fas fa-brain"></span>Cognitive</a> Learning disabilities, distractibility, inability to remember or focus on large amounts of information.</li> </ul> <p>Each category requires deliberate strategy in <a href="/resources/designers/">content design</a>. Often, these strategies promote overall usability, beyond people with disabilities. Everyone benefits from helpful illustrations, logically-organized content and intuitive navigation. Similarly, while users with disabilities <em>need</em> captions and transcripts, they can be <em>helpful</em> to anyone who uses multimedia in silent or noisy environments.</p> </div> <div class="section" id="implementing"> <h2>Implementing Web Accessibility </h2> <p>Before anyone can make their website accessible, they must understand accessibility, be committed to ensuring accessibility, learn how to implement accessibility, and understand their legal obligations. </p> <div class="section" id="commitment"> <h3>Commitment and accountability</h3> <p><strong>Awareness.</strong> The foundation of any commitment to accessibility is awareness of the barriers. Few developers oppose the broad concept of inclusive design; many simply do not perceive the barriers faced by users with disabilities.</p> <p><strong>Leadership.</strong> If organizational leadership demonstrates a commitment to web accessibility, chances are high that the organization's web content will be accessible. Developers will make content accessible if they feel that the effort is expected, recognized and rewarded.</p> <p><strong>Policies and Procedures.</strong> When the idea of accessibility is backed by policies and procedures, it becomes part of the daily routine. The best approach for a large organization is to implement an <a href="/articles/implementation/">internal accessibility policy</a>.</p> </div> <div class="section" id="training"> <h3>Training and technical support</h3> <p>Website stakeholders often ask what must be "added" to a website to make it accessible. In practice, accessible code structures are typically more lightweight and efficient.</p> <p>Although accessible development may initially add time and expense to a project, the benefits of providing access to a larger population almost always outweigh the time required by a knowledgeable developer to implement that accessibility.</p> <p>A developer can learn the basics of web accessibility in just a few days, but, as with any technical skill, it often takes months to internalize the mindset as well as the techniques. Free resources like WebAIM <a href="/articles/">articles</a>, <a href="/resources/">resources</a>, <a href="/discussion/">email discussion list</a>, <a href="/newsletter/">monthly newsletter</a>, and <a href="/blog/">blog</a> provide relevant resources for administrators, developers, and designers. Many professionals can help your organization ensure high accessibility. WebAIM offers <a href="/services/training/">onsite training</a>, <a href="/services/consulting/">technical assistance</a>, <a href="/services/evaluation/">website evaluation</a>, and <a href="/services/">other services</a>.</p> </div> <div class="section" id="standards"> <h3>Laws and standards</h3> <p>If you live in the United States, applicable laws include <a href="/articles/laws/usa/ada">The Americans with Disabilities Act (ADA)</a> and the <a href="/articles/laws/usa/rehab">Rehabilitation Act</a> of 1973 (Sections 504 and 508). Many <a href="/articles/laws/world/">international laws</a> also address accessibility.</p> <p>The <a href="//www.w3.org/WAI/WCAG21/quickref/">Web Content Accessibility Guidelines (WCAG)</a> provide an international set of guidelines. They are developed by the Worldwide Web Consortium (W3C), the governing body of the web. These guidelines, the basis of most web accessibility laws in the world, are based on four principles:</p> <ul> <li><strong><a href="/articles/pour/perceivable">Perceivable</a>:</strong> Available to the senses (vision and hearing primarily) either through the browser or through assistive technologies (e.g. screen readers, screen enlargers, etc.)</li> <li><strong><a href="/articles/pour/operable">Operable</a>:</strong> Users can interact with all controls and interactive elements using either the mouse, keyboard, or an assistive device.</li> <li><strong><a href="/articles/pour/understandable">Understandable</a>:</strong> Content is clear and limits confusion and ambiguity.</li> <li><strong><a href="/articles/pour/robust">Robust</a>:</strong> A wide range of technologies (including old and new user agents and assistive technologies) can access the content.</li> </ul> <p>These first letters of these four principles spell the word POUR. This may help you remember them.</p> <ul> <li><a href="/standards/wcag/checklist">Quick checklist to WCAG 2</a></li> <li><a href="/articles/pour/">Principles of WCAG 2</a></li> <li><a href="/standards/wcag/">More about WCAG 2</a></li> </ul> </div> </div> <div class="section" id="principles"> <h2>Principles of Accessible Design</h2> <p>Below you will find a list of some key principles of accessible design. Most can be implemented without compromising the overall look and feel of your website.</p> <dl> <dt><a href="/techniques/alttext/">Provide equivalent alternative text</a></dt> <dd>Alternative text provides a textual alternative to non-text content in web pages. It is especially helpful for people who are blind and rely on a screen reader to have the content of the website read to them.</dd> <dt><a href="/techniques/semanticstructure/">Create logical document structure</a></dt> <dd>Headings, lists, and other structural elements provide meaning and structure to web pages. They can also facilitate keyboard navigation within the page.</dd> <dt><a href="/techniques/tables">Provide headers for data tables</a></dt> <dd>Data tables need row and column header cells (<code><th scope="row"></code> and <code><th scope="col"></code>) to programmatically associate them with their corresponding data cells (<code><td></code>), making it easier for screen reader users to navigate and understand the table.</dd> <dt><a href="/techniques/forms">Ensure users can complete and submit all forms</a></dt> <dd>Every form element (text field, checkbox, dropdown list, etc.) needs a programmatically-associated label. Users must be able to <a href="/techniques/formvalidation/">submit the form and recover from errors</a>.</dd> <dt><a href="/techniques/hypertext">Write links that make sense out of context</a></dt> <dd>Every link should make sense when read by itself. Screen reader users may choose to read only the links on a web page. Certain phrases like "click here" and "more" must be avoided.</dd> <dt><a href="/techniques/captions/">Caption and/or provide transcripts for media</a></dt> <dd>Videos and live audio must have captions and a transcript. With archived audio, a transcription may be enough.</dd> <dt>Ensure accessibility of <a href="/techniques/acrobat/">PDF</a>, <a href="/techniques/word/">Word</a>, <a href="/techniques/powerpoint/">PowerPoint</a>, and other non-HTML content.</dt> <dd>PDF documents and other non-HTML content must be as accessible as possible. If you cannot make it accessible, consider using HTML instead or, at the very least, provide an accessible alternative. PDF documents should also include a series of tags to make it more accessible. A tagged PDF file looks the same, but it is almost always more accessible to a person using a screen reader.</dd> <dt><a href="/techniques/skipnav/">Allow users to skip repetitive elements on the page</a></dt> <dd>Each page should provide a method to skip navigation or other elements that repeat on every page. This is usually accomplished by providing a "Skip to Main Content," or "Skip Navigation" link at the top of the page.</dd> <dt><a href="/articles/visual/colorblind">Do not rely on color alone to convey meaning</a></dt> <dd>Color can enhance comprehension but cannot <em>alone</em> convey meaning. That information may not be available to a person who is color blind and will be unavailable to screen reader users.</dd> <dt><a href="/techniques/writing/">Make sure content is clearly written and easy to read</a></dt> <dd>Write clearly, <a href="/techniques/fonts/">use clear fonts</a>, and <a href="/techniques/semanticstructure/">use headings and lists logically</a>.</dd> <dt><a href="/techniques/javascript/">Make JavaScript accessible</a></dt> <dd>Ensure <a href="/techniques/javascript/eventhandlers">JavaScript event handlers</a> are device independent (e.g., they do not require the use of a mouse).</dd> <dt>Design to standards</dt> <dd>Valid HTML and <a href="/techniques/css/">CSS</a> promote accessibility by making code more flexible and robust.</dd> </dl> <p>This is just an introduction. To learn more, explore our <a href="/articles/">articles</a> and <a href="/resources/">resources</a>. </p> </div> <div class="section" id="conclusion"> <h2>Conclusion</h2> <p>The web offers independence and freedom unavailable through any other medium. Websites that ignore accessibility unintentionally exclude a segment of the population that stands to gain the most from the internet. As you become aware of and implement accessibility, you can do your part to ensure the web can be accessed by a broader population.</p> </div> <div class="section"> <p>Images in Introduction section ©2016 W3C®, <a href="//creativecommons.org/licenses/by/3.0/us/">Creative Commons Attribution license</a>.</p> </div> </article>  <aside id="articlemeta"> <div id="updated">Last updated: <time datetime="2020-04-14">Apr 14, 2020</time></div> <div id="translations"> <h2>Translations</h2> <ul> <li><a href="//edubirdie.com/translations/znakomstvo-s-dostupnostju-seti/"><img src="/media/common/flags/ru.png" alt="">Russian</a> by EduTranslator</li> </ul> </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</a></li> <li><a href="/articles/auditory/">Hearing</a></li> <li><a href="/articles/motor/">Motor</a></li> <li><a href="/articles/cognitive/">Cognitive</a></li> <li><a href="/articles/seizure/">Seizure</a></li> <li><a href="/articles/design/">Design Considerations</a></li> </ul> </div> </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>