]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
adds accessibility page to docs
authorRafi Benkual <rafi@zurb.com>
Thu, 21 Aug 2014 22:34:33 +0000 (15:34 -0700)
committerRafi Benkual <rafi@zurb.com>
Thu, 21 Aug 2014 22:34:33 +0000 (15:34 -0700)
doc/pages/Accessibility.html [new file with mode: 0644]

diff --git a/doc/pages/Accessibility.html b/doc/pages/Accessibility.html
new file mode 100644 (file)
index 0000000..3d83555
--- /dev/null
@@ -0,0 +1,40 @@
+---
+title: Accessibility
+---
+
+<h2>These guidelines will help you make your sites more accessible for keyboard navigation and screen readers.</h2>
+
+<p class="panel">Care about accessibility or want to contribe? Submit a Pull Request or get into the conversation on <a href="https://github.com/zurb/foundation">GitHub</a>.
+
+<h3 class="subheader">Asside from the accessibility that his been built into the components, following this guide will give you some best practices toward accessibility. This is a living document and will continue to be updated.</h3>
+
+***
+## Nested Headings
+
+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.
+
+##  How to Test a Website’s Keyboard Accessibility
+
+On a desktop or laptop in Firefox, IE, Chrome, or Safari, 
+click into the browser address bar.
+
+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.)
+
+<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>
+
+### Additional resources
+
+<ul class="side-nav" role="navigation" title="Link List">
+   <li role="menuitem"><a href="#">"HTML Codesniffer" bookmarklet for identifying accessibility issues</a></li>
+   <li role="menuitem"><a href="#">MDN accessibility documentation</a></li>
+   <li role="menuitem"><a href="http://achecker.ca/checker/index.php">AChecker Web Accessibility Checker</a></li>
+   <li role="menuitem"><a href="http://www.w3.org/WAI/intro/accessibility.php">w3.org Introduction to Accessibility</a></li>
+ </ul>
+
+
+