From fd7ae9cae0eb002051a109f1e89064b464a7b53c Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Thu, 12 May 2016 08:13:12 -0400 Subject: [PATCH 1/3] removing unneccessary bootstrap a11y utility reference --- .../accessibility/using-with-accessibility.html | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/_includes/accessibility/using-with-accessibility.html b/src/_includes/accessibility/using-with-accessibility.html index 86e6d609c..105722c2f 100644 --- a/src/_includes/accessibility/using-with-accessibility.html +++ b/src/_includes/accessibility/using-with-accessibility.html @@ -108,15 +108,6 @@ -
- -
-
- -
- -
+ +
+ +
+ diff --git a/src/_includes/accessibility/background.html b/src/_includes/accessibility/background.html index 5ca864826..da97e4762 100644 --- a/src/_includes/accessibility/background.html +++ b/src/_includes/accessibility/background.html @@ -1,7 +1,7 @@ -
-

Icon Fonts & Accessibility

+
+

About 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. + 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 reading our default markup for rendering icons, assisistive technology may have the following problems.

    diff --git a/src/_includes/accessibility/cta-cdn-ally.html b/src/_includes/accessibility/cta-cdn-ally.html new file mode 100644 index 000000000..61d4fe3a6 --- /dev/null +++ b/src/_includes/accessibility/cta-cdn-ally.html @@ -0,0 +1,11 @@ +
    +
    + + + +
    +

    Automate your icons' accessibility

    +

    Font Awesome CDN helps you automate accessibility support more easily so your icons work for the most people possible. You only need turn on a setting and any icons you use will have all of the best practices we recommend applied automatically.

    + + Get Automated Accessibility +
    diff --git a/src/_includes/accessibility/other.html b/src/_includes/accessibility/other.html index 8a1078383..d3054ba8c 100644 --- a/src/_includes/accessibility/other.html +++ b/src/_includes/accessibility/other.html @@ -1,7 +1,7 @@ -
    +

    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 vision who need a high color contrast ratio to see UI. There are some great tools and resources to learn from and work on these issues out there. Here are a few reads we recommend. + While the scenarios and techniques here 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 vision who need a high color contrast ratio to see UI. There are some great tools and resources to learn from and work on these issues out there. Here are a few reads we recommend.

    + diff --git a/src/accessibility.html b/src/accessibility.html index 3968e99df..ae314b02c 100644 --- a/src/accessibility.html +++ b/src/accessibility.html @@ -2,27 +2,38 @@ layout: base title: Font Awesome & Accessibility navbar_active: accessibility +view_class: v-accessibility relative_path: ../ --- {% capture jumbotron_h1 %}  Accessibility{% endcapture %} {% capture jumbotron_p %}Make your icons awesome for all of your users{% endcapture %} {% include jumbotron.html %} -{% include stripe-social.html %}
    - {% capture stripe_ad_content %} -

    - Icons are symbols that can convey a ton of information and really help people comprehend directions, signs, and interfaces. Its important that we create and use them so that they can reach the largest amount of people possible. -

    +
    +
    +
    +

    + Icons are symbols that can convey a ton of information and really help people comprehend directions, signs, and interfaces. Its important that we create and use them so that they can reach the largest amount of people possible. +

    +
    +
    + {% include accessibility/background.html %} +
    +
    +
    -

    - When creating web sites and apps, that means making sure our icons play well with assistive tech when users are navigating apps and sites. -

    - {% endcapture %} - {% include stripe-ad.html %} +

    + Using Font Awesome with Acessibility in mind +

    - {% include accessibility/background.html %} - {% include accessibility/using-with-accessibility.html %} + {% include accessibility/accessibility-facdn.html %} + +
    + or +
    + + {% include accessibility/accessibility-manual.html %} {% include accessibility/other.html %}
    diff --git a/src/assets/less/site/views.less b/src/assets/less/site/views.less index ae5d8f31d..f0cd3c993 100644 --- a/src/assets/less/site/views.less +++ b/src/assets/less/site/views.less @@ -1,6 +1,14 @@ // view-specific -.v-get-started, .v-store { + +// reset background +.v-get-started, +.v-store, +.v-accessibility { background: @alert-well-bg; // resetting for depth +} + +// get started +.v-get-started { .get-started-cdn { background: @section-emphasized-bg; @@ -24,3 +32,19 @@ font-size: (@font-size-large*1.5); } } + +// accessibility +.v-accessibility { + + .accessibility-cdn { + background: @section-emphasized-bg; + border-radius: @border-radius-base; + padding: @buffer-lg; + } + + .hr .hr-text { + background: @alert-well-bg; + font-family: @font-family-serif; + font-size: (@font-size-large*1.5); + } +} From c763ff19688ee08a7fac86cdce4ba75e5af435d7 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Fri, 13 May 2016 09:44:41 -0400 Subject: [PATCH 3/3] changing examples to be CDN auto-a11y based with note --- src/_includes/examples/animated.html | 10 ++++---- src/_includes/examples/basic.html | 4 ++-- src/_includes/examples/bootstrap.html | 34 +++++++++++++-------------- src/_includes/examples/list.html | 16 ++++++------- src/examples.html | 11 ++++++++- 5 files changed, 42 insertions(+), 33 deletions(-) diff --git a/src/_includes/examples/animated.html b/src/_includes/examples/animated.html index 960ebd182..927e98bbd 100644 --- a/src/_includes/examples/animated.html +++ b/src/_includes/examples/animated.html @@ -31,19 +31,19 @@ with 8 steps. Works well with fa-spinner, fa-refresh, and fa-cog.

    {% highlight html %} - + Loading... - + Loading... - + Loading... - + Loading... - + Loading... {% endhighlight %}

    diff --git a/src/_includes/examples/basic.html b/src/_includes/examples/basic.html index 2b691a0b5..c00fb4787 100644 --- a/src/_includes/examples/basic.html +++ b/src/_includes/examples/basic.html @@ -10,7 +10,7 @@

    - + Example: basic icon fa-camera-retro

    @@ -22,7 +22,7 @@ brevity, but using a <span> is more semantically correct).

    {% highlight html %} - fa-camera-retro + fa-camera-retro {% endhighlight %}
      diff --git a/src/_includes/examples/bootstrap.html b/src/_includes/examples/bootstrap.html index 0d6c03b8f..bcc6c0171 100644 --- a/src/_includes/examples/bootstrap.html +++ b/src/_includes/examples/bootstrap.html @@ -4,13 +4,13 @@

      - Delete + Delete - Settings + Settings

      - Font Awesome
      Version {{ site.fontawesome.version }}       + Font Awesome
      Version {{ site.fontawesome.version }}

      @@ -30,26 +30,26 @@
      - +
      - +
      - User + User
      @@ -61,12 +61,12 @@

      {% highlight html %} - Delete + Delete - Settings + Settings - Font Awesome
      Version {{ site.fontawesome.version }}       + Font Awesome
      Version {{ site.fontawesome.version }}
      @@ -98,11 +98,11 @@
      {% endhighlight %} diff --git a/src/_includes/examples/list.html b/src/_includes/examples/list.html index a708902be..1c7f3008f 100644 --- a/src/_includes/examples/list.html +++ b/src/_includes/examples/list.html @@ -9,20 +9,20 @@
        -
      • List icons
        • -
      • can be used
        • -
      • as bullets
        • -
      • in lists
        • +
      • List icons
        • +
      • can be used
        • +
      • as bullets
        • +
      • in lists

      Use fa-ul and fa-li to easily replace default bullets in unordered lists.

      {% highlight html %}
        -
      • List icons
        • -
      • can be used
        • -
      • as bullets
        • -
      • in lists
        • +
      • List icons
        • +
      • can be used
        • +
      • as bullets
        • +
      • in lists
      {% endhighlight %}
      diff --git a/src/examples.html b/src/examples.html index 3e23ac147..9f14ef11b 100644 --- a/src/examples.html +++ b/src/examples.html @@ -20,15 +20,24 @@ relative_path: ../ {% endcapture %} {% include stripe-ad.html %} +
      +
      + +
      +
      +

      The following examples are kept simple and assume use of Font Awesome CDN, which provides auto-accessibility support. If you are not using the Font Awesome CDN, please see the manual accessibility examples and read more about making your icons more awesome for all users

      +
      +
      + {% include examples/basic.html %} {% include examples/larger.html %} {% include examples/fixed-width.html %} {% include examples/list.html %} {% include examples/bordered-pulled.html %} {% include examples/animated.html %} - {% include examples/accessible.html %} {% include examples/rotated-flipped.html %} {% include examples/stacked.html %} {% include examples/bootstrap.html %} {% include examples/custom.html %} + {% include examples/accessible.html %}