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

Accessibility Problems with Boost Theme for 3.2: section titles and course title links

XMLWordPrintable

    • MOODLE_32_STABLE, MOODLE_33_STABLE
    • MOODLE_34_STABLE
    • MDL-58889-master
    • Hide
      1. Test in boost theme
      2. Go to Site administration > Appearance > Themes > Boost
      3. Make sure your brand colour is empty (or set it to empty if not)
      4. Use the http://webaim.org/resources/contrastchecker/ to check the colours for the blue links on white and the white links on the footer. Make sure it's AA complient for normal text. Check that the contrast of the blue color of links is more than 3:1 with the surrounding default text.
      5. Change theme preset from default to plain
      6. Make sure the page loads successfully
      7. Use the http://webaim.org/resources/contrastchecker/ to check the colours for the blue links on white and the white links on the footer. Make sure it's AA complient for normal text. Check that the contrast of the blue color of links is more than 3:1 with the surrounding default text.
      8. Set a custom brand colour
      9. Make sure it works and has changed all the link colours
      10. (no need to test for AA since it's custom chosen)
      11. Go to Site administration > Appearance > Themes > Boost
      12. Go to advanced settings
      13. Set "Raw initial SCSS" to 

        $footer-link-color: #FF0000 !default;

      14. Make sure the footer links are red
      15. Set "Raw initial SCSS" to 

        $bg-inverse-link-color: #00FF00 !default;

      16. Make sure the footer links and icon are green
      Show
      Test in boost theme Go to Site administration > Appearance > Themes > Boost Make sure your brand colour is empty (or set it to empty if not) Use the http://webaim.org/resources/contrastchecker/ to check the colours for the blue links on white and the white links on the footer. Make sure it's AA complient for normal text. Check that the contrast of the blue color of links is more than 3:1 with the surrounding default text. Change theme preset from default to plain Make sure the page loads successfully Use the http://webaim.org/resources/contrastchecker/ to check the colours for the blue links on white and the white links on the footer. Make sure it's AA complient for normal text. Check that the contrast of the blue color of links is more than 3:1 with the surrounding default text. Set a custom brand colour Make sure it works and has changed all the link colours (no need to test for AA since it's custom chosen) Go to Site administration > Appearance > Themes > Boost Go to advanced settings Set "Raw initial SCSS" to $footer-link-color: #FF0000 !default; Make sure the footer links are red Set "Raw initial SCSS" to $bg-inverse-link-color: #00FF00 !default; Make sure the footer links and icon are green
    • 3.4 Sprint 2

      DESCRIPTION
      The default Boost theme features links in this color – 00B7E6. See an example in the dashboard with user's courses and links to the course and the section titles and course title links. When this color is run through Juicy Studio (http://juicystudio.com/services/luminositycontrastratio.php#specify) for contrast luminosity testing, it comes back as providing insufficient contrast (2.36:1).
      I pulled the background color and foreground color from Chrome CSS inspect element and it also failed https://www.screencast.com/t/CYepcKtKE  

      WCAG 2.0 is the current international standards for web accessibility. The A level is bare minimum and leaves many pieces undone. The AA level is the base recommended by most organizations, is required by our RFP process, and is considered the 
      standard. The AAA level is Cadillac level. Sufficient color contrast is an AA level standard. Here's the reference (1.4.3). https://www.w3.org/TR/WCAG20/#visual-audio-contrast
       
      STEPS TO REPLICATE
      1.Login to a site, site is 3.2 release Moodle 3.2.3 (Build: 20170508), via Chrome browser 
      2.Navigate to Site Admin > Notifications > to confirm site is 3.2 release Moodle 3.2.3 (Build: 20170508)
      3.Navigate to Site Admin > Appearance > Themes > Theme Selector > Default confirm theme is Boost > if not select change theme and put Boost in place and then clear theme caches from the same page
      3.Site admin > Courses > Manage Courses and Categories > Create a new course > Save and Display
      4.Turn editing on via the cog in the right hand screen of the course > Look for and select "More..." to see an expanded list of options > Users Tab > 5.Enrolled Users > Enroll Users > Enroll as a teacher in the course (the goal here is just to have a course assigned to your account as an example)
      6.Then navigate Home > Select to view your dashboard > and see your course link listed is light in color and may cause issues for visual distinction
      7. Right click on the course link and select "inspect" element > https://www.screencast.com/t/Bn3X4E36xv find background and foreground colors and then 
      8. Input these colors to this site for accessibility testing: http://juicystudio.com/services/luminositycontrastratio.php#specify
       
      OBSERVED BEHAVIOR:
      Link luminosity contrast ratio fails to meet standards
      EXPECTED BEHAVIOR:
      Link luminosity contrast ratio meets standards
       |

        1. 2017-05-10_1448.png
          43 kB
          Marina Glancy
        2. 2017-05-10_1502.png
          551 kB
          Marina Glancy
        3. screenshot-1.png
          3 kB
          David Mudrák (@mudrd8mz)
        4. Screen Shot 2017-06-30 at 10.45.33 am.png
          197 kB
          John Okely

            johno John Okely
            jlooney jenna
            David Mudrák (@mudrd8mz) David Mudrák (@mudrd8mz)
            David Monllaó David Monllaó
            Ryan Wyllie Ryan Wyllie
            Votes:
            3 Vote for this issue
            Watchers:
            14 Start watching this issue

              Created:
              Updated:
              Resolved:

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