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 Dec 10, 2020
1 parent c96743e commit 6f6079c
Showing 1 changed file with 4 additions and 11 deletions.
15 changes: 4 additions & 11 deletions src/_components/on-this-page-jump-links.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@ Here is what it looks like:

![on this page jump link specifications]({{site.baseurl}}/images/on-this-page-jump-links.png)

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

## Guidance

Expand All @@ -36,15 +40,4 @@ Because the content on VA.gov can be dense and require exposition, pages can get
- **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

### Package information

* **Package usage:**

* **Requires:**

0 comments on commit 6f6079c

Please sign in to comment.