The A11Y Checklist

HTML - Good Semantics

Good semantics in HTML refers to the practice of using HTML elements in a way that accurately conveys the meaning and structure of the content on a web page. Semantics in HTML are important because they not only help search engines and assistive technologies understand the content but also make the code more maintainable and readable for developers.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum obcaecati.

Sample HTML5 semantic format below:

To access the HTML page for this HTML5 and CSS3 semantic page click this link here


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantic HTML Example</title>
    <link rel="stylesheet" href="styles.css"> 
</head>
<body>
    <header>
        <h1>Welcome to a11ychecks.com website</h1>
        <nav aria-label="global">
            <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
             <form role="search">
            
             </form>
        </nav>
    </header>
    <nav aria-label="main">
    </nav>
    <main>
        <section id="about">
            <h2>About Us</h2>
            <p>We are a passionate team of accessibility developers dedicated to creating amazing web experiences.</p>
        </section>

        <section id="services">
            <h2>Our Services</h2>
            <article>
                <h3>Web Accessibility Design</h3>
                <p>We create stunning and user-friendly web designs tailored to your needs.</p>
            </article>
            <article>
                <h3>Web Accessibility Development</h3>
                <p>Our developers build robust and scalable web applications using the latest technologies.</p>
            </article>
        </section>
    </main>

    <aside>
        <h2>Latest News</h2>
        <article>
            <h3>New Product Launch</h3>
            <p>Introducing our latest product that will revolutionize the accessibility industry.</p>
        </article>
    </aside>

    <footer>
        <p> @ 2023 a11ychecks.com Website. All rights reserved.</p>
    </footer>
</body>
</html>

In the above example:

→<header> represents the header section of the page.
→<nav> is used for navigation menus.
→<main> contains the main content of the page.
→<section> is used to group related content sections.
→<h1>, <h2>, and <h3> represent headings with varying levels of importance.
→<article> is used for self-contained content.
→<aside> represents a sidebar or supplementary content.
→<footer> contains the footer of the page.

HTML5 Sectioning elements

Sample ARIA Landmark roles format below:



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ARIA Landmark role</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div role="banner">
        <h1>Welcome to a11ychecks.com website</h1>
        <nav aria-label="global">
        <div role="navigation">
            <ul>
                <li><a href="#about" role="menuitem">About Us</a></li>
                <li><a href="#services" role="menuitem">Our Services</a></li>
                <li><a href="#contact" role="menuitem">Contact Us</a></li>
            </ul>
             <form role="search">
            
             </form>
        </div>
    </div>

    <div role="main">
        <section id="about" role="region" aria-label="About Us">
            <h2>About Us</h2>
            <p>We are committed to creating accessible websites for everyone.</p>
        </section>

        <section id="services" role="region" aria-label="Our Services">
            <h2>Our Services</h2>
            <div role="article">
                <h3>Web Design</h3>
                <p>We create stunning and accessible web designs tailored to your needs.</p>
            </div>
            <div role="article">
                <h3>Web Development</h3>
                <p>Our developers build accessible web applications using the latest technologies.</p>
            </div>
        </section>
    </div>

    <div role="complementary">
        <h2>Latest News</h2>
        <div role="article">
            <h3>New Product Launch</h3>
            <p>Introducing our latest product that is designed with accessibility in mind.</p>
        </div>
    </div>

    <div role="contentinfo">
        <p> @ 2023 a11ychecks.com. All rights reserved.</p>
    </div>
</body>
</html>

ARIA Landmark roles

In the above example:

→ <header> is given the role="banner" to indicate it's the header of the page.
→ <nav> is given the role="navigation" to indicate it's the site's navigation.
→ <main> is given the role="main" to indicate it's the main content of the page.
→ <section> elements are given role="region" to indicate they are distinct content regions.
→ <article> elements are given role="article" to specify self-contained articles.
→ <aside> is given role="complementary" to indicate it contains supplementary content.
→ <footer> is given role="contentinfo" to indicate it's the footer of the page