[e] (0) Improve accessibility chops of this non-normative suggestion.

Fixing https://www.w3.org/Bugs/Public/show_bug.cgi?id=17841
Affected topics: DOM APIs

git-svn-id: http://svn.whatwg.org/webapps@7575 340c8d12-0b0e-0410-8428-c7bf67bfef74

complete.html

@@ -248,7 +248,7 @@
 
   <header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
    <hgroup><h1 class=allcaps>HTML</h1>
-    <h2 class="no-num no-toc">Living Standard &mdash; Last Updated 8 December 2012</h2>
+    <h2 class="no-num no-toc">Living Standard &mdash; Last Updated 10 December 2012</h2>
    </hgroup><dl><dt><strong>Web developer edition:</strong></dt>
     <dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
     <dt>Multiple-page version:</dt>
@@ -76509,12 +76509,11 @@ <h4 id=element-level-focus-apis><span class=secno>8.4.4 </span>Element-level foc
     <p>Unfocuses the element. Use of this method is discouraged. Focus
     another element instead.</p>
 
-    <p>Do not use this method to hide the focus ring if you find the
-    focus ring unsightly. Instead, use a CSS rule to override the
-    'outline' property. (Be aware, however, that this makes the page
-    significantly less usable for some people, especially those with
-    reduced vision who use focus outlines to help them navigate the
-    page.)</p>
+    <p>Do not use this method to hide the focus ring if you find the focus ring unsightly. Instead,
+    use a CSS rule to override the 'outline' property. Be aware, however, that if an alternative
+    focusing style isn't made available instead, the page will be significantly less usable for
+    people who primarily navigate pages using a keyboard, or those with reduced vision who use focus
+    outlines to help them navigate the page.</p>
 
     <!-- we suggest using CSS here because users can override CSS, so
     it's no the end of the world, unlike using .blur(), which cannot
@@ -76523,9 +76522,9 @@ <h4 id=element-level-focus-apis><span class=secno>8.4.4 </span>Element-level foc
 
     <div class=example>
 
-     <p>For example, to hide the outline from links, you could use:</p>
+     <p>For example, to hide the outline from links and instead use a yellow background, you could use:</p>
 
-     <pre>:link:focus, :visited:focus { outline: none; }</pre>
+     <pre>:link:focus, :visited:focus { outline: none; background: yellow; color: black; }</pre>
 
     </div>
 

index

@@ -248,7 +248,7 @@
 
   <header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
    <hgroup><h1 class=allcaps>HTML</h1>
-    <h2 class="no-num no-toc">Living Standard &mdash; Last Updated 8 December 2012</h2>
+    <h2 class="no-num no-toc">Living Standard &mdash; Last Updated 10 December 2012</h2>
    </hgroup><dl><dt><strong>Web developer edition:</strong></dt>
     <dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
     <dt>Multiple-page version:</dt>
@@ -76509,12 +76509,11 @@ interface <dfn id=imagebitmapfactories>ImageBitmapFactories</dfn> {
     <p>Unfocuses the element. Use of this method is discouraged. Focus
     another element instead.</p>
 
-    <p>Do not use this method to hide the focus ring if you find the
-    focus ring unsightly. Instead, use a CSS rule to override the
-    'outline' property. (Be aware, however, that this makes the page
-    significantly less usable for some people, especially those with
-    reduced vision who use focus outlines to help them navigate the
-    page.)</p>
+    <p>Do not use this method to hide the focus ring if you find the focus ring unsightly. Instead,
+    use a CSS rule to override the 'outline' property. Be aware, however, that if an alternative
+    focusing style isn't made available instead, the page will be significantly less usable for
+    people who primarily navigate pages using a keyboard, or those with reduced vision who use focus
+    outlines to help them navigate the page.</p>
 
     <!-- we suggest using CSS here because users can override CSS, so
     it's no the end of the world, unlike using .blur(), which cannot
@@ -76523,9 +76522,9 @@ interface <dfn id=imagebitmapfactories>ImageBitmapFactories</dfn> {
 
     <div class=example>
 
-     <p>For example, to hide the outline from links, you could use:</p>
+     <p>For example, to hide the outline from links and instead use a yellow background, you could use:</p>
 
-     <pre>:link:focus, :visited:focus { outline: none; }</pre>
+     <pre>:link:focus, :visited:focus { outline: none; background: yellow; color: black; }</pre>
 
     </div>
 

source

@@ -89398,12 +89398,11 @@ interface <dfn>ImageBitmapFactories</dfn> {
     <p>Unfocuses the element. Use of this method is discouraged. Focus
     another element instead.</p>
 
-    <p>Do not use this method to hide the focus ring if you find the
-    focus ring unsightly. Instead, use a CSS rule to override the
-    'outline' property. (Be aware, however, that this makes the page
-    significantly less usable for some people, especially those with
-    reduced vision who use focus outlines to help them navigate the
-    page.)</p>
+    <p>Do not use this method to hide the focus ring if you find the focus ring unsightly. Instead,
+    use a CSS rule to override the 'outline' property. Be aware, however, that if an alternative
+    focusing style isn't made available instead, the page will be significantly less usable for
+    people who primarily navigate pages using a keyboard, or those with reduced vision who use focus
+    outlines to help them navigate the page.</p>
 
     <!-- we suggest using CSS here because users can override CSS, so
     it's no the end of the world, unlike using .blur(), which cannot
@@ -89412,9 +89411,9 @@ interface <dfn>ImageBitmapFactories</dfn> {
 
     <div class="example">
 
-     <p>For example, to hide the outline from links, you could use:</p>
+     <p>For example, to hide the outline from links and instead use a yellow background, you could use:</p>
 
-     <pre>:link:focus, :visited:focus { outline: none; }</pre>
+     <pre>:link:focus, :visited:focus { outline: none; background: yellow; color: black; }</pre>
 
     </div>