From 3f80ada6a27ba7460610aa7ba381921d2acc7f5e Mon Sep 17 00:00:00 2001 From: Scott O'Hara Date: Mon, 15 Jan 2018 08:40:17 -0500 Subject: [PATCH] Update documentation accessibility (#70) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * revise icon documentation Screen readers would completley pass over the listing if icons as `` largely means nothing to a screen reader. Updated the example icons to have a `role=“img”` and `aria-label` to announce what type of icon was being represented. In the `button` examples, added an `aria-hidden=“true”` attribute, so that the icons were not interpreted by screen readers. Revised the wording of some parts of the documentation to make wording more concise. * template accessibility updates * remove “logo” from alt value. While the image is of the shoelace logo, it also serves as the heading to the website. So hearing “Shoelace logo” as the `h1` of the document is very strange. * move the `main` element to a different location. Previously the `main` wrapped the navigation and the primary content of the document. This update moves the `main` to the primary content wrapper, to allow screen reader users a means to easily skip past the navigation. * template updates round 2 * update shoelace link in footer to say “shoelace - home” rather than “shoelace logo”. being that this is a link, this provides better context that the link will take a user to the home page, rather than to a “shoelace logo”. * add `aria-label` to twitter link to better align with github link announcements * add `aria-current=“page”` via jQuery script. Now the current navigation item will be announced as “current page” to those that can’t see the `current` css class styling. --- source/docs/icons.md | 51 +++++++++++++++++++++---------------- source/layouts/default.html | 15 ++++++----- 2 files changed, 37 insertions(+), 29 deletions(-) diff --git a/source/docs/icons.md b/source/docs/icons.md index 75e6cd664..2672c15b2 100644 --- a/source/docs/icons.md +++ b/source/docs/icons.md @@ -8,40 +8,47 @@ stylesheets: ## Icons -Shoelace doesn’t bundle its own icons, but you can easily include your favorite library such as [Font Awesome](http://fontawesome.io/). They work superbly together. - -This keeps Shoelace light and makes it more customizable. +To stay light and customizable, Shoelace doesn’t bundle its own icons. However, you can easily include your favorite library such as [Font Awesome](http://fontawesome.io/). They work superbly together. ### Font Awesome -You can load Font Awesome locally or via CDN. To use the CDN version, add this to the `` section of your page: +Load Font Awesome icons locally or via CDN. To use the CDN version, add the following `` to the `` of your website or application: ```html ``` -Then add icons as you normally would with ``: +Then add icons as you normally would with ``:
- - - - - - - - - - - - + + + + + + + + + + + +
- - - - + + + +
-For your convenience, [here’s a full list](http://fontawesome.io/icons/) of icons available in Font Awesome. +For your convenience, [here’s a full list of Font Awesome icons](http://fontawesome.io/icons/). + diff --git a/source/layouts/default.html b/source/layouts/default.html index dcc5e8001..7a6d1f96c 100644 --- a/source/layouts/default.html +++ b/source/layouts/default.html @@ -20,7 +20,7 @@

- Shoelace logo + Shoelace

@@ -29,7 +29,7 @@

-
+
-
+
{{{contents}}} -
+
- +