Moodle
  1. Moodle
  2. MDL-27843 META: Accessibility compliance for 2.x
  3. MDL-30887

quiz navigation block uses background color to convey information

    Details

    • Type: Sub-task Sub-task
    • Status: Closed
    • Priority: Minor Minor
    • Resolution: Won't Fix
    • Affects Version/s: 2.1.1
    • Fix Version/s: None
    • Component/s: Accessibility, Quiz
    • Labels:
    • Affected Branches:
      MOODLE_21_STABLE
    • Rank:
      33896

      Description

      The Quiz Navigation section within the quiz uses a background color to indicate an answered question, which does not show up in high contrast mode. There needs to be some other type of visual cue, like a foreground image that indicates whether a question has been answered or not. In general, images that convey important functional information should not be rendered as background images within CSS - they should be foreground images.

        Activity

        Hide
        Tim Hunt added a comment -

        We had a long debate about this at the OU.

        All the information conveyed by colour is already conveyed by other means as well.

        The colours are very nice for sighted users. Therefore we will keep them.

        Show
        Tim Hunt added a comment - We had a long debate about this at the OU. All the information conveyed by colour is already conveyed by other means as well. The colours are very nice for sighted users. Therefore we will keep them.
        Hide
        Greg Kraus added a comment -

        I'm not saying do away with the color. I'm just saying the same information needs to be presented in other ways too. The problem is especially bad for Windows users in high contrast mode. In high contrast mode, all of the background images are removed. I have attached two screen shots that demonstrate this. Some options here are to either add a foreground image into the status box for each question, or possibly change the CSS so the border is different for saved vs. unsaved answers.

        Because the title attribute has this information screen reader users are OK.

        The ability to quickly scan all of the questions and see which ones are unanswered is valuable. The only way I know how to do this other than the quiz navigation block is to progress through all of the pages of the quiz until I get to the "Summary of attempt" page.

        Show
        Greg Kraus added a comment - I'm not saying do away with the color. I'm just saying the same information needs to be presented in other ways too. The problem is especially bad for Windows users in high contrast mode. In high contrast mode, all of the background images are removed. I have attached two screen shots that demonstrate this. Some options here are to either add a foreground image into the status box for each question, or possibly change the CSS so the border is different for saved vs. unsaved answers. Because the title attribute has this information screen reader users are OK. The ability to quickly scan all of the questions and see which ones are unanswered is valuable. The only way I know how to do this other than the quiz navigation block is to progress through all of the pages of the quiz until I get to the "Summary of attempt" page.
        Hide
        Greg Kraus added a comment - - edited

        The quiz navigation block with questions 1,2, and 3 already saved, while viewing questions 4,i, and 5. The grey color makes it easy to see which questions are answered and which are not.

        references screenshot-quiz-navigation-standard-view.jpg

        Show
        Greg Kraus added a comment - - edited The quiz navigation block with questions 1,2, and 3 already saved, while viewing questions 4,i, and 5. The grey color makes it easy to see which questions are answered and which are not. references screenshot-quiz-navigation-standard-view.jpg
        Hide
        Greg Kraus added a comment - - edited

        The quiz navigation block with questions 1,2, and 3 already saved, while viewing questions 4,i, and 5. Even though questions 6 and 7 are unanswered, I cannot tell that they have any different status than questions 1,2, and 3.

        references screenshot-quiz-navigation-high-contrast-mode.jpg

        Show
        Greg Kraus added a comment - - edited The quiz navigation block with questions 1,2, and 3 already saved, while viewing questions 4,i, and 5. Even though questions 6 and 7 are unanswered, I cannot tell that they have any different status than questions 1,2, and 3. references screenshot-quiz-navigation-high-contrast-mode.jpg
        Hide
        Greg Kraus added a comment -

        Here are the pertinent WCAG 2.0 specifications and guidelines for how to meet them.

        1.4.1 - Use of Color
        http://www.w3.org/TR/WCAG/#visual-audio-contrast

        (to a degree) 1.3.3 - Sensory Characteristics
        http://www.w3.org/TR/WCAG/#content-structure-separation

        Show
        Greg Kraus added a comment - Here are the pertinent WCAG 2.0 specifications and guidelines for how to meet them. 1.4.1 - Use of Color http://www.w3.org/TR/WCAG/#visual-audio-contrast (to a degree) 1.3.3 - Sensory Characteristics http://www.w3.org/TR/WCAG/#content-structure-separation
        Hide
        Tim Hunt added a comment -

        "I cannot tell that they have any different status than questions"

        What you actually mean is "I cannot tell, just by looking at the navigation panel, that ..." - unless you hover your mouse over it and get a tool-tip. Of course you can see on the right that 4 and 5 are not yet answered.

        I don't think it is any help for you to link me to generic W3C guidelines. If you want to convince me to solve this, get out Photoshop (or similar) and amend the screen-grab of high-contrast mode (and make the corresponding changes in normal mode) to show me an effective graphic design that solves this 'problem' and looks nice.

        Actually, I know half a potential solutions. See http://moodle.org/mod/forum/discuss.php?d=183604. The only problems are that the way the OU theme is currently implemented does not work in Windows high-contrast mode. It uses background images which disappear. That could possibly be fixed. The other problem is that changing this could piss off all theme designers.

        Show
        Tim Hunt added a comment - "I cannot tell that they have any different status than questions" What you actually mean is "I cannot tell, just by looking at the navigation panel, that ..." - unless you hover your mouse over it and get a tool-tip. Of course you can see on the right that 4 and 5 are not yet answered. I don't think it is any help for you to link me to generic W3C guidelines. If you want to convince me to solve this, get out Photoshop (or similar) and amend the screen-grab of high-contrast mode (and make the corresponding changes in normal mode) to show me an effective graphic design that solves this 'problem' and looks nice. Actually, I know half a potential solutions. See http://moodle.org/mod/forum/discuss.php?d=183604 . The only problems are that the way the OU theme is currently implemented does not work in Windows high-contrast mode. It uses background images which disappear. That could possibly be fixed. The other problem is that changing this could piss off all theme designers.

          People

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

            Dates

            • Created:
              Updated:
              Resolved: