WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Improving the Accessibility of My Projects

for

From: Carly Gerard
Date: Jan 8, 2020 10:39AM

Hi Bryan,

I think this tab order could be further improved. I feel like I'm doing a huge visual leap from the homepage link across the entire screen to the search, and then the same amount of leap back to the menu on the left. It's a lot of visual work to keep track of where I am, especially with the current focus indicators being minimal and not catching my eye.

What might also be tripping me up is that I'm used to seeing search regions closer to the top of the page, rather than lower in the header. I don't think a search in the header is invalid (WebAIM did their nav/banner pretty well, I think: https://webaim.org), but most sites seem to put their searches closer to the top right of the screen on desktop:

* Gatsby: https://www.gatsbyjs.org/
* Apple: https://www.apple.com/
* University of Washington (UW): http://www.washington.edu/
* Western Washington University (WWU): https://www.wwu.edu/

At WWU, we put our search region before the main nav semantically as well. We also made sure to put the search above the navigation on desktop, so the tab order made it clear you would reach the search before the main navigation. On mobile, our search comes after the menu, but the entire menu is opened by a single button there, so one tab stop compared to desktop's 5-7.

In your example, if I had to guess focus order just by looking at it, I would guess that I would first focus on the main nav and then the search--they are on the same line visually and the main nav is first in that line. Whatever you decide semantically should be fine, as long as the design reflects that semantic order as close as possible.

I'm sure others will have different takes, which I'd be interested in hearing.

Carly

[Western logo]

Carly Gerard, CPACC<https://www.accessibilityassociation.org/cpacccertification> | She/Her/Hers
Web Accessibility Engineer | Web Communication Technologies
Western Washington University
516 High Street, Bellingham WA 98225
<EMAIL REMOVED> <mailto: <EMAIL REMOVED> > | <EMAIL REMOVED> <mailto: <EMAIL REMOVED> > | (360) 650-3944<tel:(360)%20650-3944>

From: WebAIM-Forum < <EMAIL REMOVED> > on behalf of Bryan Hadaway < <EMAIL REMOVED> >
Sent: Wednesday, January 8, 2020 8:35 AM
To: <EMAIL REMOVED> < <EMAIL REMOVED> >
Subject: [WebAIM] Improving the Accessibility of My Projects

Hi Everyone,

I'm new to accessibility, at least in terms of the really important stuff,
not just the trendy stuff from a decade ago, when everyone was adding
language switchers and font-size changers to their sites.

Here's the project I'm primarily focused on making accessibility-ready at
the moment:

https://nam03.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwp-themes.com%2Fgeneric%2F&amp;data=02%7C01%7Cgerardc%40wwu.edu%7Cfa2c11cc1e7c463a43c308d79458bb97%7Cdc46140ce26f43efb0ae00f257f478ff%7C0%7C1%7C637140981132619401&amp;sdata=gtnyfW4XchQdMm32s85YlXttPI599davSBd64lOBtlU%3D&amp;reserved=0

Everything I learn from this will then cascade down into all my other
projects.

If anyone would be gracious enough to help me by testing it out and giving
me some pointers on things that I should improve, especially from those who
browse the web from a keyboard 24/7, I would be very grateful.

I'm open to any/all suggestions, but one particular dilemma I'm currently
faced with is the tabbing/focusing order of the menu and search form.

Aesthetically, both on desktop and mobile, it's the way I want it. I want
the search form on the right on desktop, and I want the search form above
the menu on mobile.

Functionally, I want people to be able to tab to search *before* the menu,
and herein lies the problem.

Everything looks and functions the way I want it to, but from a keyboard
perspective, one would expect tabbing to follow the normal visual order of
elements on the page, otherwise it might be a little jarring/confusing.

However, web design is about compromise because there are many, many, MANY
variables that have to be taken into account and it's impossible to make it
perfect for every scenario.

My assumption would be that keyboard users would rather reach the search
form before the menu, even if done in a different way, as opposed to having
to tab through the entire menu (of which some people add dozens of links)
before getting to search.

So, of the following scenarios, what do you think is the most pleasing and
easy for actual keyboard users:

A. Exactly the way I have it now.

B. I should just change the tabbing order to menu first, then search.

C. I should just change the tabbing order to menu first, then search, but
also add a "Skip to search" link before the menu.

D. Some other creative solution?

Thank you!