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

Improve screen reader feedback in calendar UI

    XMLWordPrintable

Details

    • MOODLE_402_STABLE, MOODLE_403_STABLE
    • MOODLE_402_STABLE, MOODLE_403_STABLE
    • MDL-79007-402
    • 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.

    Description

      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.

      Attachments

        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

        Issue Links

          Activity

            People

              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

              Dates

                Created:
                Updated:
                Resolved:

                Time Tracking

                  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

                  Clockify

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