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

Atto Accessibility Checker not catching accessibility issues in Firefox

XMLWordPrintable

    • MOODLE_32_STABLE, MOODLE_33_STABLE, MOODLE_38_STABLE
    • MOODLE_37_STABLE, MOODLE_38_STABLE
    • MDL-59817-master
    • Hide

      Notes

      Must be tested in multiple browsers:

      1. Chrome
      2. Firefox
      3. Edge

      Test

      1. Log in as any user
      2. Open the User menu -> Profile
      3. Choose the "Edit profile" link
      4. Find the "Description field"
      5. Expand the buttosn and switch to HTML mode
      6. Paste the following in:

        <h2>No parent</h2>
        <h3>Named colours</h3>
        <p>This is ordinary text</p>
        <p style="
        color: black;
        background-color: white;
        ">This is black on white</p>
        <p style="
        color: white;
        background-color: black;
        ">This is white on black</p>
        <p style="
        color: white;
        background-color: white;
        ">FAIL 1: This is white on white</p>
        <p style="
        color: black;
        background-color: black;
        ">FAIL 2: This is black on black</p>
        <p style="
        color: black;
        background-color: transparent;
        ">This is Black on transparent</p>
         
        <h3>RGB colours</h3>
        <p>This is ordinary text</p>
        <p style="
        color: rgb(0, 0, 0);
        background-color: rgb(255, 255, 255);
        ">This is black on white</p>
        <p style="
        color: rgb(255, 255, 255);
        background-color: rgb(0,0,0);
        ">This is white on black</p>
        <p style="
        color: rgb(255, 255, 255);
        background-color: rgb(255, 255, 255);
        ">FAIL 3: This is white on white</p>
        <p style="
        color: rgb(0, 0, 0);
        background-color: rgb(0,0,0);
        ">FAIL 4: This is black on black</p>
        <p style="
        color: rgb(0, 0, 0);
        background-color: transparent;
        ">This is Black on transparent</p>
         
        <h3>RGBA colours</h3>
        <p>This is ordinary text</p>
        <p style="
        color: rgba(0, 0, 0, 1);
        background-color: rgba(255, 255, 255, 1);
        ">This is black on white</p>
        <p style="
        color: rgba(255, 255, 255, 1);
        background-color: rgba(0, 0, 0, 1);
        ">This is white on black</p>
        <p style="
        color: rgba(255, 255, 255, 1);
        background-color: rgba(255, 255, 255, 1);
        ">FAIL 5: This is white on white</p>
        <p style="
        color: rgba(0, 0, 0, 1);
        background-color: rgba(0,0,0, 1);
        ">FAIL 6: This is black on black</p>
        <p style="
        color: rgba(0, 0, 0, 1);
        background-color: rgba(0, 0, 0, 0);
              ">This is Black on transparent</p>
        <div style="
            background: black;
            color: white;
        ">
            <h2>Parent div with white on black as default</h2>
            <h3>Named colours</h3>
            <p>This is ordinary text</p>
            <p style="
            color: black;
            background-color: white;
        ">This is black on white</p>
            <p style="
            color: white;
            background-color: black;
        ">This is white on black</p>
            <p style="
            color: white;
            background-color: white;
        ">FAIL 7: This is white on white</p>
            <p style="
            color: black;
            background-color: black;
        ">FAIL 8: This is black on black</p>
            <p id="fail09" style="
            color: black;
            background-color: transparent;
        ">FAIL 9: This is Black on transparent</p>
         
            <h3>RGB colours</h3>
            <p>This is ordinary text</p>
            <p style="
            color: rgb(0, 0, 0);
            background-color: rgb(255, 255, 255);
        ">This is black on white</p>
            <p style="
            color: rgb(255, 255, 255);
            background-color: rgb(0,0,0);
        ">This is white on black</p>
            <p style="
            color: rgb(255, 255, 255);
            background-color: rgb(255, 255, 255);
        ">FAIL 10: This is white on white</p>
            <p style="
            color: rgb(0, 0, 0);
            background-color: rgb(0,0,0);
        ">FAIL 11: This is black on black</p>
            <p id="fail12" style="
            color: rgb(0, 0, 0);
            background-color: transparent;
        ">FAIL 12: This is Black on transparent</p>
         
            <h3>RGBA colours</h3>
            <p>This is ordinary text</p>
            <p style="
            color: rgba(0, 0, 0, 1);
            background-color: rgba(255, 255, 255, 1);
        ">This is black on white</p>
            <p style="
            color: rgba(255, 255, 255, 1);
            background-color: rgba(0, 0, 0, 1);
        ">This is white on black</p>
            <p style="
            color: rgba(255, 255, 255, 1);
            background-color: rgba(255, 255, 255, 1);
        ">FAIL 13: This is white on white</p>
            <p style="
            color: rgba(0, 0, 0, 1);
            background-color: rgba(0,0,0, 1);
        ">FAIL 14: This is black on black</p>
            <p id="fail15" style="
            color: rgba(0, 0, 0, 1);
            background-color: rgba(0, 0, 0, 0);
                  ">FAIL 15: This is Black on transparent</p>
        </div>
        

      7. Switch out of HTML mode
      8. Press the "Accessibility checker" button
        1. Confirm that 15 items were reported
        2. Confirm all of the reported items were marked as FAIL
      Show
      Notes Must be tested in multiple browsers: Chrome Firefox Edge Test Log in as any user Open the User menu -> Profile Choose the "Edit profile" link Find the "Description field" Expand the buttosn and switch to HTML mode Paste the following in: <h2>No parent</h2> <h3>Named colours</h3> <p>This is ordinary text</p> <p style=" color: black; background-color: white; ">This is black on white</p> <p style=" color: white; background-color: black; ">This is white on black</p> <p style=" color: white; background-color: white; ">FAIL 1: This is white on white</p> <p style=" color: black; background-color: black; ">FAIL 2: This is black on black</p> <p style=" color: black; background-color: transparent; ">This is Black on transparent</p> <h3>RGB colours</h3> <p>This is ordinary text</p> <p style=" color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); ">This is black on white</p> <p style=" color: rgb(255, 255, 255); background-color: rgb(0,0,0); ">This is white on black</p> <p style=" color: rgb(255, 255, 255); background-color: rgb(255, 255, 255); ">FAIL 3: This is white on white</p> <p style=" color: rgb(0, 0, 0); background-color: rgb(0,0,0); ">FAIL 4: This is black on black</p> <p style=" color: rgb(0, 0, 0); background-color: transparent; ">This is Black on transparent</p> <h3>RGBA colours</h3> <p>This is ordinary text</p> <p style=" color: rgba(0, 0, 0, 1); background-color: rgba(255, 255, 255, 1); ">This is black on white</p> <p style=" color: rgba(255, 255, 255, 1); background-color: rgba(0, 0, 0, 1); ">This is white on black</p> <p style=" color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1); ">FAIL 5: This is white on white</p> <p style=" color: rgba(0, 0, 0, 1); background-color: rgba(0,0,0, 1); ">FAIL 6: This is black on black</p> <p style=" color: rgba(0, 0, 0, 1); background-color: rgba(0, 0, 0, 0); ">This is Black on transparent</p> <div style=" background: black; color: white; "> <h2>Parent div with white on black as default</h2> <h3>Named colours</h3> <p>This is ordinary text</p> <p style=" color: black; background-color: white; ">This is black on white</p> <p style=" color: white; background-color: black; ">This is white on black</p> <p style=" color: white; background-color: white; ">FAIL 7: This is white on white</p> <p style=" color: black; background-color: black; ">FAIL 8: This is black on black</p> <p id="fail09" style=" color: black; background-color: transparent; ">FAIL 9: This is Black on transparent</p> <h3>RGB colours</h3> <p>This is ordinary text</p> <p style=" color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); ">This is black on white</p> <p style=" color: rgb(255, 255, 255); background-color: rgb(0,0,0); ">This is white on black</p> <p style=" color: rgb(255, 255, 255); background-color: rgb(255, 255, 255); ">FAIL 10: This is white on white</p> <p style=" color: rgb(0, 0, 0); background-color: rgb(0,0,0); ">FAIL 11: This is black on black</p> <p id="fail12" style=" color: rgb(0, 0, 0); background-color: transparent; ">FAIL 12: This is Black on transparent</p> <h3>RGBA colours</h3> <p>This is ordinary text</p> <p style=" color: rgba(0, 0, 0, 1); background-color: rgba(255, 255, 255, 1); ">This is black on white</p> <p style=" color: rgba(255, 255, 255, 1); background-color: rgba(0, 0, 0, 1); ">This is white on black</p> <p style=" color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1); ">FAIL 13: This is white on white</p> <p style=" color: rgba(0, 0, 0, 1); background-color: rgba(0,0,0, 1); ">FAIL 14: This is black on black</p> <p id="fail15" style=" color: rgba(0, 0, 0, 1); background-color: rgba(0, 0, 0, 0); ">FAIL 15: This is Black on transparent</p> </div> Switch out of HTML mode Press the "Accessibility checker" button Confirm that 15 items were reported Confirm all of the reported items were marked as FAIL

      Test Case:

      In Firefox (54.0.1):
      1. Opened course topic editor (using Atto as default editor)
      2. Entered text. (no content color changes from the default "clean" theme font and background colors)
      3. Ran accessibility checker
      4. All entered text flagged with the following issue: "The colors of the foreground and background text do not have enough contrast. To fix this warning, change either foreground or background color of the text so that it is easier to read."
      5. Closed accessibility checker window. Viewed content HTML (Atto editor's "HTML" button)
      6. Removed opening and closing <p> tags.
      7. Switched back to visual editor and ran accessibility checker again.
      8. Check successful with the following message: "Congratulations, no accessibility problems found!"
      9. Closed accessibility checker window. Selected some text and changed the text color to white. (Note: Content backround is also white)
      10. Ran accessibility checker again.
      11. Check successful with the following message: "Congratulations, no accessibility problems found!" (even though the white text was not visible)
      12. Closed accessibility checker window. Selected other text and changed background to green and text color to red.
      13. Ran accessibility checker again.
      14. All entered text flagged with the following issue: "The colors of the foreground and background text do not have enough contrast. To fix this warning, change either foreground or background color of the text so that it is easier to read."

      In Google Chrome (60.0.3112.90):
      Differences from Firefox results...

      • Black/dark grey text on white background passes (with and without <p> tags)
      • White text on white background fails
      • Red text on green background fails

            dobedobedoh Andrew Lyons
            alanrmccoy Alan McCoy
            Jun Pataleta Jun Pataleta
            Sara Arjona (@sarjona) Sara Arjona (@sarjona)
            Anna Carissa Sadia Anna Carissa Sadia
            Votes:
            8 Vote for this issue
            Watchers:
            14 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 4 hours, 50 minutes
                4h 50m

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