[
https://issues.apache.org/jira/browse/WICKET-4472?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Lucas updated WICKET-4472:
--------------------------
Labels: accessibility aria close_icon dialog labelledBy modal (was:
accessibility aria dialog modal)
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>"+
was:
For more accessible modal windows 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;\">
> Modal window accessibility - add role and aria attributes to outer div for
> assitive technologies
> ------------------------------------------------------------------------------------------------
>
> Key: WICKET-4472
> URL: https://issues.apache.org/jira/browse/WICKET-4472
> Project: Wicket
> Issue Type: Improvement
> Components: wicket-extensions
> Affects Versions: 1.5.5
> Reporter: Lucas
> Priority: Minor
> Labels: accessibility, aria, close_icon, dialog, labelledBy,
> modal
> Original Estimate: 1h
> Remaining Estimate: 1h
>
> 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>"+
--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators:
https://issues.apache.org/jira/secure/ContactAdministrators!default.jspa
For more information on JIRA, see: http://www.atlassian.com/software/jira
