Uploaded image for project: 'Sakai'
  1. Sakai
  2. SAK-41290 gradebook, accessibility: Multiple Gradebook accessibility issues.
  3. SAK-41462

gradebook, accessibility: Grade Statistics bar charts readability/accessibility issues

    XMLWordPrintable

    Details

    • Test Plan:
      Hide

      Note: This should be tested on multiple browsers, including mobile.

      1. In a site with a large number of students (e.g., 100) and the Gradebook tool, add a gradebook item.
      2. Enter grades in the item for all the students.
      3. Select the menu (down arrow) in the Gradebook item's cell, then View Grade Statistics.
      4. Make sure you can read the numbers and understand the graph overall.
      5. Use your browser zoom to increase text/image size progressively until you get to the highest level of zoom available (500% in Chrome, may be 400% in other browsers), making sure you can read the graph at each level of zoom. If you're not familiar with the steps:
      6. Close the window and select the menu (down arrow) in the Course Grade cell, then View Grade Statistics.
      7. Make sure you can read the numbers and understand the graph overall.
      8. Use your browser zoom to increase text/image size progressively until you get to the highest level of zoom available (500% in Chrome, may be 400% in other browsers), making sure you can read the graph at each level of zoom.
      Show
      Note: This should be tested on multiple browsers, including mobile. In a site with a large number of students (e.g., 100) and the Gradebook tool, add a gradebook item. Enter grades in the item for all the students. Select the menu (down arrow) in the Gradebook item's cell, then View Grade Statistics . Make sure you can read the numbers and understand the graph overall. Use your browser zoom to increase text/image size progressively until you get to the highest level of zoom available (500% in Chrome, may be 400% in other browsers), making sure you can read the graph at each level of zoom. If you're not familiar with the steps: Zoom in on Chrome Zoom in on Firefox Zoom in on Safari Close the window and select the menu (down arrow) in the Course Grade cell, then View Grade Statistics . Make sure you can read the numbers and understand the graph overall. Use your browser zoom to increase text/image size progressively until you get to the highest level of zoom available (500% in Chrome, may be 400% in other browsers), making sure you can read the graph at each level of zoom.

      Description

      There are several readability/accessibility issues with the Grade Distribution bar charts in Gradebook's Grade Statistics pop-out windows:

      1. With large data sets, the numbers on the axes can become completely unreadable.
      2. On high zoom, the entire chart becomes an unreadable blur. On a mobile browser, the chart also may be difficult or impossible to read.
      3. The numbers shown at an angle on the horizontal axis (Number of Students) in the Course Grade Statistics bar chart can be hard to read and particularly confusing to users with cognitive disabilities.

      Proposed solutions:

      1. If there are many numbers on an axis in the chart, show fewer numbers; for example, 5, 10, 15 instead of 1, 2, 3.
      2. Make the chart scale properly on zoom.
      3. Make the horizontal axis in Course Grade Statistics show the numbers normally like in the other Grade Statistics charts, not at an angle.

      The following screen shots provide examples of the issues:

      Grade Statistics for an individual gradebook item:

      With a large number of students, the numbers are an unintelligible blur. Zooming in does not improve the user's ability to tell what the numbers are:


      With high zoom, the chart is completely unreadable:

      Course Grade Statistics:

      Angled numbers on horizontal axis:

      High zoom, unreadable chart:

        Gliffy Diagrams

          Zeplin

            Attachments

              Activity

                People

                Assignee:
                maintenanceteam Core Team
                Reporter:
                rainribbon Tiffany Stull
                Votes:
                0 Vote for this issue
                Watchers:
                5 Start watching this issue

                  Dates

                  Created:
                  Updated:
                  Resolved:

                    Git Integration