Improve Modal Accessibility

[Mike-Heneghan]

From the research conducted on accessibility covered in https://github.com/Mike-Heneghan/ALISS/issues/107 and https://github.com/Mike-Heneghan/ALISS/issues/108 it was observed that the current method of creating and displaying modals has an opportunity for improvement.

Modals have the potential to be challenging for keyboard-only users and those using screen-readers. Currently, modals are not easily navigated with keyboard actions and the fact they are rendering over the content and have become available is not clear when using a screen reader (testing with macOS Voice Over).

There are a number of good materials advising on how to improve modal accessibility and they generally depend on using available attributes to improve clarity such as aria-labels, role and aria-hidden as well as managing focus.

Useful resources:

• W3 Modal Guidance

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

• Smashing Magazine Improving modal windows for everyone

  • https://www.smashingmagazine.com/2014/09/making-modal-windows-better-for-everyone/

• Ire Aderinokun Creating An Accessible Modal Dialog

  • https://bitsofco.de/accessible-modal-dialog/

Need to:

• [x] Make it clear that the button/link triggers a modal.
• [x] Make it clear what the purpose of the modal is and shift focus.
• [x] Ensure other items can't be clicked and that users can only navigate within modal.
• [x] Ensure esc can exit modal.
• [x] On closing modal return to the last focused element.

[Mike-Heneghan]

I think the steps above have made the modals in the site usable although there are potentially still opportunities for improvement.

Might be worth testing the improvements and then returning to the feature to make the next iteration of improvements.

[Mike-Heneghan]

Merged into master