flekschas/svelte-simple-modal

A11y Attributes

benaltair opened this issue · 2 comments

benaltair commented

Is there interest for adopting a11y strategies to make this smoother with a screen reader? Or were there already considerations for this I've missed? Perhaps adopting some of the strategies used in MicroModal (repo).

I'd be happy to contribute to this if you're interested @flekschas.

flekschas commented

Apologies for my late reply. I somehow missed the issue.

It'd be great to integrate the a11y strategies from MicroModal! If you want to take a stab at it, please go ahead! PRs are much appreciated :)

Some of the MicroModal features are already implemented:

  • Toggles relevant aria attributes on open and close
  • Closes modal on overlay click. (This modal: can deactivate this behavior if it's treated like a dialog. See closeOnOuterClick)
  • Closes modal on pressing the esc key (This modal: can deactivate this behavior if it's treated like a dialog. See closeOnEsc.)
  • Traps tab focus within the modal
  • Focuses on the first focusable element within the modal (This modal: the first focusable element is focused once you click TAB, it's not focused automatically)
  • Retains the focused element state after closing the modal

I am not an a11y expert, so I don't if there are other aspects that might be worth to include.

flekschas commented

I closed this as most WAI-ARIA guidelines are now followed. (Same as MicroModal) See https://github.com/flekschas/svelte-simple-modal#accessibility for details.

If you feel like there are more aspects that need to be covered, please reopen.

  • 👍1