Web Accessibility

HTML accessibility refers to designing and coding websites so that everyone, including people with disabilities, can use and interact with them easily.

In simple terms:

• It means making sure that people who might have trouble seeing, hearing, or using a mouse can still navigate and understand a website.
• For example, people who are blind might use screen readers (software that reads out what's on the screen), so the website needs to have text that explains what’s in images, buttons, or links.
• It also helps people with temporary difficulties, like someone with a broken arm who can’t use a mouse and needs to navigate using the keyboard.

Good accessibility makes websites usable for everyone!

How to make an website accessible

1. Semantic HTML

Semantic HTML means using correct HTML elements for their correct purpose as much as possible. Semantic elements are elements with a meaning; if you need a button, use the?<button>?element (and not a?<div>?element).

Semantic

<button>Report</button>

Non-semantic

<div>Report</div>

Examples of Common Semantic Elements

1. <header>

• What is it? A section that contains introductory content or navigation links, usually at the top of the page.
• Why is it accessible? Screen readers recognize this as the main header of the page or section.

2. <nav>

• What is it? Defines a section of navigation links.
• Why is it accessible? It signals to screen readers that this part contains navigation links.

3. <main>

• What is it? The main content of the page. There should only be one <main> element per page.
• Why is it accessible? It helps screen readers skip over repetitive content like headers and navigation to get to the main content.

4. <article>

• What is it? Represents a self-contained piece of content that could stand alone (like a blog post or news article).
• Why is it accessible? It helps users, especially those with screen readers, identify distinct pieces of content.

5. <section>

• What is it? Defines sections of content within a page.
• Why is it accessible? It creates clear content groupings that help users understand the page structure.

6. <footer>

• What is it? Contains footer content, often used for copyright info, links to policies, and contact details.
• Why is it accessible? It helps users know they’ve reached the bottom of the page.

7. <aside>

• What is it? Defines content that is tangentially related to the main content, like a sidebar.
• Why is it accessible? It helps screen readers and users understand that this content is related but not part of the main flow.

Why Does This Matter for Accessibility?

Using semantic HTML makes it clear what each part of the webpage is supposed to do. This is important for:

• Screen reader users: They can quickly navigate through the content by jumping to sections like "main content" or "navigation."
• People with cognitive disabilities: A well-structured page helps them understand the flow and purpose of each section.

2. Add alt Text for Images

Why? Describes images for visually impaired users using screen readers.

Example:

<img src="team.jpg" alt="Our team smiling at the office">

        

The alt text provides a description of the image for people who can't see it.

3. Ensure Proper Contrast for Text

Why? Users with low vision or color blindness can struggle with low contrast between text and background.

Example (CSS):

body {
  background-color: #ffffff;
  color: #333333;
  font-size: 16px;
}

        

Make sure there’s enough contrast between the text and the background, like dark text on a light background.

4. Make Website Keyboard-Friendly

Why? Some users can't use a mouse and rely on keyboard navigation.

• Ensure all interactive elements (like links and buttons) are accessible with Tab.
• Use the :focus pseudo-class to provide visual feedback when an element is focused.

Example:

button:focus, a:focus {
  outline: 2px solid blue;
}

        

<button>Submit</button>

        

This ensures that users can see which element is currently selected when they navigate with the keyboard.

5. Use ARIA (Accessible Rich Internet Applications) Landmarks

Why? Helps screen readers by giving extra information about elements that may not have clear HTML equivalents.

Example:

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About Us</a></li>
  </ul>
</nav>

        

Here, aria-label gives additional information to screen readers about what the navigation is for.

6. Provide Descriptive Link Text

Why? Screen readers should know where links go, so "click here" is not helpful.

Example:

<a href="/contact">Contact us for more information</a>

        

This is more descriptive than using "click here," as it tells the user what to expect from the link.

7. Add Labels to Form Fields

Why? Helps screen readers identify the purpose of each form field.

Example:

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

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

        

The <label> tag clearly associates the input field with its label, helping users understand what information is required.

8. Provide Captions or Transcripts for Media

Why? Users who are deaf or hard of hearing can access the content in videos through captions or transcripts.

Example:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="en" label="English">
</video>

        

The <track> element provides captions that can be turned on for users who need them.

9. Ensure Dynamic Content is Accessible

Why? Screen readers need to be notified when content changes, such as after submitting a form or loading new content via AJAX.

Example:

<div aria-live="polite">
  <!-- This area will update with dynamic content -->
</div>

        

The aria-live="polite" attribute ensures that screen readers will announce updates to the content inside the div without disrupting the user's flow.

Test with Accessibility Tools

Why? To check for potential issues, use tools like:

• Lighthouse (in Chrome DevTools)
• axe (browser extension)
• WAVE (Web Accessibility Evaluation Tool)

These tools will help identify issues in your website that might make it less accessible.

Summary

To make your website accessible as a programmer:

• Use semantic HTML for better structure and screen reader support.
• Add alt text for images.
• Ensure high contrast between text and backgrounds.
• Make sure your site is keyboard-friendly.
• Use ARIA attributes where needed.
• Provide descriptive link text.
• Label your form fields.
• Add captions/transcripts for videos.
• Use dynamic content notifications.
• Test with accessibility tools to catch issues.

Following these steps ensures your website is inclusive and usable by everyone!

More ARIA Attributes

ARIA (Accessible Rich Internet Applications) attributes help make web content more accessible, especially for users who rely on screen readers or other assistive technologies. ARIA attributes provide extra information to describe elements that might not be natively accessible.

Here’s a simplified overview of common ARIA attributes with examples:

1. aria-label

Provides a label to an element when there is no visible text.

Example:

<button aria-label="Close menu">X</button>

        

Screen readers will read "Close menu" instead of "X."

2. aria-labelledby

Links an element to another element’s text as a label.

Example:

<h2 id="section1">Settings</h2>
<button aria-labelledby="section1">Open</button>

        

The button will be announced as "Settings Open" by screen readers, using the text from the <h2> element.

3. aria-describedby

Links an element to another element that provides additional description.

Example:

<p id="info">Click here to submit your form.</p>
<button aria-describedby="info">Submit</button>

        

The button will be described as "Submit. Click here to submit your form" by a screen reader.

4. aria-hidden

Hides an element from assistive technologies, like screen readers.

Example:

<div aria-hidden="true">This won't be read by screen readers</div>

        

This element won’t be announced by screen readers.

5. aria-expanded

Indicates if a collapsible section (like a dropdown) is open or closed.

Example:

<button aria-expanded="false">Menu</button>
<ul hidden>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

        

When the menu is opened, you change aria-expanded to "true", and assistive technologies know the state of the menu.

6. aria-controls

Tells which element the current element controls (usually in interactive components like dropdowns or tabs).

Example:

<button aria-controls="menu">Toggle Menu</button>
<ul id="menu">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

        

Screen readers will know that the button controls the <ul> with the ID menu.

7. aria-live

Indicates that an element’s content will update, and the screen reader should announce the changes.

Example:

<div aria-live="polite">New notifications will appear here.</div>

        

When the content inside this div changes, a screen reader will read it out.

8. aria-role

Defines the role of an element (e.g., making a custom component behave like a button or an alert).

Example:

<div role="button" tabindex="0">Click me</div>

        

This div will be treated like a button by screen readers.

9. aria-checked

Used to describe whether checkable items (like checkboxes) are checked, unchecked, or indeterminate.

Example:

<div role="checkbox" aria-checked="false" tabindex="0">Option</div>

        

The element will be recognized as an unchecked checkbox. Set aria-checked="true" when checked.

10. aria-pressed

Used for toggle buttons, indicating if a button is currently pressed (active).

Example:

<button aria-pressed="false">Toggle</button>

        

A screen reader will announce whether the button is pressed or not.

These are just some of the common ARIA attributes that improve web accessibility. By adding them, you help users who use screen readers understand your website's interactive elements better.

Let me know if you want more details or examples for a specific attribute!