[WICKET-4472] Modal window accessibility - add role and aria attributes to outer div for assitive technologies

• Type: Improvement
• Status: Open
• Priority: Minor
• Resolution: Unresolved
• Affects Version/s: 1.5.5
• Component/s: wicket-extensions
• Labels: accessibility aria close_icon dialog labelledBy modal
• Assignee: Unassigned
• Reporter: Lucas
• Created: 26/Mar/12 14:10
• Updated: 05/Mar/20 09:46

Description

For more accessible modal windows:

1) it is desirable that the outer DIV element has a 'dialog' role defined and an 'aria-labelledBy' attribute pointing to the modal title text. This will help assistive technologies in properly alerting people with disabilities (PwD) users about the modal windows that wicket displays.
Until I get familiar/ready for OSS contributions, I leave you a code snippet for modal.js (around line 1170)

old:
<div class=\"wicket-modal\" id=\""idWindow"\" style=\"top: 10px; left: 10px; width: 100px;\">

new:
<div class=\"wicket-modal\" id=\""idWindow"\" role=\"dialog\" aria-labelledBy=\""idCaptionText"\" style=\"top: 10px; left: 10px; width: 100px;\">

2) it is desirable that the close icon of modal windows (top right corner) have associated text. This will help assistive technologies in properly labeling the icon. Also, because background images are hidden when high-contrast mode is active (Alt+Shift+PrtSc) the close icon should not be a background but rather an img tag, with appropriate alt attribute. Following is a suggestion of the proposed change in modal.js (around line 1191) except for the image source which I believe requires some rework from your side:

old:
"<a class=\"w_close\" style=\"z-index:1\" href=\"#\"></a>"+

new:
"<a style=\"z-index:1\" href=\"#\" title=\"close dialog\"><img src=\"???\" alt=\"close dialog\" /></a>"+

Issue Links

• is related to: WICKET-6753 res/modal.js using aria-labelledby where it should be using aria-label