WordPress.org

Make WordPress Core

Opened 4 weeks ago

Closed 3 weeks ago

#46621 closed defect (bug) (fixed)

Site Health: don't use a progressbar for the health "score"

Reported by: afercia Owned by: afercia
Milestone: 5.2 Priority: normal
Severity: normal Version: trunk
Component: General Keywords: has-screenshots has-patch site-health
Focuses: ui, accessibility Cc:

Description

See #46573.

The "progress" indicator on the Site Health pages has a few issues, partly because of the implementation, and partly because of buggy assistive technologies behavior.

For example:

The aria-valuetext="Site tests are running, please wait a moment." doesn't get updated and it still gets read out when the score calculation is complete:

http://cldup.com/RATblquPu9.png

Also, aria-valuetext must not be used to communicate the state. Instead, it "Defines the human readable text alternative of aria-valuenow... Authors SHOULD only set the aria-valuetext attribute when the rendered value cannot be meaningfully represented as a number. ". https://www.w3.org/TR/wai-aria-1.1/#aria-valuetext

Additionally:

  • Firefox + NVDA don't announce anything, the whole progress indicator is completely ignored
  • arguably, this isn't exactly a progress "bar"
  • regardless, a <progress> element or role=progressbar should be used to represents the completion progress of a task. Whatever users do in these pages, the progress value doesn't change: it's a static value that indicates the current health score rather than an actual progress.

https://www.w3.org/TR/html52/sec-forms.html#the-progress-element
https://www.w3.org/TR/wai-aria-1.1/#progressbar

From a semantic perspective, using this UI element to also indicate the page loading progress is not appropriate. Also, not sure why the score number is generated via CSS.

For reference: the <progress> element seem to have some better support compared to role=progressbar (at least NVDA reads out something) but it's still buggy and not recommended. Here's some up to date (March 2, 2019) data and testing:
https://scottaohara.github.io/a11y_styled_form_controls/src/progress-bar/

At the time of testing, a styled progress bar won't be fully accessible in all screen reader and browser pairings.
Instead it may be more appropriate to simply treat the progress bar as a visual decoration, hide it from screen readers, and provide visually hidden text as a means to consistently convey the information.

Given the buggy support from assistive technologies and considering role="progressbar" doesn't add any value in this specific case, I'd recommend to remove any ARIA role/attributes and use just plain text.

Ideally, there should be some explanatory text before the score number, for example:

<span class="screen-reader-text">Current health score:</span>
<span class="styled-health-score-class-here">80%</span>

Attachments (1)

46621.diff (6.9 KB) - added by afercia 3 weeks ago.

Download all attachments as: .zip

Change History (5)

@afercia
3 weeks ago

#1 @afercia
3 weeks ago

  • Keywords has-patch added; needs-patch removed

46621.diff refactors the progress indicator:

  • removes any ARIA
  • adds a screen-reader-text "Current health score:"
  • adds role="img" aria-hidden="true" focusable="false" to the SVG
  • reduces CSS specificity simplifying unnecessary overqualified selectors
  • fixes the syntax for after and before (double colon)

Worth noting, as mentioned in #46573, the CSS keyframe animation doesn't work in Edge and IE11.

Last edited 3 weeks ago by afercia (previous) (diff)

#2 @afercia
3 weeks ago

  • Keywords site-health added

#3 @afercia
3 weeks ago

  • Owner set to afercia
  • Status changed from new to assigned

#4 @afercia
3 weeks ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 45041:

Accessibility: Simplify the Site Health score indicator.

The Site Health score indicator isn't exactly a "progress bar" and shouldn't use ARIA roles and properties related to progress bars. Also, some browser / screen reader combinations don't announce the score properly.

  • removes any ARIA
  • adds a screen-reader-text "Current health score:"
  • adds role="img" aria-hidden="true" focusable="false" to the SVG
  • reduces CSS specificity simplifying unnecessary overqualified selectors
  • fixes the syntax for ::after and ::before (double colon)

Fixes #46621.

Note: See TracTickets for help on using tickets.