Fixes needed
Most severe first. Open "Examples and pages" to see exactly where each one appears.
Images must have alternative text
Critical WCAG 1.1.1 Non-text Content
108 places on 7 pages
Who this affects: Blind and low-vision visitors using screen readers hear nothing, or a file name, instead of what the image shows.
How we fix it: Write a short description of each meaningful image into the CMS media library (or the template). Mark purely decorative images as decorative so screen readers skip them.
Examples and pages
Examples
-
img[src$="border_left_top.gif"]
<img src="./img/border_left_top.gif" width="10px" height="10px">
Fix any of the following:
Element does not have an alt attribute
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"
-
img[src$="border_top.gif"]
<img src="./img/border_top.gif" height="10px">
Fix any of the following:
Element does not have an alt attribute
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"
-
img[src$="border_left_top.gif"]
<img src="../img/border_left_top.gif" width="10px" height="10px">
Fix any of the following:
Element does not have an alt attribute
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"
-
img[src$="border_left_top.gif"]
<img src="./img/border_left_top.gif" width="10px" height="10px">
Fix any of the following:
Element does not have an alt attribute
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"
-
img[src$="border_left_top.gif"]
<img src="./img/border_left_top.gif" width="10px" height="10px">
Fix any of the following:
Element does not have an alt attribute
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"
Pages
Technical details for developers: Images must have alternative text
Images must have alternative text
Critical WCAG 1.1.1 Non-text Content
93 places on 7 pages
Who this affects: Blind and low-vision visitors using screen readers hear nothing, or a file name, instead of what the image shows.
How we fix it: Write a short description of each meaningful image into the CMS media library (or the template). Mark purely decorative images as decorative so screen readers skip them.
Examples and pages
Examples
-
td[colspan="5"][background="./img/marker2_w.gif"][width="780px"] > img[src$="marker2_w.gif"][width="78px"][height="1px"]
<img src=".img/marker2_w.gif" width="78px" height="1px">
Fix any of the following:
Element does not have an alt attribute
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"
-
td[width="155px"][background="./img/marker2_w.gif"] > img[src$="marker2_w.gif"][width="78px"][height="1px"]
<img src="./img/marker2_w.gif" width="78px" height="1px">
Fix any of the following:
Element does not have an alt attribute
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"
-
td[colspan="5"][background="../img/marker2_w.gif"][width="780px"] > img[src$="marker2_w.gif"][width="78px"][height="1px"]
<img src="../img/marker2_w.gif" width="78px" height="1px">
Fix any of the following:
Element does not have an alt attribute
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"
-
td[colspan="5"][width="780px"][background="./img/marker2_w.gif"] > img[width="78px"][src$="marker2_w.gif"][height="1px"]
<img src=".img/marker2_w.gif" width="78px" height="1px">
Fix any of the following:
Element does not have an alt attribute
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"
-
td[background="./img/marker2_w.gif"][colspan="5"][width="780px"] > img[src$="marker2_w.gif"][width="78px"][height="1px"]
<img src=".img/marker2_w.gif" width="78px" height="1px">
Fix any of the following:
Element does not have an alt attribute
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"
Pages
Technical details for developers: Images must have alternative text
Images must have alternative text
Critical WCAG 1.1.1 Non-text Content
14 places on 7 pages
Who this affects: Blind and low-vision visitors using screen readers hear nothing, or a file name, instead of what the image shows.
How we fix it: Write a short description of each meaningful image into the CMS media library (or the template). Mark purely decorative images as decorative so screen readers skip them.
Examples and pages
Examples
-
img[name="nav_home"]
<img name="nav_home" src="./img/nav_home.gif" width="88" height="27" hspace="15" border="0px">
Fix any of the following:
Element does not have an alt attribute
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"
-
img[name="nav_facts"]
<img name="nav_facts" src="./img/nav_facts.gif" width="105" height="23" hspace="9" border="0px">
Fix any of the following:
Element does not have an alt attribute
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"
-
img[name="nav_home"]
<img name="nav_home" src="../img/nav_home.gif" width="88" height="27" hspace="15" border="0px">
Fix any of the following:
Element does not have an alt attribute
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"
-
img[name="nav_home"]
<img name="nav_home" src="./img/nav_home.gif" width="88" height="27" hspace="15" border="0px">
Fix any of the following:
Element does not have an alt attribute
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"
-
img[name="nav_home"]
<img name="nav_home" src="./img/nav_home.gif" width="88" height="27" hspace="15" border="0px">
Fix any of the following:
Element does not have an alt attribute
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"
Pages
Technical details for developers: Images must have alternative text
Select element must have an accessible name
Critical WCAG 4.1.2 Name, Role, Value
6 places on 6 pages
Who this affects: Screen-reader users don't know what a dropdown is for.
How we fix it: Give each dropdown a visible, connected label.
Examples and pages
Examples
-
select
<select onchange="location.href = this.value;">
Fix any of the following:
Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"
-
select
<select onchange="location.href = this.value;">
Fix any of the following:
Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"
-
select
<select onchange="location.href = this.value;">
Fix any of the following:
Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"
-
select
<select onchange="location.href = this.value;">
Fix any of the following:
Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"
-
select
<select onchange="location.href = this.value;">
Fix any of the following:
Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"
Pages
Technical details for developers: Select element must have an accessible name
Images must have alternative text
Critical WCAG 1.1.1 Non-text Content
3 places on 3 pages
Who this affects: Blind and low-vision visitors using screen readers hear nothing, or a file name, instead of what the image shows.
How we fix it: Write a short description of each meaningful image into the CMS media library (or the template). Mark purely decorative images as decorative so screen readers skip them.
Examples and pages
Examples
-
img[width="1"]
<img src="./img/marker2_t.gif" width="1" height="30px">
Fix any of the following:
Element does not have an alt attribute
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"
-
img[width="1"]
<img src="../img/marker2_t.gif" width="1" height="30px">
Fix any of the following:
Element does not have an alt attribute
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"
-
img[width="1"]
<img src="./img/marker2_t.gif" width="1" height="30px">
Fix any of the following:
Element does not have an alt attribute
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"
Pages
Technical details for developers: Images must have alternative text
Images must have alternative text
Critical WCAG 1.1.1 Non-text Content
2 places on 2 pages
Who this affects: Blind and low-vision visitors using screen readers hear nothing, or a file name, instead of what the image shows.
How we fix it: Write a short description of each meaningful image into the CMS media library (or the template). Mark purely decorative images as decorative so screen readers skip them.
Examples and pages
Examples
-
img[height="30px"]
<img src="./img/marker2_t.gif" width="1" height="30px">
Fix any of the following:
Element does not have an alt attribute
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"
-
img[height="30px"]
<img src="../img/marker2_t.gif" width="1" height="30px">
Fix any of the following:
Element does not have an alt attribute
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"
Pages
Technical details for developers: Images must have alternative text
Form elements must have labels
Critical WCAG 4.1.2 Name, Role, Value
8 places on 1 page
Who this affects: Screen-reader users don't know what to type into the field, and voice-control users can't target it by name.
How we fix it: Give every form field a visible label connected to it in the form template.
Examples and pages
Examples
-
input[value="1"]
<input class="align" type="radio" name="res" value="1">
Fix any of the following:
Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element has no placeholder attribute
Element's default semantics were not overridden with role="none" or role="presentation"
-
input[value="2"]
<input class="align" type="radio" name="res" value="2">
Fix any of the following:
Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element has no placeholder attribute
Element's default semantics were not overridden with role="none" or role="presentation"
Pages
Technical details for developers: Form elements must have labels
Images must have alternative text
Critical WCAG 1.1.1 Non-text Content
2 places on 1 page
Who this affects: Blind and low-vision visitors using screen readers hear nothing, or a file name, instead of what the image shows.
How we fix it: Write a short description of each meaningful image into the CMS media library (or the template). Mark purely decorative images as decorative so screen readers skip them.
Examples and pages
Examples
-
p:nth-child(1) > img[border="0"]
<img src="./img/headline_ticket_offers.gif" border="0">
Fix any of the following:
Element does not have an alt attribute
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"
-
th > img[border="0"]
<img src="./img/headline_ticket_prices.gif" border="0">
Fix any of the following:
Element does not have an alt attribute
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"
Pages
Technical details for developers: Images must have alternative text
Form elements must have labels
Critical WCAG 4.1.2 Name, Role, Value
1 place on 1 page
Who this affects: Screen-reader users don't know what to type into the field, and voice-control users can't target it by name.
How we fix it: Give every form field a visible label connected to it in the form template.
Examples and pages
Examples
-
#em
<input type="text" name="em" id="em" size="20">
Fix any of the following:
Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element has no placeholder attribute
Element's default semantics were not overridden with role="none" or role="presentation"
Pages
Technical details for developers: Form elements must have labels
Form elements must have labels
Critical WCAG 4.1.2 Name, Role, Value
1 place on 1 page
Who this affects: Screen-reader users don't know what to type into the field, and voice-control users can't target it by name.
How we fix it: Give every form field a visible label connected to it in the form template.
Examples and pages
Examples
-
#n
<input type="text" name="n" id="n" size="30">
Fix any of the following:
Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element has no placeholder attribute
Element's default semantics were not overridden with role="none" or role="presentation"
Pages
Technical details for developers: Form elements must have labels
Form elements must have labels
Critical WCAG 4.1.2 Name, Role, Value
1 place on 1 page
Who this affects: Screen-reader users don't know what to type into the field, and voice-control users can't target it by name.
How we fix it: Give every form field a visible label connected to it in the form template.
Examples and pages
Examples
-
#ev
<input type="text" name="ev" id="ev" size="20">
Fix any of the following:
Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element has no placeholder attribute
Element's default semantics were not overridden with role="none" or role="presentation"
Pages
Technical details for developers: Form elements must have labels
Select element must have an accessible name
Critical WCAG 4.1.2 Name, Role, Value
1 place on 1 page
Who this affects: Screen-reader users don't know what a dropdown is for.
How we fix it: Give each dropdown a visible, connected label.
Examples and pages
Examples
-
select[onchange="location.href = this.value;"]
<select onchange="location.href = this.value;">
Fix any of the following:
Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"
Pages
Technical details for developers: Select element must have an accessible name
Select element must have an accessible name
Critical WCAG 4.1.2 Name, Role, Value
1 place on 1 page
Who this affects: Screen-reader users don't know what a dropdown is for.
How we fix it: Give each dropdown a visible, connected label.
Examples and pages
Examples
-
select[name="cc"]
<select name="cc">
Fix any of the following:
Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"
Pages
Technical details for developers: Select element must have an accessible name
Links must have discernible text
Serious WCAG 2.4.4 Link Purpose (In Context); WCAG 4.1.2 Name, Role, Value
28 places on 7 pages
Who this affects: Screen-reader users hear "link" with no destination, often for icon-only links such as social icons.
How we fix it: Add accessible text to the link (visually hidden text or an aria-label) in the component that renders it.
Examples and pages
Examples
-
#home > a[onfocus="blur();"]
<a href="javascript:location.href='home.html';" onfocus="blur();"><img name="nav_home" src="./img/nav_home.gif" width="88" height="27" hspace="15" border="0px"></a>
Fix all of the following:
Element is in tab order and does not have accessible text
Fix any of the following:
Element does not have text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
-
#news > a[onfocus="blur();"]
<a href="javascript:location.href='news.html';" onfocus="blur();"><img src="./img/nav_news.gif" name="nav_news" width="90" height="21" hspace="12" border="0px"></a>
Fix all of the following:
Element is in tab order and does not have accessible text
Fix any of the following:
Element does not have text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
-
#home > a[onfocus="blur();"]
<a href="javascript:location.href='home.html';" onfocus="blur();"><img name="nav_home" src="../img/nav_home.gif" width="88" height="27" hspace="15" border="0px"></a>
Fix all of the following:
Element is in tab order and does not have accessible text
Fix any of the following:
Element does not have text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
-
#home > a[onfocus="blur();"]
<a href="javascript:location.href='home.html';" onfocus="blur();"><img name="nav_home" src="./img/nav_home.gif" width="88" height="27" hspace="15" border="0px"></a>
Fix all of the following:
Element is in tab order and does not have accessible text
Fix any of the following:
Element does not have text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
-
#home > a[onfocus="blur();"]
<a href="javascript:location.href='home.html';" onfocus="blur();"><img name="nav_home" src="./img/nav_home.gif" width="88" height="27" hspace="15" border="0px"></a>
Fix all of the following:
Element is in tab order and does not have accessible text
Fix any of the following:
Element does not have text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Pages
Technical details for developers: Links must have discernible text
All touch targets must be 24px large, or leave sufficient space
Serious WCAG 2.5.8 Target Size (Minimum)
14 places on 7 pages
Who this affects: Visitors with tremors or limited dexterity, and anyone on a touchscreen, mis-tap small controls.
How we fix it: Increase the tap area of the affected controls to at least 24 × 24 px in the component styles.
Examples and pages
Examples
-
.inaccessible > .report[href$="home.html"]
<a href="./reports/home.html" class="report"><span class="hidden">Inaccessible Home Page </span> Report</a>
Fix any of the following:
Target has insufficient size (94px by 20px, should be at least 24px by 24px)
Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 16px instead of at least 24px.
-
.accessible > .report[href$="home.html"]
<a href="../after/reports/home.html" class="report"><span class="hidden">Accessible Home Page </span> Report</a>
Fix any of the following:
Target has insufficient size (94px by 20px, should be at least 24px by 24px)
Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 16px instead of at least 24px.
-
.inaccessible > .report[href$="home.html"]
<a href="../reports/home.html" class="report"><span class="hidden">Inaccessible Home Page </span> Report</a>
Fix any of the following:
Target has insufficient size (94px by 20px, should be at least 24px by 24px)
Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 16px instead of at least 24px.
-
.inaccessible > .report[href$="news.html"]
<a href="./reports/news.html" class="report"><span class="hidden">Inaccessible News Page </span> Report</a>
Fix any of the following:
Target has insufficient size (94px by 20px, should be at least 24px by 24px)
Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 16px instead of at least 24px.
-
.inaccessible > .report[href$="tickets.html"]
<a href="./reports/tickets.html" class="report"><span class="hidden">Inaccessible Tickets Page </span> Report</a>
Fix any of the following:
Target has insufficient size (94px by 20px, should be at least 24px by 24px)
Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 16px instead of at least 24px.
Pages
Technical details for developers: All touch targets must be 24px large, or leave sufficient space
<html> element must have a lang attribute
Serious WCAG 3.1.1 Language of Page
7 places on 7 pages
Who this affects: Screen readers may read the page with the wrong language and pronunciation.
How we fix it: Set the page language once in the site's base template (for example lang="en").
Examples and pages
Examples
-
html
<html>
Fix any of the following:
The <html> element does not have a lang attribute
-
html
<html>
Fix any of the following:
The <html> element does not have a lang attribute
-
html
<html>
Fix any of the following:
The <html> element does not have a lang attribute
-
html
<html>
Fix any of the following:
The <html> element does not have a lang attribute
-
html
<html>
Fix any of the following:
The <html> element does not have a lang attribute
Pages
Technical details for developers: <html> element must have a lang attribute
Elements must meet minimum color contrast ratio thresholds
Serious WCAG 1.4.3 Contrast (Minimum)
14 places on 4 pages
Text color #41545d on background #a9b8bf
Who this affects: Low-vision and older visitors, and anyone on a phone in sunlight, struggle to read low-contrast text.
How we fix it: Adjust the theme's color tokens so text meets 4.5:1 (3:1 for large text), keeping the brand look as close as possible.
Examples and pages
Examples
-
tr[height="25px"]:nth-child(2) > td[bgcolor="#A9B8BF"][width="150px"] > font[color="#41545D"][size="2"] > b
<b>Free Penguins</b>
Fix any of the following:
Element has insufficient color contrast of 3.88 (foreground color: #41545d, background color: #a9b8bf, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 4.5:1
-
tr[height="25px"]:nth-child(7) > td[bgcolor="#A9B8BF"][width="150px"] > font[color="#41545D"][size="2"] > b
<b>More City Parks</b>
Fix any of the following:
Element has insufficient color contrast of 3.88 (foreground color: #41545d, background color: #a9b8bf, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 4.5:1
-
tr[height="25px"]:nth-child(2) > td[bgcolor="#A9B8BF"][width="150px"] > font[color="#41545D"][size="2"] > b
<b>Free Penguins</b>
Fix any of the following:
Element has insufficient color contrast of 3.88 (foreground color: #41545d, background color: #a9b8bf, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 4.5:1
-
table[width="250px"] > tbody > tr[bgcolor="#A9B8BF"] > td:nth-child(1) > b > font[color="41545D"]
<font color="41545D">Les Garçons</font>
Fix any of the following:
Element has insufficient color contrast of 3.88 (foreground color: #41545d, background color: #a9b8bf, font size: 11.3pt (15px), font weight: bold). Expected contrast ratio of 4.5:1
-
tr[height="25px"]:nth-child(2) > td[bgcolor="#A9B8BF"][width="150px"] > font[color="#41545D"][size="2"] > b
<b>[TITLE]</b>
Fix any of the following:
Element has insufficient color contrast of 3.88 (foreground color: #41545d, background color: #a9b8bf, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 4.5:1
Pages
Technical details for developers: Elements must meet minimum color contrast ratio thresholds
All touch targets must be 24px large, or leave sufficient space
Serious WCAG 2.5.8 Target Size (Minimum)
7 places on 2 pages
Who this affects: Visitors with tremors or limited dexterity, and anyone on a touchscreen, mis-tap small controls.
How we fix it: Increase the tap area of the affected controls to at least 24 × 24 px in the component styles.
Examples and pages
Examples
-
a[href$="#annot_06"]
<a href="#annot_06" title="06: Reading sequence not meaningful">06</a>
Fix any of the following:
Target has insufficient size (23.6px by 17.8px, should be at least 24px by 24px)
Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 12.4px instead of at least 24px.
-
a[href$="#annot_08"]
<a href="#annot_08" title="08: Decorative image without empty text alternative">08</a>
Fix any of the following:
Target has insufficient size (23.6px by 17.8px, should be at least 24px by 24px)
Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 21px instead of at least 24px.
-
a[href$="#annot_02"]
<a href="#annot_02" title="02: Font difficult to read">02</a>
Fix any of the following:
Target has insufficient size (23.6px by 17.8px, should be at least 24px by 24px)
Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 21px instead of at least 24px.
Pages
Technical details for developers: All touch targets must be 24px large, or leave sufficient space
Links must have discernible text
Serious WCAG 2.4.4 Link Purpose (In Context); WCAG 4.1.2 Name, Role, Value
6 places on 2 pages
Who this affects: Screen-reader users hear "link" with no destination, often for icon-only links such as social icons.
How we fix it: Add accessible text to the link (visually hidden text or an aria-label) in the component that renders it.
Examples and pages
Examples
-
.story:nth-child(1) > span > a[href$="news.html"][onfocus="blur();"]
<a href="news.html" onfocus="blur();"><img src="./img/morearrow.gif" width="48" height="10" alt="" border="0" onmouseover="this.src='./img/morearrow_a.gif'" onmouseout="this.src='./img/morearrow.gif'" style="vertical-align: bottom"></a>
Fix all of the following:
Element is in tab order and does not have accessible text
Fix any of the following:
Element does not have text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
-
.story:nth-child(2) > span > a[href$="news.html"][onfocus="blur();"]
<a href="news.html" onfocus="blur();"><img src="./img/morearrow.gif" width="48" height="10" alt="" border="0" onmouseover="this.src='./img/morearrow_a.gif'" onmouseout="this.src='./img/morearrow.gif'" style="vertical-align: bottom"></a>
Fix all of the following:
Element is in tab order and does not have accessible text
Fix any of the following:
Element does not have text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
-
.story:nth-child(1) > .annot_link_parent > a[href$="annotations"][onfocus="blur();"]
<a href="../news/annotations" onfocus="blur();"><img src="../img/morearrow.gif" width="48" height="10" alt="" border="0" onmouseover="this.src='../img/morearrow_a.gif'" onmouseout="this.src='../img/morearrow.gif'" style="vertical-align: bottom"></a>
Fix all of the following:
Element is in tab order and does not have accessible text
Fix any of the following:
Element does not have text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Pages
Technical details for developers: Links must have discernible text
Content does not fit a 320px-wide screen without scrolling sideways
Serious WCAG 1.4.10 Reflow
2 places on 2 pages
Who this affects: Visitors who zoom in to read, and phone users, have to scroll sideways on every line.
How we fix it: Make the affected sections responsive (flexible widths, wrapping, no fixed pixel widths) in the theme styles.
Examples and pages
Examples
-
div.subnav
<div class="subnav"><ul>
<li class="inaccessible"><strong>Inaccessible:</strong><a class="page current"><span class="hidden">Inaccessible </span>Home Page</a><a href="./reports/home.html
At 320px wide (a phone, or 400% zoom on a laptop) the page is 480px wider than the screen, so visitors must scroll sideways. This element is 475px wide.
-
div.subnav
<div class="subnav subnavreport"><ul>
<li class="inaccessible"><strong>Inaccessible:</strong><a href="../home.html" class="page"><span class="hidden">Inaccessible </span>Home Page</a><a
At 320px wide (a phone, or 400% zoom on a laptop) the page is 134px wider than the screen, so visitors must scroll sideways. This element is 346px wide.
Pages
Technical details for developers: Content does not fit a 320px-wide screen without scrolling sideways
All touch targets must be 24px large, or leave sufficient space
Serious WCAG 2.5.8 Target Size (Minimum)
2 places on 1 page
Who this affects: Visitors with tremors or limited dexterity, and anyone on a touchscreen, mis-tap small controls.
How we fix it: Increase the tap area of the affected controls to at least 24 × 24 px in the component styles.
Examples and pages
Examples
-
.inaccessible > .page[href$="home.html"]
<a href="../home.html" class="page"><span class="hidden">Inaccessible </span>Home Page</a>
Fix any of the following:
Target has insufficient size (125px by 20px, should be at least 24px by 24px)
Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 16px instead of at least 24px.
-
.accessible > .page[href$="home.html"]
<a href="../../after/home.html" class="page"><span class="hidden">Accessible </span>Home Page</a>
Fix any of the following:
Target has insufficient size (125px by 20px, should be at least 24px by 24px)
Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 16px instead of at least 24px.
Pages
Technical details for developers: All touch targets must be 24px large, or leave sufficient space
Content does not fit a 320px-wide screen without scrolling sideways
Serious WCAG 1.4.10 Reflow
1 place on 1 page
Who this affects: Visitors who zoom in to read, and phone users, have to scroll sideways on every line.
How we fix it: Make the affected sections responsive (flexible widths, wrapping, no fixed pixel widths) in the theme styles.
Examples and pages
Examples
-
div#annot_01
<div id="annot_01">
<h3>Note 01: Image with incorrect text alternative</h3>
<p>The text alternative for this image of text is overly verbose and does not serve the equivalent purpose of the im
At 320px wide (a phone, or 400% zoom on a laptop) the page is 480px wider than the screen, so visitors must scroll sideways. This element is 713px wide.
Pages
Technical details for developers: Content does not fit a 320px-wide screen without scrolling sideways
Content does not fit a 320px-wide screen without scrolling sideways
Serious WCAG 1.4.10 Reflow
1 place on 1 page
Who this affects: Visitors who zoom in to read, and phone users, have to scroll sideways on every line.
How we fix it: Make the affected sections responsive (flexible widths, wrapping, no fixed pixel widths) in the theme styles.
Examples and pages
Examples
-
div#annot_02
<div id="annot_02">
<h3>Note 02: Image without any text alternative</h3>
<p>This image does not have any text alternative, so that it is unclear to some reasers if the image is important or no
At 320px wide (a phone, or 400% zoom on a laptop) the page is 480px wider than the screen, so visitors must scroll sideways. This element is 713px wide.
Pages
Technical details for developers: Content does not fit a 320px-wide screen without scrolling sideways
Content does not fit a 320px-wide screen without scrolling sideways
Serious WCAG 1.4.10 Reflow
1 place on 1 page
Who this affects: Visitors who zoom in to read, and phone users, have to scroll sideways on every line.
How we fix it: Make the affected sections responsive (flexible widths, wrapping, no fixed pixel widths) in the theme styles.
Examples and pages
Examples
-
div#annot_03
<div id="annot_03">
<h3>Note 03: Link not visually distinct</h3>
<p>The link "heat wave linked to temperature" is not sufficiently distinct because it resembles a heading, and will not be reco
At 320px wide (a phone, or 400% zoom on a laptop) the page is 480px wider than the screen, so visitors must scroll sideways. This element is 713px wide.
Pages
Technical details for developers: Content does not fit a 320px-wide screen without scrolling sideways
Content does not fit a 320px-wide screen without scrolling sideways
Serious WCAG 1.4.10 Reflow
1 place on 1 page
Who this affects: Visitors who zoom in to read, and phone users, have to scroll sideways on every line.
How we fix it: Make the affected sections responsive (flexible widths, wrapping, no fixed pixel widths) in the theme styles.
Examples and pages
Examples
-
div#annot_04
<div id="annot_04">
<h3>Note 04: Image with inadequate text alternative</h3>
<p>The text alternative for this image is provided in the <code>title</code> attribute alone, which is not usable f
At 320px wide (a phone, or 400% zoom on a laptop) the page is 480px wider than the screen, so visitors must scroll sideways. This element is 713px wide.
Pages
Technical details for developers: Content does not fit a 320px-wide screen without scrolling sideways
Content does not fit a 320px-wide screen without scrolling sideways
Serious WCAG 1.4.10 Reflow
1 place on 1 page
Who this affects: Visitors who zoom in to read, and phone users, have to scroll sideways on every line.
How we fix it: Make the affected sections responsive (flexible widths, wrapping, no fixed pixel widths) in the theme styles.
Examples and pages
Examples
-
div#annot_05
<div id="annot_05">
<h3>Note 05: Link text is not descriptive</h3>
<p>The link text "Read more..." is not descriptive to convey the purpose of the link.</p>
<dl>
<dt><a href=
At 320px wide (a phone, or 400% zoom on a laptop) the page is 480px wider than the screen, so visitors must scroll sideways. This element is 713px wide.
Pages
Technical details for developers: Content does not fit a 320px-wide screen without scrolling sideways