Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-72688

Fix content bank accessibility issues found in the 3.11 accessibility audit

XMLWordPrintable

    • MOODLE_310_STABLE, MOODLE_311_STABLE
    • MOODLE_310_STABLE, MOODLE_311_STABLE
    • MDL-72688-master
    • Hide
      1. Login as Admin
      2. Navigate to the content bank
      3. Upload the attached H5P files and do it again until you have about 5 files (it is okay to upload duplicates)
      4. Click the list view (the "Display contentbank with file details" button)
      5. Refresh the page
      6. Open the browser's developer tools window and select the content bank table using inspect element (the table is a <div> with data-region="filearea")
      7. check the accessibility tree of the selected element
        1. On Chrome, after selecting the element on the 'Elements' tab, go to the 'Accessibility' tab
        2. On Firefox, after selecting the element on the 'Inspector' tab, right-click on the element's markup and select 'Show Accessibility Properties'
      8. Verify that the Accessibility tree contains a 'table' that includes some 'rows'
      9. Verify that the first row includes some 'columnheader' children
      10. Verify that other rows include some 'cell' children (Chrome shows it as 'gridcell')
      11. Click the icon view (the "Display contentbank with icons" button)
      12. Open the browser's developer tools window and select the content bank table using inspect element (the table is a <div> with data-region="filearea")
      13. check the accessibility tree of the selected element
        1. On Chrome, after selecting the element on the 'Elements' tab, go to the 'Accessibility' tab
        2. On Firefox, after selecting the element on the 'Inspector' tab, right-click on the element's markup and select 'Show Accessibility Properties'
      14. Verify that the Accessibility tree contains a 'list' that includes some 'listitems'
      15. Refresh the page
      16. Repeat steps 12 to 14
      17. Click the list view (the "Display contentbank with file details" button)
      18. Repeat steps 6 to 10
      19. Zoom the browser content to 200%
      20. Verify that the sort icons are not overlapped and are not moved into adjacent cells.
      Show
      Login as Admin Navigate to the content bank Upload the attached H5P files and do it again until you have about 5 files (it is okay to upload duplicates) Click the list view (the "Display contentbank with file details" button) Refresh the page Open the browser's developer tools window and select the content bank table using inspect element (the table is a <div> with data-region="filearea") check the accessibility tree of the selected element On Chrome, after selecting the element on the 'Elements' tab, go to the 'Accessibility' tab On Firefox, after selecting the element on the 'Inspector' tab, right-click on the element's markup and select 'Show Accessibility Properties' Verify  that the Accessibility tree contains a 'table' that includes some 'rows' Verify that the first row includes some 'columnheader' children Verify that other rows include some 'cell' children (Chrome shows it as 'gridcell') Click the icon view (the "Display contentbank with icons" button) Open the browser's developer tools window and select the content bank table using inspect element (the table is a <div> with data-region="filearea") check the accessibility tree of the selected element On Chrome, after selecting the element on the 'Elements' tab, go to the 'Accessibility' tab On Firefox, after selecting the element on the 'Inspector' tab, right-click on the element's markup and select 'Show Accessibility Properties' Verify  that the Accessibility tree contains a 'list' that includes some 'listitems' Refresh the page Repeat steps 12 to 14 Click the list view (the "Display contentbank with file details" button) Repeat steps 6 to 10 Zoom the browser content to 200% Verify that the sort icons are not overlapped and are not moved into adjacent cells.
    • HQ Team International Sprin 10, HQ Team International CI H2-21

      Content bank - admin
      1. There is content styled to appear as a data table but is not programmatically defined as such. Because there are no defined table elements, the visible context of the table header content is not repeated through the content underneath and, thus, not available to assistive technology users.
      2. When CSS is turned off, the logical order of the table is not maintained.
      3. When zoomed to 200% the content in the table breaks their containers and overlaps. See Fig 18.02
      4. When zoomed to 400%, the content in the table is condensed into 2 columns, with the all of the table headers linearised first before all of the content that should be underneath each table header. This means that all of the table's context is lost.

       

        1. MDL-72688 step 9.png
          MDL-72688 step 9.png
          12 kB
        2. MDL-72688 step 14.png
          MDL-72688 step 14.png
          7 kB
        3. MDL-72688 step 10.png
          MDL-72688 step 10.png
          13 kB
        4. MDL-72688 overlap before.png
          MDL-72688 overlap before.png
          33 kB
        5. MDL-72688 overlap after.png
          MDL-72688 overlap after.png
          35 kB
        6. MDL-72688_Test Passed.png
          MDL-72688_Test Passed.png
          525 kB
        7. Fig. 18.02 Content breaking when zoomed to 200%.png
          Fig. 18.02 Content breaking when zoomed to 200%.png
          6 kB
        8. agamotto2.h5p
          1.46 MB

            rezaie9 Shamim Rezaie
            rezaie9 Shamim Rezaie
            Simey Lameze Simey Lameze
            Jun Pataleta Jun Pataleta
            Gladys Basiana Gladys Basiana
            Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 2 days, 6 hours, 39 minutes
                2d 6h 39m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.