THE GITHTML FIELD GUIDE
Give document navigation enough space for touch
Give standalone navigation links comfortable padding and separation, and avoid packing several tiny targets into one line. Let labels wrap without overlapping adjacent controls. Review inline links and footnotes in context rather than applying one oversized-button treatment everywhere; the goal is accurate selection while preserving a readable document.
Find the crowded choices
The most difficult targets often live in contents lists, citation markers, tag rows, and compact navigation bars. A single link in a paragraph may be easy to use, while six adjacent one-character markers are not. Inspect groups of choices where a small targeting error sends the reader somewhere different.
A report does not need to imitate an application's toolbar. A vertical contents list with descriptive labels can be easier to use on a phone than a narrow row of abbreviated tabs. If the list is long, reduce it to meaningful section destinations rather than shrinking every item to fit above the fold.
Design the hit area without hiding the label
Padding can enlarge a link's active area, but it must not cause overlap with neighboring targets or obscure text. Keep the label visible and recognizable as a link. Avoid relying on hover styling to reveal where the target is, since a touch reader may never encounter that state.
Use real anchors for navigation and native summaries for disclosures. Do not attach navigation to an entire paragraph when only a small phrase looks linked; the mismatch can cause accidental activation while selecting text. Conversely, do not make only a tiny icon active when the adjacent words appear to describe the same action.
Check the actual mobile layout
Review the document in portrait orientation and with enlarged text. Labels that fit neatly at the default size may wrap into adjacent targets later. The WCAG target-size guidance includes specific requirements and exceptions; this practical review is not a substitute for evaluating those details when making a conformance claim.
- Tap neighboring section links and check for accidental destinations.
- Inspect citation markers and return links near footnotes.
- Allow long labels to wrap naturally.
- Keep separate controls visually and spatially distinct.
- Check focus styling too, since the same navigation may be used with a keyboard.
- Do not remove descriptive words solely to make the navigation look compact.
nav ul { list-style: none; padding: 0; }
nav li + li { margin-block-start: .35rem; }
nav a { display: block; padding: .7rem .5rem; }
summary { padding-block: .65rem; }Sources and further reading
AI-assisted writing with source-linked guidance and illustrative examples. Read our editorial approach or report a correction.