From 703fda0939ace5c484c6bd81162eea33442f21e0 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Fri, 29 Jul 2016 10:17:06 -0400 Subject: [PATCH] updating a11y how-tos and examples w/ aria-label method --- accessibility/index.html | 15 +++++++------ assets/font-awesome-4.6.3.zip | Bin 601196 -> 601196 bytes examples/index.html | 40 ++++++++++++++-------------------- 3 files changed, 24 insertions(+), 31 deletions(-) diff --git a/accessibility/index.html b/accessibility/index.html index 2f22bbf22..107c20804 100644 --- a/accessibility/index.html +++ b/accessibility/index.html @@ -323,11 +323,11 @@

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

-
<a href="path/to/shopping/cart" title="View 3 items in your shopping cart">
+
<a href="path/to/shopping/cart" aria-label="View 3 items in your shopping cart">
   <i class="fa fa-shopping-cart" aria-hidden="true"></i>
 </a>
 

@@ -335,18 +335,19 @@
-
<a href="#navigation-main" title="Skip to main navigation">
+
<a href="#navigation-main" aria-label="Skip to main navigation">
   <i class="fa fa-bars" aria-hidden="true"></i>
 </a>
 

     an icon being used as a link to a navigation menu
+
-
<a class="btn btn-danger" href="path/to/settings" title="Delete">
-  <i class="fa fa-trash-o" aria-hidden="true"></i>
+  

+
<a class="btn btn-danger" href="path/to/settings" aria-label="Delete">
+  <i class="fa fa-trash-o" aria-hidden="true" title="Delete this item?"></i>
 </a>
 

-    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
   

 
 
