Site Report

A link name allows screen readers to voice what the links does. If there is no link content, or the link content is hidden by CSS, 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 labeling the link if it contains an img element

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)

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 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