React
ARIA and keyboard
Learn aria-label, aria-expanded and keyboard usage.
Accordion and ARIA
In an accordion each header must be a <button> carrying aria-expanded and aria-controls. The panel gets role="region" and aria-labelledby pointing back to the header.
Keyboard users move between headers with Tab; Enter toggles the panel. Home and End jump to the first and last header.
Never remove the focus ring; only slim it down with :focus-visible.
Focus management
When a modal opens, focus must move inside it; on close it returns to the trigger. This is called a focus trap.
In React you keep a useRef to the modal root and call ref.current.focus() inside a useEffect. On close you restore the previous focus.
The modal root carries role="dialog" and aria-modal="true".
Exercise Write the AccessibleModal skeleton
Write an AccessibleModal component. Keep a ref with useRef(null) and call ref.current.focus() in a useEffect. The root should be <div role="dialog" aria-modal="true" tabIndex="-1" ref={ref}>. Export it.
Show example solution
import { useRef, useEffect } from 'react';
function AccessibleModal() {
const ref = useRef(null);
useEffect(() => {
ref.current.focus();
}, []);
return (
<div role="dialog" aria-modal="true" tabIndex="-1" ref={ref}>
Content
</div>
);
}
export default AccessibleModal;
Test yourself
-
Fill in the blank: link the panel to the header
<button aria-expanded={open} aria-controls="panel-1">Header</button>
<div id="panel-1" role="____" aria-labelledby="btn-1">Content</div>
Show answer
<button aria-expanded={open} aria-controls="panel-1">Header</button>
<div id="panel-1" role="region" aria-labelledby="btn-1">Content</div>
-
When a modal opens, what should focus do?
- Go to the top of the page
- Move into the modal and return to the trigger on close
- Stay unchanged
- Move only for screen readers
Show answer
Move into the modal and return to the trigger on close — In on open, back to the trigger on close.
-
Match keyboard and ARIA
- Tab
- Moves between focusable items
- Enter
- Triggers button
- Esc
- Closes modal
- Shift+Tab
- Goes backwards
Next lesson: i18n and react-i18next
