Warning:
This wiki has been archived and is now read-only.

ChangeProposals/outlinenone

From HTML WG Wiki
Jump to: navigation, search

Remove CSS authoring advice that promotes inaccessible content

by Steve Faulkner. faulkner.steve@gmail.com

updated: 2/2/2012

Summary

The HTML5 specification advises use of CSS outline:none, in cases where authors find the default focus indicator "unsightly". This advice is unecessary and promotes a well known anti-pattern that makes it very difficult for keyboard only users to navigate and interact with web content.

Rationale

The specification discourages the use of the Javascript element.blur() method to "hide the focus ring" presumably because of its negative usability /accessibility effects. Yet the spec then advises instead to use a method that is known and widely documented as a usability /accessibility issue for keyboard only users. The specification even acknowledges this:

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.)

Note the quoted spec text above incorrectly states that use of outline:none 'especially' affects those with 'reduced vision'. The use of outline:none has a major effect upon all keyboard only users regardless of visual impairment.

There is ample documented evidence of focus outline being a major accessibility issue:

Section 508 requirement:

(c) A well-defined on-screen indication of the current focus shall be provided that moves among interactive interface elements as the input focus
changes. The focus shall be programmatically exposed so that Assistive Technology can track focus and focus changes.

WCAG 2.0 requirement:

2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

The issue has been widely documented:


The HTML5 editor reasons for including the advice, as stated in the bug rejection:

Rationale: Authors want to do this. If they're going to do it anyway, let's at
least push them towards doing it the way that is trivially made accessible
rather than what they do now (which is to move the focus around).

Problem with the rationale is that no evidence has been given that the frequency of use of the issue his advice is supposed to be fixing actually has any significant impact on users, while the opposite is true for his supposed solution. At the very least before we start advocating the use of a method that has signifcant negative impacts on users with disabilities, we have to ensure that original issue is signifcant and is the only available option to reduce the harm caused by the use of .blur(). Furthermore there has been no evidence to show that the outline method "is trivially made accessible".

Details

Remove the following from the HTML5 specification:

<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>       
<div class="example"> 
<p>For example, to hide the outline from links, you could use:</p>
<pre>:link:focus, :visited:focus { outline: none; }</pre>
</div>

Replace the above text with:

<p>Do not use this method to hide the focus ring. Do not use any other method that hides the focus 
ring from keyboard users,in particluar do not use a CSS rule to override the 'outline' property. Removal 
of the focus ring leads to serious accessibility issues for users who navigate and interact with interactive 
content using the keyboard.</p>

Impact

Positive Effects

  • Removes advice from spec that will encourage authors to make web content less accessible.

Negative Effects

Some time to make the edits.

Conformance Classes Changes

None

Risks

None

References