From df55bbba7e3a85281652c0281601596e6ae84e17 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Mon, 18 Jul 2016 08:30:31 -0400 Subject: [PATCH 1/2] 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
From 98475f44f1b679836cbd789ab1581209487701d8 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Mon, 18 Jul 2016 08:45:39 -0400 Subject: [PATCH 2/2] 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 %}