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.
placeholder
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.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 oftabindex
should go, but this bug is about the new top-bar.tabindex
attributes that @JasonC found or are you tracking that already?