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

Improve screen reader feedback in calendar UI

XMLWordPrintable

    • MOODLE_402_STABLE, MOODLE_403_STABLE
    • MOODLE_402_STABLE, MOODLE_403_STABLE
    • MDL-79007-403
    • MDL-79007-main
    • Hide

      You will need a screen reader to test these changes. Try to test on both NVDA and JAWS.

      1. Create a course, and add the Calendar block.
      2. Create some events in the current month.
      3. View the page, and activate your screen reader.
      4. Move the focus to the previous month link in the calendar block (e.g. by pressing Tab until it is focused)
        • Confirm: The screen reader should say "{Month name} previous month" where month name is the month it will take you to.
        • Before fix: The screen reader said "previous month" with no month name.
      5. Move the focus to the next month link in the calendar block.
        • Confirm: The screen reader should say "{Month name} next month" where month name is the month it will take you to.
        • Before fix: The screen reader said "next month" with no month name.
      1. Activate the next month link
        • Confirm: The next month loads and the screen reader announces "{Month name} {year}" corresponding to the month that is now displayed.
        • Before fix: The next month loads but the screen reader provides no feedback.
      2. Activate the previous month link to return to the current month
        • Confirm: The current month loads and the screen reader announces "{Month name} {year}" corresponding to the month that is now displayed.
        • Before fix: The current month loads but the screen reader provides no feedback.
      1. Move the focus to a day containing events
        • Confirm: A popover is shown containing the day's events, and screen reader reads the list of days, before reading the link to the calendar for the day.
        • Before fix: The popover is shown, but the screen reader does not read its contents, only the link.
      Show
      You will need a screen reader to test these changes. Try to test on both NVDA and JAWS. Create a course, and add the Calendar block. Create some events in the current month. View the page, and activate your screen reader. Move the focus to the previous month link in the calendar block (e.g. by pressing Tab until it is focused) Confirm : The screen reader should say "{Month name} previous month" where month name is the month it will take you to. Before fix : The screen reader said "previous month" with no month name. Move the focus to the next month link in the calendar block. Confirm : The screen reader should say "{Month name} next month" where month name is the month it will take you to. Before fix : The screen reader said "next month" with no month name. Activate the next month link Confirm : The next month loads and the screen reader announces "{Month name} {year}" corresponding to the month that is now displayed. Before fix : The next month loads but the screen reader provides no feedback. Activate the previous month link to return to the current month Confirm : The current month loads and the screen reader announces "{Month name} {year}" corresponding to the month that is now displayed. Before fix : The current month loads but the screen reader provides no feedback. Move the focus to a day containing events Confirm : A popover is shown containing the day's events, and screen reader reads the list of days, before reading the link to the calendar for the day. Before fix : The popover is shown, but the screen reader does not read its contents, only the link.

      In the calendar, when tabbing to days with events when using a screen reader - the events are shown in a bubble, but there is no audible indication that the day has events and they are not read out. Also, the "Next month" and "Previous month" links lack context, they do not tell you which month is next or previous. I will look at how this can be improved.

      We should improve the labelling and markup of the block to ensure enough context is given to make the block usable by screen reader users.

        1. after_patch.png
          after_patch.png
          30 kB
        2. before_patch.png
          before_patch.png
          32 kB
        3. MDL-79007.mp4
          12.94 MB
        4. screen-reader-test.mp4
          1.32 MB

            marxjohnson Mark Johnson
            Kerryvan Kerry Vandersteen
            Simon Adams Simon Adams
            Jun Pataleta Jun Pataleta
            Ron Carl Alfon Yu Ron Carl Alfon Yu
            Votes:
            4 Vote for this issue
            Watchers:
            8 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 day, 2 hours, 17 minutes
                1d 2h 17m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.