Skip to Content menu Mockups

[isaacdurazo]

Skip to content menu - Text-based and visual Mockups

These mockups present an always-visible "Skip to Content" button located on the upper left side of the site; right before what would be considered the website's "logo".

When the button is clicked or focused a menu gets displayed. This "Skip to Content" button and menu look like this:

"Skip to Content" menu - Collapsed

When the "Skip to Content" menu is in its default state, meaning is collapsed, the "Skip to Content" button looks very similar to what a clothing tag would look like. It is aligned to the top of the page, it has a white background, 3px rounded corners on the bottom, and a subtle shadow effect to make it pop a little bit from the W3C blue background from the header of the page.

Inside this button, there's an icon in W3C blue that combines the "skip" and "content" icons. This new icon attempts to represent "Skip to Content". The icon is comprised of a triangle pointing down simulating an arrow, followed by 3 lines underneath that look like a "hamburger menu".

"Skip to Content" menu - Expanded

When the "Skip to Content" button gets clicked or focused, a menu containing all the navigation options on the page gets displayed and the "Skip to Content" button is attached to the bottom of the menu. The "Skip to Content" button's icon changes and the triangle that simulates an arrow points up; the three lines that look like a "hamburger menu" underneath the triangle remain the same.

cc @a11ydoer @jongund @mcking65 @shawna-slh

[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.