Accessibility Features & Standards

C2 — Building accessibility in, not bolting it on

Alt text

Every meaningful image needs an alt attribute describing it for screen-reader users and for cases where the image fails to load:

<img src="img_product_tshirt.jpg" alt="Green organic cotton t-shirt, front view">

A purely decorative image (with no informational content) should use alt="" so screen readers skip it, rather than a meaningless description.

Zoom features

A page is accessible under zoom when a visitor can enlarge it — the browser's built-in zoom (Ctrl/Cmd + "+", or pinch-to-zoom on a touchscreen) — without content overlapping, being cut off, or becoming impossible to navigate. One line in the <head> commonly breaks this by accident:

<!-- Blocks zoom - avoid this -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<!-- Allows zoom - use this instead -->
<meta name="viewport" content="width=device-width, initial-scale=1">

maximum-scale=1 and user-scalable=no deliberately disable pinch-zoom — a real accessibility barrier for any visitor with low vision, not just a styling choice. Sizing text and layout in relative units (rem, em, %, covered in Lesson 17/18) rather than fixed pixels is what lets the page actually reflow cleanly once someone zooms in.

Text-to-speech

Text-to-speech tools — a device's built-in screen reader (VoiceOver, Narrator, TalkBack) or a browser read-aloud extension — read a page's content aloud instead of displaying it. They depend on exactly the two things above: alt text standing in for images, and semantic HTML/labelled form fields giving the tool something structured to read out. One more thing matters specifically here: a logical heading order — one <h1> per page, then <h2>s, then <h3>s correctly nested under the right <h2>, without skipping a level:

<h1>GreenLeaf Organic Foods</h1>
  <h2>Our Produce</h2>
    <h3>Weekly Vegetable Boxes</h3>
  <h2>Contact Us</h2>

Jumping straight from an <h1> to an <h3> can still look fine visually, but it breaks the outline text-to-speech users rely on to jump between sections.

WCAG, W3C and semantic HTML

• WCAG (Web Content Accessibility Guidelines) sets the standard most legal and best-practice accessibility requirements are based on — covering contrast, keyboard access, captions and more.
• W3C publishes the standards that define HTML, CSS and how browsers should interpret them.
• Semantic HTML (<nav>, <button>, <label> rather than generic <div>s for everything) means assistive technology automatically understands your page's structure and controls, without extra work.

Validating your HTML

Run your pages through the W3C Markup Validation Service — invalid HTML (unclosed tags, missing attributes) can cause browsers and assistive technology to render pages inconsistently, which is why the scheme flags "closing tags is optional" as a misconception to avoid from Lesson 15 onward.

Task

Audit your own site against this lesson: check every image has appropriate alt text, every form field has a <label>, your heading order doesn't skip a level, your viewport meta tag doesn't block zooming, and validate your HTML through the W3C validator, fixing any errors it reports. As an extension, compare your site's accessibility against one other real website's, and note one thing it does better than yours.