Skip to content

Latest commit

 

History

History
57 lines (37 loc) · 2.56 KB

module-3.9-accessibility-and-best-practices.md

File metadata and controls

57 lines (37 loc) · 2.56 KB
Raw

Module 3: Advanced DOM Manipulation

3.9. Accessibility and Best Practices

Web accessibility is essential to ensure that people with disabilities can access and use your web content. In this submodule, we'll discuss accessibility best practices and provide examples of how to make your web content more accessible.

Semantic HTML

Semantic HTML elements provide meaning to the structure of a web page. They are essential for screen readers and other assistive technologies. Let's consider an example of semantic HTML for a simple navigation menu:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Using semantic HTML elements like <nav>, <ul>, and <li> instead of generic <div> elements helps screen readers understand the structure and purpose of the navigation menu.

ARIA Roles and Attributes

ARIA (Accessible Rich Internet Applications) roles and attributes provide additional accessibility information to assistive technologies. For instance, to indicate that a button performs a "delete" action:

<button aria-label="Delete" role="button">X</button>

The aria-label attribute specifies the button's accessible label, while the role attribute defines the role of the element.

Keyboard Navigation

Ensure that your website is navigable using only a keyboard. Test your site's tab order, focus states, and keyboard shortcuts to provide a smooth experience for keyboard users. For example, the following CSS code sets a clear focus style for focused elements:

:focus {
  outline: 2px solid blue;
}

Testing with Screen Readers

To ensure the accessibility of your website, use screen reader software like NVDA (NonVisual Desktop Access) or VoiceOver (for macOS) to test your web content. This will help you understand how your website is experienced by users who rely on screen readers.

Provide Text Alternatives for Images

Images should have descriptive alt text to convey their content and purpose to users who can't see them. For example:

<img src="example.jpg" alt="A happy family enjoying a picnic in the park">

Conclusion

Web accessibility is about creating an inclusive web that can be used by everyone. By following semantic HTML practices, using ARIA roles and attributes, ensuring keyboard navigation, testing with screen readers, and providing text alternatives for images, you can make your web content more accessible and provide a better user experience for all users, regardless of their abilities.