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

Revise "Skip link" function

    XMLWordPrintable

    Details

    • Type: Improvement
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 2.6.10, 2.7.7, 2.8.5, 2.9
    • Fix Version/s: 3.0
    • Component/s: Accessibility, JavaScript
    • Labels:
    • Testing Instructions:
      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.
    • Affected Branches:
      MOODLE_26_STABLE, MOODLE_27_STABLE, MOODLE_28_STABLE, MOODLE_29_STABLE
    • Fixed Branches:
      MOODLE_30_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-49811_master

      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

              Assignee:
              jinhofer Joseph Inhofer
              Reporter:
              jinhofer Joseph Inhofer
              Peer reviewer:
              Ryan Wyllie
              Integrator:
              David Monllaó
              Tester:
              cameron1729
              Participants:
              Component watchers:
              Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias, Andrew Nicols, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze
              Votes:
              1 Vote for this issue
              Watchers:
              11 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                16/Nov/15