Accessibility Guidelines

We try to at least meet Level A of the WCAG 2.0 Guidelines and Section 508 standards.

While developing Dradis features, ensure that:

• All input elements must have a single <label> element.
  • Add 'visually-hidden' class where necessary if we don't want the label visible in the UI.
• All images that are a link need alt text
• All aria-labelledby attributes must be associated with a DOM ID containing text.
• All text elements must have a minimum 4.5:1 contrast ratio (WCAG Level A).

To aid in finding accessibility errors like the above, use the WAVE browser extension. Once you have WAVE installed, navigate to the view you would like to evaluate for accessibility issues and activate the WAVE extension.

WAVE Usage guide (video)

Meeting and/or exceeding guidelines

To adjust fonts or element colors to meet the WCAG standards, you can use the WAVE tool's "Contrast" tab:

ㅤ

Take note of the original Hex values:

ㅤ

Adjust the foreground and/or background lightness sliders to get a contrast ratio of at least 4.5:1. Note: adjusting the hex values manually without using the sliders can be handy also if the lightness adjustment changes the color too drastically (use your judgment).

ㅤ

You will see the Normal Text and Large Text pass AA level standards:

ㅤ

Take these new Hex color values:

ㅤ

Now you will have to adjust the CSS using these new hex values.

• If you need to do an app-wide adjustment of a color, you can adjust the color directly in the variables.scss file. Replace the variable's old hex value with this new hex value.
• If you need to do an adjustment in isolation (not a global adjustment using the variables.scss file), find the stylesheet that defines the color of the element. It will be using a scss variable which will need to be lightened or darkened by a certain percentage value. Use Sass Color Calculator to get the percentage difference between the current value of the sass variable and the hex code from above.

In this case, we would change the color property of the element from

color: $variableName; 

to

color: darken($variableName, 1.18); 

Note: Rounding up to the nearest 10th or 100th is fine but if you are rounding down ensure the color passes the WAVE contrast check (adjust accordingly).