Understanding Accessible HTML
Accessible HTML helps make webpages usable by people with different abilities, devices, and ways of interacting with the web.
Accessibility begins with well-structured HTML. Using the correct elements, meaningful text, keyboard-accessible controls, text alternatives, and other built-in HTML features gives browsers and assistive technologies useful information about the content and how it works.
What Is Web Accessibility?
Web accessibility means designing and developing websites so people can perceive, understand, navigate, and interact with their content regardless of disability or the technology they use to access the web.
Accessibility can benefit people with visual, hearing, mobility, speech, cognitive, and neurological disabilities. It can also improve usability for people experiencing temporary or situational limitations, such as an injured hand, bright sunlight, a noisy environment, or a device without a mouse.
Why Accessibility Matters
The web is used for communication, education, employment, shopping, government services, entertainment, and many other parts of everyday life. When a webpage creates unnecessary barriers, some visitors may be unable to access information or complete important tasks.
Accessible design can also improve the experience for everyone. Clear headings make pages easier to scan, descriptive links make navigation easier to understand, captions help when audio cannot be heard, and keyboard-friendly controls provide another way to interact with a page.
Accessibility Starts with HTML
HTML includes many accessibility features by default. Native elements communicate their purpose and structure to browsers and assistive technologies when they are used correctly.
For example, a real <button> element already provides button semantics and keyboard behavior. Recreating a button with a generic <div> usually requires additional work to provide behavior that the native element already includes.
<button type="button">Show Details</button>Choosing the appropriate HTML element is therefore one of the simplest and most important accessibility practices.
Use Semantic HTML
Semantic HTML describes the meaning and purpose of content rather than only how it should look. Elements such as <header>, <nav>, <main>, <article>, <section>, and <footer> help identify the major areas of a webpage.
Headings, lists, tables, links, buttons, and form controls also provide useful semantics. Assistive technologies can use this structure to help people understand and navigate a document.
<main>
<h1>Gardening Guide</h1>
<section>
<h2>Choosing Plants</h2>
<p>Choose plants suited to your climate and growing conditions.</p>
</section>
</main>The next tutorial looks more closely at the relationship between Semantic HTML & Accessibility.
Support Keyboard Access
Not everyone navigates a webpage with a mouse or touchscreen. Some people use a keyboard or another device that provides keyboard-like controls.
Interactive elements should be reachable and usable from the keyboard. Native links, buttons, and form controls already provide much of this functionality when used as intended.
<a href="/contact.html">Contact Us</a>
<button type="submit">Send Message</button>Keyboard users should also be able to see which interactive element currently has focus. The Keyboard Navigation and Keyboard Focus tutorials cover these topics in more detail.
Provide Text Alternatives
Images that communicate information need appropriate text alternatives so their purpose or content is available when the image cannot be seen.
<img src="/img/images/garden-path.jpg" alt="Stone path leading through a flower garden">The alt attribute should describe information that is important in the context of the page. Decorative images generally use an empty alt="" so assistive technologies can ignore them.
Text alternatives are covered in greater detail in the Accessible Images tutorial.
Label Forms and Controls
Form controls should have labels that clearly identify what information or action is expected. Associating a <label> with its form control also makes the label useful to assistive technologies and provides a larger clickable area for many controls.
<label for="email">Email Address</label>
<input type="email" id="email" name="email">Instructions, required fields, validation messages, and errors should also be understandable without relying only on visual position or color. These techniques are covered further in Accessible Forms.
Consider Visual Accessibility
Readable text and sufficient contrast help people distinguish content and interface controls. Information should not depend on color alone because visitors may perceive colors differently or may not see them at all.
Links, form states, warnings, and other important information can use text, icons, patterns, underlines, or other visual cues in addition to color. The Color & Contrast tutorial covers these considerations in more detail.
Assistive Technologies
Assistive technologies help people interact with computers and webpages in ways suited to their needs. Examples include screen readers, screen magnifiers, speech recognition software, alternative keyboards, switch devices, and other input or output tools.
Good HTML gives these technologies meaningful information to work with. A properly marked heading can be recognized as a heading, a button as a button, and a labeled form control by its purpose rather than merely by its visual appearance.
The Screen Readers tutorial explains how screen-reading software interacts with webpage content.
Accessibility Standards
The Web Content Accessibility Guidelines (WCAG), developed through the W3C Web Accessibility Initiative (WAI), provide internationally recognized recommendations for improving web accessibility.
WCAG organizes accessibility around four principles: content and interfaces should be perceivable, operable, understandable, and robust. These principles are commonly abbreviated as POUR.
Accessibility involves more than meeting a checklist, but standards provide useful requirements and testing criteria for identifying and preventing common barriers.
Testing Accessibility
Accessibility should be considered while a webpage is being built rather than checked only after the site is finished. Testing throughout development makes problems easier to identify and correct.
Useful checks include navigating the page using only the keyboard, reviewing heading structure and form labels, checking image alternatives and color contrast, zooming or resizing content, and testing with assistive technology when possible.
Automated accessibility tools can identify many common problems, but they cannot determine whether every design or content decision is understandable and usable. Manual review remains an important part of accessibility testing.
Best Practices
- Start with semantic HTML and use native elements whenever they provide the behavior you need.
- Organize content with meaningful headings and a logical document structure.
- Make links, buttons, forms, and other controls usable with a keyboard.
- Provide useful text alternatives for meaningful images.
- Associate form controls with clear labels and understandable instructions.
- Maintain sufficient contrast and avoid communicating important information with color alone.
- Provide captions or other appropriate alternatives for audio and video content.
- Use ARIA when it adds accessibility information that native HTML cannot provide, rather than replacing appropriate native HTML.
- Test accessibility throughout development using both automated and manual methods.
Summary
Accessible HTML begins with choosing elements that accurately describe content and provide expected browser behavior. Semantic structure, keyboard access, text alternatives, labels, readable visual presentation, and accessible media all contribute to webpages that more people can use.
The tutorials in this section examine each of these areas individually, beginning with how semantic HTML provides an accessible foundation for webpage structure and content.