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

Dashboard block headings should be h2, not h5

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Open
    • Priority: Minor
    • Resolution: Unresolved
    • Affects Version/s: 3.7.6, 3.8.3, 3.9
    • Fix Version/s: None
    • Component/s: Accessibility, Blocks
    • Labels:
    • Affected Branches:
      MOODLE_37_STABLE, MOODLE_38_STABLE, MOODLE_39_STABLE

      Description

      The Dashboard blocks all use h5 tags for their headings. This results in a page that fails WCAG 2.1 level AA guidelines.

      Heading markup allows assistive technologies to present the heading status of text to a user. A screen reader can recognize the code and announce the text as a heading with its level, beep or provide some other auditory indicator. Screen readers are also able to navigate heading markup which can be an effective way for screen reader users to more quickly find the content of interest. Assistive technologies that alter the authored visual display will also be able to provide an appropriate alternate visual display for headings that can be identified by heading markup.

      Use case: Imagine you are blind. As such, you have no monitor or it is turned off. All you have are speakers and screen reading software installed on your computer. The dashboard is loaded. You it a special keyboard combination to start navigating H1 sections in the page. However the screen reader doesn't find any. So you take a chance on H2s. None are found either. H3s, H4s? Nothing. Personally, by this point, I would start to suspect that there are no headers at all on this page. What do you think the chances are that someone who relies alone on the screen reader to find information will think to themselves "Hey, maybe I should try H5 and H6 too just in case!".

      In this particular case, the heading level was obviously chosen for its size instead of its relationship to the content. I am not suggesting that we change the size of the headings. The solution here would be to use a H2 instead of H5 (H1 for the page title) and add class="h5" to keep the text size.

      Visually, it will look exactly the same. But to a person who relies on a screen reader, it will make a world of a difference.

      Additional information:

        Attachments

          Activity

            People

            Assignee:
            Unassigned
            Reporter:
            michael-milette Michael Milette
            Participants:
            Component watchers:
            Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias, Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Dates

              Created:
              Updated: