From 84ac1362f8b87582245f70c4982e7a6e980e7717 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Fri, 1 Apr 2016 09:45:15 -0400 Subject: [PATCH] add accessibility information and best practices * adding accessibility informational page * adding in accessibility-minded examples * adding accessibility practices to icon markup example * updating doc site icons with accessibility best practices * updating homepage with accessibility information --- src/_includes/accessibility/background.html | 15 ++ src/_includes/accessibility/other.html | 16 +++ .../using-with-accessibility.html | 130 ++++++++++++++++++ src/_includes/brand-adblock-warning.html | 2 +- .../community/requesting-new-icons.html | 2 +- src/_includes/examples/accessible.html | 109 +++++++++++++++ src/_includes/examples/animated.html | 36 +++-- src/_includes/examples/basic.html | 9 +- src/_includes/examples/bootstrap.html | 72 ++++++---- src/_includes/examples/bordered-pulled.html | 6 +- src/_includes/examples/fixed-width.html | 16 +-- src/_includes/examples/larger.html | 10 +- src/_includes/examples/list.html | 16 +-- src/_includes/examples/rotated-flipped.html | 12 +- src/_includes/examples/stacked.html | 8 +- src/_includes/footer.html | 2 +- src/_includes/icons/brand.html | 2 +- src/_includes/icons/chart.html | 2 +- src/_includes/icons/currency.html | 2 +- src/_includes/icons/directional.html | 2 +- src/_includes/icons/file-type.html | 2 +- src/_includes/icons/form-control.html | 2 +- src/_includes/icons/gender.html | 2 +- src/_includes/icons/hand.html | 2 +- src/_includes/icons/medical.html | 2 +- src/_includes/icons/new.html | 2 +- src/_includes/icons/payment.html | 2 +- src/_includes/icons/spinner.html | 5 +- src/_includes/icons/text-editor.html | 2 +- src/_includes/icons/transportation.html | 2 +- src/_includes/icons/video-player.html | 2 +- src/_includes/icons/web-application.html | 2 +- src/_includes/jumbotron-carousel.html | 36 ++--- src/_includes/modals/download.html | 4 +- src/_includes/navbar.html | 58 ++++---- src/_includes/new-features.html | 12 +- src/_includes/new-naming.html | 50 +++---- src/_includes/stripe-social.html | 2 +- src/_includes/tell-me-thanks.html | 2 +- .../tests/rotated-flipped-inside-anchor.html | 12 +- .../tests/rotated-flipped-inside-btn.html | 12 +- src/_includes/tests/rotated-flipped.html | 12 +- .../tests/stacked-inside-anchor.html | 20 +-- src/_includes/tests/stacked-with-text.html | 2 +- src/_includes/tests/stacked.html | 20 +-- src/_includes/thanks-to.html | 2 +- src/_includes/why.html | 21 +-- src/_layouts/icon.html | 39 ++++-- src/accessibility.html | 28 ++++ src/cheatsheet.html | 4 +- src/community.html | 2 +- src/examples.html | 3 +- src/get-started.html | 6 +- src/icons.html | 12 +- src/license.html | 4 +- src/whats-new.html | 2 +- 56 files changed, 615 insertions(+), 246 deletions(-) create mode 100644 src/_includes/accessibility/background.html create mode 100644 src/_includes/accessibility/other.html create mode 100644 src/_includes/accessibility/using-with-accessibility.html create mode 100644 src/_includes/examples/accessible.html create mode 100644 src/accessibility.html diff --git a/src/_includes/accessibility/background.html b/src/_includes/accessibility/background.html new file mode 100644 index 000000000..adaf08c96 --- /dev/null +++ b/src/_includes/accessibility/background.html @@ -0,0 +1,15 @@ +
+

Icon Fonts & Accessibility

+

+ Modern versions of assistive technology, like screen readers, will read CSS generated content (how Font Awesome icons are rendered), as well as specific Unicode characters. When trying our default markup for rendering icons, assisistive technology may have the following problems. +

+ + +
diff --git a/src/_includes/accessibility/other.html b/src/_includes/accessibility/other.html new file mode 100644 index 000000000..e6261d8f5 --- /dev/null +++ b/src/_includes/accessibility/other.html @@ -0,0 +1,16 @@ +
+

Other cases and information

+

+ While the scenarios and techniques above help avoid some serious issues and confusion, they are not exhaustive. There are many complex contexts and use cases when it comes to accessibility, such as users with low quality vision using high contrast mode to better see UI. There are some great tools and resources to learning and work on these out there. Here are a few reads we recommend. +

+ + + +

+ We'll continue to work on these under the larger topic of accessibility, but in the meantime, let us know if any bugs or issues. +

+
diff --git a/src/_includes/accessibility/using-with-accessibility.html b/src/_includes/accessibility/using-with-accessibility.html new file mode 100644 index 000000000..7b2661eed --- /dev/null +++ b/src/_includes/accessibility/using-with-accessibility.html @@ -0,0 +1,130 @@ +
+

Using Font Awesome with Acessibility in mind

+

+ When using icons in your UI, there are ways to help assistive technology either ignore or better understand Font Awesome. +

+ +

Icons used for pure decoration or visual styling

+

+ If you're using an icon to add some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Additionally, if you're using an icon to visually re-emphasize or add styling to content already present in your HTML, it does not need to be repeated to an assistive technology-using user. You can make sure this is not read by adding the aria-hidden="true" to your Font Awesome markup. +

+ +
+{% highlight html %} + +{% endhighlight %} +an icon being used as pure decoration +
+ +
+{% highlight html %} +

+ + Pied Piper, A Middle-Out Compression Solution Making Data Storage Problems Smaller +

+{% endhighlight %} +an icon being used as a logo +
+ +
+{% highlight html %} + View this project's code on Github +{% endhighlight %} +an icon being used in front of link text +
+ +

Icons that with semantic or interactive purpose

+

+ If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies. This goes for content you're abbreviating via icons as well as interactive controls (buttons, form elements, toggles, etc.). There are a few techniques to accomplish this: +

+ +

If an icon is not an interactive element

+

+ If not representing an interactive element, like a button or link, use both a title attribute and an on the icon to provide a text alternative. This has the advantages of working with all modern screen readers, working well with the most ubiquitous speech recognition program, and helping users with cognitive disabilities by providing a mouse tooltip. +

+ +
+{% highlight html %} +
+
+ + Time to destination by car: +
+
4 minutes
+ +
+ + Time to destination by bike: +
+
12 minutes
+
+{% endhighlight %} + an icon being used to communicate travel methods +
+ +
+{% highlight html %} + +60 minutes remains in your exam + + +30 minutes remains in your exam + + +0 minutes remains in your exam +{% endhighlight %} + an icon being used to denote time remaining +
+ +

If an icon represents an interactive element

+

+ In addition to the recommendations above, use a title attribute which makes the accessible text discoverable by mouse and those with cognitive disabilities. +

+ +
+{% highlight html %} + + + View 3 items in your shopping cart + +{% endhighlight %} + an icon being used to communicate shopping cart state +
+ +
+{% highlight html %} + + + Skip to main navigation + +{% endhighlight %} + an icon being used as a link to a navigation menu + +{% highlight html %} + + + Delete + +{% endhighlight %} + an icon being used as a delete button's symbol + +
+
+ +
+ +
+ +
+ +
diff --git a/src/_includes/brand-adblock-warning.html b/src/_includes/brand-adblock-warning.html index eb6ee670f..9f4ddd8b6 100644 --- a/src/_includes/brand-adblock-warning.html +++ b/src/_includes/brand-adblock-warning.html @@ -1,4 +1,4 @@ -

Warning!

+

Warning!

Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social Media Buttons" setting. We will not use hacks to force them to display. Please report an issue with Adblock Plus if you believe this to be diff --git a/src/_includes/community/requesting-new-icons.html b/src/_includes/community/requesting-new-icons.html index e342f2868..e73f41c35 100644 --- a/src/_includes/community/requesting-new-icons.html +++ b/src/_includes/community/requesting-new-icons.html @@ -23,7 +23,7 @@
  • - Request concrete objects: it's harder to make an icon to represent happiness, it's easier to make a smiley face. + Request concrete objects: it's harder to make an icon to represent happiness, it's easier to make a smiley face.
    • diff --git a/src/_includes/examples/accessible.html b/src/_includes/examples/accessible.html new file mode 100644 index 000000000..cca638e56 --- /dev/null +++ b/src/_includes/examples/accessible.html @@ -0,0 +1,109 @@ +
    +

    + Accessibility-Minded +

    +
    +
    +

    + + + Settings + + + + + Delete + + + + + Skip to main navigation + +

    + +

    + + Refreshing... + + + Saving. Hang tight! +

    + +

    +

    + + +
    +
    + + +
    +

    + +

    + + + View 3 items in your shopping cart + +

    + +

    + + Battery level: 50% +

    +
    +
    +

    + With our thoughts on icon accessibility in mind, If an icon only adds some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Alternatively, if an icon conveys meaning in your content or interface, ensure that this meaning is also conveyed to assistive technologies through alternative displays or text. +

    + +{% highlight html %} + + + Settings + + + + + Delete + + + + + Skip to main navigation + +{% endhighlight %} + +{% highlight html %} +