Skip to content

Commit

Permalink
Update on-this-page-jump-links.md
Browse files Browse the repository at this point in the history
  • Loading branch information
CrystabelReiter authored Oct 13, 2020
1 parent 6ae1f59 commit 9b093f6
Showing 1 changed file with 6 additions and 0 deletions.
6 changes: 6 additions & 0 deletions src/_components/on-this-page-jump-links.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,14 @@ Because the content on VA.gov can be dense and require exposition, pages can get
* If the content you want users to see is too far down the page, consider the rearranging the content to achieve the desired hierarchy.

### Usability guidance: how to use it
- **Keep the first link and its corresponding heading close together.** Keeping the links and headings in close proximity helps users make the connection that the links correspond to sections on the page.
- **For content pages, include a minimum of two H2 sections.** The article should have a minimum of two H2 sections in order to display the on this page component links.
- **Do not use components for very short sections if we can display sections on one screen.** If using this component for 2 sections, do not use components if sections are very short.

### Accessibility
- **Heading levels should only increase by one.** The proper order of heading levels conveys the structure of the page for users who use screen readers. When heading elements are applied correctly, the page becomes much easier to navigate for screen reader users and sighted users alike.
- **The focus should be on the destination.** When a user clicks on an item on this page component, the focus should move to the heading that it’s linked to.
- **Allow enough spacing between components.** Space should be 1.5 rem (36px) from the bottom of the descender to the top of the ascender.

### Implementation

Expand Down

0 comments on commit 9b093f6

Please sign in to comment.