HTML Accessibility (a11y) & SEO

🌐 HTML Basics Lesson 13 Intermediate

Web accessibility (a11y) and Search Engine Optimization (SEO) ensure that your site is usable by everyone and easily indexable by search engines.

1 ARIA roles, semantic markup, and head SEO optimization

HTML accessibility and SEO are closely linked:

ARIA (Accessible Rich Internet Applications) Attributes: Attributes like `aria-label` and `role` describe elements that standard tags cannot, helping screen readers read layouts correctly.
SEO Optimization: Using correct header tags (`<h1>`-`<h6>`), descriptive link text, and meta description headers helps search engine crawlers rank your page content correctly.

2 Semantic SEO Elements Code

Let's check clean, accessible semantic structures:

HTML — Accessible Setup

<!-- Semantic navigation with ARIA attributes -->
<nav aria-label="Main Menu">
    <ul>
        <li><a href="/home">Home</a></li>
        <li><a href="/docs">Documentation</a></li>
    </ul>
</nav>

<!-- Descriptive buttons for screen readers -->
<button aria-label="Close notification box" onclick="closeBox()">X</button>

3 Code Challenge

Challenge: Write an image element that uses an empty alt attribute (`alt=""`) to indicate it is decorative and should be skipped by screen readers.