Moodle
  1. Moodle
  2. MDL-14932

Improve accessibility of 'assign role' button and the consistency of the UI in bulk user actions page

    Details

    • Database:
      Any
    • Affected Branches:
      MOODLE_16_STABLE, MOODLE_17_STABLE, MOODLE_18_STABLE, MOODLE_19_STABLE
    • Fixed Branches:
      MOODLE_17_STABLE, MOODLE_18_STABLE, MOODLE_19_STABLE
    • Rank:
      24447

      Description

      Currently the GUI is displaying a LEFT and RIGHT arrows (see screenshot), but this does not work well with screen readers such as JAWS. For better accessibility we have proposed a patch (see attached) to spell out the ADD and REMOVE.

      • Improve the consistency of the UI in bulk user actions page.
      1. changeset_r1257.diff
        1 kB
        Wen Hao Chuang
      2. MDL14932.diff
        2 kB
        Dongsheng Cai
      3. MDL-14932.patch
        3 kB
        Dongsheng Cai
      1. Assign_Roles_arrow_keys.png
        71 kB
      2. bulk_user_action.png
        140 kB
      3. group_assign.png
        108 kB
      4. group-button.jpg
        29 kB

        Issue Links

          Activity

          Hide
          Wen Hao Chuang added a comment -

          OK I'm adding Martin D to the watch list as we discussed few months ago. Martin please let me know what you think, thanks!

          Show
          Wen Hao Chuang added a comment - OK I'm adding Martin D to the watch list as we discussed few months ago. Martin please let me know what you think, thanks!
          Hide
          Eloy Lafuente (stronk7) added a comment -

          Assigning this to Dongsheng... my +1 for it (18_STABLE, 19_STABLE and HEAD). Ask MD for confirmation, please.

          Thanks for report and patch Wen!

          Ciao

          Show
          Eloy Lafuente (stronk7) added a comment - Assigning this to Dongsheng... my +1 for it (18_STABLE, 19_STABLE and HEAD). Ask MD for confirmation, please. Thanks for report and patch Wen! Ciao
          Hide
          Martin Dougiamas added a comment -

          Quick comments: take out the inline styles (must be in theme), and: would this get big in other languages? Can we not use alt tags or something similar for JAWS?

          Show
          Martin Dougiamas added a comment - Quick comments: take out the inline styles (must be in theme), and: would this get big in other languages? Can we not use alt tags or something similar for JAWS?
          Hide
          Dongsheng Cai added a comment -

          The inline styles are taken out from the file, put a new patch here.

          Show
          Dongsheng Cai added a comment - The inline styles are taken out from the file, put a new patch here.
          Hide
          Dongsheng Cai added a comment -

          It seems nobody oppose the new patch, see I committed the improvement. Feel free to reopen. Thanks

          Show
          Dongsheng Cai added a comment - It seems nobody oppose the new patch, see I committed the improvement. Feel free to reopen. Thanks
          Hide
          Wen Hao Chuang added a comment - - edited

          Dear Dongsheng, just my $0.02, I think you added the changes in styles_layout.css at the bottom, maybe in the future we could add it to corresponding sections in the styles_layout.css as there are many sections in styles_layout.css? For this change maybe it should go into the admin section? Just my humble opinion...so if I may I'm reopening this one for now so that we could add the

          #add, #remove

          { width: 100px; height: 35px }

          #add

          { text-align: left; }

          #remove

          { text-align: right; }

          to the *** Course section (around line #1729), what do people think? Thanks!

          Show
          Wen Hao Chuang added a comment - - edited Dear Dongsheng, just my $0.02, I think you added the changes in styles_layout.css at the bottom, maybe in the future we could add it to corresponding sections in the styles_layout.css as there are many sections in styles_layout.css? For this change maybe it should go into the admin section? Just my humble opinion...so if I may I'm reopening this one for now so that we could add the #add, #remove { width: 100px; height: 35px } #add { text-align: left; } #remove { text-align: right; } to the *** Course section (around line #1729), what do people think? Thanks!
          Hide
          Dongsheng Cai added a comment -

          Wenhao, fixed, please review.

          Show
          Dongsheng Cai added a comment - Wenhao, fixed, please review.
          Hide
          Petr Škoda added a comment -

          thanks

          Show
          Petr Škoda added a comment - thanks
          Hide
          Séverin Terrier added a comment -

          I'm not sure this change is a good idea.
          It takes more space on the screen, and let less place for usefull information
          Would it be possible to put these as Alt text, as MartinD suggested ?

          And the text is not entirely shown (see attachment)

          Show
          Séverin Terrier added a comment - I'm not sure this change is a good idea. It takes more space on the screen, and let less place for usefull information Would it be possible to put these as Alt text, as MartinD suggested ? And the text is not entirely shown (see attachment)
          Hide
          Petr Škoda added a comment -

          hmm, I like it - I had problems with the old arrows in "non-standard" browsers

          Show
          Petr Škoda added a comment - hmm, I like it - I had problems with the old arrows in "non-standard" browsers
          Hide
          Dongsheng Cai added a comment -

          Hi, Séverin, alt text is for image input.

          Show
          Dongsheng Cai added a comment - Hi, Séverin, alt text is for image input.
          Hide
          Dongsheng Cai added a comment -

          so...
          Should I revert to the old version?

          Show
          Dongsheng Cai added a comment - so... Should I revert to the old version?
          Hide
          Wen Hao Chuang added a comment -

          This fix was mainly to address "accessibility" issues (for screen readers like JAWS), although it might have some pros and cons with "usability". I guess more and more universities will be following similar accessible technology initiative like the CSU one (see: http://www.calstate.edu/accessibility/), which is why I would vote to keep this fix in the core (to reduce trouble for most schools to have to keep this as their local customization). Just my 2 cents.

          Séverin, which Web browser with what resolution did you use to generate that cut-off "remove" button for your screenshot? Just curious.. thanks!

          Show
          Wen Hao Chuang added a comment - This fix was mainly to address "accessibility" issues (for screen readers like JAWS), although it might have some pros and cons with "usability". I guess more and more universities will be following similar accessible technology initiative like the CSU one (see: http://www.calstate.edu/accessibility/ ), which is why I would vote to keep this fix in the core (to reduce trouble for most schools to have to keep this as their local customization). Just my 2 cents. Séverin, which Web browser with what resolution did you use to generate that cut-off "remove" button for your screenshot? Just curious.. thanks!
          Hide
          Martin Dougiamas added a comment -

          Yes don't revert, because

          1) Different languages can choose appropriate strings there (including "" if they must).

          2) The cutoff thing looks like a CSS bug perhaps? It can probably be fixed.

          Show
          Martin Dougiamas added a comment - Yes don't revert, because 1) Different languages can choose appropriate strings there (including "" if they must). 2) The cutoff thing looks like a CSS bug perhaps? It can probably be fixed.
          Hide
          Dongsheng Cai added a comment - - edited

          Séverin, are you using the old version IE?

          Show
          Dongsheng Cai added a comment - - edited Séverin, are you using the old version IE?
          Hide
          Séverin Terrier added a comment -

          Sorry for the late answer, didn't see all comments.

          I think i was tired when putting this comment : it's related to group assignment

          I've just tested latest CVS version, with Firefox 3 (i was using 2.0.0.14 when putting my first comment), and there are no alignment problem in role assignment, and text is all visible

          But, for group assignment, problem is still there : text isn't all contained (in french), and the arrows are not the same (the two on the left) as in role assignment (one arrow on the left, the other one on the right). Would be good if interface was consistent

          Show
          Séverin Terrier added a comment - Sorry for the late answer, didn't see all comments. I think i was tired when putting this comment : it's related to group assignment I've just tested latest CVS version, with Firefox 3 (i was using 2.0.0.14 when putting my first comment), and there are no alignment problem in role assignment, and text is all visible But, for group assignment, problem is still there : text isn't all contained (in french), and the arrows are not the same (the two on the left) as in role assignment (one arrow on the left, the other one on the right). Would be good if interface was consistent
          Hide
          Dongsheng Cai added a comment -

          I attached another patch here, it fixed the button in group assigning page, tested in French, English and Chinese.

          Show
          Dongsheng Cai added a comment - I attached another patch here, it fixed the button in group assigning page, tested in French, English and Chinese.
          Hide
          Martin Dougiamas added a comment -

          Dongsheng, I don't see any changes in that patch (except for white space) ... is something missing?

          Show
          Martin Dougiamas added a comment - Dongsheng, I don't see any changes in that patch (except for white space) ... is something missing?
          Hide
          Anthony Borrow added a comment -

          group assignment screen shot

          Show
          Anthony Borrow added a comment - group assignment screen shot
          Hide
          Dongsheng Cai added a comment -

          Sorry, I attached a wrong file

          Show
          Dongsheng Cai added a comment - Sorry, I attached a wrong file
          Hide
          Martin Dougiamas added a comment -

          No probs, can you also look at the Bulk user actions screen to see if it's possible to use the same screen there? admin/user/user_bulk.php

          Show
          Martin Dougiamas added a comment - No probs, can you also look at the Bulk user actions screen to see if it's possible to use the same screen there? admin/user/user_bulk.php
          Hide
          Anthony Borrow added a comment -

          Dongsheng - I've added a screen shot of the bulk user action page so you can see what it looks like which is very similar to what you've been doing in fixing up this one. I'll had that this issue has some type of relationship to MDL-13557 Peace - Anthony

          Show
          Anthony Borrow added a comment - Dongsheng - I've added a screen shot of the bulk user action page so you can see what it looks like which is very similar to what you've been doing in fixing up this one. I'll had that this issue has some type of relationship to MDL-13557 Peace - Anthony
          Hide
          Anthony Borrow added a comment -

          If Dongsheng is able to work on the bulk user actions page (/admin/user/user_bulk.php) it will help to improve the consistency of the user interface and thus help address the question of MDL-13557's UI

          Show
          Anthony Borrow added a comment - If Dongsheng is able to work on the bulk user actions page (/admin/user/user_bulk.php) it will help to improve the consistency of the user interface and thus help address the question of MDL-13557 's UI
          Hide
          Dongsheng Cai added a comment -

          I removed the space in add/delete button, and align the text in the center of the button, not sure if this is the best practice, because different language has different length.

          Show
          Dongsheng Cai added a comment - I removed the space in add/delete button, and align the text in the center of the button, not sure if this is the best practice, because different language has different length.
          Hide
          Dongsheng Cai added a comment -

          Hi, Anthony, no problem, I will work on bulk user page.

          Show
          Dongsheng Cai added a comment - Hi, Anthony, no problem, I will work on bulk user page.
          Hide
          Dongsheng Cai added a comment -

          The buttons are fixed in 1.7, 1.8, 1.9 and HEAD.

          Show
          Dongsheng Cai added a comment - The buttons are fixed in 1.7, 1.8, 1.9 and HEAD.
          Hide
          Petr Škoda added a comment -

          works for now, thanks

          Show
          Petr Škoda added a comment - works for now, thanks

            People

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

              Dates

              • Created:
                Updated:
                Resolved: