Skip to content

Commit 6f6079c

Browse files
authoredDec 10, 2020
Update on-this-page-jump-links.md
1 parent c96743e commit 6f6079c

File tree

1 file changed

+4
-11
lines changed

1 file changed

+4
-11
lines changed
 

‎src/_components/on-this-page-jump-links.md

+4-11
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@ Here is what it looks like:
2222

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

25+
## Accessibility
26+
- **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.
27+
- **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.
28+
- **Allow enough spacing between components.** Space should be 1.5 rem (36px) from the bottom of the descender to the top of the ascender.
2529

2630
## Guidance
2731

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

39-
### Accessibility
40-
- **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.
41-
- **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.
42-
- **Allow enough spacing between components.** Space should be 1.5 rem (36px) from the bottom of the descender to the top of the ascender.
43-
44-
### Implementation
45-
46-
### Package information
47-
48-
* **Package usage:**
4943

50-
* **Requires:**

0 commit comments

Comments
 (0)
Please sign in to comment.