HTML Accessibility

Accessibility in HTML is crucial for making your website usable by people with disabilities. It helps ensure that your content is available to a broader audience, including those with visual, auditory, motor, or cognitive disabilities.

🏷️ ARIA Roles and Attributes

ARIA (Accessible Rich Internet Applications) provides a way to make web applications accessible to people with disabilities. It helps to define roles and attributes for elements that can make them more understandable to assistive technologies.

<button aria-label="Close" onclick="closeWindow()">X</button>

• aria-label: Provides an accessible name to the element.
• aria-hidden: Indicates whether an element is visible to assistive technologies.

🖼️ Alt Attributes for Images

The alt attribute provides alternative text for images. This is especially important for screen readers, helping users understand the content of an image if it cannot be seen.

<img src="logo.png" alt="Company Logo">

• alt: Describes the content of the image, making it accessible for users who rely on screen readers.

⌨️ Keyboard Navigation

Make sure your web content is navigable via the keyboard. Users with motor disabilities often rely on keyboard navigation rather than a mouse.

💻 Example: Ensure that form elements are focusable and accessible via the Tab key.

<input type="text" id="name" name="name" tabindex="1">
<button type="submit" tabindex="2">Submit</button>

🧩 Semantic HTML Usage

Using semantic HTML tags like <header>, <footer>, <article>, and <section> allows screen readers to understand the structure of your page. This improves accessibility by ensuring that users can quickly navigate through the page.

<header>
  <h1>Welcome to My Website</h1>
</header>
<main>
  <section>
    <h2>About Us</h2>
    <p>We are a company that values accessibility.</p>
  </section>
</main>

• Semantic tags: Give meaning to the content, improving both SEO and accessibility.

🎧 Screen Readers

Screen readers are essential tools for visually impaired users. They read out the content of a page, including text, images (with alt attributes), and form elements.

Make sure to use proper HTML and ARIA roles, as well as provide relevant labels, to ensure content is understandable and navigable by screen readers.

🧪 Try Yourself

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

📚 Resources