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

PDF graphics with missing ALT attributes cause problems in:

• NVDA 2019 with IE11 and Acrobat Reader: the image is ignored.
• JAWS 2019 with IE11 and Acrobat Reader: a meaningless label like 'eleven graphic' is voiced.
• VoiceOver macOS with Safari: a meaningless label like 'image' is voiced.
• VoiceOver iOS with Safari: the image is ignored.

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

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.

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)

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