HTML Accessibility: Making Websites Friendly for All Users
Learn the basics of web accessibility including alt text, form labels, ARIA attributes, and keyboard navigation so your website can be used by everyone.
RazakTerra- Reading time
- 1 min read
- Comments
- Discussion
On this page
Accessibility means making your website usable for as many people as possible, including those who rely on screen readers, keyboard navigation, or other assistive tools.
Basic Accessibility Practices
1. Use Alt Text for Images
<img style="height: 300px" src="https://images.pexels.com/photos/8371472/pexels-photo-8371472.jpeg" alt="Orange cat sleeping on a chair" />
2. Label Your Form Inputs
<label for="email">Email:</label> <input type="email" id="email" name="email" />
3. Use Semantic HTML
Tags like <nav>, <main>, <header>, and <footer> help screen readers understand the page structure.
4. Make Sure the Site Works with Keyboard
Users should be able to navigate using the Tab key. Avoid removing focus outlines unless you replace them with a clear alternative.
5. Use ARIA When Needed
ARIA attributes can add extra meaning when HTML alone isn’t enough:
<button type="button" aria-label="Close" class="close-button">
<svg
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
d="M6 6L18 18M18 6L6 18"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
/>
</svg>
</button>
<style>
.close-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: 1px solid #d4d4d4;
border-radius: 8px;
background: #ffffff;
color: #525252;
cursor: pointer;
transition:
background-color 150ms ease,
border-color 150ms ease,
color 150ms ease;
}
.close-button:hover {
background: #f5f5f5;
border-color: #a3a3a3;
color: #171717;
}
.close-button:active {
background: #e5e5e5;
}
.close-button:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
}
</style>
Quick Tips
- Don’t rely on color alone to convey important information.
- Write descriptive link text (avoid “click here”).
- Make sure text has enough contrast against the background.
- Test your page with a keyboard only.
Good accessibility doesn’t just help people with disabilities — it usually improves the experience for everyone.
Written by
Razak
Writes about the web, slowly, and builds small tools on the side.
Keep reading
Read next
1 minBest Practices for Writing Clean and Valid HTML
A collection of HTML best practices including proper indentation, naming, W3C validation, and common beginner mistakes you should avoid.
Read article
2 minGetting to Know HTML Iframe: How to Embed YouTube and Google Maps
How to use the HTML <iframe> tag to embed content from other sites, like a YouTube video or a Google Map, inside your own page.
Read article
1 minHow to Create Forms in HTML for Beginners
A beginner's guide to HTML forms: how the <form> tag sends data for logins, sign-ups and contact messages, starting from the basics.
Read article
Discussion
Comments
Loading comments…