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

Atto Accessibility Checker not catching accessibility issues in Firefox

    XMLWordPrintable

Details

    • 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

    Description

      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

      Attachments

        Issue Links

          Activity

            People

              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

              Dates

                Created:
                Updated:
                Resolved:
                9/Mar/20

                Time Tracking

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