From 6e3161989e59d01a1966049787c514fa83da5abd Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Tue, 12 Apr 2016 00:02:12 +0100 Subject: [PATCH] Update using-with-accessibility.html A few minor grammar fixes, better explanation of the use of visually hidden ``s and the use of `title`, better example and explanation for interactive elements --- .../using-with-accessibility.html | 39 +++++++++---------- 1 file changed, 18 insertions(+), 21 deletions(-) diff --git a/src/_includes/accessibility/using-with-accessibility.html b/src/_includes/accessibility/using-with-accessibility.html index 7b2661eed..86e6d609c 100644 --- a/src/_includes/accessibility/using-with-accessibility.html +++ b/src/_includes/accessibility/using-with-accessibility.html @@ -33,27 +33,27 @@ an icon being used in front of link text -

Icons that 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 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. + 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.

{% highlight html %}
- + Time to destination by car:
4 minutes
- + Time to destination by bike:
12 minutes
@@ -64,28 +64,27 @@
{% highlight html %} - -60 minutes remains in your exam + +60 minutes remain in your exam - -30 minutes remains in your exam + +30 minutes remain in your exam - -0 minutes remains in your exam + +0 minutes remain 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. + 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.

{% highlight html %} - - - View 3 items in your shopping cart + + {% endhighlight %} an icon being used to communicate shopping cart state @@ -93,17 +92,15 @@
{% 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 @@ -115,7 +112,7 @@