From 4a65011857e376adcc42a441960119fa2c3a0b84 Mon Sep 17 00:00:00 2001
From: JAWS-test2 <>
Date: Sun, 26 Jan 2020 04:49:27 +0100
Subject: [PATCH] Update index.html

---
 .../aria-icon-font-img-role/index.html        | 30 ++++++++++++++-----
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/working-examples/aria-icon-font-img-role/index.html b/working-examples/aria-icon-font-img-role/index.html
index b8434221e4..5d82bb4ebd 100644
--- a/working-examples/aria-icon-font-img-role/index.html
+++ b/working-examples/aria-icon-font-img-role/index.html
@@ -44,8 +44,8 @@
     .icon-star-bg:before    { content: "\e982"; }
     .icon-star-half:before  { content: "\e983"; }
 
-    .grey { color: #949494; }
-    .yellow { color: #f8c102; }
+    .grey { color: #6e6e6e; text-shadow: 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black;}
+    .yellow { color: #f8c102; text-shadow: 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black;}
 
     /* EXAMPLE 2 */
 
@@ -122,7 +122,18 @@
       margin-bottom: 2rem;
       padding: 1rem;
     }
-
+	
+	.sr-only {
+	  position: absolute;
+	  width: 1px;
+	  height: 1px;
+	  padding: 0;
+	  margin: -1px;
+	  overflow: hidden;
+	  clip: rect(0,0,0,0);
+	  border: 0;
+	}
+	
     </style>
 
     <script>
@@ -161,7 +172,8 @@ <h3>Instead of...</h3>
 
       <h3>Do...</h3>
       <p>
-        <span class="icon icon-star-bg yellow" role="img" aria-label="Favorite"></span>
+        <span class="icon icon-star-bg yellow" role="img" aria-hidden="true"></span>
+		<span class="sr-only">Favorite</span>
       </p>
 
       <button onclick="fontFamilyToggle()">Toggle font family</button>
@@ -182,9 +194,10 @@ <h3>Instead of...</h3>
 
       <h3>Do...</h3>
       <p>
-        <span class="icon-stacked" role="img" aria-label="Favorite star half filled">
-         <span class="icon icon-star-bg grey" role="img" aria-hidden="true"></span>
-         <span class="icon icon-star-half yellow" role="img" aria-hidden="true"></span>
+        <span class="icon-stacked" role="img" aria-hidden="true">
+         <span class="icon icon-star-bg grey" role="img"></span>
+         <span class="icon icon-star-half yellow" role="img"></span>
+		 <span class="sr-only">Favorite star half filled</span>
         </span>
       </p>
 
@@ -206,7 +219,8 @@ <h3>Instead of...</h3>
       <h3>Do...</h3>
       <p>
         <a href="email.html">
-          <span class="icon icon-email" role="img" aria-label="Email"></span>
+          <span class="icon icon-email" role="img" aria-hidden="true"></span>
+		  <span class="sr-only">Email</span>
         </a>
       </p>