Uploaded image for project: 'Sakai'
  1. Sakai
  2. SAK-30561

Colour contrast too low on action buttons, needs ARIA

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: OPEN
    • Priority: Major
    • Resolution: Unresolved
    • Affects Version/s: 11.0
    • Fix Version/s: None
    • Component/s: Accessibility, Content
    • Labels:
      None

      Description

      2 accessibility enhancements need to be made:

      1. Colour Contrast
      Currently:
      When a button is not relevant:
      Foreground color: #848484
      Background color: #f0f0f0

      Contrast ratio is 3.9:1_ - too low for that size text._

      When the button is relevant:
      Foreground color: #77777
      Background color: #f0f0f0

      Contrast ratio is 3.9:1 - too low for that size text.

      May I propose that we use for both states color: #414141 from the (Site Resources, Trash, Transfer Files...) tabs above? The border could be the significance of the button based on selection?

      Also font-weight: bold could be set when the buttons are relevant?

      Here's a handy colour contrast checker http://webaim.org/resources/contrastchecker/

      2. ARIA Roles

      When the buttons are not active selected, their aria-disabled="true" / aria-disabled="false" should toggeled.

      More about:
      http://maxdesign.com.au/jobs/sample-accessibility/05-forms/attribute-disabled.html#two

      How to with JavaScript:
      https://stackoverflow.com/questions/17468639/how-to-set-aria-disabled-as-true-using-javascript

      Thanks!

        Gliffy Diagrams

          Zeplin

            Attachments

              Activity

                People

                Assignee:
                Unassigned Unassigned
                Reporter:
                mclare Matt Clare
                Votes:
                0 Vote for this issue
                Watchers:
                1 Start watching this issue

                  Dates

                  Created:
                  Updated:

                    Git Integration