Use of Color > Perform Audit > Configure

With &896, we will perform an audit of GitLab to ensure that we are following standard WCAG standards in terms of Use of Color.

1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)

Prep

Not all features are accessible on GitLab.com, such as the admin area. For this reason, it is helpful to set up your local environment in order to perform your audit. This will allow you to perform actions and simulate different interactions, such as form errors, success messages, etc. To get started:

  • Configure two local GitLab Development Kit instances

    • Set up both CE and EE repositories locally in order to ensure you are auditing features from all tiers.
    • Ensure you have a license generated for your EE instance in order to test features of higher tiers before.
  • Create a list detailing each page and/or area that relates to your individual stage group

    • Ensure you are including features that may only be in higher tier subscriptions (EE codebase)
  • Operations > Kubernetes

    • Index view
    • Create new cluster
    • Add existing cluster
    • Cluster page
      • Top section
      • Applications
      • Cluster details
      • Advanced settings
  • Operations > Serverless

    • Index view
      • Function detail view
  • Admin settings > CI/CD > Auto DevOps

  • Group settings > CI/CD > Auto DevOps

  • Project settings > CI/CD > Auto DevOps

  • Project > Pipeline > Auto DevOps pipeline

  • Project > Auto DevOps banner

  • ChatOps

    • Project Integrations > Slack slash commands
    • Project Integrations > Slack application
  • Runbooks

    • JupyterHub Auth
    • Environment Variables

Audit

  • Using GDK (CE and EE), review each page/area to ensure that color is not solely used to:
    • Convey information
    • Indicate an action
    • Prompt a response
    • Distinguish a visual element
  • Create issues in either CE or EE, depending on whether it relates specifically to a higher tier feature.
  • Determine a solution for each created issue
  • Work with your PM to discuss found issues and schedule accordingly

https://colororacle.org/ is a helpful tool to utilize during the audit process. Change pages to greyscale to simulate an experience with no color. To help get you thinking, the following are some common problems (not necessarily related to GitLab):

  • Text links have no visual cue other than color
  • Required fields are only indicated by the use of red
  • “Mary's sales are in red, Tom's are in blue"
  • Using color to indicate that a database entry has been updated successfully
  • Using highlighting on form fields to indicate that a required field had been left blank
Edited by Taurie Davis