Quick accessibility wins that are easy to implement

Summary

This video highlights common accessibility issues on websites, focusing on keyboard navigation and the importance of semantic HTML. The speaker demonstrates how poor tabbing and focus management can hinder navigation, especially for users relying on keyboard or screen readers. Emphasis is placed on using correct HTML elements like buttons instead of divs and ensuring icons used as links are accessible with aria-labels. Tools like PolyPan and AX DevTools are introduced to detect and fix accessibility issues. The video encourages developers to prioritize accessibility early to improve user experience and avoid technical debt.

Takeaways

• 😀 Keyboard navigation issues, such as invisible or unclear focus rings, can negatively affect the user experience, especially for those relying on keyboard navigation.
• 😀 Websites like ESPN and Spirit have problematic tab orders, where focus can skip or be misdirected, making it difficult for users to interact with elements.
• 😀 Ensuring that focus rings are visible when elements are focused is crucial for accessibility and providing feedback to keyboard navigators.
• 😀 Skip to main content links should be the first focusable element on a page to allow users to quickly skip repetitive navigation items.
• 😀 Proper semantic HTML elements, like using <button> instead of <div> for interactive actions, improve accessibility and keyboard navigation functionality.
• 😀 Icons used as links need accessible text descriptions, like `aria-label`, to provide context for screen readers and assistive technologies.
• 😀 Accessibility tools such as PolyPan and axe DevTools help identify common issues like missing alt text or incorrect link text for images and icons.
• 😀 Developers should avoid using non-semantic elements (like <div> for interactive actions) as they hinder accessibility for users relying on assistive technologies.
• 😀 Being aware of and addressing accessibility issues early in the development process prevents unnecessary technical debt and improves the long-term user experience.
• 😀 Complex UI components like carousels and date pickers should be designed with accessibility in mind, using proper HTML elements and attributes to ensure compatibility with screen readers and keyboard navigation.
• 😀 While adding accessibility can take time, using correct semantic elements, proper focus handling, and clear descriptions can make websites significantly more user-friendly for all users.

Q & A

What accessibility issue does the ESPN website have when navigating with a keyboard?

The ESPN website has poor keyboard navigation where users can't easily see or interact with focusable elements. The focus ring is hard to spot, and tabbing through elements can be confusing, as the site relies on multiple tab presses to navigate to interactive content.

What is the significance of the 'skip to main content' link on websites?

The 'skip to main content' link allows keyboard and screen reader users to skip past repetitive navigation elements and jump directly to the main content of the page. It's crucial for improving the user experience for those who navigate with keyboards or assistive technologies.

Why is it problematic for websites to use 'div' elements for interactive features like buttons?

Using 'div' elements for interactive features like buttons is problematic because they lack semantic meaning, making them harder to interact with for keyboard and screen reader users. Instead, correct semantic HTML elements like `button` should be used to ensure proper accessibility and functionality.

How does ESPN's implementation of tabindex affect user experience?

ESPN's use of tabindex causes unnecessary complexity for keyboard users. Some div elements are given a tabindex of zero but are not interactive, leading to confusion. The tab order is also poorly structured, requiring excessive tab presses to reach essential content like the logo.

What is the role of `aria-label` in enhancing accessibility for icon links?

The `aria-label` attribute provides accessible text for icon links, helping screen reader users understand the link's purpose. Without an `aria-label`, icon-only links provide no context to screen reader users, making the site less accessible.

What problem does Spirit's website have with its keyboard navigation?

Spirit's website has issues with its keyboard navigation, particularly with a sign-in button that is only accessible by hover and not by keyboard focus. This is a problem for users who navigate using a keyboard, as hover-based interactions are not accessible in that context.

What is a focus ring, and why is it important for accessibility?

A focus ring visually indicates which element is currently focused on a webpage, helping users who navigate via keyboard or assistive technologies. It's important for accessibility because it provides feedback to users on where they are on the page and what element they can interact with.

How can developers ensure that elements like menus are accessible for keyboard users?

Developers should ensure that menus are accessible by making them focusable and operable through keyboard commands. This can be done by using correct HTML elements like `button` and `nav`, and avoiding hover-only interactions that are inaccessible for keyboard users.

Why is it important to use correct semantic elements like `button` or `dialog` for interactive features?

Using the correct semantic elements ensures that interactive features are both functional and accessible. For example, a `button` provides built-in accessibility, whereas a `div` used for interactive purposes may require additional work to make it accessible.

What can developers do to improve focus management on websites?

To improve focus management, developers should ensure that the tab order is logical and intuitive, and that focusable elements are visually highlighted with focus rings. They should also avoid unnecessary tab indices and ensure that important elements, like navigation links and buttons, are easily accessible by keyboard.