Site Report

A link name allows screen readers to voice what the links does. If there is no link text or the `alt` text is blank, screen readers have nothing to read, so read out the URL instead. To add a name do one of the following:

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

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:

• Use a label element with the for attribute set to the ID of the form control
• Wrap a label element around the form control
• Add a title attribute
• Add an aria-label attribute
• Add an aria-labelledby attribute

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.

Additional link text added with the TITLE attribute doesn't work in:

• NVDA 2018.4 with IE11 (the link title isn't read when tabbing)
• NVDA 2016.3 with IE11 (the link title isn't read when tabbing)
• NVDA 2016.2 with IE11 (the link title isn't read when tabbing)
• VoiceOver iOS 11.4 (the link title isn't read)

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

Impact on users:

• JAWS : Reads out placeholder text, instead of a useful image description.
• NVDA : Reads out placeholder text, instead of a useful image description.
• VoiceOver : Reads out placeholder text, instead of a useful image description.

Impact on users:

• VoiceOver macOS 10.14 Safari 13.0 macOS 10.14.6 Reading: Meaningless frame title read out.
• VoiceOver macOS 10.13 Safari 12.1 macOS 10.13.6 Reading: Meaningless frame title read out.
• VoiceOver macOS 10.12 Safari 10.1.2 macOS 10.12.6 Reading: Meaningless frame title read out.
• VoiceOver macOS 10.11 Safari 9.1.2 macOS 10.11.6 Reading: Meaningless frame title like 'frame zero' read out.

Impact on users:

• NVDA 2019.2 Chrome 79 Windows 10 Reading: Image unlabeled.
• NVDA 2019.2 FF68 Windows 10 Reading: Image ignored.
• NVDA 2019.2 IE11 Windows 10 Reading: Image ignored.
• NVDA 2018.4 Chrome 73 Windows 10 Reading: Image ignored.
• NVDA 2018.4 FF60 Windows 10 Reading: Image ignored.
• NVDA 2018.4 IE11 Windows 10 Reading: Image ignored.
• JAWS 2019.1912.1 Chrome 79 Windows 10 Reading: Image unlabeled.
• JAWS 2019.1912.1 FF68 Windows 10 Reading: Image ignored.
• JAWS 2019.1912.1 IE11 Windows 10 Reading: Image ignored.
• JAWS 2018.1811.2 Chrome 73 Windows 10 Reading: Image ignored.
• JAWS 2018.1811.2 FF60 Windows 10 Reading: Image ignored.
• JAWS 2018.1811.2 IE11 Windows 10 Reading: Image ignored.
• VoiceOver macOS 10.14 Safari 13.0 macOS 10.14.6 Reading: Image filename read out.
• VoiceOver macOS 10.13 Safari 12.1 macOS 10.13.6 Reading: Image filename read out.
• VoiceOver macOS 10.12 Safari 10.1.2 macOS 10.12.6 Reading: Image filename read out.
• VoiceOver iOS 12.4 Safari iOS 12.4 iOS 12.4.1 Touch: Image filename read out.
• VoiceOver iOS 11.4 Safari iOS 11.4 iOS 11.4.1 Touch: Image filename read out.
• VoiceOver iOS 10.3 Safari iOS 10.3 iOS 10.3 Touch: Image filename read out.

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

            <legend> Gift wrapped: </legend>
            <label> Yes </label>
            <label> No </label>
            

            <legend> Express delivery: </legend>
            <label> Yes </label>
            <label> No </label>
            

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)

Additional link text added with the TITLE attribute doesn't work in:

• NVDA 2018.4 with IE11 (the link title isn't read when tabbing)
• NVDA 2016.3 with IE11 (the link title isn't read when tabbing)
• NVDA 2016.2 with IE11 (the link title isn't read when tabbing)
• VoiceOver iOS 11.4 (the link title isn't read)

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.

Note: The default link color in IE11 has poor contrast on a white background. Fix by specifying a:link and a:visited colors in CSS.

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

Additional link text added with the TITLE attribute doesn't work in:

• NVDA 2018.4 with IE11 (the link title isn't read when tabbing)
• NVDA 2016.3 with IE11 (the link title isn't read when tabbing)
• NVDA 2016.2 with IE11 (the link title isn't read when tabbing)
• VoiceOver iOS 11.4 (the link title isn't read)