adds accessibility for subnav

diff --git a/doc/includes/breadcrumbs/examples_breadcrumbs_accessible.html b/doc/includes/breadcrumbs/examples_breadcrumbs_accessible.html
new file mode 100644 (file)
index 0000000..acdee4a
--- /dev/null
+++ b/doc/includes/breadcrumbs/examples_breadcrumbs_accessible.html
@@ -0,0 +1,6 @@
+<nav class="breadcrumbs" role="navigation" aria-label="breadcrumbs">
+       <li role="menuitem"><a href="#">Home</a></li>
+       <li role="menuitem"><a href="#">Features</a></li>
+       <li role="menuitem" class="unavailable" role="button" aria-disabled="true"><a href="#">Gene Splicing</a></li>
+       <li role="menuitem" class="current"><a href="#">Cloning</a></li>
+</nav>
\ No newline at end of file

diff --git a/doc/includes/breadcrumbs/examples_breadcrumbs_accessible_rendered.html b/doc/includes/breadcrumbs/examples_breadcrumbs_accessible_rendered.html
new file mode 100644 (file)
index 0000000..5c3a276
--- /dev/null
+++ b/doc/includes/breadcrumbs/examples_breadcrumbs_accessible_rendered.html
@@ -0,0 +1,6 @@
+<nav class="breadcrumbs" role="navigation" aria-label="breadcrumbs">
+  <li role="menuitem"><a href="#">Home</a></li>
+  <li role="menuitem"><a href="#">Features</a></li>
+  <li role="menuitem" class="unavailable" role="button" aria-disabled="true"><a href="#">Gene Splicing</a></li>
+  <li role="menuitem" class="current"><a href="#">Cloning</a></li>
+</nav>
\ No newline at end of file

diff --git a/doc/includes/pagination/examples_pagination_accessible.html b/doc/includes/pagination/examples_pagination_accessible.html
new file mode 100644 (file)
index 0000000..c861823
--- /dev/null
+++ b/doc/includes/pagination/examples_pagination_accessible.html
@@ -0,0 +1,11 @@
+<ul class="pagination" role="menubar" aria-label="Pagination">
+  <li class="arrow unavailable"><a href="">&laquo; Previous</a></li>
+  <li class="current"><a href="">1</a></li>
+  <li><a href="">2</a></li>
+  <li><a href="">3</a></li>
+  <li><a href="">4</a></li>
+  <li class="unavailable" aria-disabled:"true"><a href="">&hellip;</a></li>
+  <li><a href="">12</a></li>
+  <li><a href="">13</a></li>
+  <li class="arrow"><a href="">Next &raquo;</a></li>
+</ul>
\ No newline at end of file

diff --git a/doc/includes/pagination/examples_pagination_accessible_rendered.html b/doc/includes/pagination/examples_pagination_accessible_rendered.html
new file mode 100644 (file)
index 0000000..c8e1436
--- /dev/null
+++ b/doc/includes/pagination/examples_pagination_accessible_rendered.html
@@ -0,0 +1,11 @@
+<ul class="pagination" role="menubar" aria-label="Pagination">
+  <li class="arrow unavailable"><a href="">&laquo; Previous</a></li>
+  <li class="current"><a href="">1</a></li>
+  <li><a href="">2</a></li>
+  <li><a href="">3</a></li>
+  <li><a href="">4</a></li>
+  <li class="unavailable"><a href="">&hellip;</a></li>
+  <li><a href="">12</a></li>
+  <li><a href="">13</a></li>
+  <li class="arrow"><a href="">Next &raquo;</a></li>
+</ul>
\ No newline at end of file

diff --git a/doc/includes/sidenav/examples_sidenav_accessible.html b/doc/includes/sidenav/examples_sidenav_accessible.html
new file mode 100644 (file)
index 0000000..c957d6b
--- /dev/null
+++ b/doc/includes/sidenav/examples_sidenav_accessible.html
@@ -0,0 +1,6 @@
+ <ul class="side-nav" role="navigation" title="Link List">
+   <li role="menuitem"><a href="#">Link 1</a></li>
+   <li role="menuitem"><a href="#">Link 2</a></li>
+   <li role="menuitem"><a href="#">Link 3</a></li>
+   <li role="menuitem"><a href="#">Link 4</a></li>
+ </ul>
\ No newline at end of file

