Accessible modals

[mediremi]

Accessible modals

This is a summary of accessibility issues with our modal component.

Issues

Keyboard accessibility

• The first focusable element in the modal (e.g. input field or close button) should be focused when the modal appears
• Focus should revert to its previous location when the modal closes
• Tab order should wrap - when the user tabs through the focusable elements in the dialog, the first focusable element will be focused after the last one has been reached. In other words, the tab order should be contained within and by the dialog.
• The escape key should close the modal

Screenreader accessibility

• role="dialog" and aria-modal attribute should be set fix(modal): add ARIA dialog role to modals ui#545
• aria-labelledby attribute (and optionally aria-describedby) should be set

Example implementation of fully keyboard accessible modal

https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html#ex_label

Resources

• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role
• https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html

[ghost]

+1 from me. I've noticed during cypress tests that our modal is quite inaccessible. I think it would be good to wrap up this (more meta) discussion first: #238. If we decide on an overarching strategy, we could start planning & fixing the accessibility issues.