How to Structure your HTML Properly for Web Accessibility ?

Last Updated : 21 Mar, 2024

Structuring HTML properly for web accessibility is fundamental in creating inclusive websites that meet the needs of users of all abilities. By following best practices in HTML markup, you ensure that content is organized and presented in a way that is understandable and usable by assistive technologies such as screen readers. This involves using semantic HTML elements like ‘<header>’, ‘<nav>’, ‘<main>’, ‘<section>’, ‘<article>’, and ‘<footer>’ to provide a clear and logical structure to your content.

Benefits of Accessible HTML

Inclusivity: Web accessibility means using clear HTML tags, headings, and descriptive attributes to make sure that everyone, including people with disabilities, can easily understand and move around your website. This includes giving short descriptions for images, stating the language of your content, using clear link text, and making data tables easy to use for people who rely on screen readers.
SEO Friendliness: Web accessibility means setting up your webpage so that it can be easily understood and used by as many people as possible, including those with disabilities or impairments.”
Mobile Responsiveness: Creating a website that is easier to use on mobile devices. This approach benefits all users, including those with disabilities, by making navigation smoother and content easier to interact with on smartphones and tablets.

Structure Your HTML for Web Accessibility

Semantic HTML: Using HTML elements like <h1> for headers, <p> for paragraphs, <button> for buttons, etc. explicitly expresses their meaning and purpose. This makes it easier for both users and assistive technologies like screen readers to understand and interact with the content correctly.
The heading is Important: We can use <h1> for the main title and <h2> to <h6> for subheadings to structure your content hierarchically. This practice helps users and search engines understand the importance and relationship between different sections of your webpage, making it easier to navigate and comprehend.
Alternative Text: Add the descriptions to images using the “alt” attribute in “<img>” elements. This text description is crucial for users who rely on screen readers or when images fail to load, as it provides them with information about the image content. Including meaningful “alt” text improves accessibility and ensures that all users can access and understand the webpage’s content.
Declare the Language using the Uselang attribute: Using the “lang” attribute in the “<html>” tag to indicate the main language of the document. For example, <html lang=”en”> specifies that the document is primarily in English. This helps browsers and screen readers understand the language of the content for better accessibility and user experience.
Meaningful Link Text: In the link text we have to Ignore the generic phrases like “Click Here” or “Learn More” for links. Instead, use descriptive text that indicates the destination or action of the link. This helps users understand the purpose of the link before clicking, improving usability and user experience.
Accessible data tables: Use HTML table elements like <table>, <tr>, and <td> to structure tabular data in a meaningful way. Include a <caption> to describe the table’s content and use <th> for column headers. This helps users understand the data’s organization and improves accessibility for screen readers.

Examples: Implementation of Structured HTML for Web Accessibility

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Accessible Website Example</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <h1>Welcome to Our Accessible Website</h1>
    </header>

    <nav>
        <ul>
            <li><a href="#about-us">About Us</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>

    <main>
        <h2>About Us</h2>
        <p>We are a company dedicated to 
          creating accessibleand user-friendly
          websites. We believe everyone 
           deserves a positive web experience.
          </p>

        <img alt="GFG Logo" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240316121026/GFG-logo.jpg">

        <h2>Services</h2>
        <p>We offer a variety of web development
           services, including:
          </p>
        <ul>
            <li>Accessible HTML and CSS coding</li>
            <li>Website design and development</li>
            <li>Content creation and management</li>
        </ul>

        <h2>Contact</h2>

        <address>123 Main Street,
          Anytown, CA 12345</address>

        <p id="contact-info">
            Our office address is:
        </p>

        <form>
            <label for="name">Name:</label>
            <input type="text" id="name"
                   name="name" required>

            <label for="email">Email:</label>
            <input type="email" id="email"
                   name="email" required>

            <label for="message">Message:</label>
            <textarea id="message"
                      name="message"
                      required></textarea>

            <button type="submit">Send Message</button>
        </form>
    </main>


    <footer>
        <p>&copy; 2024 Accessible
          Website Example</p>
    </footer>
</body>

</html>

CSS

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
}

h1,
h2,
h3 {
    margin: 1em 0;
    padding: 0;
    font-weight: bold;
}

p {
    margin: 0.5em 0;
    line-height: 1.5;
}

img {
    max-width: 50%;
    display: block;
    margin: 1em auto;
}

header {
    background-color: #343a40;
    color: #fff;
    padding: 1em;
    text-align: center;
}

nav {
    background-color: #e9ecef;
    padding: 0.5em;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

nav li {
    display: inline-block;
    margin: 0 1em;
}

nav a {
    text-decoration: none;
    color: #343a40;
}

nav a:hover {
    color: #007bff;
}

main {
    padding: 1em;
    margin: 0 auto;
    max-width: 800px;
}

#contact-info address {
    font-style: italic;
}

form {
    margin: 1em 0;
}

label {
    display: block;
    margin-bottom: 0.5em;
}

input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 4px;
}

textarea {
    height: 100px;
}

button[type="submit"] {
    background-color: #007bff;
    color: #fff;
    padding: 0.5em 1em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button[type="submit"]:hover {
    background-color: #0062cc;
}

footer {
    background-color: #343a40;
    color: #fff;
    padding: 1em;
    text-align: center;
}