HTML Intermediate Content
This content has been divided into three parts for better readability:
HTML Accessibility
Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. Here are some key techniques for making your HTML more accessible:
Semantic HTML
Using semantic HTML elements helps assistive technologies understand the structure and meaning of your content.
<!-- Not accessible -->
<div class="header">
<div class="nav">...</div>
</div>
<div class="main">...</div>
<div class="footer">...</div>
<!-- Accessible -->
<header>
<nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>Alternative Text for Images
The alt attribute provides alternative information for an image if a user cannot view it.
<!-- Not accessible -->
<img src="logo.png">
<!-- Accessible -->
<img src="logo.png" alt="Company Logo">
<!-- Decorative image (can use empty alt) -->
<img src="decorative.png" alt="">Form Labels
Always associate form controls with labels using the for attribute.
<!-- Not accessible -->
<p>Username:</p>
<input type="text" name="username">
<!-- Accessible -->
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<!-- Alternative (wrapping) -->
<label>
Username:
<input type="text" name="username">
</label>ARIA Roles and Attributes
ARIA (Accessible Rich Internet Applications) is a set of attributes that define ways to make web content and web applications more accessible to people with disabilities.
<!-- ARIA roles -->
<div role="navigation">...</div>
<div role="main">...</div>
<div role="button" tabindex="0">Click Me</div>
<!-- ARIA states and properties -->
<button aria-expanded="false">Show More</button>
<div aria-hidden="true">Hidden content</div>
<input aria-required="true">Note: It's better to use native HTML elements with built-in accessibility features when possible, rather than adding ARIA roles to non-semantic elements.
Keyboard Navigation
Ensure that all interactive elements are keyboard accessible.
<!-- Use tabindex to make elements focusable -->
<div tabindex="0">This div is now focusable</div>
<!-- Use tabindex="-1" to remove from tab order but allow focus via JavaScript -->
<div tabindex="-1">This div can be focused programmatically</div>
<!-- Avoid tabindex > 0 as it disrupts the natural tab order -->
<!-- Not recommended: -->
<div tabindex="1">This will be tabbed to first</div>Skip Navigation Links
Provide a way for users to skip repetitive navigation links.
<body>
<a href="#main-content" class="skip-link">Skip to main content</a>
<header>
<nav>
<!-- Navigation links -->
</nav>
</header>
<main id="main-content">
<!-- Main content -->
</main>
</body>
<style>
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000;
color: white;
padding: 8px;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
</style>Accessible Tables
Make tables accessible by using proper headers and associations.
<table>
<caption>Monthly Budget</caption>
<thead>
<tr>
<th scope="col">Category</th>
<th scope="col">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Rent</th>
<td>$1,500</td>
</tr>
<tr>
<th scope="row">Utilities</th>
<td>$200</td>
</tr>
</tbody>
</table>Color Contrast
Ensure sufficient color contrast between text and background colors.
WCAG Guidelines for Color Contrast
- AA Level: Contrast ratio of at least 4.5:1 for normal text and 3:1 for large text
- AAA Level: Contrast ratio of at least 7:1 for normal text and 4.5:1 for large text
Use tools like the WebAIM Contrast Checker to verify your color combinations.
Accessible Multimedia
Make multimedia content accessible by providing alternatives.
<!-- Video with captions and transcripts -->
<video controls>
<source src="video.mp4" type="video/mp4">
<track src="captions.vtt" kind="subtitles" srclang="en" label="English">
Your browser does not support the video tag.
</video>
<!-- Audio with transcripts -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<a href="audio-transcript.html">View Transcript</a>Accessible Forms
Make forms accessible by providing clear instructions, error messages, and proper labeling.
<form>
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name" aria-required="true" aria-describedby="name-help">
<p id="name-help" class="help-text">Enter your full name as it appears on your ID.</p>
</div>
<div>
<fieldset>
<legend>Preferred Contact Method:</legend>
<input type="radio" id="contact-email" name="contact" value="email">
<label for="contact-email">Email</label>
<input type="radio" id="contact-phone" name="contact" value="phone">
<label for="contact-phone">Phone</label>
</fieldset>
</div>
<button type="submit">Submit</button>
</form>Testing Accessibility
Test your website's accessibility using various tools and techniques:
- Use keyboard navigation to ensure all interactive elements are accessible
- Test with screen readers like NVDA, JAWS, or VoiceOver
- Use automated testing tools like Lighthouse, axe, or WAVE
- Conduct user testing with people who have disabilities
- Validate your HTML to ensure proper structure
Web Content Accessibility Guidelines (WCAG)
The WCAG provides a set of guidelines for making web content more accessible. The guidelines are organized around four principles:
- Perceivable: Information and user interface components must be presentable to users in ways they can perceive.
- Operable: User interface components and navigation must be operable.
- Understandable: Information and the operation of user interface must be understandable.
- Robust: Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.
For more information, visit the WCAG website.
Practice Exercises
Now that you've learned about intermediate HTML concepts, it's time to practice! Here are some exercises to help you reinforce what you've learned.
Exercise 1: Create a Semantic Blog Layout
Create a blog page with the following elements:
- A proper document structure with DOCTYPE, html, head, and body elements
- A header with a site title and navigation menu
- A main content area with multiple articles
- Each article should have a heading, content, publication date, and author
- A sidebar with related links
- A footer with copyright information
Use semantic HTML elements throughout your page.
Exercise 2: Build a Registration Form
Create a registration form with the following fields:
- Full name (required)
- Email address (required, with validation)
- Password (required, with minimum length)
- Confirm password
- Date of birth
- Gender (radio buttons)
- Interests (checkboxes)
- Country (dropdown)
- Bio (textarea)
- Terms and conditions checkbox (required)
- Submit and reset buttons
Make sure your form is accessible by using proper labels, fieldsets, and ARIA attributes where appropriate.
Exercise 3: Create a Data Table
Create a table displaying product information with the following features:
- A caption describing the table
- Column headers for Product Name, Category, Price, and Stock
- At least 5 rows of product data
- A footer row showing totals
- Use proper table structure with thead, tbody, and tfoot
- Make the table accessible with appropriate scope attributes
Exercise 4: Build an Accessible Media Page
Create a page that includes:
- An embedded video with controls and a poster image
- An audio player with controls
- A responsive image using the picture element
- A simple SVG graphic
- Ensure all media elements have appropriate fallback content and are accessible
Exercise 5: Create an Accessible Navigation
Build a page with:
- A skip navigation link
- A main navigation menu with dropdown submenus
- Breadcrumb navigation
- Pagination links
- Ensure all navigation elements are keyboard accessible and properly labeled