Site Report
This tab shows accessibility issues, indicating problems for older users, people with disabilities or accessibility needs. Automated testing cannot detect all accessibility issues, so should be used alongside human testing.
| Level | WCAG 2.1 | Section 508 - 2017 | Key |
|---|
| A |  | | Pages with level A issues are unusable for some people |
|---|
| AA |  | | Pages with level AA issues are very difficult to use |
|---|
| AAA |  | | Pages with level AAA issues can be difficult to use |
|---|
| Priority | Description and URL | Guideline and Line# | Count |
|---|
Level A
5 issues on 2 pages | |
| | All onclick handlers should have an equivalent onkeyup or onkeydown handler. | WCAG 2.1 A F54 Section 508 (2017) A F54 | 1 pages |
|
Some users are unable to use a mouse, so use the keyboard instead. Add an equivalent keyboard event handler to help these users. | | |
| http://mapspublic.liverpool.gov.uk/MapThatPublic/login.html#/step1 | Line 96 100 104 108 112 | |
| | Content inserted with CSS is not read by some screen readers, and not available to people who turn off style sheets. | WCAG 2.1 A F87 Section 508 (2017) A F87 | 1 pages |
|
Move the content from CSS to the HTML page so that all users can see it. 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.
| | |
| http://mapspublic.liverpool.gov.uk/MapThatPublic/assets/metro/metro-bootstrap.css | Line 8587 | |
| | HTML form control has no label. | WCAG 2.1 A F68 Section 508 (2017) A F68 | 1 pages |
|
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
| | |
| http://mapspublic.liverpool.gov.uk/MapThatPublic/login.html#/step1 | Line 69 73 | |
| | This button element is empty and has no accessible name. | WCAG 2.1 A F68 Section 508 (2017) A F68 | 1 pages |
|
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
| | |
| http://mapspublic.liverpool.gov.uk/MapThatPublic/login.html#/step1 | Line 84 | |
| | This form control has a blank label or title. | WCAG 2.1 A F68 Section 508 (2017) A F68 | 1 pages |
|
Add descriptive text to the form control's label. | | |
| http://mapspublic.liverpool.gov.uk/MapThatPublic/login.html#/step1 | Line 69 73 | |
Level AA
5 issues on 1 pages | |
| | For input type=password elements, set the autocomplete attribute to new-password or current-password in order to identify input purpose. | WCAG 2.1 1.3.5 | 1 pages |
|
Specifying what kind of data is expected in a particular input field makes filling out forms easier, especially for people with cognitive disabilities. While type=password specifies the type of input, it doesn't specify its purpose. Autocomplete values such as new-password and current-password are a well-supported way of identifying input purpose. | | |
| http://mapspublic.liverpool.gov.uk/MapThatPublic/login.html#/step1 | Line 73 | |
| | Headings should not be empty. | WCAG 2.1 AA G130 Section 508 (2017) AA G130 | 1 pages |
|
Add text to the heading, or alt text if the heading contains an image. Screen readers read out page headings, allowing users to quickly skip to a section, but some older screen readers do not ignore empty headings. | | |
| http://mapspublic.liverpool.gov.uk/MapThatPublic/login.html#/step1 | Line 82 | |
| | If you set any of the colors on the body or a elements you must set all of them. | WCAG 2.1 AA F24 Section 508 (2017) AA F24 | 1 pages |
|
In HTML the color attributes are text, bgcolor, link, alink and vlink.
In CSS the attributes are color and background-color.
Some users have browser defaults set to white text on a black background, so setting
one color without setting the others can result in black text on a black background.
| | |
|
The colors used are:
color: rgb(0,0,0);
background-color: rgb(255,255,255); uses browser default
http://mapspublic.liverpool.gov.uk/MapThatPublic/login.html#/step1 | Line 79 | |
| | Provide information about the general layout of a site using a site map or table of contents. | WCAG 2.1 AA 2.4.5 Section 508 (2017) AA 2.4.5 | 1 pages |
|
You should provide a link labeled 'Site Map' or 'Sitemap' or the equivalent in your language, on every page.
| | |
| http://mapspublic.liverpool.gov.uk/MapThatPublic/login.html#/step1 | Line 1 | |
| | The CSS outline or border style on this element makes it difficult or impossible to see the dotted link focus outline. | WCAG 2.1 AA F78 Section 508 (2017) AA F78 | 1 pages |
|
Change the style to avoid obscuring the focus outline around focusable elements.
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)
Internet Explorer does not support the `outline-offset:` property, so using this does not reliably avoid focus outline overlap.
| | |
| http://mapspublic.liverpool.gov.uk/MapThatPublic/login.html#/step1 | Line 84 86 | |
Level AAA
3 issues on 2 pages | |
| | Avoid specifying a new window as the target of a link with target=_blank. | WCAG 2.1 AAA F22 | 1 pages |
|
Displaying new windows without warning can be very confusing to non-sighted and mobile users.
Some screen readers and mobile devices give very little indication a new tab or window has opened.
If you cannot avoid displaying a new window, insert a warning into the link text like the following: "opens in a new window".
| | |
| http://mapspublic.liverpool.gov.uk/MapThatPublic/login.html#/step1 | Line 61 | |
| | Don't use CSS animations or transitions in interactions without giving the user a way to turn them off. | WCAG 2.1 2.3.3 | 1 pages |
|
Use the @media (prefers-reduced-motion) media query to respect user preferences. | | |
| http://mapspublic.liverpool.gov.uk/MapThatPublic/assets/metro/metro-bootstrap.css | Line 3421 6385 | |
| | Ensure that text and background colors have a 7:1 contrast ratio. | WCAG 2.1 AAA 1.4.6 | 1 pages |
|
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
| | |
|
The text color to background color contrast ratio is:
6.36 with
color: rgb(34,34,34);
background-color: rgb(0,175,240);
font-size: 14.00pt;
font-weight: 300.00;
http://mapspublic.liverpool.gov.uk/MapThatPublic/login.html#/step1 | Line 86 | |
| Expand all 13 issues | | |