internetarchive / internetarchive/openlibrary

Add Skip Links to Bypass Blocks of Navigation

Open
#5,012 1 comment 0 reactions 0 assignees View on GitHub
Lead: @jimchamp Needs: Community Discussion Needs: Help Needs: Response Priority: 4 Theme: Accessibility
Dominant language
Python
Stars
6.7k
Forks
2k
Avg merge
2d 19h
Merged PRs (30d)
138

Description

WCAG 2.1 [2.4.1 Bypass Blocks](https://www.w3.org/WAI/WCAG21/Understanding/bypass-blocks) includes requirements that users are able to easily skip past repeated blocks of content on the site.

This, generally, means a link that allows users to quickly skip to the main section of the page (or at least past the navigation). A good [skip link example can be found on the WebAIM site](https://webaim.org/techniques/skipnav/) - (navigate to the page & press tab & the link should display).

### Describe the problem that you'd like solved
Open Library would definitely benefit from a skip link - however, I think this merits discussion of where & how many skip links should be included. While the WebAIM site includes one skip link, this is not the only design available. For instance, [the LFLegal website includes multiple skip links](https://www.lflegal.com/), allowing users to skip to desired parts of the page.

For an open library example, [a works page](http://staging.openlibrary.org/works/OL66347W/The_Crucible) includes the main navigation, the edition sidebar (.editionCover), the info about the edition (.editionAbout) - which can contain a sizeable amount of information & links, before getting to the work's footer (.workFooter) & the page history (#pageHistory).

The goal of multiple links is to reduce the amount of time keyboard users have to tab through content to get to the content they're interested in. As Open Library contains a number of very link / content-heavy pages, I think we should seriously consider multiple skip links.

### Proposal & Constraints
Implementing the skip links should be fairly easy, but I think we should first decide **how many** & **where** we should add our skip links. At a certain point there's a tradeoff between quickly getting users to the parts of the page they want & giving them too many places to jump to.

Some initial options that seem like good contenders to me:

- Skip Heading Navigation (this, definitely)
- Skip to Available Editions?
- Skip to History?
- I'm sure there are other options

### Additional context
Some additional Skip link links:
- [CSS Tricks - How to Create a "Skip to Content" Link](https://css-tricks.com/how-to-create-a-skip-to-content-link/)

### Stakeholders

Contributor guide

Open the contributing guide

Research direction

Start by reviewing the WCAG 2.1 Bypass Blocks guidance and the linked WebAIM example, then inspect representative Open Library pages such as the works page described in the issue. Decide which repeated sections need skip links and document the chosen targets; done means keyboard users can bypass navigation and other agreed content blocks.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html
Domain
accessibility, frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.