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

["Martin Grigorov (Commented) (JIRA)" <ji...@apache.org>]

    [ https://issues.apache.org/jira/browse/WICKET-4472?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13244131#comment-13244131 ] 

Martin Grigorov commented on WICKET-4472:
-----------------------------------------

Task 1) is added in 6.x.
For task 2) someone with better CSS and image manipulation skills should help.
                
> 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