Make Page Structure and Images Accessible
A practical starting point for headings, control names, informative images, and charts, with clear boundaries between content review and conformance evaluation.
By Design Audit Team · Updated
Separate visual emphasis from document structure
A large line of text is not necessarily a heading in the document. Conversely, using a heading only to obtain a preferred font size can suggest a structure the page does not have. Review the actual hierarchy as well as its appearance.
For a product page, section names should describe the content they introduce. A specifications section and a support section need meaningful relationships, not just matching typography. Consult the relevant WCAG requirements when assessing the implementation.
Give controls names that identify their purpose
An icon-only control may be recognizable visually while lacking a useful accessible name. Identify the action it performs and check how that action is exposed to assistive technology. Naming an icon’s shape is not always the same as naming its purpose.
For example, a magnifying-glass control may open search rather than enlarge the current image. Context determines the appropriate name. Visible field labels and programmatic relationships should also remain meaningful when the form is completed or showing an error.
Choose image alternatives by purpose
The same photograph can be decorative in one context and informative in another. Ask what information the reader would lose if the image were unavailable. A decorative image generally needs an empty alternative; an informative image needs the relevant information conveyed in text.
For a chart, a short label such as “Revenue chart” does not convey the comparison. Provide the important trend or conclusion and access to the underlying detail in a suitable form. Do not attempt to compress a complex dataset into a long, difficult-to-navigate image description.
Keep unreviewed behavior visible
Content and structure review cannot establish whether a menu works from the keyboard, focus remains visible, or a dynamic message is announced appropriately. Follow the actual interactions separately and record what has not been evaluated.
Automated checks can surface issues, but a clean result is not an accessibility certificate. Use the standard and appropriate human evaluation to determine conformance. The companion modal article demonstrates why an interaction sequence needs more than a screenshot.
Review checklist
- Review semantic headings separately from visual styling.
- Name controls by purpose in their actual context.
- Choose image alternatives according to the information conveyed.
- Provide useful detail beyond a chart’s short label.
- Record interaction states that remain unevaluated.