Introduction, Beginners guide to Web Page Accessibility Checker

Images: The alt Attribute

Purpose: Describes images for screen readers and displays when images fail to load.

Examples:

• <img src="logo.png" alt="Acme Company"> - Logo with company name
• <img src="divider.png" alt=""> - Decorative divider
• <img src="chart.png" alt="Sales increased 40% in Q4"> - Informative chart

Form Fields: <label> vs aria-label vs title

Use <label> first (preferred): Visible text that screen readers announce and users can click to focus the field.

• <label for="email">Email:</label> <input id="email">
• Or wrap: <label>Email: <input></label>

Use aria-label: When you can't add a visible label (like icon-only search fields).

• <input type="search" aria-label="Search products">

Avoid title attribute: Only appears on hover, not accessible to keyboard/touch users, not announced consistently by screen readers. Use <label> or aria-label instead.

Buttons: Text vs aria-label vs title

Use visible text (preferred): Best for usability and accessibility.

• <button>Submit Form</button>

Use aria-label for icon-only buttons:

• <button aria-label="Close dialog">?</button>
• <button aria-label="Play video">?</button>

Avoid title on buttons: If the button already has visible text or aria-label, title is redundant. Screen readers might announce both, creating confusion.

Links: Text vs title Attribute

Use descriptive link text (always):

• <a href="/pricing">View pricing plans</a>

The title attribute on links:

• Usually unnecessary if link text is already clear
• Only use when providing truly additional context not in the link text
• Don't repeat the link text in the title attribute

Quick Decision Tree

For Images: Always use alt attribute (use alt="" if decorative)

For Form Fields:

1. Can you add visible text? Use <label>
2. No visible label possible? Use aria-label
3. Never rely on title or placeholder alone

For Buttons:

1. Can you add visible text? Just use text content
2. Icon-only button? Use aria-label
3. Don't add title if you already have text or aria-label

For Links:

1. Make link text descriptive (never "click here")
2. Only use title if adding genuinely useful info (file size, format)
3. Never duplicate link text in title