From df55bbba7e3a85281652c0281601596e6ae84e17 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Mon, 18 Jul 2016 08:30:31 -0400 Subject: [PATCH] doc: updating a11y how-tos w/ aria-label method --- .../accessibility/accessibility-manual.html | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/_includes/accessibility/accessibility-manual.html b/src/_includes/accessibility/accessibility-manual.html index 2389783ef..5864c6819 100644 --- a/src/_includes/accessibility/accessibility-manual.html +++ b/src/_includes/accessibility/accessibility-manual.html @@ -79,12 +79,12 @@

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. + 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 aria-label attribute with a text description 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 %} - + {% endhighlight %} @@ -93,19 +93,18 @@
{% highlight html %} - + {% endhighlight %} an icon being used as a link to a navigation menu {% highlight html %} - - + + {% endhighlight %} - an icon being used as a delete button's symbol - + an icon being used as a delete button's symbol with a title attribute to provide a native mouse tooltip