HTML5 – Accessibility

Accessibility refers to the design of web pages and applications that can be used by people of all abilities and disabilities. Accessibility is important because it helps to ensure that everyone can access and use the web, regardless of their physical or cognitive abilities.

HTML5 introduces several new features that improve the accessibility of web pages and applications. Some of these features include:

• The aria-* attributes, which allow you to specify the role and state of an element, and provide additional information about the element to assistive technologies.
• The tabindex attribute, which allows you to specify the order in which elements receive focus when the user navigates through the page using the tab key.
• The title attribute, which allows you to specify a short description of an element, which is displayed as a tooltip when the user hovers over the element.
• The lang attribute, which allows you to specify the language of an element and its content, which is used by assistive technologies to provide language-specific support.

Here is an example of how to use the aria-* attributes to improve the accessibility of a web page:

<code><nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>
</code>

In this example, the aria-label attribute is used to specify the label of the nav element, which is “Main navigation”. The label is used by assistive technologies to provide context for the element.

To improve the accessibility of forms, you can use the label element to provide a label for form controls, and use the for attribute of the label element to associate the label with the form control:

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

In this example, the label element is used to provide a label for the input element, and the for attribute is used to associate the label with the input element.