Uses the semantic HTML <details> and <summary> elements. This is the simplest and most accessible approach.
What is semantic HTML?
Semantic HTML refers to the meaningful use of HTML markup to reinforce the meaning of the content within web pages rather than merely to define its presentation or look. Semantic HTML is processed by traditional web browsers as well as by assistive technologies.
Each <details> element is independent and can be expanded or collapsed separately.
Why use semantic HTML?
Semantic HTML improves accessibility by providing a meaningful structure that assistive technologies can understand and navigate. It also improves search engine optimization and makes code more maintainable.
What are some examples of semantic HTML?
Examples include: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure>, and <details>.
Uses a custom <button> element with aria-expanded to control a separate content container. Fully keyboard accessible with visible focus indicators.
Screen readers are assistive technologies that read the text content of web pages aloud to users who are blind or have low vision. They announce interactive elements, headings, lists, form labels, and other structural information to help users navigate and understand the page.
Multiple custom toggle buttons demonstrating independent expand/collapse functionality with proper ARIA attributes.
Keyboard navigation allows users to interact with web pages using only their keyboard (Tab, Enter, Space, and arrow keys). This is essential for users with mobility impairments or those who prefer keyboard use. All interactive elements should be reachable and operable via keyboard.
Focus indicators are visual cues (usually a border or outline) that show which interactive element currently has keyboard focus. They must have sufficient contrast and must not be removed, as they are critical for keyboard users to understand where they are on the page.