foundation-sites-5/doc/pages/accessibility.html

**This package is only for versions 5 and earlier of Foundation. As of version 6, the package has a new name: `foundation-sites`.**

---
title: Accessibility
---

<h3 class="subheader">Guidelines on this page will help you make your sites more accessible for keyboard navigation and screen readers.</h3>

Aside from accessibility features that has been built into Foundation's components, this guide will give you additional best practices towards making your site more accessible. This is a living document and will continue to be updated.

<p class="panel">Care about accessibility or want to contribute? Submit a Pull Request or get into the conversation on <a href="https://github.com/zurb/foundation">GitHub</a>.</p>

***
## Basic Concepts - Overview

<ul>
	<li>Images should have text alternative for images. Captions or transcripts should be provided for video and audio. Sufficient color contrast between text and background is important for people with vision impairment or color blindness.</li>
	<li>Sites should be navigatable using only a keyboard, providing meaningful hyperlinks, and allowing enough time for users to complete a task.</li>
	<li>Make content readable and provide predictable functionality.</li>
	<li>Maximizing compatibility with current and future tools (web browsers, assistive technologies, etc.).</li>
</ul>

***
## Keyboard Access

<p>The most common impairments for web users are those with problems seeing, hearing or a physical inability to use a mouse. For that reason, the site must be navigatable by keyboard. Most commonly the tab key is used to tab through the content. For a vision impaired person will have a <a href="http://en.wikipedia.org/wiki/Screen_reader">screenreader</a> installed that reads the content out loud. We used <a href="http://www.chromevox.com/">Chromevox</a> to test with. You can find a list of popular screen readers below in the resource list.</p>

###  How to Test a Website’s Keyboard Accessibility

<p>On a desktop or laptop in Firefox, IE, Chrome, or Safari,
click into the browser address bar.</p>

<p>Take your hand off your mouse and use only your keyboard.
Using the Tab button, navigate until you’ve reached the link below. (You can use Shift+Tab to navigate back one step.)</p>

<ul>
	<li>Right arrow: Next navigation bar item</li>
	<li>Left arrow: Previous navigation bar item</li>
	<li>Enter: Activate currently focused item (i.e. navigate to corresponding URL)</li>
</ul>

***
### Skip Navigation

<p>Give the person the ability to skip the navigation at the top of the page. If you have menu with 40 links, you can imagine how long it would take someone to tab through all that. Here's one way to do it:</p>

<div class="row">
	<div class="medium-7 columns">
{{#markdown}}
```html
<div id="skip"><a href="#content">Skip to Main Content</a></div>
```
{{/markdown}}
	</div>
	<div class="medium-5 columns">
{{#markdown}}
```css
	#skip a {
		position:absolute;
		left:-10000px;
		top:auto;
		width:1px;
		height:1px;
		overflow:hidden;
	}

	#skip a:focus {
		position:static;
		width:auto;
		height:auto;
	}
```
{{/markdown}}
 </div>
</div>

<p>Note: A person who can see may be slightly confused that their focus is off screen. This is a minor compromise for this method.</p>

***
### Nested Headings

<p>When nesting headings `<h1> - <h6>`, your primary document header should be an `<h1>`. Subsequent headings should make logical use of `<h2> - <h6>` such that screen readers can construct a table of contents for your pages.</p>

***
## Learn More

<div class="row">
	<div class="medium-6 columns">
	<h4 id="label-additional-resources">Additional resources</h4>
		<ul class="side-nav" aria-labelledby="label-additional-resources">
			<li><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/">WCAG 2.0 Guide</a></li>
			<li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility">MDN accessibility documentation</a></li>
			<li><a href="http://achecker.ca/checker/index.php">AChecker Web Accessibility Checker</a></li>
			<li><a href="http://www.w3.org/WAI/intro/accessibility.php">w3.org Introduction to Accessibility</a></li>
			<li><a href="http://www.section508.gov/">Section 508 Government Requirements</a></li>
			<li><a href="http://webaim.org/">Accessibilty Certification and Training</a></li>
			<li><a href="http://a11yproject.com/">A community-driven effort to make web accessibility easier</a></li>
		</ul>
	</div>
	<div class="medium-6 columns">
	<h4 id="label-tools">Tools</h4>
		<ul class="side-nav" aria-labelledby="label-tools">
			<li><a href="http://www.chromevox.com/">Chromevox screenreader plugin for Chrome</a></li>
			<li><a href="http://www.freedomscientific.com/Products/Blindness/Jaws">Jaws screnreader plugin for Windows</a></li>
			<li><a href="https://github.com/squizlabs/HTML_CodeSniffer">"HTML Codesniffer" bookmarklet for identifying accessibility issues</a></li>
			<li><a href="http://webaim.org/">Accessibilty Certification and Training</a></li>
			<li><a href="http://wave.webaim.org/extension/">WAVE Chrome Extension</a></li>
			<li><a href="http://www.tenon.io/">Tenon.io - Free Online Accessiblity Testing</a></li>
		</ul>
	</div>
</div>