diff --git a/doc/includes/sidenav/examples_sidenav_accessible_rendered.html b/doc/includes/sidenav/examples_sidenav_accessible_rendered.html
new file mode 100644 (file)
index 0000000..ad7d7fb
--- /dev/null
+++ b/doc/includes/sidenav/examples_sidenav_accessible_rendered.html
@@ -0,0 +1,6 @@
+<ul class="side-nav" role="navigation" title="Link List">
+    <li role="menuitem"><a href="#">Link 1</a></li>
+    <li role="menuitem"><a href="#">Link 2</a></li>
+    <li role="menuitem"><a href="#">Link 3</a></li>
+    <li role="menuitem"><a href="#">Link 4</a></li>
+</ul>
\ No newline at end of file

diff --git a/doc/includes/subnav/examples_subnav_accessible.html b/doc/includes/subnav/examples_subnav_accessible.html
new file mode 100644 (file)
index 0000000..c48181e
--- /dev/null
+++ b/doc/includes/subnav/examples_subnav_accessible.html
@@ -0,0 +1,7 @@
+ <dl class="sub-nav" role="menu" title="Filter Menu List">
+    <dt>Filter:</dt>
+    <dd class="active" role="menuitem"><a href="#">All</a></dd>
+    <dd role="menuitem"><a href="#">Active</a></dd>
+    <dd role="menuitem"><a href="#">Pending</a></dd>
+    <dd role="menuitem"><a href="#">Suspended</a></dd>
+  </dl>
\ No newline at end of file

diff --git a/doc/includes/subnav/examples_subnav_accessible_rendered.html b/doc/includes/subnav/examples_subnav_accessible_rendered.html
new file mode 100644 (file)
index 0000000..1e259d1
--- /dev/null
+++ b/doc/includes/subnav/examples_subnav_accessible_rendered.html
@@ -0,0 +1,7 @@
+ <dl class="sub-nav" role="menu" title="Filter Menu List">
+    <dt>Filter:</dt>
+    <dd class="active" role="menuitem"><a href="#">All</a></dd>
+    <dd role="menuitem"><a href="#">Active</a></dd>
+    <dd role="menuitem"><a href="#">Pending</a></dd>
+    <dd role="menuitem"><a href="#">Suspended</a></dd>
+ </dl>
\ No newline at end of file

diff --git a/doc/pages/components/breadcrumbs.html b/doc/pages/components/breadcrumbs.html
index 7fce067e784f33e7c1101cbbf462945304247985..7910a6516c25cfbf0909c4cec832258c06abe6fb 100755 (executable)
--- a/doc/pages/components/breadcrumbs.html
+++ b/doc/pages/components/breadcrumbs.html
@@ -40,6 +40,33 @@ You can also add a `.breadcrumbs` class to a `nav` element containing anchor lin
 
 ***
 
