HTML Accessibility
What Is It?
Accessible HTML helps more people use your page, including people who use a keyboard or screen reader.
What the Tags Mean
label: names a form field.alt: explains an image.button: works with a mouse and keyboard.- Headings: explain the page structure.
Example 1
Save each example as index.html and open it in your browser. Each code block is a complete page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Accessibility</title>
</head>
<body>
<label for="email">Email address</label>
<input id="email" type="email">
<button type="button">Continue</button>
</body>
</html>Browser preview
What you see: The field has a visible name. Tab moves focus between the input and button.
Example 2: Another Use
The included garden illustration has alternative text that describes it. Change the description when you use a different image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Accessibility</title>
</head>
<body>
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22200%22%20viewBox%3D%220%200%20400%20200%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22lightblue%22%2F%3E%3Ctext%20x%3D%2220%22%20y%3D%22100%22%20font-size%3D%2224%22%3ESample%20garden%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Sample garden illustration">
</body>
</html>Browser preview
Simple Tip
Do not make color the only way to explain something. Write clear words such as Required or Error too.
Try It Yourself
Use only Tab and Shift+Tab to move through a form. Can you see which field has focus?