[wp-trac] [WordPress Trac] #46621: Site Health: don't use a progressbar for the health "score"

[WordPress Trac]

#46621: Site Health: don't use a progressbar for the health "score"
-------------------------------+-----------------------------------------
 Reporter:  afercia            |      Owner:  (none)
     Type:  defect (bug)       |     Status:  new
 Priority:  normal             |  Milestone:  5.2
Component:  General            |    Version:  trunk
 Severity:  normal             |   Keywords:  has-screenshots needs-patch
  Focuses:  ui, accessibility  |
-------------------------------+-----------------------------------------
 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:

 [[Image(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>
 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/46621>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform