ChangeProposals/outlinenone
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.
Contents
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:
(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.
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:
- Don't Lose Your :focus
- keyboard friendly link focus
- Do not remove the outline from links and form controls
- Keyboard accessibility (again)
- The plague of outline:0
- Focus on keyboard users
- It even has its own web site outlinenone.com
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
