From 94c59bbc1bd51797f89335b7453d06f0e8975a12 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Thu, 12 May 2016 09:59:54 -0400 Subject: [PATCH] revamping accessibility page content and layout with CDN info --- .../accessibility/accessibility-facdn.html | 21 +++++++++ ...ibility.html => accessibility-manual.html} | 44 ++++++++++--------- src/_includes/accessibility/background.html | 6 +-- src/_includes/accessibility/cta-cdn-ally.html | 11 +++++ src/_includes/accessibility/other.html | 6 +-- src/accessibility.html | 35 ++++++++++----- src/assets/less/site/views.less | 26 ++++++++++- 7 files changed, 109 insertions(+), 40 deletions(-) create mode 100644 src/_includes/accessibility/accessibility-facdn.html rename src/_includes/accessibility/{using-with-accessibility.html => accessibility-manual.html} (73%) create mode 100644 src/_includes/accessibility/cta-cdn-ally.html diff --git a/src/_includes/accessibility/accessibility-facdn.html b/src/_includes/accessibility/accessibility-facdn.html new file mode 100644 index 000000000..624e0fcec --- /dev/null +++ b/src/_includes/accessibility/accessibility-facdn.html @@ -0,0 +1,21 @@ +
+
+
+

+ + Use Font Awesome CDN's auto 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, use our simple syntax, and any icons you use will have all of the best practices and manual techniques below applied automatically.

+
+ +
+ Automate Your Icons' Accessibility + +

+ Read more about our auto accessibility +

+
+
+ +
diff --git a/src/_includes/accessibility/using-with-accessibility.html b/src/_includes/accessibility/accessibility-manual.html similarity index 73% rename from src/_includes/accessibility/using-with-accessibility.html rename to src/_includes/accessibility/accessibility-manual.html index 105722c2f..2389783ef 100644 --- a/src/_includes/accessibility/using-with-accessibility.html +++ b/src/_includes/accessibility/accessibility-manual.html @@ -1,13 +1,14 @@ -
-

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

+

+ + Manually make your icons accessible +

+ +

When using icons in your UI, there are manual techniques and 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 %} @@ -33,12 +34,12 @@ an icon being used in front of link text
-

Icons with semantic or interactive purpose

+

Icons 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 an icon is not an interactive element

The simplest way to provide a text alternative is to use the aria-hidden="true" attribute on the icon and to include the text with an additional element, such as a <span>, with appropriate CSS to visually hide the element while keeping it accessible to assistive technologies. In addition, you can add a title attribute on the icon to provide a tooltip for sighted mouse users.

@@ -76,7 +77,7 @@ an icon being used to denote time remaining
-

If an icon represents an interactive element

+

If an icon represents an interactive element

In the case of focusable interactive elements, there are various options to include an alternative text or label to the element, without the need for any visually hidden <span> or similar. For instance, simply adding the title attribute to the interactive element itself will be sufficient to provide an accessible alternative name for the element, as well as providing the mouse tooltip.

@@ -106,13 +107,14 @@ an icon being used as a delete button's symbol - -
- -
+ +
+ +
+ 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); + } +}