Skip to Content menu Mockups about wai-aria-practices

[jongund]

@isaacdurazo
Thank you for the design, it looks good, but I would like to get some other feedback from people here at Illinois.

[shawna-slh]

Interesting to see the UI mockup.

I have never seen a user interface or functionality like this, and have not seen any usability testing input. As I mentioned previously, I suspect it will be more distracting and confusing than helpful for most pages.

And if the first page were designed for repeat users (#34) and distinct pages for other topics (#35), it might not be useful at all.

However, I have no data to support that, so it is merely an educated guess.

[jongund]

People at Illinois like the icon you design @isaacdurazo. One suggestion is centering the icon, rather hand left justified, so it is not competing for attention with website title. The other idea is when the button first receives focus from "tabbing" it would automatically open the menu and move focus to the the "Main" landmark option in the menu. The user would just have to press enter to go to the main content, just like with the current Skip To Main techniques.

What do you think of that change?

Rationale for Skip To

The web has changed a lot in the last 20 years, but the traditional "Skip To Main" has not changed much for implementing the WCAG 2.4.1 By pass blocks requirement.
The biggest innovation was changing the content of the link it from a 1 pixel by 1 pixel image to "Skip To Main".

The "Skip To Content" or "Jump To Content" button does many things:

1. It allows keyboard only users to navigate to other sections of the web page, in addition to the main content.
2. It automates the generation of the links, so no more "broken" skip to main links.
3. It now makes at least some of the invisible header and landmark structural information available to everyone, an important step in helping more people understand these important accessibility concepts.
4. The the button is always visible anyone can use it to get a high level outline of the page without scrolling and quickly navigate to sections of interest.

U. Illinois has integrated SkipTo into the UI web template.

More examples of SkipTo.

[isaacdurazo]

Thanks for the feedback @jongund. I like your suggestion about having the menu open when the button first receives focus from tabbing and immediately move focus to the "Main" landmark option. That seems like a nice user interaction based on how skip to links function right now.

With regard to having the button centered on the page, I'm not so sure about it, to be honest with you. I'm playing around with that idea right now and it actually feels more distracting since it is isolated in the header. Maybe what we could do is push it more to the left so it doesn't compete with the logomark?

[jongund]

@isaacdurazo
Could you send me the icon and I can use it to create a new version of SkipTo.js

[mcking65]

@jongund @isaacdurazo

Opening a menu and moving focus on tab would violate WCAG change of context and be inconsistent with the menubutton pattern. We'd have to consider a completely different widget pattern if you want to do something like that!! That is literally re-design from the ground up for initial presentation.

It would be OK to open automatically without moving focuss, the focus would have to remain on the menu button element. That would be similar to opening on hover.

[mcking65]

I moved this to the backlog from next up. This will not be a launch blocker. We will bring back to Next UP if we get all launch blockers resolved and there is enough time before May 11 to complete it.