Details

    • Type: Sub-task Sub-task
    • Status: Closed
    • Priority: Minor Minor
    • Resolution: Fixed
    • Affects Version/s: 2.1.1, 2.2.5, 2.3.2
    • Fix Version/s: 2.4
    • Component/s: Accessibility, Navigation
    • Labels:
    • Testing Instructions:
      Hide
      1. Log in as an admin and just check that things look and feel as they did before (browse a couple of pages).
      2. Start screen reader (JAWS, NVDA, VoiceOver)
      3. While viewing any page, press the 'next landmark' set for the screen reader (see below).
      4. Verify that the virtual cursor is moved to the next landmark for the page and read to you.

      Steve has provided some help on how to use the different screen readers, check out his comment: http://tracker.moodle.org/browse/MDL-30921?focusedCommentId=185375&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-185375

      Show
      Log in as an admin and just check that things look and feel as they did before (browse a couple of pages). Start screen reader (JAWS, NVDA, VoiceOver) While viewing any page, press the 'next landmark' set for the screen reader (see below). Verify that the virtual cursor is moved to the next landmark for the page and read to you. Steve has provided some help on how to use the different screen readers, check out his comment: http://tracker.moodle.org/browse/MDL-30921?focusedCommentId=185375&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-185375
    • Affected Branches:
      MOODLE_21_STABLE, MOODLE_22_STABLE, MOODLE_23_STABLE
    • Fixed Branches:
      MOODLE_24_STABLE
    • Pull Master Branch:
      wip-MDL-30921-m24
    • Rank:
      33929

      Description

      ARIA landmarks need to be used to denote, at a minimum, the navigation area and the main content. Other areas could easily be added too.

        Issue Links

          Activity

          Hide
          Michael de Raadt added a comment -

          I've finally beaten my way back through the issues that arrived over the Christmas break and I'm back to these now.

          Thanks again for getting these issues up. Hopefully we can resolve all of them before Moodle 2.3 release.

          We're undertaking a Docs sprint at the moment and will return to normal development sprints after that. We have a few people interested in working on accessibility issues, so hopefully we can get a fair bit of this done soon.

          Show
          Michael de Raadt added a comment - I've finally beaten my way back through the issues that arrived over the Christmas break and I'm back to these now. Thanks again for getting these issues up. Hopefully we can resolve all of them before Moodle 2.3 release. We're undertaking a Docs sprint at the moment and will return to normal development sprints after that. We have a few people interested in working on accessibility issues, so hopefully we can get a fair bit of this done soon.
          Hide
          Sam Hemelryk added a comment -

          Ok I've chosen for this issue to focus on the block structure and implemented a solution to allow aria roles and the associated labelledby and label attributes to be included consistently.

          I think this is accurate to the title but not the description.

          We would need to put in a significant amount of work in order to properly and consistently implement aria landmark roles across all of Moodle and most importantly in core structure.
          I think if we do want to go down that path we would be much better adding aria to the coding style guidelines and then tackling this theme by theme.
          On a related note I chose not to implement aria roles for the main content area. I do not fully understand the implications of such an action but am aware that it may lead to redundancy of our current accesshide and skip link implementations.

          Many thanks
          Sam

          Show
          Sam Hemelryk added a comment - Ok I've chosen for this issue to focus on the block structure and implemented a solution to allow aria roles and the associated labelledby and label attributes to be included consistently. I think this is accurate to the title but not the description. We would need to put in a significant amount of work in order to properly and consistently implement aria landmark roles across all of Moodle and most importantly in core structure. I think if we do want to go down that path we would be much better adding aria to the coding style guidelines and then tackling this theme by theme. On a related note I chose not to implement aria roles for the main content area. I do not fully understand the implications of such an action but am aware that it may lead to redundancy of our current accesshide and skip link implementations. Many thanks Sam
          Hide
          Greg Kraus added a comment -

          Hi Sam,

          It's fine to include role="main" and to also have the skip links. Some users will prefer one method and some the other. The skip links provide a good solution for keyboard-only users because they cannot take advantage of ARIA landmarks. Many sites that support ARIA landmarks also have skip links present.

          As for which landmarks to prepare for in the blocks, realistically the only ones you need to handle at the block level are application, banner, complementary, contentinfo, form, main, navigation, and search. These are the only ones that provide navigational aids to screen readers. They are able to use a shortcut key to jump from landmark to landmark.

          http://www.w3.org/WAI/PF/aria-practices/#kbd_layout_landmark_XHTML

          All of the other roles you have listed in your patch are ARIA roles, but they are used in different contexts, and not usually simply applied to something like a block in Moodle. Most of those other roles require other roles being applied to children elements, and again, they don't provide navigation aid like the other eight do.

          If you want a default role, in the context of applying roles to Moodle blocks, "complimentary" is the best bet. Usually there isn't a safe default for assigning roles, but every block I've seen in Moodle plays a complimentary role. From the WCAG docs, complimentary is "any section of the document that supports but is separable from the main content, but is meaningful on its own even when separated from it."

          Show
          Greg Kraus added a comment - Hi Sam, It's fine to include role="main" and to also have the skip links. Some users will prefer one method and some the other. The skip links provide a good solution for keyboard-only users because they cannot take advantage of ARIA landmarks. Many sites that support ARIA landmarks also have skip links present. As for which landmarks to prepare for in the blocks, realistically the only ones you need to handle at the block level are application, banner, complementary, contentinfo, form, main, navigation, and search. These are the only ones that provide navigational aids to screen readers. They are able to use a shortcut key to jump from landmark to landmark. http://www.w3.org/WAI/PF/aria-practices/#kbd_layout_landmark_XHTML All of the other roles you have listed in your patch are ARIA roles, but they are used in different contexts, and not usually simply applied to something like a block in Moodle. Most of those other roles require other roles being applied to children elements, and again, they don't provide navigation aid like the other eight do. If you want a default role, in the context of applying roles to Moodle blocks, "complimentary" is the best bet. Usually there isn't a safe default for assigning roles, but every block I've seen in Moodle plays a complimentary role. From the WCAG docs, complimentary is "any section of the document that supports but is separable from the main content, but is meaningful on its own even when separated from it."
          Hide
          Sam Hemelryk added a comment -

          Hi Greg,

          Thanks for the feedback, its good to get a bit of direction on these. I've based what I've done off my understanding having read the spec and its great to hear about the practical implementation of these roles.

          It's also great to hear that the legacy skip-links will work in harmony with the aria announcements.
          I'll change over the default block role to complimentary, and start looking at implementing the main content this morning when I get into the office.

          Many thanks
          Sam

          Show
          Sam Hemelryk added a comment - Hi Greg, Thanks for the feedback, its good to get a bit of direction on these. I've based what I've done off my understanding having read the spec and its great to hear about the practical implementation of these roles. It's also great to hear that the legacy skip-links will work in harmony with the aria announcements. I'll change over the default block role to complimentary, and start looking at implementing the main content this morning when I get into the office. Many thanks Sam
          Hide
          Dan Poltawski added a comment -

          Sending all 'waiting for peer review' issues to integration before freeze, as agreed in Integrators Meeting 19/10/12. We are doing this to ensure any 'integratable issues' will not got missed before freeze..

          Show
          Dan Poltawski added a comment - Sending all 'waiting for peer review' issues to integration before freeze, as agreed in Integrators Meeting 19/10/12. We are doing this to ensure any 'integratable issues' will not got missed before freeze..
          Hide
          Dan Poltawski added a comment -

          Hi Sam,

          We need testing instructions for this one.

          Cheers,

          Dan

          Show
          Dan Poltawski added a comment - Hi Sam, We need testing instructions for this one. Cheers, Dan
          Hide
          Steve Bader added a comment -

          I have one additional diff I would like to see included. This pertains to the breadcrumb links, giving them the role=navigation (I have attached my diff).

          For testing help:

          1. Start screen reader (JAWS, NVDA, VoiceOver)
          2. While viewing any page, press the 'next landmark' set for the screen reader (see below).
          3. Verify that the virtual cursor is moved to the next landmark for the page and read to you.

          I find this page an easy reference to landmarks: http://www.html5accessibility.com/tests/landmarks.html
          It comes with an example page that is also a good resource.

          For navigation between landmarks:

          For JAWS 10-12 landmark keyboard navigation in virtual mode is:
          next landmark ; (semi-colon)
          previous landmark SHIFT + ; (semi-colon)
          list landmarks CTRL + INS + ; (semi-colon

          For NVDA 2011.2 the landmark keyboard combination in virtual buffer mode is:
          next landmark D
          previoius landmark shift + D
          list landmarks (and list/headings) NVDA + F7

          For VoiceOver to navigate the page via landmarks, choose 'landmarks' in the 'web rotor', then finger flicking up or down (iOS) or naviagtion keys (OSX Lion) will move to the next or previous landmark.

          Show
          Steve Bader added a comment - I have one additional diff I would like to see included. This pertains to the breadcrumb links, giving them the role=navigation (I have attached my diff). For testing help: 1. Start screen reader (JAWS, NVDA, VoiceOver) 2. While viewing any page, press the 'next landmark' set for the screen reader (see below). 3. Verify that the virtual cursor is moved to the next landmark for the page and read to you. I find this page an easy reference to landmarks: http://www.html5accessibility.com/tests/landmarks.html It comes with an example page that is also a good resource. For navigation between landmarks: For JAWS 10-12 landmark keyboard navigation in virtual mode is: next landmark ; (semi-colon) previous landmark SHIFT + ; (semi-colon) list landmarks CTRL + INS + ; (semi-colon For NVDA 2011.2 the landmark keyboard combination in virtual buffer mode is: next landmark D previoius landmark shift + D list landmarks (and list/headings) NVDA + F7 For VoiceOver to navigate the page via landmarks, choose 'landmarks' in the 'web rotor', then finger flicking up or down (iOS) or naviagtion keys (OSX Lion) will move to the next or previous landmark.
          Hide
          Steve Bader added a comment -

          Applies role=navigation to breadcrumb ul.

          Show
          Steve Bader added a comment - Applies role=navigation to breadcrumb ul.
          Hide
          Dan Poltawski added a comment -

          Reopening this for testing instructions.

          Show
          Dan Poltawski added a comment - Reopening this for testing instructions.
          Hide
          CiBoT added a comment -

          Moving this reopened issue out from current integration. Please, re-submit it for integration once ready.

          Show
          CiBoT added a comment - Moving this reopened issue out from current integration. Please, re-submit it for integration once ready.
          Hide
          Sam Hemelryk added a comment -

          Thanks Steve, I've included you patch now. I made you the author (seeing as it was your patch) and used the email address you had on your tracker profile.
          Please let me know if you'd rather use another email and I will change it.

          I've included test instructions and put up for integration once more. All yours again Dan

          Show
          Sam Hemelryk added a comment - Thanks Steve, I've included you patch now. I made you the author (seeing as it was your patch) and used the email address you had on your tracker profile. Please let me know if you'd rather use another email and I will change it. I've included test instructions and put up for integration once more. All yours again Dan
          Hide
          Dan Poltawski added a comment -

          Thanks Sam, i've integrated this now

          Show
          Dan Poltawski added a comment - Thanks Sam, i've integrated this now
          Hide
          David Monllaó added a comment -

          Tested with NVDA in Win7. It passes.

          The elements list of the fronpage contains:

          • main
          • navigation
          • navigation
            _ search
          • complementary
          • complementary
          • complementary
          Show
          David Monllaó added a comment - Tested with NVDA in Win7. It passes. The elements list of the fronpage contains: main navigation navigation _ search complementary complementary complementary
          Hide
          Eloy Lafuente (stronk7) added a comment -

          Amazed. Inspired. Grateful. That’s how your generosity makes me feel.

          (not really)

          Closing, thanks!

          Show
          Eloy Lafuente (stronk7) added a comment - Amazed. Inspired. Grateful. That’s how your generosity makes me feel. (not really) Closing, thanks!

            People

            • Votes:
              2 Vote for this issue
              Watchers:
              4 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: