mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
Update documentation accessibility (#70)
* 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.
This commit is contained in:
Scott O'Hara
committed by
Cory LaViska
Cory LaViska
parent
17b173219b
commit
3f80ada6a2
@@ -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/).
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<main class="container">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<nav class="col-md-3">
|
||||
<ul id="nav">
|
||||
@@ -56,15 +56,15 @@
|
||||
</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">
|
||||
@@ -79,7 +79,7 @@
|
||||
</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>
|
||||
|
||||
@@ -98,6 +98,7 @@
|
||||
$('#nav a').each(function() {
|
||||
if(this.pathname === location.pathname) {
|
||||
$(this).addClass('current');
|
||||
$(this).attr('aria-current', 'page');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user