Uploaded image for project: '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

      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.

        Gliffy Diagrams

        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
            chuang 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
            chuang 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
            stronk7 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
            stronk7 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
            dougiamas 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
            dougiamas 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 Dongsheng Cai added a comment -

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

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

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

            Show
            dongsheng Dongsheng Cai added a comment - It seems nobody oppose the new patch, see I committed the improvement. Feel free to reopen. Thanks
            Hide
            chuang 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
            chuang 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 Dongsheng Cai added a comment -

            Wenhao, fixed, please review.

            Show
            dongsheng Dongsheng Cai added a comment - Wenhao, fixed, please review.
            Hide
            skodak Petr Skoda added a comment -

            thanks

            Show
            skodak Petr Skoda added a comment - thanks
            Hide
            fox 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
            fox 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
            skodak Petr Skoda added a comment -

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

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

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

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

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

            Show
            dongsheng Dongsheng Cai added a comment - so... Should I revert to the old version?
            Hide
            chuang 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
            chuang 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
            dougiamas 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
            dougiamas 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 Dongsheng Cai added a comment - - edited

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

            Show
            dongsheng Dongsheng Cai added a comment - - edited Séverin, are you using the old version IE?
            Hide
            fox 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
            fox 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 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 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
            dougiamas Martin Dougiamas added a comment -

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

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

            group assignment screen shot

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

            Sorry, I attached a wrong file

            Show
            dongsheng Dongsheng Cai added a comment - Sorry, I attached a wrong file
            Hide
            dougiamas 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
            dougiamas 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
            aborrow 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
            aborrow 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
            aborrow 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
            aborrow 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 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 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 Dongsheng Cai added a comment -

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

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

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

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

            works for now, thanks

            Show
            skodak Petr Skoda added a comment - works for now, thanks

              People

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

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  11/Jul/08