HTML Course 11.1 Basic accessibility principles

HTML Course 11.1: Basic Accessibility Principles

Ensuring web content is accessible means that people with disabilities—visual, auditory, motor, or cognitive—can perceive, understand, navigate, and interact with the web. Below are the foundational principles and techniques you should apply in all HTML projects.

1. Use Semantic HTML

Semantic elements convey meaning to browsers and assistive technologies:

• <header>, <nav>, <main>, <footer> outline page structure.
• <section> and <article> group related content.
• <h2>–<h6> establish a logical heading hierarchy.
• <ul>, <ol>, <table> represent lists and tabular data properly.

2. Provide Text Alternatives

Non-text content needs an equivalent:

• Images: Use alt attributes that succinctly describe purpose or content.
• Multimedia: Provide captions for videos, transcripts or audio descriptions.
• Icons/Decorations: If purely decorative, set alt='' so screen readers skip them.

3. Label Form Controls Clearly

Each form control must have an accessible name:

• Pair <label for='id'>…</label> with id on the control.
• Or wrap the control in a label: <label><input> Name</label>.
• Use aria-describedby for extended instructions.

Example: Accessible Login Form

  
  Username:
  

  
  Password:
  
  
Your password must be at least 8 characters.

  Log In

  

4. Ensure Keyboard Accessibility

All interactive elements must be operable via keyboard alone:

• Use native controls (<button>, <a> with href).
• Manage custom widgets with tabindex and appropriate ARIA roles.
• Visible focus indicators: do not remove default focus outlines.

Example: Skip Navigation Link

Skip to main content




  

  

5. Use ARIA Roles and Properties Judiciously

ARIA (Accessible Rich Internet Applications) fills gaps in native HTML:

• Prefer native semantics; only add ARIA when necessary.
• Examples of roles: role='button', role='alert', role='dialog'.
• ARIA states/properties: aria-expanded, aria-checked, aria-live.

Example: Custom Toggle Button with ARIA

  Enable Dark Mode



  

6. Maintain Sufficient Color Contrast

Text and interactive elements must meet contrast ratios:

• Normal text: at least 4.5:1 against its background.
• Large text (18pt or 14pt bold): at least 3:1.
• Use online tools (WebAIM Contrast Checker) to verify.

7. Structure Content with Headings and Landmarks

Clear structure helps screen reader users understand page organization:

• Use headings in order without skipping levels (e.g., <h2> before <h3>).
• Landmark roles or elements (<nav>, <aside>, <main>).

8. Provide Feedback and Status Updates

Dynamic content changes need to be announced:

• Use aria-live='polite' or aria-live='assertive' on containers showing updates.
• For validation errors, link aria-describedby from input to error message.

Example: Live Region for Notifications

Summary

By integrating these practices into your HTML, you create inclusive experiences that work for everyone. Always test with screen readers, keyboard-only navigation, and contrast analyzers to validate your implementation.