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

More accessible larrow, rarrow (and darrow?)

XMLWordPrintable

    • MOODLE_311_STABLE, MOODLE_39_STABLE, MOODLE_400_STABLE

      We have $OUTPUT->larrow() etc. functions which output directional arrows.

      The code for these functions is old and weird, since it dates from a time when getting a unicode arrow to show up in IE6 was a struggle.

      The code mentions accessibility in a comment at the top, but it feels like

      a) the defaults used aren't accessible (at least by modern standards)

      b) trying to override it to use an accessible alternative is harder than you'd think.

      There is a configuration option that lets you change how this appears.

      The modern approach would normally be something like <span class="sr-only">Move to previous month</span><i class="fa fa-left" aria-hidden="true">, so screen reader users get the text, and non screen readers get an indicative icon.

      The first complication occurs because the above is HTML, and while it works in some places that the old code was used, others are only expecting unicode characters, not HTML. in particular the arrow shows up on some buttons where the button text is in an attribute and it breaks everything since it's not expecting HTML to be returned by this function.

       

      The second complication is that, despite the code comment about the arrow being accompanied by text equivalents for screen readers, it's not consistently done correctly.

      For example, in the calendar block, which I'll file a seperate specific bug for, currently screen readers will read out the unicode character because it's not marked as aria-hidden.

      It would probably be worth reviewing all the places the arrow functions are called in core to see if they have accessability issues for screen readers and if they can be fixed in a similar way to that one.

       

       

            Unassigned Unassigned
            bawjaws David Scotson
            Votes:
            2 Vote for this issue
            Watchers:
            3 Start watching this issue

              Created:
              Updated:
              Resolved:

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