Mobile phone and text on it "Accessible accordion" along with accordion examples

Making accessible accordion

An accessible accordion is a type of interactive component that allows users to expand and collapse content, while also providing a good user experience for people with disabilities.

Accordions reduce the need to scroll when presenting multiple sections of content on a single page. They should be accessible through keyboard navigation and follow WAI-ARIA roles, states, and properties guidelines for accessibility.

An accordion-like interface can be created by using a sequence of <details> elements, which are expanding sections that can reveal or hide content. As we’ll see later, using the name attribute allows these components to simulate the behavior of typical accordions, in which just a single section can be open at a time, with other sections closing themselves when a new one is expanded.

This solution does not involve JavaScript. Only HTML and CSS for styling.

Continue reading “Making accessible accordion”
A person holding a phone with the YouTube app running. Image by Sam riz from Pixabay.

How to embed YouTube videos while ensuring accessibility WCAG compliance

To determine whether embedded YouTube videos are compliant with the Web Content Accessibility Guidelines (WCAG), it’s essential to consider several factors related to accessibility features and best practices.

To make a YouTube embed WCAG (Web Content Accessibility Guidelines) compliant, we need to consider several aspects of accessibility. Here’s a step-by-step guide on how to achieve this:

Continue reading “How to embed YouTube videos while ensuring accessibility WCAG compliance”