Validate output against WCAG 2.1

[nielslange]

To make the plugin inclusive, the output needs to fulfil the WCAG 2.1 AA standard.

Tasks

• Replace <div class="progress-container">...</div> with <progress>...</progress>
• Add aria-valuemin, aria-valuemax and aria-valuenow to <progress> element

Sources

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress
• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role
• https://w3c.github.io/aria/#progressbar

[senadir]

What kind of output are you trying to validate exactly? The text shouldn't have a colour by default, and should just inherent the colour provided by the theme. From what I understood from Viv, the text shouldn't be on top of the progress bar, those two should be separate. The progress bar should inherit the text colour as well, unless otherwise.

[nielslange]

The progress bar works on a color base. I need to ensure that the colors use a sufficient contrast. In addition, visually impaired users that use a scree reader must be able to understand the progress bar as well. Therefore, I need to add additional text for the screen reader.

[senadir]

I'm not sure I'm following. To know if you have enough contrast, you need to know the colour offhand, which is not possible here given you shouldn't be providing a colour for the progress bar.

[senadir]

I'd (if I'm understanding the requirements correctly), this issue should be blocked by #6.
Why?

• You can't compare contrast unless you have two colors, background and foreground.
• By default, the block should inherit the theme colors for background (transparent) and text. You can't have access to those colors in JS.
• Once Make color editable #6 is done, Gutenberg offers utilities that allow you to check contrast, by providing an explicit background and foreground color.

[nielslange]

Your explanation makes sense, @senadir. I'll deprioritize this issue accordingly.