1010526 - Off-screen text makes item focusable

Status: RESOLVED INVALID

(Core :: DOM: UI Events & Focus Handling, defect)

Description

[Greg Kraus]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:29.0) Gecko/20100101 Firefox/29.0 (Beta/Release)
Build ID: 20140506152807

Steps to reproduce:

I created a page with some off-screen text using the following CSS.

.sr {
    left:-999px;
    position:absolute;
    top:auto;
    width:1px;
    height:1px;
    overflow:scroll;
    z-index:-999;
}

and applied it to a <p> element.

<p><a href="#">dummy link 1</a></p>
<p>on screen text</p>
<p class="sr">off screen text</p>
<p><a href="#">dummy link 2</a></p>

I then used the tab key to navigate the page, both with and without NVDA running.

Demo site.
http://accessibility.oit.ncsu.edu/dev/bugs/ff/ff-keyboard-off-screen-tab-stop.html


Actual results:

The off-screen text became keyboard focusable, both with the keyboard only and with NVDA.


Expected results:

I should not have been able to tab to the text.

Comment 1

[Marco Zehe (:MarcoZ)]

Your CSS only moves text outside the view port, it doesn't remove it and its children from the DOM, and thus focusable elements stay in the tab order normally. Totally by design. If you want to hide elements from screen readers and from the tab order, use display: none; or visibility: hidden;. 

Closing as INVALID.

Comment 2

[Greg Kraus]

The demo is actually demonstrating text hidden for screen reader users only so it should stay in the DOM, however, James Nurthen (@jnurthen) figured it out. The CSS property overflow:scroll makes an item keyboard focusable. WHATWG says this is the expected behavior.

http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#focusable-area

So far FF is the only browser that does this. I had never noticed it before, so I wonder if it is a newer feature in one of the later releases.

Changing the CSS to overflow:hidden in my example fixes the problem.