Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-49811

Revise "Skip link" function

    XMLWordPrintable

Details

    • Improvement
    • Status: Closed
    • Minor
    • Resolution: Fixed
    • 2.6.10, 2.7.7, 2.8.5, 2.9
    • 3.0
    • Accessibility, JavaScript
    • MOODLE_26_STABLE, MOODLE_27_STABLE, MOODLE_28_STABLE, MOODLE_29_STABLE
    • MOODLE_30_STABLE
    • MDL-49811_master
    • Hide

      Please test on all major supported browsers (Chrome, Firefox, Safari, IE)
      You may not use your mouse for this test

      Problem: Before this patch the focus position isn't remember and instead gets reset to the top of the page each time a skip link is activated.
      Solution: With the updated code the focus will jump to the skip link target (for block skips, this is an empty span after the block and maintain tab position within the page, allowing the user to continue navigating the page with the keyboard from where they were up rather than being reset to the top of the page.
      Confirm that the page will scroll the target of the skip link into view after the skip is activated.

      1. Go to the site home
      2. Tab into the page (press the "Tab" key), "Skip to main content" should be focused. If not, focus on that using tab again until it is in focus.
      3. Press enter, ensuring that the screen does not hit the bottom of the page. If so, make your window shorter and try again.
      4. Now press tab again in an attempt to focus on the main content.
      5. Continue pressing "Tab" until the link to skip the courses/categories list appears, press "Enter" and make sure that the focus now is located after the courses/categories list
      6. Continue tabbing through the page and activating (hitting enter) skip links before the blocks as they are focused.
      Show
      Please test on all major supported browsers (Chrome, Firefox, Safari, IE) You may not use your mouse for this test Problem: Before this patch the focus position isn't remember and instead gets reset to the top of the page each time a skip link is activated. Solution: With the updated code the focus will jump to the skip link target (for block skips, this is an empty span after the block and maintain tab position within the page, allowing the user to continue navigating the page with the keyboard from where they were up rather than being reset to the top of the page. Confirm that the page will scroll the target of the skip link into view after the skip is activated. Go to the site home Tab into the page (press the "Tab" key), "Skip to main content" should be focused. If not, focus on that using tab again until it is in focus. Press enter, ensuring that the screen does not hit the bottom of the page. If so, make your window shorter and try again. Now press tab again in an attempt to focus on the main content. Continue pressing "Tab" until the link to skip the courses/categories list appears, press "Enter" and make sure that the focus now is located after the courses/categories list Continue tabbing through the page and activating (hitting enter) skip links before the blocks as they are focused.

    Description

      Currently, the skip links will change the display of the page to the next element in line. For example, "Skip to main content" will scroll the page to where the main content is visible at the top of the screen.

      First issue: Skip link functionality does not recognize the presence of an element with class="navbar" and position: fixed; property. This causes the targeted element to appear at the top of the page, which will be cut off by the floating navbar.

      While this is not a deal-breaker, there is more. The purpose of these skip links is to allow keyboard access to users. However, the "Skip links" do not maintain focus. For example, when tabbing through the page and pressing enter on "Skip to main content", the page will scroll to that element (with the above issue). When the user attempts to continue navigating through the page with tab, the focus has been lost and they will be placed back at the top of the page. This therefore makes the skip links useless to keyboard-only users.

      Second issue: Make "Skip links" change focus as well as scroll.

      Attachments

        Issue Links

          Activity

            People

              jinhofer Joseph Inhofer
              jinhofer Joseph Inhofer
              Ryan Wyllie Ryan Wyllie
              David Monllaó David Monllaó
              cameron1729 cameron1729
              David Woloszyn, Huong Nguyen, Jake Dallimore, Meirza, Michael Hawkins, Raquel Ortega, Safat Shahin, Stevani Andolo
              Votes:
              1 Vote for this issue
              Watchers:
              11 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:
                16/Nov/15