Skip to content

Commit

Permalink
Update documentation accessibility (#70)
Browse files Browse the repository at this point in the history 
* revise icon documentation

Screen readers would completley pass over the listing if icons as `<i class=“fa fa-*”></i>` 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.
  • Loading branch information
@scottaohara @claviska
scottaohara authored and claviska committed Jan 15, 2018
1 parent 17b1732 commit 3f80ada
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 29 deletions.
51 changes: 29 additions & 22 deletions source/docs/icons.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<head>` section of your page:
Load Font Awesome icons locally or via CDN. To use the CDN version, add the following `<link>` to the `<head>` of your website or application:

```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
```

Then add icons as you normally would with `<i class="fa fa-*"></i>`:
Then add icons as you normally would with `<i class="fa fa-*" aria-hidden="true"></i>`:

<div class="input-field text-secondary" style="font-size: 2rem;">
<i class="fa fa-magic"></i>
<i class="fa fa-briefcase"></i>
<i class="fa fa-cog"></i>
<i class="fa fa-database"></i>
<i class="fa fa-bug"></i>
<i class="fa fa-beer"></i>
<i class="fa fa-arrows"></i>
<i class="fa fa-rocket"></i>
<i class="fa fa-tag"></i>
<i class="fa fa-plane"></i>
<i class="fa fa-soccer-ball-o"></i>
<i class="fa fa-warning"></i>
<i class="fa fa-magic" role="img" aria-label="Magic icon"></i>
<i class="fa fa-briefcase" role="img" aria-label="Briefcase icon"></i>
<i class="fa fa-cog" role="img" aria-label="Cog icon"></i>
<i class="fa fa-database" role="img" aria-label="Database icon"></i>
<i class="fa fa-bug" role="img" aria-label="Bug icon"></i>
<i class="fa fa-beer" role="img" aria-label="Beer icon"></i>
<i class="fa fa-arrows" role="img" aria-label="Arrows icon"></i>
<i class="fa fa-rocket" role="img" aria-label="Rocket icon"></i>
<i class="fa fa-tag" role="img" aria-label="Tag icon"></i>
<i class="fa fa-plane" role="img" aria-label="Plane icon"></i>
<i class="fa fa-soccer-ball-o" role="img" aria-label="Soccer ball icon"></i>
<i class="fa fa-warning" role="img" aria-label="Warning icon"></i>
</div>

<div class="input-field">
<button type="button"><i class="fa fa-star"></i> Star</button>
<button type="button" class="button-success"><i class="fa fa-check"></i> Check</button>
<button type="button" class="button-warning"><i class="fa fa-pencil"></i> Edit</button>
<button type="button" class="button-info"><i class="fa fa-comment"></i> Comment</button>
<button type="button">
<i class="fa fa-star" aria-hidden="true"></i> Star
</button>
<button type="button" class="button-success">
<i class="fa fa-check" aria-hidden="true"></i> Check
</button>
<button type="button" class="button-warning">
<i class="fa fa-pencil" aria-hidden="true"></i> Edit
</button>
<button type="button" class="button-info">
<i class="fa fa-comment" aria-hidden="true"></i> Comment
</button>
</div>

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/).

15 changes: 8 additions & 7 deletions source/layouts/default.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<header id="head" class="text-center">
<h1>
<a href="../index.html">
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
<img src="../source/img/wordmark.svg" alt="Shoelace">
</a>
</h1>

Expand All @@ -29,7 +29,7 @@ <h1>
</p>
</header>

<main class="container">
<div class="container">
<div class="row">
<nav class="col-md-3">
<ul id="nav">
Expand All @@ -56,15 +56,15 @@ <h1>
</nav>

<div class="col-md-9">
<div id="content">
<main id="content" aria-label="content">
{{{contents}}}
</div>
</main>
</div>
</main>
</div>

<footer id="foot" role="contentinfo">
<a href="../index.html">
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
<img src="../source/img/wordmark.svg" alt="Shoelace - home">
</a>

<p class="text-small text-secondary">
Expand All @@ -79,7 +79,7 @@ <h1>
</p>

<p>
<a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
<a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;" aria-label="Follow shoelace on twitter">Follow</a>
<a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
</p>

Expand All @@ -98,6 +98,7 @@ <h1>
$('#nav a').each(function() {
if(this.pathname === location.pathname) {
$(this).addClass('current');
$(this).attr('aria-current', 'page');
}
});

Expand Down

0 comments on commit 3f80ada

Please sign in to comment.