Screen Reader Compatibility

When your website is screen reader compatible, you ensure that its structure and content can be correctly interpreted by screen readers used by visually impaired users.

How it helps: It allows users to navigate content, understand structure, and interact with elements through audio feedback.

Example:

Using proper HTML tags like <h1>, <h2>, <p>, and <main> helps screen readers interpret page structure.

Alternative Text for Images

Providing descriptive text for images is a great accessibility practice so users who cannot see them can still understand the content.

How it helps: It ensures that visual information is accessible through screen readers.

Example:

Instead of: <img src="dog.jpg">

Use: <img src="dog.jpg" alt="Golden retriever playing with a ball in a park">

Keyboard Accessibility

Keyboard accessibility means allowing users to navigate and interact with your website using only a keyboard.

How it helps: It supports users who cannot use a mouse due to motor disabilities.

Example:

Users should be able to tab through menus, press Enter to activate buttons, and use Esc to close pop-ups.

Controls for Moving Content

This practice involves giving users control over auto-playing or moving elements like sliders and animations.

How it helps: It prevents distractions and improves usability for users with cognitive disabilities.

Example:

A homepage carousel with pause and play buttons allows users to control movement.

Controls for Timed Content

This best website accessibility practice allows users to extend or manage time-limited actions.

How it helps: It ensures users do not lose progress due to time constraints.

Example:

"Your session will expire in 1 minute. Click here to extend your time."

Labeled Forms

Labeled forms ensure that every form field has a clear and visible label so that users can clearly understand what it means.

How it helps: It helps users understand what information is required and improves screen reader usability.

Example:

Instead of:

<input type="email">

Use:

<label for="email">Email Address</label>

<input id="email" type="email">

Color Contrast

With sufficient color contrast between the font text and background colors, visibility is improved.

How it helps: It improves readability for users with visual impairments.

Example:

Dark text on a white background (contrast ratio 4.5:1 or higher) instead of light grey text on white.

Accessible Downloadable Files

Ensuring PDFs and other documents are structured for accessibility.

How it helps: It allows users to read documents using assistive technologies.

Example:

A tagged PDF with proper headings, alt text, and logical reading order.

Plain Language

Using plain language means using simple and clear language that is easy to understand for every website visitor.

How it helps: It improves comprehension for all users, including those with cognitive disabilities.

Example:

Instead of:

"Commence the submission procedure."

Use:

"Start the application process."

Captions & Audio Descriptions for Videos

You need to provide captions and audio descriptions for all video content for better accessibility.

How it helps: It ensures that users who are hard of hearing or with visual impairment can understand video content.

Example:

Captions showing dialogue and sounds, as well as audio descriptions narrating visual elements like:

Caption - "[Door slams]" or "[Audience applauding]" ; Audio Description - “A man enters the room, carrying a bouquet of flowers.”