Site Report

A label (or name) linked to the control allows screen readers to voice the label correctly when reading the control. To add a label do one of the following:

• Add an aria-label attribute
• Add an aria-labelledby attribute

Impact on users:

• NVDA 2019.2 IE11 Windows 10 Reading: Text inserted by CSS content property not read.
• NVDA 2018.4 IE11 Windows 10 Reading: Text inserted by CSS content property not read.
• NVDA 2017.3 IE11 Windows 10 Reading: Text inserted by CSS content property not read.
• NVDA 2016.2 IE11 Windows 10 Reading: Text inserted by CSS content property not read.
• JAWS 2019.1912.1 IE11 Windows 10 Reading: Text inserted by CSS content property not read.
• JAWS 2018.1811.2 IE11 Windows 10 Reading: Text inserted by CSS content property not read.
• JAWS 18.0.5038 IE11 Windows 10 Reading: Text inserted by CSS content property not read.
• JAWS 17.0.2619 IE11 Windows 10 Reading: Text inserted by CSS content property not read.

Impact on users:

• JAWS Reading: Treats tables without TH and ROLE as layout tables if the table contains cells above or below certain pixel sizes. This measurement is affected by browser window size, browser font size, and the browser used.
• NVDA Reading: Applies a 'layout table' heuristic to tables without TH and ROLE which varies depending on the browser used and on the window size in some circumstances.
• VoiceOver Reading: Uses a sophisticated heuristic on tables without TH and ROLE, which is similar (but not identical) to the heuristic used by NVDA with Firefox.

A programmatically determined name allows screen readers to tell users what the control does. To add a name do one of the following:

• Add text between the button start and end tags
• Add a title attribute
• Add an aria-label attribute
• Add an aria-labelledby attribute
• Add an img alt attribute if the button contains an img element

Some users find it hard to read light gray text on a white background, dark gray text on a black background and white text on a red background.

• The contrast ratio should be 3.0 or more for 18 point text, or larger
• The contrast ratio should be 3.0 or more for 14 point bold text, or larger
• The contrast ratio should be 4.5 or more for all other text

Using a border or outline style that obscures the focus ring causes problems for keyboard-only users in:

• Chrome (obscures the focus indicator on links, buttons, dropdowns and range controls)
• Firefox (obscures the focus indicator on links)
• Internet Explorer (obscures the focus indicator on links, buttons and range controls)