I suggest you ...

SP.UI.ModalDialog.showModalDialog and Accessibility issues

SP.UI.ModalDialog.showModalDialog and Accessibility issues

I got an opportunity to work on a SharePoint project recently. As part of this project, we had to fix accessibility issues on a SharePoint site. Here is the list of issues I found which can be made accessible out of the box. Let me know in case of any questions.

1. Modal content gets rendered in an iframe but without title. iframe should have a title as per Accessibility Guidelines. If you don't, screen reader starts reading the source URL. I suggest you to provide the page name as title at least .

2. It is possible to tab out of the modal. As per accessibility guidelines, keyboard navigation should be trapped with in the modal until it is closed.

3. Some screen readers have compatibility issues with reading iframe content and hence it is observed that some screen readers (for example: NVDA) are not able to read the content of the modal if modal has only the static content (without form controls). As a solution, I suggest you to keep the close control (link) with in the iframe. As of now, it is positioned outside the iframe which is causing a problem when we try to read the static content with arrow keys when close link has active focus.

4. Close is rendered as link but it is supposed to be a button.

5. There are some hidden buttons with text like "wrap focus to top of the page". I am not sure how it helps any user but the text is read out for screen reader users. Its better to remove these from DOM.

6. When we call a modal, sighted users see a progress message like "Loading..." but is not accessible for screen reader users. Sometimes it does work with JAWS and but it never works with either NVDA or VoiceOver.

Reach me at sujasreek@gmail.com if you have any additional questions.

Thanks & Regards
Sujasree Kurapati

12 votes
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    I agree to the terms of service
    Signed in as (Sign out)

    We’ll send you updates on this idea

    Anonymous shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

    2 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      I agree to the terms of service
      Signed in as (Sign out)
      Submitting...

      Feedback and Knowledge Base