This page has no doctype which triggers quirks mode in IE, Firefox and most other browsers. This means pages may look different in different browsers.
Add a
DOCTYPE statement to the top of the document.
No meta description tag found. Use a description tag that accurately describes the contents of a web page.
A well-written meta description attracts more clicks in search results than
an irrelevant or missing description.
1
2<
Use the
lang attribute to identify the language of the page.
In HTML add a lang attribute containing a language code to the html tag, and in PDF set the language using Document Properties in Acrobat. This allows screen readers to pronounce words correctly.
html>
3 <head>
4 <title>Welcome to CityLights! [Inaccessible Home Page]</title>
5 <style> #main * {
6 color: #000000;
7 font: normal 15px "Times New Roman", Times, serif;
8 text-decoration: none;
9 }
10 #main p{
11 margin: 6px 0;
12 }
13 #main a {
14 text-decoration: none;
15 color: #226C8E;
16 }
17 #main .headline {
18 margin-top: 0px;
19 color: #41545d;
20 font: 24px verdana;
21 font-family: impact;
22 text-decoration: none;
23 margin-bottom: 0px;
24 }
25 #main .subheadline {
26 padding:16px 0 6px 0;
27 color: #41545d;
28 font: 20px verdana;
29 font-family: impact;
30 text-decoration: none;
31 }
32 #content * {
33 margin: 0;
34 padding: 0;
35 }
36 #content p{
37 margin: 6px 0;
38 }
39 #content .newsbar {
40 background:
#eeeee;
41 }
42 :root #content .newsbar {
43 float: left;
44 width: 100%;
45 }
46 #content .newsheadline img {
47 float: left;
48 padding: 0;
49 margin: 0 5px 15px 0;
50 }
51 #content .newsheadline {
52 width: 135px;
53 margin-right: 5px;
54 background: #ededed;
55 padding-right: 10px;
56 vertical-align: top;
57 display: inline-block;
58 }
59 #content .newsheadline a {
60 color: black;
61 font-weight: bold;
62 background: #ededed;
63 }
64 #content .newsheadline p {
65 font-weight: bold;
66 background: #ededed;
67 }
68 * html #content .newsheadline {
69 width: 138px;
70 display: inline;
71 }
72 :root #content .newsheadline {
73 float: left;
74 width: 128px;
75 display: inline;
76 }
77 #content .image {
78 width: 135px;
79 height: 119px;
80 padding: 0 5px;
81 margin-right: 5px;
82 background: #cccccc;
83 display: inline-block;
84 }
85 * html #content .image {
86 width: 138px;
87 display: inline;
88 }
89 :root #content .image {
90 float: left;
91 width: 128px;
92 display: block;
93 display: inline;
94 }
95 #content .story {
96 width: 135px;
97 margin-right: 5px;
98 background: #ededed;
99 vertical-align: top;
100 padding: 2px 5px 5px;
101 display: inline-block;
102 }
103 #content .story span {
104 }
105 * html #content .story {
106 width: 138px;
107 display: inline;
108 }
109 :root #content .story {
110 float: left;
111 width: 128px;
112 display: inline;
113 }
114 #content .headline {
115 clear: left;
116 color: #41545d;
117 margin-top: 5px;
118 padding-top: 1em;
119 font: 24px verdana;
120 font-family: impact;
121 margin-bottom: 15px;
122 text-decoration: none;
123 }
124 #content .midwidth {
125 height: 1px;
126 }
127 #content .clear {
128 clear: left;
129 }
130 </style>
131 <link href="../css/meta.css" rel="stylesheet" type="text/css">
132 <script type="text/javascript" async="" defer="" src="//www.w3.org/analytics/piwik/piwik.js
This link is broken. The page could not be found on the target web server.
Broken link: https://www.w3.org/analytics/piwik/piwik.js 404 Not Found
Fixing this depends on how the link became broken:
The link has been mistyped and should be fixed
The destination page has moved and the link should be updated
The destination page no longer exists and the link should be removed
A file has been accidentally deleted and should be replaced
"> </script><script type="text/javascript">
133 function ChangeColor(id, colour){
134 document.getElementById(id).style.backgroundColor=colour;
135 }
136 function switchImage(imgName, imgSrc){
137 if (document.images){
138 if (imgSrc != "none"){
139 document.images[imgName].src = imgSrc;
140 }
141 }
142 }
143 </script>
144 <noscript><
B> <FONT COLOR=
Ensure that text and background colors have enough contrast.
The text color to background color contrast ratio after composition is: 2.76 with
color: background: font-size: 12ptfont-weight: 700
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
RED> This page uses scripts!!!</FONT></B></noscript>
145 <script src="../js/onload.js" type="text/javascript"></script>
146 </head>
147 <body text="#000000" bgcolor="#D7D7CD" leftmargin="0px" topmargin="0px" marginwidth="0px" marginheight="0px" link="#226C8E" vlink="#226C8E" alink="#226C8E">
148 <div id="meta-header">
149 <p id="skipnav"><a href="#page">Skip to inaccessible demo page</a></p>
150 <p id="logos"><a href="https://www.w3.org/" title="W3C Home"><img alt="W3C logo" src="../img/w3c.png" height="48" width="72"></a><a href="https://www.w3.org/WAI/" title="WAI Home"><img alt="Web Accessibility Initiative (WAI) logo" src="../img/wai.png" height="48
Omitting
img width or
height attributes makes the page layout jump about as images load.
This makes the page very hard to read or click while it's loading.
Fix by adding width and height attributes to the img tag matching the image dimensions.
In responsive layouts, specifying width and height prevents layout jumping because the browser can
pre-calculate the final image size when CSS like this is used:
img { max-width: 100%; height: auto }
"> </a></p>
151 <h1><span class="subhead">Inaccessible Home Page</span><span class="hidden"> -</span> Before and After Demonstration</h1>
152 <p class="subline">Improving a Web site using Web Content Accessibility Guidelines (WCAG) 2.0</p>
153 <div id="mnav" class="inaccessible">
154 <ul>
155 <li class="first"><a href="../Overview.html">Overview</a></li>
156 <li class="current first"><span class="hidden">Current location: </span>Home
157 <div class="subnav"><ul>
158 <li class="inaccessible"><strong>Inaccessible:</strong><a class="page current"><span class="hidden">Inaccessible </span>Home Page</a><a href="./reports/home.html" class="report"><span class="hidden">Inaccessible Home Page </span> Report</a></li>
159 <li class="accessible"><strong>Accessible:</strong><a href="../after/home.html" class="page"><span class="hidden">Accessible </span>Home Page</a><a href="../after/reports/home.html" class="report"><span class="hidden">Accessible Home Page </span> Report</a></li>
160 </ul><a href="./annotated/home.html" class="annotoggle">Show <br>Annotations</a></div>
161 </li>
162 <li><a href="news.html">News</a></li>
163 <li><a href="tickets.html">Tickets</a></li>
164 <li><a href="survey.html">Survey</a></li>
165 <li><a href="template.html">Template</a></li>
166 </ul>
167 </div>
168 </div>
169 <div id="page">
170 <p class="skip" id="startcontent">Demo starts here</p>
171 <table width="100%" border="0px" cellspacing="0px" cellpadding="0px" bgcolor="#D7D7CD
Identify row and column headers in data tables using
th elements, and mark layout tables with
role=presentation.
Data tables allow screen reader users to understand column and row relationships.
Layout tables read cells as a series of unrelated paragraphs with no tabular structure.
Without
th or
role, screen readers apply heuristics to decide whether a table is a layout table or data table.
These heuristics vary greatly between screen readers, and are affected by browser being used, window size,
and font size (so the outcome is very unpredictable without
th or
role).
If a data table has headers marked up using
td, then change these to
th.
If a data table has no headers, add
th elements describing each row and/or column.
If the table is only used for layout add
role=presentation to the
table element.
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. "> <tbody><tr valign="MIDDLE
"> <td width="100%" align="CENTER
">
172 <table width="800px" border="0px" cellspacing="0px" cellpadding="0px" bgcolor="WHITE
This page uses nested tables, which do not make sense when read in a screen reader.
Add role='presentation' if the inner table is a layout table, otherwise modify the inner table to present the same data without nesting tables.
Identify row and column headers in data tables using
th elements, and mark layout tables with
role=presentation.
Data tables allow screen reader users to understand column and row relationships.
Layout tables read cells as a series of unrelated paragraphs with no tabular structure.
Without
th or
role, screen readers apply heuristics to decide whether a table is a layout table or data table.
These heuristics vary greatly between screen readers, and are affected by browser being used, window size,
and font size (so the outcome is very unpredictable without
th or
role).
If a data table has headers marked up using
td, then change these to
th.
If a data table has no headers, add
th elements describing each row and/or column.
If the table is only used for layout add
role=presentation to the
table element.
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. ">
173 <tbody><tr height="10px">
174 <td width="10px" background="./img/border_left_top.gif
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
"> <img src="./img/border_left_top.gif" width="10px" height="10px
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. "> </td>
175 <td width="780px" background="./img/border_top.gif
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
"> <img src="./img/border_top.gif" height="10px
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. Omitting
img width or
height attributes makes the page layout jump about as images load.
This makes the page very hard to read or click while it's loading.
Fix by adding width and height attributes to the img tag matching the image dimensions.
In responsive layouts, specifying width and height prevents layout jumping because the browser can
pre-calculate the final image size when CSS like this is used:
img { max-width: 100%; height: auto }
"> </td>
176 <td width="10px" background="./img/border_right_top.gif
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
"> <img src="./img/border_right_top.gif" width="10px" height="10px
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. "> </td>
177 </tr>
178 <tr>
179 <td width="10px" background="./img/border_left.gif
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
"> <img src="./img/border_left.gif" width="10px
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. Omitting
img width or
height attributes makes the page layout jump about as images load.
This makes the page very hard to read or click while it's loading.
Fix by adding width and height attributes to the img tag matching the image dimensions.
In responsive layouts, specifying width and height prevents layout jumping because the browser can
pre-calculate the final image size when CSS like this is used:
img { max-width: 100%; height: auto }
"> </td>
180 <td width="780px" align="CENTER
">
181 <table width="780px" height="144px" border="0px" cellspacing="0px" cellpadding="0px" bgcolor="WHITE
This page uses nested tables, which do not make sense when read in a screen reader.
Add role='presentation' if the inner table is a layout table, otherwise modify the inner table to present the same data without nesting tables.
Identify row and column headers in data tables using
th elements, and mark layout tables with
role=presentation.
Data tables allow screen reader users to understand column and row relationships.
Layout tables read cells as a series of unrelated paragraphs with no tabular structure.
Without
th or
role, screen readers apply heuristics to decide whether a table is a layout table or data table.
These heuristics vary greatly between screen readers, and are affected by browser being used, window size,
and font size (so the outcome is very unpredictable without
th or
role).
If a data table has headers marked up using
td, then change these to
th.
If a data table has no headers, add
th elements describing each row and/or column.
If the table is only used for layout add
role=presentation to the
table element.
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. ">
182 <tbody><tr height="86px">
183 <td width="443px" background="./img/top_logo_next.gif" valign="MIDDLE
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
"> <div><a href="home.html"><img src="./img/top_logo.gif" width="443px" height="86px" alt="Red dot with a white letter 'C' that symbolizes a moon crescent as well as the sun. This logo is followed by a black banner that says 'CITYLIGHTS' which is the name of this online portal. Finally, the slogan of the portal, 'your access to the city', follows in a turquoise green handwriting style and with a slight slant across the top banner."></a></div></td>
184 <td width="24px" valign="MIDDLE
"> <img src="./img/top_logo_next_end.gif" width="24px" height="86px
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. "> </td>
185 <td width="128px" valign="MIDDLE
"> <img src="./img/top_weather.gif" width="128px" height="86px
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. "> </td>
186 <td width="22px" valign="MIDDLE
"> <img src="./img/top_logo_next_start.gif" width="22px" height="86px
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. "> </td>
187 <td width="163px" background="./img/top_logo_next.gif" align="CENTER" valign="MIDDLE
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
">
188 <select onchange="location.href = this.value;
select lists cannot be operated from the keyboard if they have a
change handler that performs navigation, because the handler fires as the user moves the selection up and down using the keyboard.
Moving through list items using the arrow keys will jump to another page unexpectedly.
Use option groups when a drop down list has more than 10 items.
Group related options using optgroup elements.
">
189 <option selected="">QUICKMENU ---->
190 </option><option value="../offsite.html">Broadcasting
191 </option><option value="../offsite.html">Education
192 </option><option value="../offsite.html">Electricity
193 </option><option value="../offsite.html">Fire service
194 </option><option value="../offsite.html">Gas service
195 </option><option value="../offsite.html">Health care
196 </option><option value="../offsite.html">Police service
197 </option><option value="../offsite.html">Public Libraries
198 </option><option value="../offsite.html">Social services
199 </option><option value="../offsite.html">Social housing
200 </option><option value="../offsite.html">Telecommunications
201 </option><option value="../offsite.html">Town planning
202 </option><option value="../offsite.html">Transportation
203 </option><option value="../offsite.html">Waste management
204 </option><option value="../offsite.html">Water services
205 </option></select>
206 </td>
207 </tr>
208 <tr height="7px">
209 <td width="780px" background="./img/mark.gif" colspan="5
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
"> <img src="./img/mark.gif" width="158px" height="7px
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. "> </td>
210 </tr>
211 <tr height="25px">
212 <td colspan="5">
213 <table width="780px" border="0px" cellspacing="0px" cellpadding="0px
This page uses nested tables, which do not make sense when read in a screen reader.
Add role='presentation' if the inner table is a layout table, otherwise modify the inner table to present the same data without nesting tables.
Identify row and column headers in data tables using
th elements, and mark layout tables with
role=presentation.
Data tables allow screen reader users to understand column and row relationships.
Layout tables read cells as a series of unrelated paragraphs with no tabular structure.
Without
th or
role, screen readers apply heuristics to decide whether a table is a layout table or data table.
These heuristics vary greatly between screen readers, and are affected by browser being used, window size,
and font size (so the outcome is very unpredictable without
th or
role).
If a data table has headers marked up using
td, then change these to
th.
If a data table has no headers, add
th elements describing each row and/or column.
If the table is only used for layout add
role=presentation to the
table element.
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. ">
214 <tbody><tr height="25px">
215 <td bgcolor="#EDEDED" width="380px
"> <font color="BLACK" face="Verdana" size="2
Use at least a 12-point font on all web pages.
For users over age 65, it may be better to use at least fourteen-point fonts.
Never use less than nine-point font on a Web site.
The following are all smaller than 12 point:
<p style="font-size: 11pt;" >
<p style="font-size: 15px;" >
<p style="font-size: small;" >
<font size="2" >
<font size="-1" >
"> <b>Traffic:</b> Construction work on Main Road</font></td>
216 <td bgcolor="#EDEDED" align="RIGHT" id="WEATHER
"> <font color="BLACK" face="Verdana" size="2
"> <b>Today:</b>
217 <script language="JavaScript
">
218 var now = new Date();
219 var days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
220 var months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
221 var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
222 function fourdigits(number) {
223 return (number < 1000) ? number + 1900 : number;
224 }
225 today = days[now.getDay()] + " " + date + " " + months[now.getMonth()] + " " + (fourdigits(now.getYear())) + ", Sunny, 23°C </FONT>";
226 document.all.WEATHER.setAttribute("BGCOLOR", "#EDEDED", 0);
227 document.write(today);
228 </script>Friday 26 April 2024, Sunny, 23°C </font></td>
229 </tr>
230 </tbody></table>
231 </td>
232 </tr>
233 <tr height="1px">
234 <td width="780px" background="./img/marker2_w.gif" colspan="5
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
"> <img src=".img/marker2_w.gif" width="78px" height="1px
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. "> </td>
235 </tr>
236 <tr height="25px">
237 <td colspan="5"> </td>
238 </tr>
239 </tbody></table>
240 <table width="780px" border="0px" cellspacing="0px" cellpadding="0px" bgcolor="WHITE
This page uses nested tables, which do not make sense when read in a screen reader.
Add role='presentation' if the inner table is a layout table, otherwise modify the inner table to present the same data without nesting tables.
Identify row and column headers in data tables using
th elements, and mark layout tables with
role=presentation.
Data tables allow screen reader users to understand column and row relationships.
Layout tables read cells as a series of unrelated paragraphs with no tabular structure.
Without
th or
role, screen readers apply heuristics to decide whether a table is a layout table or data table.
These heuristics vary greatly between screen readers, and are affected by browser being used, window size,
and font size (so the outcome is very unpredictable without
th or
role).
If a data table has headers marked up using
td, then change these to
th.
If a data table has no headers, add
th elements describing each row and/or column.
If the table is only used for layout add
role=presentation to the
table element.
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. ">
241 <tbody><tr width="780px">
242 <td width="155px" bgcolor="#E4E4E4" valign="TOP
">
243 <table width="155px" border="0px" cellspacing="0px" cellpadding="0px
This page uses nested tables, which do not make sense when read in a screen reader.
Add role='presentation' if the inner table is a layout table, otherwise modify the inner table to present the same data without nesting tables.
Identify row and column headers in data tables using
th elements, and mark layout tables with
role=presentation.
Data tables allow screen reader users to understand column and row relationships.
Layout tables read cells as a series of unrelated paragraphs with no tabular structure.
Without
th or
role, screen readers apply heuristics to decide whether a table is a layout table or data table.
These heuristics vary greatly between screen readers, and are affected by browser being used, window size,
and font size (so the outcome is very unpredictable without
th or
role).
If a data table has headers marked up using
td, then change these to
th.
If a data table has no headers, add
th elements describing each row and/or column.
If the table is only used for layout add
role=presentation to the
table element.
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. ">
244 <tbody><tr height="1px">
245 <td width="155px" background="./img/marker2_w.gif
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
"> <img src="./img/marker2_w.gif" width="78px" height="1px
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. "> </td>
246 <td width="1px" background="./img/marker2_t.gif" rowspan="9" valign="TOP
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
"> <img src="./img/marker2_t.gif" width="1" height="30px
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. "> </td>
247 </tr>
248 <tr height="34px">
249 <td width="154px" bgcolor="#EDEDED" id="home" onmouseover="switchImage('nav_home', './img/nav_home2.gif'); ChangeColor('home','#FFF')" onmouseout="switchImage('nav_home', './img/nav_home.gif'); ChangeColor('home','#EDEDED')
"> <a href="javascript:location.href='home.html';" onfocus="blur();
Links must have an accessible name.
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
img elements with
role=presentation or
role=none are not included in the link's accessible name.
This field removes focus when tabbed to making it impossible for disabled users to navigate this form via the keyboard.
Using blur() in an onfocus handler makes the form impossible to use with a keyboard. Remove the call to blur() in the onfocus handler.
"> <img name="nav_home" src="./img/nav_home.gif" width="88" height="27" hspace="15" border="0px
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. "> </a></td>
250 </tr>
251 <tr height="1px">
252 <td width="154px" background="./img/marker2_w.gif
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
"> <img src="./img/marker2_w.gif" width="78px" height="1px
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. "> </td>
253 </tr>
254 <tr height="34px">
255 <td width="154px" bgcolor="#EDEDED" id="news" onmouseover="switchImage('nav_news', './img/nav_news2.gif'); ChangeColor('news','#FFF')" onmouseout="switchImage('nav_news', './img/nav_news.gif'); ChangeColor('news','#EDEDED')
"> <a href="javascript:location.href='news.html';" onfocus="blur();
Links must have an accessible name.
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
img elements with
role=presentation or
role=none are not included in the link's accessible name.
This field removes focus when tabbed to making it impossible for disabled users to navigate this form via the keyboard.
Using blur() in an onfocus handler makes the form impossible to use with a keyboard. Remove the call to blur() in the onfocus handler.
"> <img src="./img/nav_news.gif" name="nav_news" width="90" height="21" hspace="12" border="0px
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. "> </a></td>
256 </tr>
257 <tr height="1px">
258 <td width="154px" background="./img/marker2_w.gif
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
"> <img src="./img/marker2_w.gif" width="78px" height="1px
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. "> </td>
259 </tr>
260 <tr height="34px">
261 <td width="154px" bgcolor="#EDEDED" id="tickets" onmouseover="switchImage('nav_facts', './img/nav_facts2.gif'); ChangeColor('tickets','#FFF')" onmouseout="switchImage('nav_facts', './img/nav_facts.gif'); ChangeColor('tickets','#EDEDED')
"> <a href="javascript:location.href='tickets.html';" onfocus="blur();
Links must have an accessible name.
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
img elements with
role=presentation or
role=none are not included in the link's accessible name.
This field removes focus when tabbed to making it impossible for disabled users to navigate this form via the keyboard.
Using blur() in an onfocus handler makes the form impossible to use with a keyboard. Remove the call to blur() in the onfocus handler.
"> <img name="nav_facts" src="./img/nav_facts.gif" width="105" height="23" hspace="9" border="0px
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. "> </a></td>
262 </tr>
263 <tr height="1px">
264 <td width="154px" background="./img/marker2_w.gif
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
"> <img src="./img/marker2_w.gif" width="78px" height="1px
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. "> </td>
265 </tr>
266 <tr height="34px">
267 <td width="154px" bgcolor="#EDEDED" id="survey" onmouseover="switchImage('nav_survey', './img/nav_survey2.gif'); ChangeColor('survey','#FFF')" onmouseout="switchImage('nav_survey', './img/nav_survey.gif'); ChangeColor('survey','#EDEDED')
"> <a href="javascript:location.href='survey.html';" onfocus="blur();
Links must have an accessible name.
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
img elements with
role=presentation or
role=none are not included in the link's accessible name.
This field removes focus when tabbed to making it impossible for disabled users to navigate this form via the keyboard.
Using blur() in an onfocus handler makes the form impossible to use with a keyboard. Remove the call to blur() in the onfocus handler.
"> <img src="./img/nav_survey.gif" name="nav_survey" width="107" height="32" hspace="8" border="0px
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. "> </a></td>
268 </tr>
269 <tr height="1px">
270 <td width="154px" background="./img/marker2_w.gif
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
"> <img src="./img/marker2_w.gif" width="78px" height="1px
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. "> </td>
271 </tr>
272 </tbody></table>
273 </td>
274 <td width="20px
"> <img src="./img/blank_5x5.gif" width="20px" height="5px
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. The
img width and
height attributes don't match the actual image size. This means the image will be distorted or resize during loading.
Image
https://www.w3.org/WAI/demos/bad/before/img/blank_5x5.gif actual dimensions:
5 x 5 pixels.
"> </td>
275 <td width="434px" height="600px" valign="TOP" id="main
">
276 <p class="headline">Welcome to CityLights</p>
277 <p>Citylights is the new portal for visitors and residents. Find out what's on, book tickets, and get the latest news.</p>
278 <div id="content">
279 <div class="midwidth"><div></div></div>
280 <div class="newsbar">
281 <div class="newsheadline"><img src="./img/headline_middle.gif" width="23" height="24" align="absmiddle
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. "> <a href="news.html" onfocus="blur();
This field removes focus when tabbed to making it impossible for disabled users to navigate this form via the keyboard.
Using blur() in an onfocus handler makes the form impossible to use with a keyboard. Remove the call to blur() in the onfocus handler.
"> Heat wave linked to temperatures</a></div>
282 <div class="newsheadline"><img src="./img/headline_middle.gif" width="23" height="24" align="absmiddle
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. "> <a href="news.html" onfocus="blur();
This field removes focus when tabbed to making it impossible for disabled users to navigate this form via the keyboard.
Using blur() in an onfocus handler makes the form impossible to use with a keyboard. Remove the call to blur() in the onfocus handler.
"> Man Gets Nine Months in Violin Case</a></div>
283 <div class="newsheadline"><img src="./img/headline_middle.gif" width="23" height="24" align="absmiddle
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. "> <a href="news.html" onfocus="blur();
This field removes focus when tabbed to making it impossible for disabled users to navigate this form via the keyboard.
Using blur() in an onfocus handler makes the form impossible to use with a keyboard. Remove the call to blur() in the onfocus handler.
"> Lack of brains hinders research</a></div>
284 <div class="clear"><div class="null"></div></div>
285 </div>
286 <div class="newsbar">
287 <div class="image" style="background: url(./img/panda-sm.jpg) center center no-repeat #cccccc" title="image"><div class="null"></div></div>
288 <div class="image" style="background: url(./img/oldenburgstudentviolin34.jpg) center center no-repeat #cccccc" title="image"><div class="null"></div></div>
289 <div class="image" style="background: url(./img/BrainInJar.jpg) center center no-repeat #cccccc;" title="image"><div class="null"></div></div>
290 <div class="clear"><div class="null"></div></div>
291 </div>
292 <div class="newsbar">
293 <div class="story"><span>After three years of effort city scientists now agree that the primary cause of the 2003 heatwave was hot air from our <a href="news.html" onfocus="blur();
Links must have an accessible name.
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
img elements with
role=presentation or
role=none are not included in the link's accessible name.
This field removes focus when tabbed to making it impossible for disabled users to navigate this form via the keyboard.
Using blur() in an onfocus handler makes the form impossible to use with a keyboard. Remove the call to blur() in the onfocus handler.
"> <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></span></div>
294 <div class="story"><span>Mayor: These kinds of crimes need more creative, effective punishments. For example, we could require compulsory <a href="news.html" onfocus="blur();
Links must have an accessible name.
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
img elements with
role=presentation or
role=none are not included in the link's accessible name.
This field removes focus when tabbed to making it impossible for disabled users to navigate this form via the keyboard.
Using blur() in an onfocus handler makes the form impossible to use with a keyboard. Remove the call to blur() in the onfocus handler.
"> <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></span></div>
295 <div class="story"><span>Brain donations: huge drop off in brain donations due to the great 'success' of 'Slow Traffic, Safe Streets' policy <a href="news.html" onfocus="blur();
Links must have an accessible name.
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
img elements with
role=presentation or
role=none are not included in the link's accessible name.
This field removes focus when tabbed to making it impossible for disabled users to navigate this form via the keyboard.
Using blur() in an onfocus handler makes the form impossible to use with a keyboard. Remove the call to blur() in the onfocus handler.
"> <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></span></div>
296 </div>
297 <hr style="visibility:hidden; clear:both;">
298 <p class="subheadline">Elsewhere on the Web</p>
299 <p>Please see the following websites for important information. Citylights take no responsibility for their content. For artichoke advice, call the number below.<br><br><span><img src="./img/list_bullets.gif" alt="bullet" border="0" align="absmiddle
alt text should not be a meaningless image file name.
alt='bullet'
Change the alt text to describe the information or function represented by the image,
and for purely decorative images use alt="" without any global ARIA attributes.
Do not use alt text containing only spaces since that's voiced as an unlabeled image.
alt text should not contain placeholders like 'picture' or 'spacer'.
alt='bullet'
For purely decorative images and spacers use
alt='', for images of text use the text, and for other images use a description of the image.
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. Omitting
img width or
height attributes makes the page layout jump about as images load.
This makes the page very hard to read or click while it's loading.
Fix by adding width and height attributes to the img tag matching the image dimensions.
In responsive layouts, specifying width and height prevents layout jumping because the browser can
pre-calculate the final image size when CSS like this is used:
img { max-width: 100%; height: auto }
"> Killer bees. <a onfocus="blur();" href="../offsite.html" target="_blank
Ensure that text and background colors have a 7:1 contrast ratio.
The text color to background color contrast ratio after composition is: 5.83 with
color: background: font-size: 11.25ptfont-weight: 400
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
Avoid specifying a new window as the target of a link with
target=_blank.
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 an "opens in a new window" warning into the link text
or add the warning to the link using a title attribute or aria-describedby attribute.
Link uses general text like 'Click Here' which doesn't explain link purpose.
Link text: Click here
Screen reader users often tab from one link to the next, or use the 'Next Link' command.
Moving between links labelled 'click here' sounds like 'Click here, tab, click here, tab, click here'.
Change the link text, or add an aria-label, so the link makes sense when read without the surrounding text.
This field removes focus when tabbed to making it impossible for disabled users to navigate this form via the keyboard.
Using blur() in an onfocus handler makes the form impossible to use with a keyboard. Remove the call to blur() in the onfocus handler.
Indicating links using only a text color change does not work for color-blind users.
Remove the text-decoration:none property from your link styles, or add other style attributes in addition to color changes to make links visible to people without color vision.
If the non-color cue only happens when the mouse hovers over the link or when the link receives focus, it is still a failure.
Users should be able to quickly look at each link and tell where it goes.
Link text: Click here
Don't use generic link labels like "click here" or "read more" because they're hard to tell apart when users scan a page.
"> Click here</a>.<br><img src="./img/list_bullets.gif" alt="bullet" border="0" align="absmiddle
alt text should not be a meaningless image file name.
alt='bullet'
Change the alt text to describe the information or function represented by the image,
and for purely decorative images use alt="" without any global ARIA attributes.
Do not use alt text containing only spaces since that's voiced as an unlabeled image.
alt text should not contain placeholders like 'picture' or 'spacer'.
alt='bullet'
For purely decorative images and spacers use
alt='', for images of text use the text, and for other images use a description of the image.
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. Omitting
img width or
height attributes makes the page layout jump about as images load.
This makes the page very hard to read or click while it's loading.
Fix by adding width and height attributes to the img tag matching the image dimensions.
In responsive layouts, specifying width and height prevents layout jumping because the browser can
pre-calculate the final image size when CSS like this is used:
img { max-width: 100%; height: auto }
"> Onions. <a onfocus="blur();" href="../offsite.html" target="_blank
Ensure that text and background colors have a 7:1 contrast ratio.
The text color to background color contrast ratio after composition is: 5.83 with
color: background: font-size: 11.25ptfont-weight: 400
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
Avoid specifying a new window as the target of a link with
target=_blank.
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 an "opens in a new window" warning into the link text
or add the warning to the link using a title attribute or aria-describedby attribute.
Link uses general text like 'Click Here' which doesn't explain link purpose.
Link text: Click here
Screen reader users often tab from one link to the next, or use the 'Next Link' command.
Moving between links labelled 'click here' sounds like 'Click here, tab, click here, tab, click here'.
Change the link text, or add an aria-label, so the link makes sense when read without the surrounding text.
This field removes focus when tabbed to making it impossible for disabled users to navigate this form via the keyboard.
Using blur() in an onfocus handler makes the form impossible to use with a keyboard. Remove the call to blur() in the onfocus handler.
Indicating links using only a text color change does not work for color-blind users.
Remove the text-decoration:none property from your link styles, or add other style attributes in addition to color changes to make links visible to people without color vision.
If the non-color cue only happens when the mouse hovers over the link or when the link receives focus, it is still a failure.
Users should be able to quickly look at each link and tell where it goes.
Link text: Click here
Don't use generic link labels like "click here" or "read more" because they're hard to tell apart when users scan a page.
"> Click here</a>.</span><br><br><b>Artichoke advice telephone hotline: </b><img src="./img/telefon_white_bg.gif" alt="1234 56789" border="0" align="absmiddle
Omitting
img width or
height attributes makes the page layout jump about as images load.
This makes the page very hard to read or click while it's loading.
Fix by adding width and height attributes to the img tag matching the image dimensions.
In responsive layouts, specifying width and height prevents layout jumping because the browser can
pre-calculate the final image size when CSS like this is used:
img { max-width: 100%; height: auto }
"> </p>
300 </div>
301 </td>
302 <td width="20px
"> <img src="./img/blank_5x5.gif" width="20px" height="5px
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. The
img width and
height attributes don't match the actual image size. This means the image will be distorted or resize during loading.
Image
https://www.w3.org/WAI/demos/bad/before/img/blank_5x5.gif actual dimensions:
5 x 5 pixels.
"> </td>
303 <td width="151px" valign="TOP
">
304 <table width="151px" border="0px" cellspacing="0px" cellpadding="0px
This page uses nested tables, which do not make sense when read in a screen reader.
Add role='presentation' if the inner table is a layout table, otherwise modify the inner table to present the same data without nesting tables.
Identify row and column headers in data tables using
th elements, and mark layout tables with
role=presentation.
Data tables allow screen reader users to understand column and row relationships.
Layout tables read cells as a series of unrelated paragraphs with no tabular structure.
Without
th or
role, screen readers apply heuristics to decide whether a table is a layout table or data table.
These heuristics vary greatly between screen readers, and are affected by browser being used, window size,
and font size (so the outcome is very unpredictable without
th or
role).
If a data table has headers marked up using
td, then change these to
th.
If a data table has no headers, add
th elements describing each row and/or column.
If the table is only used for layout add
role=presentation to the
table element.
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. ">
305 <tbody><tr height="1px">
306 <td width="1px" background="./img/marker2_t.gif" rowspan="11" valign="TOP
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
"> <img src="./img/marker2_t.gif" width="1px" height="30px
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. "> </td>
307 <td width="151px" background="./img/marker2_w.gif
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
"> <img src="./img/marker2_w.gif" width="78px" height="1px
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. "> </td>
308 </tr>
309 <tr height="25px">
310 <td width="150px" bgcolor="#A9B8BF
"> <font color="#41545D" face="Verdana" size="2
Ensure that text and background colors have enough contrast.
The text color to background color contrast ratio after composition is: 3.88 with
color: background: font-size: 10.67ptfont-weight: 400
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
Use at least a 12-point font on all web pages.
For users over age 65, it may be better to use at least fourteen-point fonts.
Never use less than nine-point font on a Web site.
The following are all smaller than 12 point:
<p style="font-size: 11pt;" >
<p style="font-size: 15px;" >
<p style="font-size: small;" >
<font size="2" >
<font size="-1" >
"> <
Ensure that text and background colors have enough contrast.
The text color to background color contrast ratio after composition is: 3.88 with
color: background: font-size: 10.67ptfont-weight: 700
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
b> Free Penguins</b></font></td>
311 </tr>
312 <tr height="106px">
313 <td width="150px
"> <div><img src="./img/teaser_right1.jpg" width="150px" height="106px
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. "> </div></td>
314 </tr>
315 <tr>
316 <td width="150px
">
317 <table width="150px" border="0px" cellspacing="0px" cellpadding="3px
This page uses nested tables, which do not make sense when read in a screen reader.
Add role='presentation' if the inner table is a layout table, otherwise modify the inner table to present the same data without nesting tables.
Identify row and column headers in data tables using
th elements, and mark layout tables with
role=presentation.
Data tables allow screen reader users to understand column and row relationships.
Layout tables read cells as a series of unrelated paragraphs with no tabular structure.
Without
th or
role, screen readers apply heuristics to decide whether a table is a layout table or data table.
These heuristics vary greatly between screen readers, and are affected by browser being used, window size,
and font size (so the outcome is very unpredictable without
th or
role).
If a data table has headers marked up using
td, then change these to
th.
If a data table has no headers, add
th elements describing each row and/or column.
If the table is only used for layout add
role=presentation to the
table element.
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. ">
318 <tbody><tr>
319 <td><div>"Free penguins" slogan at zoo benefit concert causes confusion among city rockers. Adjective or verb?<br><a href="tickets.html" onfocus="blur();" style="text-decoration:none;
Ensure that text and background colors have a 7:1 contrast ratio.
The text color to background color contrast ratio after composition is: 5.83 with
color: background: font-size: 12ptfont-weight: 400
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
Link uses general text like 'Click Here' which doesn't explain link purpose.
Link text: Read More...
Screen reader users often tab from one link to the next, or use the 'Next Link' command.
Moving between links labelled 'click here' sounds like 'Click here, tab, click here, tab, click here'.
Change the link text, or add an aria-label, so the link makes sense when read without the surrounding text.
This field removes focus when tabbed to making it impossible for disabled users to navigate this form via the keyboard.
Using blur() in an onfocus handler makes the form impossible to use with a keyboard. Remove the call to blur() in the onfocus handler.
Indicating links using only a text color change does not work for color-blind users.
Remove the text-decoration:none property from your link styles, or add other style attributes in addition to color changes to make links visible to people without color vision.
If the non-color cue only happens when the mouse hovers over the link or when the link receives focus, it is still a failure.
Users should be able to quickly look at each link and tell where it goes.
Link text: Read More...
Don't use generic link labels like "click here" or "read more" because they're hard to tell apart when users scan a page.
Several links on a page share the same link text, but go to different destinations.
Link text: Read More...
Make the link text unique for each target, or add additional text using aria-label.
"> Read More...</a></div></td>
320 </tr>
321 </tbody></table>
322 </td>
323 </tr>
324 <tr height="17px">
325 <td> </td>
326 </tr>
327 <tr height="1px">
328 <td width="150px" background="./img/marker2_w.gif
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
"> <img src="./img/marker2_w.gif" width="78px" height="1px
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. "> </td>
329 </tr>
330 <tr height="25px">
331 <td width="150px" bgcolor="#A9B8BF
"> <font color="#41545D" face="Verdana" size="2
Ensure that text and background colors have enough contrast.
The text color to background color contrast ratio after composition is: 3.88 with
color: background: font-size: 10.67ptfont-weight: 400
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
Use at least a 12-point font on all web pages.
For users over age 65, it may be better to use at least fourteen-point fonts.
Never use less than nine-point font on a Web site.
The following are all smaller than 12 point:
<p style="font-size: 11pt;" >
<p style="font-size: 15px;" >
<p style="font-size: small;" >
<font size="2" >
<font size="-1" >
"> <
Ensure that text and background colors have enough contrast.
The text color to background color contrast ratio after composition is: 3.88 with
color: background: font-size: 10.67ptfont-weight: 700
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
b> More City Parks</b></font></td>
332 </tr>
333 <tr height="154px">
334 <td width="150px
"> <img src="./img/teaser_right2.jpg" width="150px" height="154px
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. "> </td>
335 </tr>
336 <tr>
337 <td width="150px
">
338 <table width="150px" border="0px" cellspacing="0px" cellpadding="3px
This page uses nested tables, which do not make sense when read in a screen reader.
Add role='presentation' if the inner table is a layout table, otherwise modify the inner table to present the same data without nesting tables.
Identify row and column headers in data tables using
th elements, and mark layout tables with
role=presentation.
Data tables allow screen reader users to understand column and row relationships.
Layout tables read cells as a series of unrelated paragraphs with no tabular structure.
Without
th or
role, screen readers apply heuristics to decide whether a table is a layout table or data table.
These heuristics vary greatly between screen readers, and are affected by browser being used, window size,
and font size (so the outcome is very unpredictable without
th or
role).
If a data table has headers marked up using
td, then change these to
th.
If a data table has no headers, add
th elements describing each row and/or column.
If the table is only used for layout add
role=presentation to the
table element.
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. ">
339 <tbody><tr>
340 <td>More parks and more green throughout the city at the price of already rare car parking spaces, how will this affect you?<br><a href="survey.html" onfocus="blur();" style="text-decoration:none;
Ensure that text and background colors have a 7:1 contrast ratio.
The text color to background color contrast ratio after composition is: 5.83 with
color: background: font-size: 12ptfont-weight: 400
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
Link uses general text like 'Click Here' which doesn't explain link purpose.
Link text: Read More...
Screen reader users often tab from one link to the next, or use the 'Next Link' command.
Moving between links labelled 'click here' sounds like 'Click here, tab, click here, tab, click here'.
Change the link text, or add an aria-label, so the link makes sense when read without the surrounding text.
This field removes focus when tabbed to making it impossible for disabled users to navigate this form via the keyboard.
Using blur() in an onfocus handler makes the form impossible to use with a keyboard. Remove the call to blur() in the onfocus handler.
Indicating links using only a text color change does not work for color-blind users.
Remove the text-decoration:none property from your link styles, or add other style attributes in addition to color changes to make links visible to people without color vision.
If the non-color cue only happens when the mouse hovers over the link or when the link receives focus, it is still a failure.
Users should be able to quickly look at each link and tell where it goes.
Link text: Read More...
Don't use generic link labels like "click here" or "read more" because they're hard to tell apart when users scan a page.
Several links on a page share the same link text, but go to different destinations.
Link text: Read More...
Make the link text unique for each target, or add additional text using aria-label.
"> Read More...</a></td>
341 </tr>
342 </tbody></table>
343 </td>
344 </tr>
345 </tbody></table>
346 </td>
347 </tr>
348 </tbody></table>
349 <table width="780px" height="17px" border="0px" cellspacing="0px" cellpadding="0px" bgcolor="#EDEDED
This page uses nested tables, which do not make sense when read in a screen reader.
Add role='presentation' if the inner table is a layout table, otherwise modify the inner table to present the same data without nesting tables.
Identify row and column headers in data tables using
th elements, and mark layout tables with
role=presentation.
Data tables allow screen reader users to understand column and row relationships.
Layout tables read cells as a series of unrelated paragraphs with no tabular structure.
Without
th or
role, screen readers apply heuristics to decide whether a table is a layout table or data table.
These heuristics vary greatly between screen readers, and are affected by browser being used, window size,
and font size (so the outcome is very unpredictable without
th or
role).
If a data table has headers marked up using
td, then change these to
th.
If a data table has no headers, add
th elements describing each row and/or column.
If the table is only used for layout add
role=presentation to the
table element.
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. ">
350 <tbody><tr height="17px">
351 <td align="RIGHT
"> <font color="BLACK" face="Verdana" size="1
Use at least a 12-point font on all web pages.
For users over age 65, it may be better to use at least fourteen-point fonts.
Never use less than nine-point font on a Web site.
The following are all smaller than 12 point:
<p style="font-size: 11pt;" >
<p style="font-size: 15px;" >
<p style="font-size: small;" >
<font size="2" >
<font size="-1" >
"> <a rel="Copyright" href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright
Ensure that text and background colors have a 7:1 contrast ratio.
The text color to background color contrast ratio after composition is: 4.98 with
color: background: font-size: 9ptfont-weight: 400
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
"> Copyright</a> © 2012 <a href="https://www.w3.org/"><acronym title="World Wide Web Consortium
Ensure that text and background colors have a 7:1 contrast ratio.
The text color to background color contrast ratio after composition is: 4.98 with
color: background: font-size: 9ptfont-weight: 400
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
"> W3C</acronym></a><sup>®</sup> (<a href="http://www.csail.mit.edu/
This link is broken. The link target could not be loaded due to an HTTP error.
Broken link: http://www.csail.mit.edu/ 503 Server Unavailable
This is sometimes a temporary problem, but if it persists it indicates a serious problem on your web server.
"> <acronym title="Massachusetts Institute of Technology
Ensure that text and background colors have a 7:1 contrast ratio.
The text color to background color contrast ratio after composition is: 4.98 with
color: background: font-size: 9ptfont-weight: 400
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
"> MIT</acronym></a>, <a href="http://www.ercim.org/
This link is broken. The link target could not be loaded due to an HTTP error.
Broken link: http://www.ercim.org/ 503 Server Unavailable
This is sometimes a temporary problem, but if it persists it indicates a serious problem on your web server.
"> <acronym title="European Research Consortium for Informatics and Mathematics
Ensure that text and background colors have a 7:1 contrast ratio.
The text color to background color contrast ratio after composition is: 4.98 with
color: background: font-size: 9ptfont-weight: 400
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
"> ERCIM</acronym></a>, <a href="http://www.keio.ac.jp/
Ensure that text and background colors have a 7:1 contrast ratio.
The text color to background color contrast ratio after composition is: 4.98 with
color: background: font-size: 9ptfont-weight: 400
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
This link is broken. The link target could not be loaded due to an HTTP error.
Broken link: http://www.keio.ac.jp/ 503 Server Unavailable
This is sometimes a temporary problem, but if it persists it indicates a serious problem on your web server.
"> Keio</a>)</font></td>
352 </tr>
353 </tbody></table>
354 <!--// END FOOTER AREA //-->
355 </td><td width="10px" background="./img/border_right.gif
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
"> <img src="./img/border_right.gif" width="10px
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. Omitting
img width or
height attributes makes the page layout jump about as images load.
This makes the page very hard to read or click while it's loading.
Fix by adding width and height attributes to the img tag matching the image dimensions.
In responsive layouts, specifying width and height prevents layout jumping because the browser can
pre-calculate the final image size when CSS like this is used:
img { max-width: 100%; height: auto }
"> </td>
356 </tr>
357 <tr height="10px">
358 <td width="10px" height="10px" background="./img/border_bottom_left.gif
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
"> <img src="./img/border_bottom_left.gif" width="10px" height="10px
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. "> </td>
359 <td width="780px" height="10px" background="./img/border_bottom.gif
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
"> <img src="./img/border_bottom.gif" height="10px
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. Omitting
img width or
height attributes makes the page layout jump about as images load.
This makes the page very hard to read or click while it's loading.
Fix by adding width and height attributes to the img tag matching the image dimensions.
In responsive layouts, specifying width and height prevents layout jumping because the browser can
pre-calculate the final image size when CSS like this is used:
img { max-width: 100%; height: auto }
"> </td>
360 <td width="10px" height="10px" background="./img/border_bottom_right.gif
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
"> <img src="./img/border_bottom_right.gif" width="10px" height="10px
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. "> </td>
361 </tr>
362 </tbody></table>
363 </td></tr></tbody></table>
364 </div>
365 <div id="meta-footer" class="meta">
366 <hr>
367 <p><strong>Status:</strong> 20 February 2012 (see <a href="../changelog.html">changelog</a>) <br>Editors: <a href="https://www.w3.org/People/shadi/">Shadi Abou-Zahra</a> and the <a href="https://www.w3.org/WAI/EO/">Education and Outreach Working Group (EOWG)</a>. <br>Developed with support from <a href="https://www.w3.org/WAI/TIES/"><acronym title="Web Accessibility Initiative: Training, Implementation, Education, Support
"> WAI-TIES</acronym></a> and <a href="https://www.w3.org/WAI/WAI-AGE/"><acronym title="Web Accessibility Initiative: Ageing Education and Harmonisation
"> WAI-AGE</acronym></a> projects, co-funded by the European Commission <acronym title="Information Society Technologies
"> IST</acronym> Programme. [see <a href="../acks.html">Acknowledgements</a>]</p>
368 <p>[<a href="https://www.w3.org/WAI/sitemap.html" shape="rect
"> WAI Site Map</a>] [<a href="https://www.w3.org/WAI/sitehelp.html" shape="rect
"> Help with WAI Website</a>] [<a href="https://www.w3.org/WAI/search.php" shape="rect
"> Search</a>] [<a href="https://www.w3.org/WAI/contacts" shape="rect
"> Contacting WAI</a>] <br><strong>Feedback welcome to <a href="mailto:wai-eo-editors@w3.org" shape="rect
"> wai-eo-editors@w3.org</a></strong> (a publicly archived list) or <a href="mailto:wai@w3.org" shape="rect
"> wai@w3.org</a> (a WAI staff-only list).</p>
369 <div class="copyright"><p><a rel="Copyright" href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2012 <a href="https://www.w3.org/"><acronym title="World Wide Web Consortium
"> W3C</acronym></a><sup>®</sup> (<a href="http://www.csail.mit.edu/
This link is broken. The link target could not be loaded due to an HTTP error.
Broken link: http://www.csail.mit.edu/ 503 Server Unavailable
This is sometimes a temporary problem, but if it persists it indicates a serious problem on your web server.
"> <acronym title="Massachusetts Institute of Technology
"> MIT</acronym></a>, <a href="http://www.ercim.org/
This link is broken. The link target could not be loaded due to an HTTP error.
Broken link: http://www.ercim.org/ 503 Server Unavailable
This is sometimes a temporary problem, but if it persists it indicates a serious problem on your web server.
"> <acronym title="European Research Consortium for Informatics and Mathematics
"> ERCIM</acronym></a>, <a href="http://www.keio.ac.jp/
This link is broken. The link target could not be loaded due to an HTTP error.
Broken link: http://www.keio.ac.jp/ 503 Server Unavailable
This is sometimes a temporary problem, but if it persists it indicates a serious problem on your web server.
"> Keio</a>), All Rights Reserved. W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>, <a rel="Copyright" href="https://www.w3.org/Consortium/Legal/copyright-documents">document use</a> and <a rel="Copyright" href="https://www.w3.org/Consortium/Legal/copyright-software">software licensing</a> rules apply. Your interactions with this site are in accordance with our <a href="https://www.w3.org/Consortium/Legal/privacy-statement#Public">public</a> and <a href="https://www.w3.org/Consortium/Legal/privacy-statement#Members">Member</a> privacy statements.</p></div>
370 </div>
371 <!-- Piwik -->
372 <script type="text/javascript">
373 var _paq = _paq || [];
374 _paq.push(["setDomains", ["*.www.w3.org/WAI"]]);
375 _paq.push(['trackPageView']);
376 _paq.push(['enableLinkTracking']);
377 (function() {
378 var u="//www.w3.org/analytics/piwik/";
379 _paq.push(['setTrackerUrl', u+'piwik.php']);
380 _paq.push(['setSiteId', 328]);
381 var d=document, g=d.createElement('script'),
382 s=d.getElementsByTagName('script')[0];
383 g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js';
384 s.parentNode.insertBefore(g,s);
385 })();
386 </script>
387 <noscript><p><img src="//www.w3.org/analytics/piwik/piwik.php?idsite=328"
388 style="border:0;" alt=""
Omitting
img width or
height attributes makes the page layout jump about as images load.
This makes the page very hard to read or click while it's loading.
Fix by adding width and height attributes to the img tag matching the image dimensions.
In responsive layouts, specifying width and height prevents layout jumping because the browser can
pre-calculate the final image size when CSS like this is used:
img { max-width: 100%; height: auto }
This link is broken. The page could not be found on the target web server.
Broken link: https://www.w3.org/analytics/piwik/piwik.php?idsite=328 404 Not Found
Fixing this depends on how the link became broken:
The link has been mistyped and should be fixed
The destination page has moved and the link should be updated
The destination page no longer exists and the link should be removed
A file has been accidentally deleted and should be replaced
/> </p></noscript>
389 <!-- End Piwik Code -->
390
391</body></html>
Issues: