From 766972d0b433e7514f4bf1ba6cf51d1c90ed58ab Mon Sep 17 00:00:00 2001 From: Antti Hukkanen Date: Fri, 29 May 2020 12:43:54 +0300 Subject: [PATCH] Add progress bar documentation about screen readers --- docs/pages/progress-bar.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/docs/pages/progress-bar.md b/docs/pages/progress-bar.md index c20b6985d..fafdd3828 100644 --- a/docs/pages/progress-bar.md +++ b/docs/pages/progress-bar.md @@ -138,3 +138,15 @@ The meter automatically colors itself based on the current values, and the defin ``` + +--- + +## Screen Readers + +Test the progress bar with different `aria-valuenow` values in a couple of screen readers. The screen reader behavior may not be always obvious. + +If the value of the progress bar is numeric, make sure the range is defined correctly (extracting `aria-valuemin` from `aria-valuemax` defines the full range). For percentage progress bars (0-100%) the value range is typically 100 (`aria-valuemin="0"` and `aria-valuemax="100"`). Most screen readers will calculate the announced percentage based on these numbers with the following formula: + +``` +aria-valuenow / (aria-valuemax - aria-valuemin) = announced percentage +``` -- 2.47.2