search

solid-design-system / solid

Monorepo for Union Investment's Solid Design System.
https://solid-design-system.fe.union-investment.de/x.x.x/storybook/
Other
20 stars 4 forks source link

research: Hidden Links #3

Closed karlbaumhauer closed 2 months ago

karlbaumhauer commented 1 year ago

We would like to provide the users of the design system with guidelines to implement the hidden accessibility buttons feature in the best possible way.

Approach 1 [Skip to content] - After the initial page load, a hidden button "Skip to content" is displayed after pressing the tab key. This anchor scrolls to the main content of the page. (Example: https://www.spiegel.de/)

Approach 2 [Quicklinks on Tab] - After initial pageload, a hidden button "Main menu" is displayed after pressing the tab key. If you press the tab key again, a hidden button "Booking form" is displayed, another tab shows "Content", another tab shows "Footer navigation" (example: https://www.motel-one.com/de/)

Approach 3 [Quicklink menu in dropdown] - After initial pageload, a hidden dropdown "Jump to" with a quicklink menu is displayed after pressing the tab key. The arrow keys can be used to focus on "Content, navigation, search, sidebar, footer". (Example: https://uni-freiburg.de/)

Questions:

Approach 1 is the minimum you need to fulfill to be accessible on the site? https://www.w3.org/TR/WCAG20-TECHS/G1.html

If you want to offer more quicklinks ... is approach 2 or 3 better? Or does it simply depend on the purpose/structure of a page? Example Motel One - here it is important to get people quickly to the booking page.

Subtasks

DoR

DoD

mariohamann commented 1 year ago

@karlbaumhauer Could you precise what this is about?

coraliefeil commented 11 months ago

On pageload when tabbed browsing - show action menu / hidden buttons like e.g.

Image

https://www.motel-one.com/de/

Image

I asked our A11y taskforce for their recommendations. Keep you updated.

coraliefeil commented 6 months ago

@yoezlem I picked up this issue labeled iteration 9 from the backlog since it is pretty small and added 2 points for it. Is this ok for you?

yoezlem commented 6 months ago

Go for it. We will create another Ticket after the research for the implementation. So you won't have dependencies, right?

coraliefeil commented 6 months ago

Yes, no dependencies ATM.

coraliefeil commented 5 months ago

Feedback:

In fact, it is as you have described: It depends on what content is available on the page and how important the information is to make it available via such jump links. If there are no important functions in the footer, it is questionable that users are always offered this link at the top of a page. If important functions are hidden, it can make sense to include them in the jump links.

What I always find quite good are the three links

as implemented here:

https://www.bundesfachstelle-barrierefreiheit.de/DE/Home/home_node.html https://www.barrierefreiheit-dienstekonsolidierung.bund.de/Webs/PB/DE/startseite/startseite-node.html I also find the version as implemented by Freiburg quite charming. This is because the links are structured in this way, displayed as a list and it is conveyed in context that the links are jump links on the page.

coraliefeil commented 5 months ago

@yoezlem We got feedback from Damaris. I would like to discuss options and what we would like to provide for this topic in the next pre-refinement session.

coraliefeil commented 2 months ago

I’ve published the design pattern in figma.