From 9b093f69146eab8e598053b6b6fa9e0b7098b6ad Mon Sep 17 00:00:00 2001 From: CrystabelReiter Date: Tue, 13 Oct 2020 12:27:26 -0400 Subject: [PATCH] Update on-this-page-jump-links.md --- src/_components/on-this-page-jump-links.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/_components/on-this-page-jump-links.md b/src/_components/on-this-page-jump-links.md index a72110d95..5df747e05 100644 --- a/src/_components/on-this-page-jump-links.md +++ b/src/_components/on-this-page-jump-links.md @@ -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