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

            chuang Wen Hao Chuang created issue -
            chuang Wen Hao Chuang made changes -
            Field Original Value New Value
            Attachment Assign_Roles_arrow_keys.png [ 14056 ]
            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
            stronk7 Eloy Lafuente (stronk7) made changes -
            Assignee Eloy Lafuente (stronk7) [ stronk7 ] Dongsheng Cai [ dongsheng ]
            stronk7 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
            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.
            dongsheng Dongsheng Cai made changes -
            Attachment MDL14932.diff [ 14066 ]
            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
            dongsheng Dongsheng Cai made changes -
            Status Open [ 1 ] Resolved [ 5 ]
            QA Assignee stronk7
            Resolution Fixed [ 1 ]
            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!
            chuang Wen Hao Chuang made changes -
            Resolution Fixed [ 1 ]
            Status Resolved [ 5 ] Reopened [ 4 ]
            Hide
            dongsheng Dongsheng Cai added a comment -

            Wenhao, fixed, please review.

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

            thanks

            Show
            skodak Petr Skoda added a comment - thanks
            skodak Petr Skoda made changes -
            Status Resolved [ 5 ] Closed [ 6 ]
            QA Assignee chuang skodak
            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)
            fox Séverin Terrier made changes -
            Attachment group-button.jpg [ 14193 ]
            dougiamas Martin Dougiamas made changes -
            Resolution Fixed [ 1 ]
            Status Closed [ 6 ] Reopened [ 4 ]
            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.
            dongsheng Dongsheng Cai made changes -
            Attachment MDL-14932.patch [ 14480 ]
            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
            aborrow Anthony Borrow made changes -
            Attachment group_assign.png [ 14508 ]
            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
            aborrow Anthony Borrow made changes -
            Attachment bulk_user_action.png [ 14509 ]
            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
            aborrow Anthony Borrow made changes -
            Link This issue will help resolve MDL-13557 [ MDL-13557 ]
            dongsheng Dongsheng Cai made changes -
            Attachment MDL-14932.patch [ 14480 ]
            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.
            dongsheng Dongsheng Cai made changes -
            Attachment MDL-14932.patch [ 14510 ]
            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.
            dongsheng 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 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.
            dougiamas Martin Dougiamas made changes -
            Fix Version/s 1.9.3 [ 10290 ]
            Fix Version/s 1.9.2 [ 10280 ]
            dougiamas Martin Dougiamas made changes -
            Fix Version/s 1.8.7 [ 10291 ]
            Fix Version/s 1.8.6 [ 10270 ]
            dougiamas 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
            skodak Petr Skoda added a comment -

            works for now, thanks

            Show
            skodak Petr Skoda added a comment - works for now, thanks
            skodak Petr Skoda made changes -
            Status Resolved [ 5 ] Closed [ 6 ]
            dougiamas Martin Dougiamas made changes -
            Workflow jira [ 26565 ] MDL Workflow [ 59842 ]
            dougiamas 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:
                  Fix Release Date:
                  11/Jul/08