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

Accessibility checker giving color contrast error on <ol>

XMLWordPrintable

    • MOODLE_39_STABLE, MOODLE_400_STABLE, MOODLE_401_STABLE, MOODLE_402_STABLE, MOODLE_403_STABLE
    • MOODLE_401_STABLE, MOODLE_402_STABLE
    • MDL-76673-401
    • MDL-76673-402
    • MDL-76673-master
    • Hide

      Behat testing

      Please run the Behat testing below:

      • mdk behat -r --tags=@atto_accessibilitychecker
      • mdk behat -r --tags=@tiny_accessibilitychecker

      Verify that both succeed without errors.

      Inline CSS

      1. Choose Atto as Text Editor on the Editor Preferences.
      2. Navigate to Edit Profile.
      3. In the description, click the Show More button and then the HTML button to show source code or text mode.
      4. Fill in with:

        <div style="background-color: #34274f;">
            <p style="color: #333;">Low contrast 1.</p>
            <ol>
                <li style="color: #fff;">High contrast</li>
                <li style="color: #333;">Low contrast 2</li>
            </ol>
        </div>

      5. Click the HTML button once again to change the mode to HTML.
      6. Click the Accessibility Checker button.
      7. Verify you will see the below information:

        The colours of the foreground and background text do not have enough contrast. To fix this warning, change either foreground or background colour of the text so that it is easier to read.
            1. Low contrast 1.
            2. Low contrast 2
        

      8. Click each link and verify you will be focused on the current text in the editor.

      >> Please repeat the whole process by using TinyMCE as the Text editor. To show source code/text mode and the accessibility checker you can navigate to the Tools menu.

      Class CSS at Additional HTML - 1

      1. Choose Atto as Text Editor on the Editor Preferences.
      2. Navigate to Site Admin >> Appearance >> Additional HTML
      3. At the Within HEAD (additionalhtmlhead), fill the form with the below text:

        <style>
        #test_mdl76673 {
           background-color: #34274f;
        }
        #test_mdl76673 li {
           color: #ffffff;
        }
        </style>

        And click the Save Changes button.

      1. Create a new course.
      2. Turn on the edit mode and Add "Text and media area".
      3. In the Text, click the Show More button and then the HTML button to show source code or text mode.
      4. Fill in with:

        <div id="test_mdl76673">
            <p>Low Contrast</p>
            <ol>
                <li>High Contrast 1</li>
                <li>High Contrast 2</li>
            </ol>
        </div>

      5. Click the HTML button once again to change the mode to HTML.
      6. Click the Accessibility Checker button.
      7. Verify you will see the below information:

        The colours of the foreground and background text do not have enough contrast. To fix this warning, change either foreground or background colour of the text so that it is easier to read.
            1. Low Contrast
        

      8. Click the Low Contrast text link and verify you will be focused on the current text in the editor.

      Class CSS at Additional HTML - 2

      1. Choose Atto as Text Editor on the Editor Preferences.
      2. Navigate to Site Admin >> Appearance >> Additional HTML
      3. At the Within HEAD (additionalhtmlhead), fill the form with the below text:

        <style>
        #test_mdl76673 {
           background-color: #34274f;
        }
        #test_mdl76673 li, #test_mdl76673 p {
           color: #ffffff;
        }
        </style>

        And click the Save Changes button.

      1. Create a new course.
      2. Turn on the edit mode and Add "Text and media area".
      3. In the Text, click the Show More button and then the HTML button to show source code or text mode.
      4. Fill in with:

        <div id="test_mdl76673">
            <p>Low Contrast</p>
            <ol>
                <li>High Contrast 1</li>
                <li>High Contrast 2</li>
            </ol>
        </div>

      5. Click the HTML button once again to change the mode to HTML.
      6. Click the Accessibility Checker button.
      7. Verify you will see the below information:

        Congratulations, no accessibility problems found! 

      >> Since the TinyMCE cannot apply the CSS so we don't need to test it.

      Show
      Behat testing Please run the Behat testing below: mdk behat -r --tags=@atto_accessibilitychecker mdk behat -r --tags=@tiny_accessibilitychecker Verify that both succeed without errors. Inline CSS Choose Atto as Text Editor on the Editor Preferences. Navigate to Edit Profile. In the description, click the Show More button and then the HTML button to show source code or text mode. Fill in with: <div style= "background-color: #34274f;" >     <p style= "color: #333;" >Low contrast 1 .</p>     <ol>         <li style= "color: #fff;" >High contrast</li>         <li style= "color: #333;" >Low contrast 2 </li>     </ol> </div> Click the HTML button once again to change the mode to HTML. Click the Accessibility Checker button. Verify you will see the below information: The colours of the foreground and background text do not have enough contrast. To fix this warning, change either foreground or background colour of the text so that it is easier to read.   1 . Low contrast 1 .   2 . Low contrast 2 Click each link and verify you will be focused on the current text in the editor. >> Please repeat the whole process by using TinyMCE as the Text editor. To show source code/text mode and the accessibility checker you can navigate to the Tools menu. Class CSS at Additional HTML - 1 Choose Atto as Text Editor on the Editor Preferences. Navigate to Site Admin >> Appearance >> Additional HTML At the Within HEAD (additionalhtmlhead), fill the form with the below text: <style> #test_mdl76673 {    background-color: #34274f; } #test_mdl76673 li {    color: #ffffff; } </style> And click the Save Changes button. Create a new course. Turn on the edit mode and Add "Text and media area". In the Text, click the Show More button and then the HTML button to show source code or text mode. Fill in with: <div id= "test_mdl76673" >     <p>Low Contrast</p>     <ol>         <li>High Contrast 1 </li>         <li>High Contrast 2 </li>     </ol> </div> Click the HTML button once again to change the mode to HTML. Click the Accessibility Checker button. Verify you will see the below information: The colours of the foreground and background text do not have enough contrast. To fix this warning, change either foreground or background colour of the text so that it is easier to read.   1 . Low Contrast Click the Low Contrast text link and verify you will be focused on the current text in the editor. Class CSS at Additional HTML - 2 Choose Atto as Text Editor on the Editor Preferences. Navigate to Site Admin >> Appearance >> Additional HTML At the Within HEAD (additionalhtmlhead), fill the form with the below text: <style> #test_mdl76673 {    background-color: #34274f; } #test_mdl76673 li, #test_mdl76673 p {    color: #ffffff; } </style> And click the Save Changes button. Create a new course. Turn on the edit mode and Add "Text and media area". In the Text, click the Show More button and then the HTML button to show source code or text mode. Fill in with: <div id= "test_mdl76673" >     <p>Low Contrast</p>     <ol>         <li>High Contrast 1 </li>         <li>High Contrast 2 </li>     </ol> </div> Click the HTML button once again to change the mode to HTML. Click the Accessibility Checker button. Verify you will see the below information: Congratulations, no accessibility problems found! >> Since the TinyMCE cannot apply the CSS so we don't need to test it.
    • 6
    • Team Hedgehog 2023 Sprint 1.4, Team Hedgehog 2023 Sprint 2.0, Team Hedgehog 2023 Sprint 2.1, Team Hedgehog 2023 Sprint 2.2, Team Hedgehog 2023 Sprint 2.3

      Using the following code:
      <div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, voluptates earum animi tenetur ab nemo atque suscipit nulla optio modi provident tempore sed consequatur laborum unde non soluta placeat ratione!</p>
      <ol>
      <li>Cras justo odio</li>
      <li>Dapibus ac facilisis in</li>
      <li>Morbi leo risus</li>
      <li>Porta ac consectetur ac</li>
      <li>Vestibulum at eros</li>
      </ol>
      </div>
      give the div a background-color:  #34274f and p and li a color: #FFF (contrast ratio: 13.56)

      <div style="background-color:#34274f;">
          <p style="color:#fff;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, voluptates earum animi tenetur ab nemo atque suscipit nulla optio modi provident tempore sed consequatur laborum unde non soluta placeat ratione!</p>
          <ol>
              <li style="color:#fff;">Cras justo odio</li>
              <li style="color:#fff;">Dapibus ac facilisis in</li>
              <li style="color:#fff;">Morbi leo risus</li>
              <li style="color:#fff;">Porta ac consectetur ac</li>
              <li style="color:#fff;">Vestibulum at eros</li>
          </ol>
      </div>

      the Accessibility checker says that the li do not meet the color contrast standards.

       

            meirza.arson@moodle.com Meirza
            jlb224 Joanna Beaver
            Raquel Ortega Raquel Ortega
            Andrew Lyons Andrew Lyons
            Kim Jared Lucas Kim Jared Lucas
            Votes:
            0 Vote for this issue
            Watchers:
            9 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 day, 6 hours, 50 minutes
                1d 6h 50m

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