*This article is an English translation of a Japanese article.
Web accessibility ensures that all users can comfortably navigate and use websites. Proper HTML markup plays a significant role in achieving accessibility. Correct use of HTML allows users who rely on screen readers, keyboard navigation, and other assistive technologies to interact with a website seamlessly. In contrast, improper HTML can negatively impact accessibility, leading to a poor user experience. This article compares good and bad HTML practices, highlighting key points to improve web accessibility.
Comparison of Good and Bad HTML
1. Use of Headings
Good HTML Example
<h1>Site Title</h1>
<h2>Main Section</h2>
<h3>Subsection</h3>
Key Points:
Proper use of heading tags(<h1> to <h6>) in a logical hierarchy.
Headings clarify the structure of the page, helping screen readers understand the content.
Users can easily navigate between sections using assistive technologies or keyboard navigation.
Bad HTML Example
<div class="title">Site Title</div>
<div class="section">Main Section</div>
<div class="sub-section">Subsection</div>
Key Points:
Using <div> tags instead of heading tags prevents screen readers from recognizing the headings. Lack of proper hierarchical markup makes the page structure unclear.
2. Use of Alternative Text (alt attribute)
Good HTML Example
<img src="flower.jpg" alt="A red rose">
Key Points:
The image includes descriptive alternative text (alt) that conveys the image content to visually impaired users.
Screen readers can properly read the meaning of the image, sharing visual information with users.
Bad HTML Example
<img src="flower.jpg" alt="">
Key Points:
An empty alt attribute leaves visually impaired users unaware of the image’s content. Important images must have appropriate alternative text to convey the necessary information.
3. Link Text
Good HTML Example
<a href="about.html">Read about our company</a>
htmlKey Points:
The link text clearly states the purpose of the link, making it easy to understand. Screen readers can convey the link’s destination clearly to users.
Bad HTML Example
<a href="about.html">Click here</a>
##### Key Points:
“Click here” is vague and doesn’t provide information about the destination of the link. Ambiguous link text can confuse users, especially those relying on screen readers.
4. Form Labels
Good HTML Example
<label for="name">Name</label>
<input type="text" id="name" name="name">
Key Points:
The form field is associated with a proper label, allowing screen readers to announce the field’s purpose. Clear labeling ensures all users understand the required input.
Bad HTML Example
<input type="text" placeholder="Name">
Key Points:
Relying solely on the placeholder attribute means that screen readers may not provide the necessary label information. Placeholders are meant to provide hints and should not replace labels.
5. Color Contrast
Good HTML Example
<p style="color: #000; background-color: #fff;">This text has high contrast.</p>
Key Points:
The text has sufficient color contrast against the background, making it easy to read. The design accommodates users with visual impairments, including those with color blindness or low vision.
Bad HTML Example
<p style="color: #888; background-color: #eee;">This text has low contrast and is hard to read.</p>
Key Points:
- Low contrast makes the text difficult to read, especially for visually impaired users.
- Maintaining a high contrast ratio is essential for accessibility.
Tips for Improving Web Accessibility with HTML
To ensure better web accessibility, it’s important to use accurate HTML markup. Following these points will help create a more inclusive user experience:
Use Meaningful Tags
- Ensure clear page structure by using appropriate HTML elements
(<h1> to <h6>, <p>, <ul>, etc.)so that assistive technologies can interpret the content correctly.
Don’t Forget Alternative Text
- Always provide alternative text for images, videos, and audio content to ensure users with visual or auditory impairments can access the information.
Label Interactive Elements
- Add clear labels to buttons, links, and forms so users understand what action is required or what to expect when interacting with these elements.
Consider Visual Design
- Pay attention to contrast, font size, and color choices to ensure that your design is accessible for users with color vision deficiencies or low vision.
Ensure Keyboard Accessibility
- Verify that all interactive elements can be operated with a keyboard to accommodate users who cannot use a mouse.
Conclusion
Using good HTML practices significantly enhances web accessibility. By following basic guidelines for heading structure, alternative text, link text, form labels, and contrast, you can ensure that all users—whether they have visual, auditory, motor impairments, or are temporarily in a difficult situation—can comfortably navigate and use your website. Web accessibility is an essential step toward creating an inclusive internet for everyone.
We have released the UUU Web Accessibility Widget Tool, designed to make web accessibility easy to implement. This tool helps improve the accessibility of websites quickly and efficiently, even without specialized knowledge.
If you’re interested in enhancing your website’s accessibility, please check out the details. We are here to support you in making your website more user-friendly and accessible to a wider audience.