+<h3>Accessibility</h3>
+
+Use this snippet to make breadcrumbs more accessible. Adding the role attribute gives context to a screen reader. The ```aria-label``` attribute will allow a screen reader to call out what the component is to the user. We added some Scss so the screen reader skips the ```/```. Using the Tab button, a user can navigate until they've reached the link below. (Use Shift+Tab to navigate back one step.)
+
+If you are using an ```unavailable``` link, give it an aria-disabled attribute as in this example:
+
+<div class="row">
+  <div class="large-6 columns">
+    <h4>HTML</h4>
+{{#markdown}}
+```html
+{{> examples_breadcrumbs_accessible}}
+```
+{{/markdown}}
+  </div>
+  <div class="large-6 columns">
+    <h4>Rendered HTML</h4>
+
+{{> examples_breadcrumbs_accessible_rendered}}
+
+  </div>
+</div>
+
+**Note:** It is bad practice to leave links that do not go anywhere on your live site. Use something like foo.html to fill them as you build.
+
+***
+
 ## Customize with Sass
 
 Breadcrumbs can be easily customized using our Sass variables.

diff --git a/doc/pages/components/pagination.html b/doc/pages/components/pagination.html
index 88f68352902067898dd31ae19c47848683644a02..64fde1123bf325c9fbd149e443a3dbeca46ae750 100755 (executable)
--- a/doc/pages/components/pagination.html
+++ b/doc/pages/components/pagination.html
@@ -68,6 +68,33 @@ Wrap your ul.pagination with an element that has the .pagination-centered class
 
 ***
 
+<h3>Accessibility</h3>
+
+Use this snippet to make Pagination more accessible. Adding the role attribute gives context to a screen reader. The ```aria-label``` attribute will allow a screen reader to call out what the component is to the user. Using the Tab button, a user can navigate until they've reached the link below. (Use Shift+Tab to navigate back one step.)
+
+If you are using an ```unavailable``` link, give it an aria-disabled attribute as in this example:
+
+<div class="row">
+  <div class="large-6 columns">
+    <h4>HTML</h4>
+{{#markdown}}
+```html
+{{> examples_pagination_accessible}}
+```
+{{/markdown}}
+  </div>
+  <div class="large-6 columns">
+    <h4>Rendered HTML</h4>
+{{> examples_pagination_accessible_rendered}}
+  </div>
+</div>
+
+<p class="panel">This component still needs keyboard accessibility through arrow keys. Stay tuned for updates in future releases.</p>
+
+**Note:** It is bad practice to leave links that do not go anywhere on your live site. Use something like foo.html to fill them as you build.
+
+***
+
 ## Customize with Sass
 
 Pagination styles can be easily customized with the Sass variables provided in the `_settings.scss` file.

diff --git a/doc/pages/components/sidenav.html b/doc/pages/components/sidenav.html
index 6798ba4386f5496c0f3e920e98f252de4343cd6b..fa2682d0f131eee1809c38c9d7628300d4d78ef5 100755 (executable)
--- a/doc/pages/components/sidenav.html
+++ b/doc/pages/components/sidenav.html
@@ -51,6 +51,31 @@ Additional classes can be added to your side nav to change its appearance.
 
 ***
 
+<h3>Accessibility</h3>
+
+Use this snippet to make side-nav more accessible. Adding the role attribute gives context to a screen reader. Using the Tab button, a user can navigate until they've reached the link below. (Use Shift+Tab to navigate back one step.)
+
+<div class="row">
+  <div class="large-6 columns">
+    <h4>HTML</h4>
+{{#markdown}}
+```scss
+{{> examples_sidenav_accessible}}
+```
+{{/markdown}}
+  </div>
+  <div class="large-6 columns">
+    <h4>Rendered HTML</h4>
+
+{{> examples_sidenav_accessible_rendered}}
+
+  </div>
+</div>
+
+**Note:** It is bad practice to leave links that do not go anywhere on your live site. Use something like foo.html to fill them as you build.
+
+***
+
 ## Customize with Sass
 
 The side nav can be easily customized using our Sass variables

diff --git a/doc/pages/components/subnav.html b/doc/pages/components/subnav.html
index ab88886a93ed6de744bf5a7f48c0f6bdc0fcf0fc..c875dbef87f22a2047d58d65fe127d5fa2ffa288 100755 (executable)
--- a/doc/pages/components/subnav.html
+++ b/doc/pages/components/subnav.html
@@ -103,6 +103,31 @@ You can further customize your alert boxes using the provided options in the `su
 
 ***
 
+<h3>Accessibility</h3>
+
+Use this snippet to make sub-nav more accessible. Adding the role attribute gives context to a screen reader. Using the Tab button, a user can navigate until they've reached the link below. (Use Shift+Tab to navigate back one step.)
+
+<div class="row">
+  <div class="large-6 columns">
+    <h4>SCSS</h4>
+{{#markdown}}
+```scss
+{{> examples_subnav_accessible}}
+```
+{{/markdown}}
+  </div>
+  <div class="large-6 columns">
+    <h4>HTML</h4>
+
+{{> examples_subnav_accessible_rendered}}
+
+  </div>
+</div>
+
+**Note:** It is bad practice to leave links that do not go anywhere on your live site. Use something like foo.html to fill them as you build.
+
+***
+
 ### Sass Errors?
 
 If the default "foundation" import was commented out, then make sure you import this file:

diff --git a/scss/foundation/components/_breadcrumbs.scss b/scss/foundation/components/_breadcrumbs.scss
index 531ce91610756d84e7504d1d77cb400f962e6719..612a146c40e08b763664289914b6842bea69388a 100755 (executable)
--- a/scss/foundation/components/_breadcrumbs.scss
+++ b/scss/foundation/components/_breadcrumbs.scss
@@ -125,3 +125,8 @@ $crumb-slash: "/" !default;
     }
   }
 }
+
+/* Accessibility - hides the forward slash */
+[aria-label="breadcrumbs"] [aria-hidden="true"]:after {
+  content: "/";
+  }