75

Two bugs, really. Originally a comment on the announcement post: https://stackoverflow.blog/2017/02/Why-Stack-Overflow-Redesigned-the-Top-Navigation/#comment-3154973705

Bug #1: tabindex="1" on the search field

I suspect you want it to be the first item a user tabs to on the page, but you can do that just by putting the search box first in the DOM (in the raw HTML).

Why this is a problem for keyboard users:

After entering a search term, the next interactive element in the tab order is the logo, not the submit button. Remember, not all users hit the Enter key to immediately submit. I do not; that is how I found this issue.

Why this is a problem for screen reader users:

After allowing the screen reader to describe the controls, the search control is not the first item but appears after the navigation items. Once I start tabbing to the control it is not where I expected (the 8th tab stop) and confuses me about where I am on the page. In addition, I cannot tab directly to the submit button (as outlined above).

Ideal solution:

Put the search box first in the DOM (in the raw HTML). This removes the risky endeavor of positive tabindex values, because once one is added, more tend to appear. For reference, some tabindex best practices: http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html

Bug #2: The search field has no accessible name

I understand you want an uncluttered design, but without an accessible name the field has no real label.

Why this is a problem for screen reader users:

The field is only announced as editable. If there is already a pre-populated value in the field then that may be announced. This can be confusing as it offers no context. If there is no value, not all browsers expose the placeholder value to assistive technology.

Ideal solution:

Add a <label>. You can use CSS to visually hide it and still make it accessible. Some CSS you can use to make this work: https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe

For reference, I also made a demo of a similar approach to yours from which you may steal code: http://adrianroselli.com/2015/12/responsive-progressive-accessible-vanilla-search.html

Less ideal solution:

Add an aria-label attribute to the field: <input … aria-label="Search">

This may be the easier solution, but I recommend not relying on ARIA when a regular HTML <label> can do the work for you.

12
  • 4
    Thanks again for the feedback. We're looking into this and will get back to you soon.
    – Kurtis Beavers Staff
    Commented Feb 14, 2017 at 20:00
  • 1
    Let me know if you need some quick testing. The keyboard part should be easy, the screen reader part less so if you are not familiar with them.
    – aardrian
    Commented Feb 14, 2017 at 20:02
  • 1
    Interesting, I would have assumed a screen reader would read out the prompt text in such a case, rather than making developers add invisible labels
    – Rob Mod
    Commented Feb 15, 2017 at 2:45
  • 6
    It is up to the browsers to pass the info to the screen reader. Also, nobody is making developers add invisible labels. "Prompt" text, or aplaceholder is widely understood to be bad for UX and accessibility. Best practice is to include a visible <label> but designers often do not want them, so developers have an option using off-screen text or ARIA to make up for non-inclusive design decisions. IOW, this is not he fault nor responsibility of the screen reader but the designers/developers.
    – aardrian
    Commented Feb 15, 2017 at 3:13
  • 2
    You know what they say about assumption @Rob...
    – user692942
    Commented Feb 15, 2017 at 6:45
  • 13
    "After entering a search term, the next interactive element in the tab order is the logo, not the submit button." Actually, for me, tab out of the search box jumps down to the bottom of the page and gets the "your answer" box next. (Chrome, Windows)
    – Jason C
    Commented Feb 15, 2017 at 7:03
  • 3
    Mine goes: Search input box -> Your answer input -> Post your answer button -> Logo -> Questions -> Tags -> Users -> Search submit button (although it isn't visible as it hides when you focus away from the text box) -> the rest of the stuff on the nav bar from left to right.
    – Jason C
    Commented Feb 15, 2017 at 7:06
  • 1
    @JasonC Yep, you are correct. As I do not have an 'answer' box on my own question I was not seeing it. It has a tabindex as well: <textarea id="wmd-input" … tabindex="101"> So does the button right after it: <input id="submit-button" … tabindex="110"> So, on the whole, that is a far more confusing experience than even what I outlined. All instances of tabindex should go, but this bug is about the new top-bar.
    – aardrian
    Commented Feb 15, 2017 at 13:58
  • 1
    thanks for reporting that. accessibility is super important. we will look into those issues.
    – Paweł Staff
    Commented Feb 15, 2017 at 16:17
  • @Paweł should I open a separate issue for the other tabindex attributes that @JasonC found or are you tracking that already?
    – aardrian
    Commented Feb 15, 2017 at 16:29
  • you can open another issue. tabindex across SO probably needs some more investigation.
    – Paweł Staff
    Commented Feb 15, 2017 at 16:49
  • Not about the new top bar, but related in that it seems to be more tabindex weirdness affecting accessibility: meta.stackoverflow.com/q/345318 cc @Paweł
    – Jason C
    Commented Mar 13, 2017 at 1:47

0

You must log in to answer this question.

Browse other questions tagged .