Moodle
  1. Moodle
  2. MDL-35816 Accessibility Review issues (Deque)
  3. MDL-35873

View profile customize page icons need more descriptive alt text

    Details

    • Testing Instructions:
      Hide
      1. Login as student
      2. Click on Student's name in the upper right
      3. Click the customize page button
      4. Tab to the move icon in navigation block on the page and make sure it is descriptive (eg. Move navigation block)
      5. Go to site home page and turn editing on
      6. Check configuration, delete, assign role and hide/show block control icons and make sure they are also descriptive.
      Show
      Login as student Click on Student's name in the upper right Click the customize page button Tab to the move icon in navigation block on the page and make sure it is descriptive (eg. Move navigation block) Go to site home page and turn editing on Check configuration, delete, assign role and hide/show block control icons and make sure they are also descriptive.
    • Affected Branches:
      MOODLE_21_STABLE, MOODLE_22_STABLE, MOODLE_23_STABLE
    • Fixed Branches:
      MOODLE_23_STABLE, MOODLE_24_STABLE
    • Pull Master Branch:
      wip-mdl-35873
    • Rank:
      44638

      Description

      Issue
      Alt text - In "Customize" mode, there are comand icons in the block that appear labeled "Move" and "Configuration" but the user may have a hard time understanding how the move icon needs to be used and which block the user is moving or configuring.

      Link purpose - Once in "Customization" mode, the "Move" and "Customization" icons are all labeled the same are lose all meaning out of context.

      Standard Level
      WCAG 2 1.1.1 (A) http://www.w3.org/WAI/WCAG20/quickref/#qr-text-equiv-all
      WCAG 2 2.4.4 (A) http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-refs

      Impact
      Serious
      Critical

      Example Link
      http://demo.moodle.net/user/profile.php?id=0&sesskey=ZdAicfllpV&bui_moveid=293

      Test Steps

      1. Login as student
      2. Click on Student's name in the upper right
      3. Click the customize page button
      4. Tab to the move and configuration icons in each block on the page.

        Activity

        Hide
        Michael de Raadt added a comment -

        I assume you mean the icons on each block. Are you suggesting that each icon should have an alt that is specific to the block that it is on? What about the title on the associated link?

        Show
        Michael de Raadt added a comment - I assume you mean the icons on each block. Are you suggesting that each icon should have an alt that is specific to the block that it is on? What about the title on the associated link?
        Hide
        Jason Hardin added a comment -

        Yes I am suggesting that each alt text should have a unique string that identifies to the user what block they are about to move or configure. Each screen reader and browser handles titles differently. See http://www.paciellogroup.com/blog/2010/11/using-the-html-title-attribute/ for issues with the title attribute. Alt text is better supported.

        Show
        Jason Hardin added a comment - Yes I am suggesting that each alt text should have a unique string that identifies to the user what block they are about to move or configure. Each screen reader and browser handles titles differently. See http://www.paciellogroup.com/blog/2010/11/using-the-html-title-attribute/ for issues with the title attribute. Alt text is better supported.
        Hide
        Rajesh Taneja added a comment -

        Hello Jason,

        Is it fine if alt-text for move is renamed to something like (eg. for navigation block) "Move navigation block" ?
        Should we change title as well and is it fine to have it same as alt-text?

        Also, we have other icons like configuration, assign roles, delete, hide etc. Do you expect them to be changed as well?

        I have added Helen as watcher, to make sure new strings comply with moodle standards.

        Show
        Rajesh Taneja added a comment - Hello Jason, Is it fine if alt-text for move is renamed to something like (eg. for navigation block) "Move navigation block" ? Should we change title as well and is it fine to have it same as alt-text? Also, we have other icons like configuration, assign roles, delete, hide etc. Do you expect them to be changed as well? I have added Helen as watcher, to make sure new strings comply with moodle standards.
        Hide
        Helen Foster added a comment -

        I notice that the text for the +/- show/hide icon includes the block name e.g. 'Show Comments block', 'Hide Comments block' (though this is rather confusing since there is also an eye show/hide block).

        How about appending the block name to the text for the other icons e.g. 'Move Comments block', 'Configuration Comments block' etc.

        Show
        Helen Foster added a comment - I notice that the text for the +/- show/hide icon includes the block name e.g. 'Show Comments block', 'Hide Comments block' (though this is rather confusing since there is also an eye show/hide block). How about appending the block name to the text for the other icons e.g. 'Move Comments block', 'Configuration Comments block' etc.
        Hide
        Jason Hardin added a comment -

        Appending the block title would be the best I think. That way blocks like HTML block where the user can set the title will also work. If an admin adds a block to the page or the community creates a new block that can show on the page or multiple blocks of the same kind are on a page they will be differentiated. It would be on the admin then to label each block that has a customizable title correctly for maximum accessibility.

        Show
        Jason Hardin added a comment - Appending the block title would be the best I think. That way blocks like HTML block where the user can set the title will also work. If an admin adds a block to the page or the community creates a new block that can show on the page or multiple blocks of the same kind are on a page they will be differentiated. It would be on the admin then to label each block that has a customizable title correctly for maximum accessibility.
        Hide
        Rajesh Taneja added a comment - - edited

        Thanks for the feedback Jason,

        Looking at this again and discussing it in scrum, I am not sure if this is really an issue.
        I am not an accessibility expert, but it seems move and other icons are in context of header and should be kept as they are.
        As block title and icon's are enclosed in div.header, it should make sense by screen reader and other accessibility tools to read "Move icon" as "graphic move".

        Is it worth having explicit alt-text, considering following drawbacks:

        1. New string has to be introduced (As string concatenation in code will not be translatable). eg. "Move {$a} block".
        2. While screen-reader is going though block, it will read each icon with full name (graphic Move navigation block, graphic Configure navigation block, graphic assign role to navigation block ... ). Not sure if user expects to listen repeated block name.

        Any input is appreciated.

        Show
        Rajesh Taneja added a comment - - edited Thanks for the feedback Jason, Looking at this again and discussing it in scrum, I am not sure if this is really an issue. I am not an accessibility expert, but it seems move and other icons are in context of header and should be kept as they are. As block title and icon's are enclosed in div.header, it should make sense by screen reader and other accessibility tools to read "Move icon" as "graphic move". Is it worth having explicit alt-text, considering following drawbacks: New string has to be introduced (As string concatenation in code will not be translatable). eg. "Move {$a} block". While screen-reader is going though block, it will read each icon with full name (graphic Move navigation block, graphic Configure navigation block, graphic assign role to navigation block ... ). Not sure if user expects to listen repeated block name. Any input is appreciated.
        Hide
        Jason Hardin added a comment -

        Rajesh,
        The accessibility expert specifically called out the move and customization icons in the interface. As stated in the ticket those icons are not understandable when the user accesses them out of the context you just stated. For example. A user tabs through just the links on the page. When they get to the move icon the only word that is read is move, not the block title. In order to get the block title the user has to navigate back and issue a command to force the screen reader to read the block title.

        I would also refer your team to WCAG 2 A 2.4.4 the statement as follows:

        The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. (Level A)

        programmatically determined link context is:
        additional information that can be programmatically determined from relationships with a link, combined with the link text, and presented to users in different modalities
        Example: In HTML, information that is programmatically determinable from a link in English includes text that is in the same paragraph, list, or table cell as the link or in a table header cell that is associated with the table cell that contains the link.

        Note: Since screen readers interpret punctuation, they can also provide the context from the current sentence, when the focus is on a link in that sentence.

        To me this reads that expecting text in a div before the link to be read is not in context. And thus Moodle's current interface will not meet this level.

        The most common navigational action for a visually impaired intermediate user is to use the tab key or skip navigation to skip past all the auditory information on the screen they don't need.

        I recommend that you use NVDA (Windows) or Voiceover (Mac only) and listen to the page being read. Then you tab through the links on the page with your eyes closed. If you still think you know which block you are moving after that then come back to the ticket and state that.

        Finally I have no problem closing this ticket as long as I have a solid argument to go back to Deque with. In order to get Moodle 2 certified I need to be able to show all tickets have been closed or convince an accessibility expert that the issue reported is not an issue. I need to know exactly why this was not changed and how Moodle meets the WCAG 2 Standards mentioned for this ticket.

        Show
        Jason Hardin added a comment - Rajesh, The accessibility expert specifically called out the move and customization icons in the interface. As stated in the ticket those icons are not understandable when the user accesses them out of the context you just stated. For example. A user tabs through just the links on the page. When they get to the move icon the only word that is read is move, not the block title. In order to get the block title the user has to navigate back and issue a command to force the screen reader to read the block title. I would also refer your team to WCAG 2 A 2.4.4 the statement as follows: The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. (Level A) programmatically determined link context is: additional information that can be programmatically determined from relationships with a link, combined with the link text, and presented to users in different modalities Example: In HTML, information that is programmatically determinable from a link in English includes text that is in the same paragraph, list, or table cell as the link or in a table header cell that is associated with the table cell that contains the link. Note: Since screen readers interpret punctuation, they can also provide the context from the current sentence, when the focus is on a link in that sentence. To me this reads that expecting text in a div before the link to be read is not in context. And thus Moodle's current interface will not meet this level. The most common navigational action for a visually impaired intermediate user is to use the tab key or skip navigation to skip past all the auditory information on the screen they don't need. I recommend that you use NVDA (Windows) or Voiceover (Mac only) and listen to the page being read. Then you tab through the links on the page with your eyes closed. If you still think you know which block you are moving after that then come back to the ticket and state that. Finally I have no problem closing this ticket as long as I have a solid argument to go back to Deque with. In order to get Moodle 2 certified I need to be able to show all tickets have been closed or convince an accessibility expert that the issue reported is not an issue. I need to know exactly why this was not changed and how Moodle meets the WCAG 2 Standards mentioned for this ticket.
        Hide
        Jason Fowler added a comment -

        I agree that the alt text needs to be more verbose and descriptive, and include the context of the action. "Move block" doesn't provide enough details about the block being moved, but "Move calendar block" is an excellent improvement.

        Show
        Jason Fowler added a comment - I agree that the alt text needs to be more verbose and descriptive, and include the context of the action. "Move block" doesn't provide enough details about the block being moved, but "Move calendar block" is an excellent improvement.
        Hide
        Frédéric Massart added a comment -

        Thanks for the patch Raj, it looks good and can certainly go into integration, however as we discussed during Scrum, I am not sure whether we should fix this or not...

        I understand the need to have a descriptive alt text (or link) to allow any type of user to understand what they're clicking on. But I also think that, considering how subjective accessibility is, no solution will make everyone happy. I am pretty sure that in the case of this patch, some will complain that the text will take longer to be read by a screen reader. Also, once you will have listened to the first icon action, let's say "Move navigation block", you will most likely not listen to other ones, apart from the first word. On the other side, a descriptive link helps confirming that you will trigger the correct action: "Delete navigation block".

        I am not saying we shouldn't fix, neither am I saying that we should, but if we go for this solution, I think we should consider the following points:

        • If implemented, it means that any icon anywhere in Moodle should become as descriptive. There are lots of other places where this is an issue, but I couldn't find them in the META MDL-35816. What makes those pages different? Examples:
          • Edit icons right next to a module on a course page
          • Icons up and down in Home ► Site administration ► Plugins ► Repositories ► Manage repositories
        • Performances will be affected as we are introducing more strings, and caching will be less effective as each block will have its own strings.
        • If we're going for this, shouldn't we create some generics strings like "Move {$a}" instead of "Move {$a} block" to be able to reuse them without polluting the language files?

        Cheers,
        Fred

        Show
        Frédéric Massart added a comment - Thanks for the patch Raj, it looks good and can certainly go into integration, however as we discussed during Scrum, I am not sure whether we should fix this or not... I understand the need to have a descriptive alt text (or link) to allow any type of user to understand what they're clicking on. But I also think that, considering how subjective accessibility is, no solution will make everyone happy. I am pretty sure that in the case of this patch, some will complain that the text will take longer to be read by a screen reader. Also, once you will have listened to the first icon action, let's say "Move navigation block", you will most likely not listen to other ones, apart from the first word. On the other side, a descriptive link helps confirming that you will trigger the correct action: "Delete navigation block". I am not saying we shouldn't fix, neither am I saying that we should, but if we go for this solution, I think we should consider the following points: If implemented, it means that any icon anywhere in Moodle should become as descriptive. There are lots of other places where this is an issue, but I couldn't find them in the META MDL-35816 . What makes those pages different? Examples: Edit icons right next to a module on a course page Icons up and down in Home ► Site administration ► Plugins ► Repositories ► Manage repositories Performances will be affected as we are introducing more strings, and caching will be less effective as each block will have its own strings. If we're going for this, shouldn't we create some generics strings like "Move {$a}" instead of "Move {$a} block" to be able to reuse them without polluting the language files? Cheers, Fred
        Hide
        Rajesh Taneja added a comment - - edited

        I totally agree with you Fred. If we are changing block icons then all other editing icons needs to have similar change.

        I put forward similar concern above, and I am not sure how to defend them in response to Jason's comment.

        Will put in Dev chat and see if I get any more thoughts on this.

        Show
        Rajesh Taneja added a comment - - edited I totally agree with you Fred. If we are changing block icons then all other editing icons needs to have similar change. I put forward similar concern above, and I am not sure how to defend them in response to Jason's comment. Will put in Dev chat and see if I get any more thoughts on this.
        Hide
        Jason Fowler added a comment -

        The advantage of the long text is that it is there for the users that want it, while users who would rather skip it can.

        Show
        Jason Fowler added a comment - The advantage of the long text is that it is there for the users that want it, while users who would rather skip it can.
        Hide
        Rajesh Taneja added a comment -

        As per Generic strings, IMHO it won't help much. Not sure what user will interpret from "Move navigation", "Move main menu" etc.

        Show
        Rajesh Taneja added a comment - As per Generic strings, IMHO it won't help much. Not sure what user will interpret from "Move navigation", "Move main menu" etc.
        Hide
        Jason Fowler added a comment -

        well, append "block" to that, and they get the exact meaning of what the control allows them to do

        Show
        Jason Fowler added a comment - well, append "block" to that, and they get the exact meaning of what the control allows them to do
        Hide
        Rajesh Taneja added a comment -

        I am push it for integration as patch is fine.
        Not sure if we should have more alt-text changes, but seems no one has a good answer for it.

        Leaving it for integrators to decide.

        Show
        Rajesh Taneja added a comment - I am push it for integration as patch is fine. Not sure if we should have more alt-text changes, but seems no one has a good answer for it. Leaving it for integrators to decide.
        Hide
        Eloy Lafuente (stronk7) added a comment -

        The main moodle.git repository has just been updated with latest weekly modifications. You may wish to rebase your PULL branches to simplify history and avoid any possible merge conflicts. This would also make integrator's life easier next week.

        TIA and ciao

        Show
        Eloy Lafuente (stronk7) added a comment - The main moodle.git repository has just been updated with latest weekly modifications. You may wish to rebase your PULL branches to simplify history and avoid any possible merge conflicts. This would also make integrator's life easier next week. TIA and ciao
        Hide
        Sam Hemelryk added a comment -

        Thanks Raj, this has been integrated now.

        Show
        Sam Hemelryk added a comment - Thanks Raj, this has been integrated now.
        Hide
        Jason Fowler added a comment -

        got halfway through the testing instructions before realising I needed a screen reader to complete them.

        Test passed, thanks Raj

        Show
        Jason Fowler added a comment - got halfway through the testing instructions before realising I needed a screen reader to complete them. Test passed, thanks Raj
        Hide
        Dan Poltawski added a comment - - edited

        This broke blocks icon:

        @@ -1063,7 +1068,8 @@ class block_manager {
         
                     $controls[] = array('url' => $CFG->wwwroot . '/' . $CFG->admin .
                             '/roles/assign.php?contextid=' . $block->context->id . '&returnurl=' . urlencode($return),
        -                    'icon' => 'i/roles', 'caption' => get_string('assignroles', 'role'), 'class' => 'editing_roles');
        +                    'icon' => 't/roles', 'caption' => get_string('assignrolesinblock', 'block', $block->title),
        +                    'class' => 'editing_roles');
                 }
         
                 return $controls;
        
        Show
        Dan Poltawski added a comment - - edited This broke blocks icon: @@ -1063,7 +1068,8 @@ class block_manager { $controls[] = array('url' => $CFG->wwwroot . '/' . $CFG->admin . '/roles/assign.php?contextid=' . $block->context->id . '&returnurl=' . urlencode($ return ), - 'icon' => 'i/roles', 'caption' => get_string('assignroles', 'role'), 'class' => 'editing_roles'); + 'icon' => 't/roles', 'caption' => get_string('assignrolesinblock', 'block', $block->title), + 'class' => 'editing_roles'); } return $controls;
        Hide
        Dan Poltawski added a comment -

        in 2.3

        Show
        Dan Poltawski added a comment - in 2.3
        Show
        Rajesh Taneja added a comment - Thanks Dan, Here is the patch https://github.com/rajeshtaneja/moodle/commit/b61ab6193ba3151304909edbccc232688aba7f25
        Hide
        Dan Poltawski added a comment -

        Thanks Raj, pulled in the fix.

        Show
        Dan Poltawski added a comment - Thanks Raj, pulled in the fix.
        Hide
        Jason Fowler added a comment -

        Sorry about missing the icon, must have been so focused on the screen reader that I missed the web browser. It's all there now.

        Show
        Jason Fowler added a comment - Sorry about missing the icon, must have been so focused on the screen reader that I missed the web browser. It's all there now.
        Hide
        Dan Poltawski added a comment -

        Hurray! We did it! Thanks to all the reporters, testers, user and watchers for a bumper week of Moodling!

        Show
        Dan Poltawski added a comment - Hurray! We did it! Thanks to all the reporters, testers, user and watchers for a bumper week of Moodling!

          People

          • Votes:
            0 Vote for this issue
            Watchers:
            9 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: