accessible-content

Accessible Content

Words are interface. Every label, every heading, every error message is a design decision. This skill ensures content works for screen readers, for people reading in a second language, for people under stress, and for people who just need things to be clear.

When to Use

• Writing interface labels, button text, or form instructions
• Structuring headings and page hierarchy
• Writing error messages or help text
• Creating alt text for images
• Writing link text
• Structuring data tables
• Any time words appear on screen

Process

Step 1: Plain Language First

Every piece of content should meet these criteria:

• Reading level: aim for a reading age of 12-14 (roughly 6th-8th grade). Use short sentences and common words
• One idea per sentence. If a sentence has "and" in the middle, consider splitting it
• Active voice. "We sent your confirmation" not "Your confirmation has been sent"
• Specific over vague. "Save your changes" not "Submit" or "OK"
• No jargon unless the audience demonstrably uses it. When jargon is necessary, provide a plain explanation

Step 2: Heading Structure

Headings are navigation for screen readers. Get the structure right:

• One H1 per page — describes the page purpose
• Headings follow a logical hierarchy — H1 → H2 → H3, never skip levels
• Headings are descriptive — a screen reader user scanning headings alone should understand the page structure
• Do not use headings for visual styling — if you need big bold text that is not a heading, use CSS

Step 3: Form Labels and Instructions

Every form input must have:

• A visible label — placeholders are not labels (they disappear on focus)
• Programmatic association — <label for="id"> or aria-labelledby
• Required field indication — visible and announced, not just an asterisk
• Format hints — "DD/MM/YYYY" before the input, not after
• Error association — aria-describedby linking the input to its error message