From 98475f44f1b679836cbd789ab1581209487701d8 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Mon, 18 Jul 2016 08:45:39 -0400 Subject: [PATCH] doc: updating a11y examples to use aria-label method --- .../accessibility/accessibility-manual.html | 6 ++- src/_includes/examples/accessible.html | 40 ++++++++----------- 2 files changed, 20 insertions(+), 26 deletions(-) diff --git a/src/_includes/accessibility/accessibility-manual.html b/src/_includes/accessibility/accessibility-manual.html index 5864c6819..c886ba85b 100644 --- a/src/_includes/accessibility/accessibility-manual.html +++ b/src/_includes/accessibility/accessibility-manual.html @@ -79,7 +79,7 @@

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 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. + 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. If you need to provide a visual tooltip on mouseover/focus, we recommend additionally using the title attribute or a custom tooltip solution.

@@ -98,10 +98,12 @@ {% 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 with a title attribute to provide a native mouse tooltip diff --git a/src/_includes/examples/accessible.html b/src/_includes/examples/accessible.html index 2f51aed9c..0360a4621 100644 --- a/src/_includes/examples/accessible.html +++ b/src/_includes/examples/accessible.html @@ -5,19 +5,16 @@

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

@@ -41,9 +38,8 @@

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

@@ -58,19 +54,16 @@

{% highlight html %} - - - Settings + + - - - Delete + + - - - Skip to main navigation + + {% endhighlight %} @@ -94,9 +87,8 @@ {% endhighlight %} {% highlight html %} - - - View 3 items in your shopping cart + + {% endhighlight %}