diff --git a/assets/font-awesome-4.6.3.zip b/assets/font-awesome-4.6.3.zip
index b82dd510e10650de75a38bde7bec052aac82b2bb..ede612f5a6bfa66720707edab89f4e9f89f00342 100644
GIT binary patch
delta 1858
zcmZXUT}%{L6vua%UH6##lB|Lmx~_6E!w%
zN^I1S7|6PbSEI>703Q?+#fM3GKpOclQDf8?jTIGXOJZnA%$AfDq<8LcXXdW+_&fh|
z&;S1KojdZxKk~$%Ub#`We_+$Tzqd|C({r4Y)#tyQsy-hr%9J&-C(j@aI=NiL$+gim
zMH9sm%39|;z3+OV=c=2*(dD0TVYDH07S)CS*mwNcuOZ3yS4bkY5$V%dT>)^-FO3Ci
zV}bNAq&1VTBT^}^oa~55YDXmP(mhuCDql8B?fJ6Wo^S7uu+rg}z0Bz9iP_bjnB#sG
zE1gX^!bWL0;ZTPYGY00fQh&O$*eK0(In|jia7I}vBMvKhiR_5OD5Et4;3svh;2_^M
zfrHoSCgl-o{ah2Qc24MNkl&l&Q97mJ*SikZKBXy_lV!c&CC{3{ZHOkCA>q;{xsDt$L$16%_rV&YgYIJv>FR@0HpAHutBi(lKO`6}xdnxss>g1@
z&|H2VAMg&ccW
z94oW2T&6#h=3XZ)*;px(c|P1Ak{^9^pwRW&hnqyQdm*(TXntFWWg-bJN?kd+$g0ua
z&7`K8J{sL&#BX(|X&(AJGb>q^6J;wC+cHOwR;UoSn%@U8W|-D$zFhK+^~ztO{A}Xqqb_dJzRpR&MIy*5}ge
PD;&yL?zH97r5N}h*O@%c

delta 1858
zcmZXUZA?>F7{`0Lt$m&aD)EJ_+)Am|T8eD4Y^c0Uoe>MjRt>sojI)_r+y~-VG8Pt%
z1S5uIfz&1(O_me__+iszgAdp70a@h5M2!(+AZ#dz&cv9JEFBq@1^&)k5oNm`U|f>t3yDC~B35
zqPF|TnRF>`3u@ByxJ`Z@UorI-lSVV_A81m#!!D;gz#d^zRt&ari5!f<9HS?vz)Kpt
z!A8FB02|jMbU#Y;%NH
zIRuMkNFeubLJo0tfrGo`!Y=R&ti#c6&;parZfIb1T@UQwX7YItBp5w@MV~;9U4gDQ
z8QwDh+cop~0l35Zj~$)Ae4B=BNcKN-L+?*6-hgMU_WMD-R_-4J6d4}530t)z7nVSh
z-9uni6Z?kYLrpt14F9l-6CphH7-!D$N3feaiRUrQGnzfE?}*SfyX0@D!J#H^o=Mp%%~(JdW}upt
zRXj=AL(3EBR#&?vkrKTw0e6{s*Q=Bsjjv#a(G!chSMFJaRq87HmvpmCSDCA3aS5oW
z|5CsNyR?Mm$FG9)(wZ&NCCN!b`DiDtX_%$Wsctq6KV~g6Mbw|?0TKUYw9<-Yyg+WX
z;@|3K&pJ_mQ^QXDkC_LvajQtb6J*AZStL`!70OqDI3+9*>BmCBE=KAltTK{WiN>Ix
zij-32KU3qvGJc|q_2_e9jgjQ7Gn3ddvNi_~8moTD!9zx3b>luG`NoaqoFwN_LQT4{
zlw&p2wp^?*lCE3~8Od4??lF?n9&^JN9;`Nc4zJfEsJ(t)k9&=tzy|Zlkqu@~VworG
zH79)F#gB|9@7{<(Be}K_D>*T)L?Z9`(8Dz~>vulgt&&+E?l*c4Z8A?du*tlI0>62l
ycE2fEd!G52lX)f!8C&Kl4w&Oy3($v{e8XzwoP6`;w&c_2Yw*nHCnJ|{M&D}>*UuCH

diff --git a/examples/index.html b/examples/index.html
index 779907a5c..df589dbf8 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -715,19 +715,16 @@ fa-ban on fa-camera
   

     

       

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

 
@@ -751,9 +748,8 @@ fa-ban on fa-camera
       

 
       

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

 
@@ -767,19 +763,16 @@ fa-ban on fa-camera
         With our thoughts on icon accessibility in mind, If an icon only adds some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Alternatively, if an icon conveys meaning in your content or interface, ensure that this meaning is also conveyed to assistive technologies through alternative displays or text.
       

 
-
<a class="btn btn-default" href="path/to/settings">
-  <i class="fa fa-cog" title="Settings" aria-hidden="true"></i>
-  <span class="sr-only">Settings</span>
+
<a class="btn btn-default" href="path/to/settings" aria-label="Settings">
+  <i class="fa fa-cog" aria-hidden="true"></i>
 </a>
 
-<a class="btn btn-danger" href="path/to/settings">
-  <i class="fa fa-trash-o" title="Delete" aria-hidden="true"></i>
-  <span class="sr-only">Delete</span>
+<a class="btn btn-danger" href="path/to/settings" aria-label="Delete">
+  <i class="fa fa-trash-o" aria-hidden="true"></i>
 </a>
 
-<a class="btn btn-primary" href="#navigation-main">
-  <i class="fa fa-bars" aria-hidden="true" title="Skip to main navigation"></i>
-  <span class="sr-only">Skip to main navigation</span>
+<a class="btn btn-primary" href="#navigation-main" aria-label="Skip to main navigation">
+  <i class="fa fa-bars" aria-hidden="true"></i>
 </a>
 

 
@@ -800,9 +793,8 @@ fa-ban on fa-camera
 </div>
 

 
-
<a href="path/to/shopping/cart" class="btn btn-primary">
-  <i class="fa fa-shopping-cart" title="View 3 items in your shopping cart" aria-hidden="true"></i>
-  <span class="sr-only">View 3 items in your shopping cart</span>
+
<a href="path/to/shopping/cart" class="btn btn-primary" aria-label="View 3 items in your shopping cart">
+  <i class="fa fa-shopping-cart" aria-hidden="true"></i>
 </a>