Accessibility Basics

Making websites accessible means designing and developing them so that people with disabilities can perceive, understand, navigate, and interact with them. It’s about creating an inclusive web for everyone.

What is Web Accessibility?

Web accessibility (often shortened to a11y) is the practice of making web content and applications usable by as many people as possible, regardless of their abilities. This includes people with visual, auditory, motor, and cognitive disabilities. It’s not just the right thing to do; it’s also often required by law in many places. Accessible websites provide a better user experience for everyone, not just those with disabilities!

Basic Example: Semantic HTML

Using semantic HTML is a fundamental part of accessibility. Semantic HTML uses elements that clearly describe their meaning to both the browser and the user, including assistive technologies like screen readers.

<!-- Bad: Generic divs with no meaning -->
<div>
  <div class="header">My Website</div>
  <div class="content">This is the main content.</div>
  <div class="footer">Copyright 2023</div>
</div>
 
<!-- Good: Semantic HTML for structure -->
<header>
  <h1>My Website</h1>
</header>
<main>
  <p>This is the main content.</p>
</main>
<footer>
  <p>Copyright 2023</p>
</footer>

Explanation: The “Good” example uses <header>, <main>, and <footer> tags. These tags provide semantic meaning to the structure of the page, allowing screen readers to easily identify the different sections. This is much better than just using generic <div> elements.

Practical Usage: Alt Text for Images

Alt text (alternative text) provides a textual description of an image. This is crucial for users who cannot see the image, such as those using screen readers or those with slow internet connections.

<!-- Bad: No alt text -->
<img src="cute-cat.jpg">
 
<!-- Good: Alt text describing the image -->
<img src="cute-cat.jpg" alt="A fluffy orange cat sleeping in a sunbeam.">
 
<!-- Good: Alt text is empty if the image is purely decorative -->
<img src="decorative-border.png" alt="">

Explanation: The alt attribute within the <img> tag is where you put the description. The first example is missing the alt attribute which means the screen reader won’t know what the image is. The second example provides descriptive alt text, crucial for understanding the image’s content. If the image is purely decorative and doesn’t convey any meaning, use an empty alt="" value.

Key Takeaways

• Use Semantic HTML: Use HTML elements like <header>, <nav>, <main>, <article>, <aside>, and <footer> to structure your content logically.
• Provide Alt Text for Images: Always include descriptive alt text for images that convey information. Use an empty alt="" for purely decorative images.
• Ensure Sufficient Color Contrast: Make sure there’s enough contrast between text and the background to make the content readable for people with visual impairments.
• Test with a Screen Reader: Use a screen reader (like NVDA or VoiceOver) to test your website’s accessibility and understand how users with disabilities will experience it.