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

          Wen Hao Chuang created issue -
          Wen Hao Chuang made changes -
          Field Original Value New Value
          Attachment Assign_Roles_arrow_keys.png [ 14056 ]
          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
          Eloy Lafuente (stronk7) made changes -
          Assignee Eloy Lafuente (stronk7) [ stronk7 ] Dongsheng Cai [ dongsheng ]
          Eloy Lafuente (stronk7) made changes -
          Fix Version/s 1.8.6 [ 10270 ]
          Fix Version/s 1.9.2 [ 10280 ]
          Fix Version/s 2.0 [ 10122 ]
          Affects Version/s 1.6 [ 10110 ]
          Affects Version/s 1.6.1 [ 10118 ]
          Affects Version/s 1.6.2 [ 10119 ]
          Affects Version/s 1.7 [ 10120 ]
          Affects Version/s 1.8 [ 10130 ]
          Affects Version/s 1.6.3 [ 10140 ]
          Affects Version/s 1.6.4 [ 10150 ]
          Affects Version/s 1.7.1 [ 10151 ]
          Affects Version/s 1.7.2 [ 10174 ]
          Affects Version/s 1.9 [ 10190 ]
          Affects Version/s 1.6.5 [ 10210 ]
          Affects Version/s 1.7.3 [ 10212 ]
          Affects Version/s 1.8.1 [ 10213 ]
          Affects Version/s 1.8.2 [ 10220 ]
          Affects Version/s 1.8.3 [ 10230 ]
          Affects Version/s 1.8.4 [ 10242 ]
          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.
          Dongsheng Cai made changes -
          Attachment MDL14932.diff [ 14066 ]
          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
          Dongsheng Cai made changes -
          Status Open [ 1 ] Resolved [ 5 ]
          QA Assignee stronk7
          Resolution Fixed [ 1 ]
          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!
          Wen Hao Chuang made changes -
          Resolution Fixed [ 1 ]
          Status Resolved [ 5 ] Reopened [ 4 ]
          Hide
          Dongsheng Cai added a comment -

          Wenhao, fixed, please review.

          Show
          Dongsheng Cai added a comment - Wenhao, fixed, please review.
          Dongsheng Cai made changes -
          Status Reopened [ 4 ] Resolved [ 5 ]
          QA Assignee stronk7 chuang
          Resolution Fixed [ 1 ]
          Hide
          Petr Škoda added a comment -

          thanks

          Show
          Petr Škoda added a comment - thanks
          Petr Škoda made changes -
          Status Resolved [ 5 ] Closed [ 6 ]
          QA Assignee chuang skodak
          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)
          Séverin Terrier made changes -
          Attachment group-button.jpg [ 14193 ]
          Martin Dougiamas made changes -
          Resolution Fixed [ 1 ]
          Status Closed [ 6 ] Reopened [ 4 ]
          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.
          Dongsheng Cai made changes -
          Attachment MDL-14932.patch [ 14480 ]
          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
          Anthony Borrow made changes -
          Attachment group_assign.png [ 14508 ]
          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
          Anthony Borrow made changes -
          Attachment bulk_user_action.png [ 14509 ]
          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
          Anthony Borrow made changes -
          Link This issue will help resolve MDL-13557 [ MDL-13557 ]
          Dongsheng Cai made changes -
          Attachment MDL-14932.patch [ 14480 ]
          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.
          Dongsheng Cai made changes -
          Attachment MDL-14932.patch [ 14510 ]
          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.
          Dongsheng Cai made changes -
          Summary The "Assign roles" GUI with left / right arrows can be improved (accessibility) Improve accessibility of 'assign role' button and the consistency of the UI in bulk user actions page
          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. 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.
          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.
          Martin Dougiamas made changes -
          Fix Version/s 1.9.3 [ 10290 ]
          Fix Version/s 1.9.2 [ 10280 ]
          Martin Dougiamas made changes -
          Fix Version/s 1.8.7 [ 10291 ]
          Fix Version/s 1.8.6 [ 10270 ]
          Martin Dougiamas made changes -
          Status Reopened [ 4 ] Resolved [ 5 ]
          Fix Version/s 1.9.2 [ 10280 ]
          Fix Version/s 1.8.6 [ 10270 ]
          Fix Version/s 1.7.5 [ 10251 ]
          Fix Version/s 1.8.7 [ 10291 ]
          Fix Version/s 2.0 [ 10122 ]
          Fix Version/s 1.9.3 [ 10290 ]
          Resolution Fixed [ 1 ]
          Hide
          Petr Škoda added a comment -

          works for now, thanks

          Show
          Petr Škoda added a comment - works for now, thanks
          Petr Škoda made changes -
          Status Resolved [ 5 ] Closed [ 6 ]
          Martin Dougiamas made changes -
          Workflow jira [ 26565 ] MDL Workflow [ 59842 ]
          Martin Dougiamas made changes -
          Workflow MDL Workflow [ 59842 ] MDL Full Workflow [ 88998 ]

            People

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

              Dates

              • Created:
                Updated:
                Resolved: