Good alt text describes the purpose of the logo to screen reader users.
❌ “image123.jpg” → confusing
✅ “BrightSite company logo” → clear and helpful
(WCAG 1.1.1 Non-text Content)
Descriptive Navigation Labels
Navigation menus should use clear, descriptive link text so all users know where each link goes. Screen readers often pull navigation links into a list, so vague text causes confusion.
❌ Links like “Click Here” or “More” → meaningless out of context
✅ Links like “About Us,” “Services,” “Contact” → clear destinations
(WCAG 2.4.4 Link Purpose, 2.4.6 Headings and Labels)
Clear Heading Structure (H1)
A homepage should have a single, clear <h1> heading that defines the page’s purpose. Assistive technologies use headings to navigate.
❌ Hero styled as bold text, no heading tag → screen readers may skip it
✅ <h1>Accessible Websites for Everyone</h1> → clear and structured
(WCAG 1.3.1 Info and Relationships)
High Contrast & Focus State
Buttons should have strong contrast and visible focus indicators so both sighted and keyboard-only users can see and use them.
❌ Pale grey button, only hover color change → invisible to keyboard users
✅ Dark green button, 4.5:1 contrast, visible outline on focus → accessible
(WCAG 2.4.7 Focus Visible, 1.4.3 Contrast Minimum)
Icons with Text Labels
Icons must always be paired with text so their meaning isn’t lost to users with low vision or screen readers.
❌ Icons only (wrench, phone, book) → unclear and inaccessible
✅ 🔧 Repairs, 📞 Contact, 📖 Resources → icons + descriptive text
(WCAG 1.3.3 Sensory Characteristics, 1.4.1 Use of Color)
Meaningful Alt Text for Images
Images should have alt text that describes their purpose. If the image is decorative, it should have empty alt text (alt="") so screen readers skip it.
❌ alt="picture1.png" → unhelpful
✅ alt="Team member giving a presentation during accessibility workshop" → descriptive and useful
✅ Decorative divider image → alt="" (intentionally ignored by screen readers)
(WCAG 1.1.1 Non-text Content)
Structured Footer with Landmarks
Footers should use headings and semantic landmarks so assistive technology can identify important sections quickly.
❌ “Contact | Social | Legal” as one text line → no structure
✅ <footer><h2>Contact</h2><p>Phone: …</p></footer> → structured and navigable
(WCAG 1.3.1 Info and Relationships, 2.4.1 Bypass Blocks)