Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

accessibility/index.html

Go to file
 
 
Cannot retrieve contributors at this time
952 lines (828 sloc) 40.4 KB
Raw Blame
Open in GitHub Desktop
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Web Accessibility</title>
<meta name="description" content="A guide to web accessibity, step by step">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<link rel="stylesheet" href="css/freezeframe_styles.min.css">
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<header>
<button id="menu"><img src="img/menu.svg" alt="menu"> Menu</button>
</header>
<nav>
<ul id="nav-list">
<li>
<a href="#introduction">
<div>Introduction</div>
</a>
</li>
<li>
<a href="#levelA">
<div>Level A</div>
</a>
<ul>
<li>
<a class="" href="#section-1-1">
<div>1.1</div>
<div>Text Alternatives</div>
</a>
<ul>
<li>
<a href="#section-1-1-1">
<div>1.1.1</div>
<div>Non-text content has a text alternative</div>
</a>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#section-1-2">
<div>1.2</div>
<div>Time-based Media</div>
</a>
<ul>
<li>
<a href="#section-1-2-1">
<div>1.2.1</div>
<div>Prerecorded Audio-only and video-only have alternative formats</div>
</a>
</li>
<li>
<a href="#section-1-2-2">
<div>1.2.2</div>
<div>Captions are provided for videos</div>
</a>
</li>
<li>
<a href="#section-1-2-3">
<div>1.2.3</div>
<div>Audio Description or Media Alternative (Prerecorded)</div>
</a>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#section-1-3">
<div>1.3</div>
<div>Adaptable</div>
</a>
<ul>
<li>
<a href="#section-1-3-1">
<div>1.3.1</div>
<div>Info and Relationships</div>
</a>
</li>
<li>
<a href="#section-1-3-2">
<div>1.3.2</div>
<div>Meaningful Sequence</div>
</a>
</li>
<li>
<a href="#section-1-3-3">
<div>1.3.3</div>
<div>Sensory Characteristics</div>
</a>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#section-1-4">
<div>1.4</div>
<div>Distinguishable</div>
</a>
<ul>
<li>
<a href="#section-1-4-1">
<div>1.4.1</div>
<div>Use of color</div>
</a>
</li>
<li>
<a href="#section-1-4-2">
<div>1.4.2</div>
<div>Audio controls</div>
</a>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#section-2-1">
<div>2.1</div>
<div>Keyboard Accessible</div>
</a>
<ul>
<li>
<a href="#section-2-1-1">
<div>2.1.1</div>
<div>Keyboard</div>
</a>
</li>
<li>
<a href="#section-2-1-2">
<div>2.1.2</div>
<div>No Keyboard Traps</div>
</a>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#section-2-2">
<div>2.2</div>
<div>Enough Time</div>
</a>
<ul>
<li>
<a href="#section-2-2-1">
<div>2.2.1</div>
<div>Timing Adjustable</div>
</a>
</li>
<li>
<a href="#section-2-2-2">
<div>2.1.2</div>
<div>Pause, Stop, Hide</div>
</a>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#section-2-3">
<div>2.3</div>
<div>Seizures</div>
</a>
<ul>
<li>
<a href="#section-2-3-1">
<div>2.3.1</div>
<div>Three Flashes or Below Threshold</div>
</a>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#section-2-4">
<div>2.4</div>
<div>Navigable</div>
</a>
<ul>
<li>
<a href="#section-2-4-1">
<div>2.4.1</div>
<div>Bypass Blocks</div>
</a>
</li>
<li>
<a href="#section-2-4-2">
<div>2.4.2</div>
<div>Page Titled</div>
</a>
</li>
<li>
<a href="#section-2-4-3">
<div>2.4.3</div>
<div>Focus Order</div>
</a>
</li>
<li>
<a href="#section-2-4-4">
<div>2.4.4</div>
<div>Link Purpose</div>
</a>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#section-2-2">
<div>2.2</div>
<div>Enough Time</div>
</a>
<ul>
<li>
<a href="#section-2-2-1">
<div>2.2.1</div>
<div>Timing Adjustable</div>
</a>
</li>
<li>
<a href="#section-2-2-2">
<div>2.1.2</div>
<div>Pause, Stop, Hide</div>
</a>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#section-2-3">
<div>2.3</div>
<div>Seizures</div>
</a>
<ul>
<li>
<a href="#section-2-3-1">
<div>2.3.1</div>
<div>Three Flashes or Below Threshold</div>
</a>
</li>
</ul>
</li>
<li>
<a href="#section-2-4">
<div>2.4</div>
<div>Navigable</div>
</a>
<ul>
<li>
<a href="#section-2-4-1">
<div>2.4.1</div>
<div>Bypass Blocks</div>
</a>
</li>
<li>
<a href="#section-2-4-2">
<div>2.4.2</div>
<div>Page Titled</div>
</a>
</li>
<li>
<a href="#section-2-4-3">
<div>2.4.3</div>
<div>Focus Order</div>
</a>
</li>
<li>
<a href="#section-2-4-4">
<div>2.4.4</div>
<div>Link Purpose</div>
</a>
</li>
</ul>
</li>
<li>
<a href="#section-3-1">
<div>3.1</div>
<div>Readable</div>
</a>
<ul>
<li>
<a href="#section-3-1-1">
<div>3.1.1</div>
<div>Language of Page</div>
</a>
</li>
</ul>
</li>
<li>
<a href="#section-3-2">
<div>3.2</div>
<div>Predictable</div>
</a>
<ul>
<li>
<a href="#section-3-2-1">
<div>3.2.1</div>
<div>On Focus</div>
</a>
</li>
<li>
<a href="#section-3-2-2">
<div>3.2.2</div>
<div>On Input</div>
</a>
</li>
</ul>
</li>
<li>
<a href="#section-3-3">
<div>3.3</div>
<div>Input Assistance</div>
</a>
<ul>
<li>
<a href="#section-3-3-1">
<div>3.3.1</div>
<div>Error Identification</div>
</a>
</li>
<li>
<a href="#section-3-3-2">
<div>3.3.2</div>
<div>Labels or Instructions</div>
</a>
</li>
</ul>
</li>
<li>
<a href="#section-4-1">
<div>4.1</div>
<div>Compatible</div>
</a>
<ul>
<li>
<a href="#section-4-1-1">
<div>4.1.1</div>
<div>Parsing</div>
</a>
</li>
<li>
<a href="#section-4-1-2">
<div>4.1.2</div>
<div>Name, Role, Value</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<main>
<h1 id="introduction">Web Accessibility</h1>
<h2 id="why">But Why Though?</h2>
<p>The internet contains a wealth of knowledge, entertainment, and communications, which everyone should be able to access. While most users are able to move their mouses, look at content, and navigate your site successfully, there is a large number of users that just can’t do this. The elderly is one example, their senses are often going and they can't move as well as they used to. There are also more specific cases, such as the deaf, blind, amputees, or anyone with cognitive disabilities. People with disabilities should of course be able to access the web just as easily as everyone else, and there are tools out there to help them, but they often require optimization on the developer side. These optimizations range in difficulty, but are significantly easier to implement if taken into consideration from the beginning.</p>
<h2 id="what">What Do I Have To Do?</h2>
<p>The W3C has created the Web Content Accessibility Guidelines 2.0 (WCAG 2.0) to outline the enhancements that should me made in order to make your site accessible. The WCAG 2.0 is broken down into four main objectives.</p>
<ul>
<li><strong>Perceivable:</strong> Everyone is able to receive the information using the senses that work best for them</li>
<li><strong>Operable:</strong> Users are able to navigate around the website with their prefered method</li>
<li><strong>Understandable:</strong> Users can comprehend the site</li>
<li><strong>Robust:</strong> The site is compatible with as many assistive technologies as possible</li>
</ul>
<p>There are also three levels of accessibility defined by WCAG 2.0.</p>
<ul>
<li><strong>Level A:</strong> sites adhere to basic accessibility guidelines</li>
<li><strong>Level AA:</strong> sites address some common accessibility problems</li>
<li><strong>Level AAA:</strong> sites are the most accessible</li>
</ul> <p>
Most government websites are required to be Level AA compliant. Level AAA is very hard to achieve, but sites should aim to comply with Level AA and as many AAA guidelines at possible. </p>
<h2 id="levelA">Level A</h2>
<h3 id="section-1-1">1.1 Text Alternatives</h3>
<div class="clearfix">
<h4 id="section-1-1-1">1.1.1 Non-text content has a text alternative &#128584;</h4>
<p>Some people may turn off images, if they have a slow connection for instance, and some people are just blind and cannot see the images anyway. For these users alt tags are critical, so they should contain all the same information as the image.
</p>
<ul>
<li>Use alt tags</li>
</ul>
<figure class="example">
<img src="img/off-to-the-party.jpg" alt="kittens dressed up carrying pressents, captiones off we go to the party">
<figcaption>&#x3C;img src=&#x22;img/off-to-the-party.jpg&#x22; <strong>alt=&#x22;kittens dressed up carrying pressents, captioned off we go to the party&#x22;</strong>&#x3E;</figcaption>
</figure>
<div class="exceptions"><h5>Exceptions</h5><p>Some items should have descriptive text alternatives, such as things like buttons, videos, CAPTCHAs(also need alternative methods for use). <br>Elements that are purely decorative should be ignored by assistive technology</p></div>
</div>
<h3 id="section-1-2">1.2 Time-based Media</h3>
<div class="clearfix">
<h4 id="section-1-2-1">1.2.1 Prerecorded Audio-only and video-only have alternative formats &#128584; &#128585; &#129300;</h4>
<div>
<p>Users may not fully understand the information you are trying to convey in a video-only or audio-only format and would benefit from getting the information in multiple ways. Also, deaf people are unable to hear an audio track, and the blind cannot see a video, so they need another way to access the information presented.
</p>
<ul>
<li>Audio should have a written transcript</li>
<li>Video should have a written transcript OR an audio transcript</li>
<li>The transcripts should be placed close to the media</li>
</ul>
<div class="example">
<audio controls>
<source src="img/woochuck.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p class="example-caption"><strong>Transcript</strong>
<br>Man: How much wood would a woodchuck chuck if a woodchuck could chuck wood?
<br>Child: The whole tree.</p>
</div>
<div class="exceptions"><h5>Exceptions</h5><p>If the audio of video is already an alternative it does not need another alternative</p></div>
</div>
</div>
<div class="clearfix">
<h4 id="section-1-2-2">1.2.2 Captions are provided for videos &#128585;</h4>
<div>
<p>The elderly are often hard of hearing, and the deaf are...deaf, so they need another method of getting the dialog and sound effects.
</p>
<ul>
<li>Closed captions are one popular method</li>
</ul>
<div class="example">
<iframe src="https://www.youtube.com/embed/m1TyCaJqFyg" allowfullscreen></iframe>
<p class="example-caption">Be sure to turn on closed captioning</p>
</div>
<div class="exceptions"><h5>Exceptions</h5><p>If the video is already an alternative it does not need another alternative</p></div>
</div>
</div>
<div class="clearfix">
<h4 id="section-1-2-3">1.2.3 Audio Description or Media Alternative (Prerecorded) &#128584;</h4>
<div>
<p>People who cannot see should still be able to access the information in videos. Descriptive audio tracks are often used in theaters, so blind people can still enjoy the movie.
</p>
<ul>
<li>Videos have a transcription OR</li>
<li>Videos have an audio track describing what is happening</li>
</ul>
<div class="example">
<iframe src="https://www.youtube.com/embed/O7j4_aP8dWA" allowfullscreen></iframe>
<p class="example-caption">Close your eyes as you listen to get the full effect</p>
</div>
<div class="exceptions"><h5>Exceptions</h5><p>All relevant information is already in the audio track (such as an interview)
</p></div>
</div>
</div>
<h3 id="section-1-3">1.3 Adaptable</h3>
<div class="clearfix">
<h4 id="section-1-3-1">1.3.1 Info and Relationships &#129300;</h4>
<div>
<p>There should be a logical structure to your content. One big block of text is hard for people to make sense of, and can almost always be broken down into smaller sections. Content should also, not be so distant that it does not appear to be unrelated.
</p>
<ul>
<li>HTML markup should be semantic</li>
<li>Use section headers, bullets, etc. appropriately</li>
<li>Forms have a clear relationship between labels and their input field</li>
</ul>
<div class="example">
<p class="example-caption">Look at all the different sections this site has. Isn’t that much easier to read than one long essay. </p>
</div>
</div>
</div>
<div class="clearfix">
<h4 id="section-1-3-2">1.3.2 Meaningful Sequence &#128584; &#129300;</h4>
<div>
<p>Users that rely on assistive technology like screen readers will essentially only “see” the html of your page, which means the order of content in your code matters. Screen readers do not know that you moved a menu or paragraph in your css, so if the linear order of your html has a different meaning, it should be reordered.
</p>
<ul>
<li>The sequence of content in both the html and on screen should be logical</li>
<li>Menus should be separate from content</li>
<li>Use headings, proper list types, and valid html</li>
</ul>
</div>
</div>
<div class="clearfix">
<h4 id="section-1-3-3">1.3.3 Sensory Characteristics &#129300;</h4>
<div>
<p>When giving instructions like “go over there,” it may be unclear where exactly “there” is without some other method of reference. Often times users may be color blind, or your site may appear to have multiple items that fit your description to the users eye, so it is best to describe instructions in multiple ways.
</p>
<ul>
<li>Instructions should not rely solely on any one sensory characteristic</li>
<li>Use a combination of color, text, shape, and location to differentiate items</li>
</ul>
<div class="example">
<div class="button example">
<button type="button" id="delete-button">Delete</button>
<button type="button" id="save-button">Save</button>
<button type="button" id="send-button">Send</button>
</div>
<p class="example-caption">Click the green “send” button on the right to send your message</p>
</div>
</div>
</div>
<h3 id="section-1-4">1.4 Distinguishable</h3>
<div class="clearfix">
<h4 id="section-1-4-1">1.4.1 Use of color &#128584;</h4>
<div>
<p>People who are color blind can not differentiate between certain color pairs, or can not see in color at all, so when you tell them the information they need is in red, they have no idea which content is in red and which isn’t.
</p>
<ul>
<li>Do not rely on color for anything, make it a secondary identifier</li>
<li>Test for different types of color blindness</li>
</ul>
<figure class="example">
<img src="img/color-blind.jpg" alt="Colorful balloons lifting a house, shown in normal vision, and two types of color blindness">
<figcaption>As you can see color blind people cannot differentiate colors reliably</figcaption>
</figure>
</div>
</div>
<div class="clearfix">
<h4 id="section-1-4-2">1.4.2 Audio Control</h4>
<div>
<p>No one likes surprises, opening a page and being blasted with sounds can be annoying and even scare people. Also, if someone is using a screen reader they need to be able to hear their screen reader, which can be hard with audio in the background.
</p>
<ul>
<li>Audio does not auto play</li>
<li>Has play/pause buttons</li>
</ul>
<div class="example">
<audio controls>
<source src="img/ringtone.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p class="example-caption">Most web browsers have a default media player with the proper controls</p>
</div>
</div>
</div>
<h3 id="section-2-1">2.1 Keyboard Accessible</h3>
<div class="clearfix">
<h4 id="section-2-1-1">2.1.1 Keyboard</h4>
<div>
<p>People with limited mobility often have a hard time moving the mouse around, and find navigating with the keyboard, much easier, so your site should be able to be navigated using only the keyboard. Keyboard navigation is another reason it is important to consider the sequence of your site, users don't want to be jumping all over the page when they navigate.
</p>
<ul>
<li>Clean HTML usually has full keyboard accessibility</li>
<li>No functions should require timed keystrokes</li>
<li>Tab and arrow keys are the standard for keyboard navigation</li>
</ul>
<div class="example">
<p class="example-caption">Try navigating around this site with only your keyboard to see how it works</p>
</div>
</div>
</div>
<div class="clearfix">
<h4 id="section-2-1-2">2.1.2 No Keyboard Traps</h4>
<div>
<p>It can be frustrating for users navigating via keyboard when they focus onto something and they are unable to remove focus and focus on something else.
</p>
<ul>
<li>It is possible to navigate away from all parts of your website</li>
<li>If you can tab into it you should be able to either tab out of it, or get out with another standard method such as escape of arrow keys</li>
</ul>
</div>
</div>
<h3 id="section-2-2">2.2 Enough Time</h3>
<div class="clearfix">
<h4 id="section-2-2-1">2.2.1 Timing Adjustable</h4>
<div>
<p>No one likes the pressure of a time limit, especially those who may need more time to navigate around a site, or need more time to process the information given. It is important to respect this, and make time limits that are workable.
</p>
<ul>
<li>Time limits should have options to be turned off or extended</li>
<li>Changing content can be paused for a period of time</li>
</ul>
<div class="example invisible">
<p class="example-caption"> </p>
</div>
<div class="exceptions">
<h5>Exceptions</h5>
<ul>
<li>The business depends of the time limit</li>
<li>The time limit is more than 20 hours</li>
</ul>
</div>
</div>
</div>
<div class="clearfix">
<h4 id="section-2-2-2">2.2.2 Pause, Stop, Hide</h4>
<div>
<p>Some people have trouble reading stationary text, never mind moving text, or a page with blinking or distracting movement going on.
</p>
<ul>
<li>Moving content should be able to be played, paused, or hidden</li>
<li>This includes auto-updating, scrolling, blinking, and moving content that lasts for more than five seconds</li>
</ul>
<figure class="example">
<img id="gif-oprah" src="img/oprah.jpg" alt="gif of Oprah walking on hot coals" />
<figcaption>This gif only plays when you hover over it
</figcaption>
</figure>
<div class="exceptions">
<h5>Exceptions</h5>
<ul>
<li>If the changing content stops moving after 5 seconds or less it is fine</li>
</ul>
</div>
</div>
</div>
<h3 id="section-2-3">2.3 Seizures</h3>
<div class="clearfix">
<h4 id="section-2-3-1">2.3.1 Three Flashes or Below Threshold</h4>
<div>
<p>Epileptics are susceptible to seizures from flashing content, and you obviously don't want to give people seizures.
</p>
<ul>
<li>Content should not flash more than 3 times per second</li>
</ul>
<figure class="example">
<img id="gif-bulb" src="img/slow-flash.jpg" alt="slowly flashing lightbulb" />
<figcaption>Notice this gif flashes very slowly
</figcaption>
</figure>
<div class="exceptions">
<h5>Exceptions</h5>
The flash can happen if it’s below the general flash and red flash thresholds
</div>
</div>
</div>
<h3 id="section-2-4">2.4 Navigable</h3>
<div class="clearfix">
<h4 id="section-2-4-1">2.4.1 Bypass Blocks</h4>
<div>
<p>Some users, such as those using screen readers or keyboard navigation, may find it difficult and lengthy to get to the main content of a page when they have to listen to the menu be read out loud again and again on every page, or tab through tirty different menu items.
</p>
<ul>
<li>Allow users to skip blocks of content that are repeated on every page such as navigation menus</li>
<li>Provide a “Skip to Content” link</li>
<li>Using proper tags and roles is another way to do this</li>
</ul>
<div class="example">
<p class="example-caption">
&lt;header&gt; <br>
&lt;nav&gt; <br>
&lt;main&gt; <br>
&lt;h1&gt; <br>
&lt;h2&gt; <br>
&lt;footer&gt; <br>
</p>
</div>
</div>
</div>
<div class="clearfix">
<h4 id="section-2-4-2">2.4.2 Page Titled</h4>
<div>
<p>Having a title allows users to quickly change between tabs, and identify the current site they are on.
</p>
<ul>
<li>Use the title tag</li>
</ul>
<div class="example">
<p class="example-caption">
&lt;head> <br>
&lt;title>Accessibility Reference&lt;/title> <br>
&lt;/head> <br>
</p>
</div>
</div>
</div>
<div class="clearfix">
<h4 id="section-2-4-3">2.4.3 Focus Order</h4>
<div>
<p>Users with visual or physical impairments that rely on keyboard navigation cen become confused it they tab somewhere unexpectedly.
</p>
<ul>
<li>Put DOM elements in the order they are seen</li>
</ul>
<div class="example invisible">
<p class="example-caption">
</p>
</div>
<div class="exceptions">
<h5>Exceptions</h5>
If the order of focusable elements has no impact of meaning or function, then the elements can be in any order.
</div>
</div>
</div>
<div class="clearfix">
<h4 id="section-2-4-4">2.4.4 Link Purpose</h4>
<div>
<p>Links should have some sort of context for users to figure out where exactly the link goes. This is particularly helpful for those with cognitive impairments, as well as those which rely on screen readers.
</p>
<ul>
<li>Links should say exactly where they are taking users</li>
<li>Buttons should say exactly what they do</li>
</ul>
<div class="example">
<p class="example-caption"><a href="https://www.google.com/">
Google.com
</a></p>
</div>
</div>
</div>
<h3 id="section-3-1">3.1 Readable</h3>
<div class="clearfix">
<h4 id="section-3-1-1">3.1.1 Language of Page</h4>
<div>
<p>Screen readers need to know which language a page is in to get correct pronunciations.
</p>
<ul>
<li>Page has a language assigned</li>
</ul>
<div class="example">
<p class="example-caption">
&lt;html lang="en">
&lt;/html>
</p>
</div>
</div>
</div>
<h3 id="section-3-2">3.2 Predictable</h3>
<div class="clearfix">
<h4 id="section-3-2-1">3.2.1 On Focus</h4>
<div>
<p>Changing focus shouldn’t do anything except change focus. People with cognitive disabilities may become confused when something happens they did not intend to, just by changing the focused element. When users intend to follow a link while using keyboard input they will hit enter, or spacebar. </p>
<ul>
<li>Links don't automatically open on focus</li>
<li>Submit buttons don't automatically submit on focus</li>
</ul>
<div class="example">
<p class="example-caption"><a href="https://www.google.com/">
Google.com
</a><br>
Tab over to this, or any other link and you will notice it does not automaticaly open.
</p>
</div>
</div>
</div>
<div class="clearfix">
<h4 id="section-3-2-2">3.2.2 On Input</h4>
<div>
<p>On input of text or upon changing any settings, there is no unexpected change in context. People with visual impairments may not notice the change and wonder why they cannot navigate as expected.</p>
<ul>
<li>Forms do not automatically send</li>
<li>Users have a chance to review before submitting</li>
</ul>
<div class="example" id="color-change-me">
<div class="example">
<button class="color-button" type="button" id="red-button">Red</button>
<button class="color-button" type="button" id="blue-button">Blue</button>
<button class="color-button" type="button" id="green-button">Green</button>
</div>
<p class="example-caption">Click a button to change the color of this box
</p>
</div>
<div class="exceptions"><h5>Exceptions</h5><p>A change of context is okay, as long as users are warned beforehand, like in the color changing example to the left.</p></div>
</div>
</div>
<h3 id="section-3-3">3.3 Input Assistance</h3>
<div class="clearfix">
<h4 id="section-3-3-1">3.3.1 Error Identification</h4>
<div>
<p>When filling out a form people often make mistakes, so it is helpful to have some kind of error checking. Error warnings need to be clear enough for people to understand what they did wrong. This is especially important to people with cognitive disabilities, and the blind, who can not see that you changed the color of the field to red.</p>
<ul>
<li>Input errors are clearly marked with a text description of what went wrong.</li>
</ul>
<div class="example">
<form class="example">
<label for="fillname">First Name</label>
<input type="text" id="fillname" name="fname" required> <br>
<input type="submit" value="Submit">
</form>
<p class="example-caption">Try to submit this form without entering anything and you will notice the error message provided by the browser. Adding “required” into the input tag will tell the browser there should be content in this text field.</p>
</div>
</div>
</div>
<div class="clearfix">
<h4 id="section-3-3-2">3.3.2 Labels or Instructions</h4>
<div>
<p>When users get to a form on your website they need to know what the form is for and what information to input. The easiest way to do this is by labeling the different input fields.</p>
<ul>
<li>Input elements are labeled and have instructions</li>
</ul>
<div class="example">
<form class="example">
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname"> <br>
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname">
</form>
<p class="example-caption">Notice how the labels next to the text fields let users know what information goes where.</p>
</div>
</div>
</div>
<h3 id="section-4-1">4.1 Compatible</h3>
<div class="clearfix">
<h4 id="section-4-1-1">4.1.1 Parsing</h4>
<div>
<p>In order for assistive technologies to parse a page correctly elements should have closing tags, proper nesting, and be correctly coded.</p>
<ul>
<li>Code is valid, with no major errors</li>
</ul>
<div class="example">
<p class="example-caption">Use a validator, such as <a href="https://validator.w3.org/">W3C’s</a></p>
</div>
</div>
</div>
<div class="clearfix">
<h4 id="section-4-1-2">4.1.2 Name, Role, Value</h4>
<div>
<p>All code for the site should be valid and adhere to accessibility guidelines, including any third party plugins, non-HTML elements.</p>
<ul>
<li>ALL code is valid</li>
</ul>
<div class="example">
<p class="example-caption">Use a validator, such as <a href="https://validator.w3.org/">W3C’s</a> to check not only your code, but any plugins.</p>
</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/jquery.maskedinput.min.js" type="text/javascript"></script>
<script src="js/main.js"></script>
</body>
</html>