1
Use the
lang attribute to identify the language of the page.
<html ><head><title>Welcome ... Page]</title><style>...</style>...</head>...</html> 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.
This page has no DOCTYPE which triggers quirks mode. Quirks mode forces modern browsers to emulate Netscape Navigator 4 and Internet Explorer 5, changing the way CSS selectors match and how CSS layout works.
<html ><head><title>Welcome ... Page]</title><style>...</style>...</head>...</html>
Add a <!DOCTYPE html> 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.
<html ><head><title>Welcome ... Page]</title><style>...</style>...</head>...</html> A well-written meta description attracts more clicks in search results than
an irrelevant or missing description.
Consider adding a
lang attribute to the
html start tag to declare the language of this document.
<html ><head><title>Welcome ... Page]</title><style>...</style>...</head>...</html> Add a lang attribute containing a language code to the html element, which allows screen readers to pronounce words correctly.
2<html>
3 <head>
4 <title>Welcome to CityLights! [Inaccessible Home Page]</title>
5 <style>
6 #main * {
7 color: #000000;
8 font: normal 15px "Times New Roman", Times, serif;
9 text-decoration: none;
10 }
11 #main p{
12 margin: 6px 0;
13 }
14 #main a {
15 text-decoration: none;
16 color: #226C8E;
17 }
18 #main .headline {
19 margin-top: 0px;
20 color: #41545d;
21 font: 24px verdana;
22 font-family: impact;
23 text-decoration: none;
24 margin-bottom: 0px;
25 }
26 #main .subheadline {
27 padding:16px 0 6px 0;
28 color: #41545d;
29 font: 20px verdana;
30 font-family: impact;
31 text-decoration: none;
32 }
33 #content * {
34 margin: 0;
35 padding: 0;
36 }
37 #content p{
38 margin: 6px 0;
39 }
40 #content .newsbar {
41 background:
#eeeee;
42 }
43 :root #content .newsbar {
44 float: left;
45 width: 100%;
46 }
47 #content .newsheadline img {
48 float: left;
49 padding: 0;
50 margin: 0 5px 15px 0;
51 }
52 #content .newsheadline {
53 width: 135px;
54 margin-right: 5px;
55 background: #ededed;
56 padding-right: 10px;
57 vertical-align: top;
58 display: inline-block;
59 }
60 #content .newsheadline a {
61 color: black;
62 font-weight: bold;
63 background: #ededed;
64 }
65 #content .newsheadline p {
66 font-weight: bold;
67 background: #ededed;
68 }
69 * html #content .newsheadline {
70 width: 138px;
71 display: inline;
72 }
73 :root #content .newsheadline {
74 float: left;
75 width: 128px;
76 display: inline;
77 }
78 #content .image {
79 width: 135px;
80 height: 119px;
81 padding: 0 5px;
82 margin-right: 5px;
83 background: #cccccc;
84 display: inline-block;
85 }
86 * html #content .image {
87 width: 138px;
88 display: inline;
89 }
90 :root #content .image {
91 float: left;
92 width: 128px;
93 display: block;
94 display: inline;
95 }
96 #content .story {
97 width: 135px;
98 margin-right: 5px;
99 background: #ededed;
100 vertical-align: top;
101 padding: 2px 5px 5px;
102 display: inline-block;
103 }
104 #content .story span {
105 }
106 * html #content .story {
107 width: 138px;
108 display: inline;
109 }
110 :root #content .story {
111 float: left;
112 width: 128px;
113 display: inline;
114 }
115 #content .headline {
116 clear: left;
117 color: #41545d;
118 margin-top: 5px;
119 padding-top: 1em;
120 font: 24px verdana;
121 font-family: impact;
122 margin-bottom: 15px;
123 text-decoration: none;
124 }
125 #content .midwidth {
126 height: 1px;
127 }
128 #content .clear {
129 clear: left;
130 }
131
132 </style>
133
134 <link href="../css/meta.css" rel="stylesheet" type="text/css">
135
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 type="text/javascript" async="" defer="" src="//www.w3.org/analytics/piwik/piwik.js">
136
137 </script>
138
139
<script type="text/javascript">
140 function ChangeColor(id, colour){
141 document.getElementById(id).style.backgroundColor=colour;
142 }
143 function switchImage(imgName, imgSrc){
144 if (document.images){
145 if (imgSrc != "none"){
146 document.images[imgName].src = imgSrc;
147 }
148 }
149 }
150
151 </script>
152
153 <noscript>
154 <B><FONT COLOR=RED>This page uses scripts!!!</FONT></B>
155 </noscript>
156
<script src="../js/onload.js" type="text/javascript">
157
158 </script>
159
160 </head>
161
The
alink attribute on the
body element is obsolete.
Use CSS instead.
<body text='#000000' bgcolor='#d7d7cd' leftmargin='0px' topmargin='0px' marginwidth='0px' marginheight='0px' link='#226c8e' vlink='#226c8e' alink='#226c8e' >...</body> The
bgcolor attribute on the
body element is obsolete.
Use CSS instead.
<body text='#000000' bgcolor='#d7d7cd' leftmargin='0px' topmargin='0px' marginwidth='0px' marginheight='0px' link='#226c8e' vlink='#226c8e' alink='#226c8e'>...</body> The
link attribute on the
body element is obsolete.
Use CSS instead.
<body text='#000000' bgcolor='#d7d7cd' leftmargin='0px' topmargin='0px' marginwidth='0px' marginheight='0px' link='#226c8e' vlink='#226c8e' alink='#226c8e'>...</body> The
marginheight attribute on the
body element is obsolete.
Use CSS instead.
<body text='#000000' bgcolor='#d7d7cd' leftmargin='0px' topmargin='0px' marginwidth='0px' marginheight='0px' link='#226c8e' vlink='#226c8e' alink='#226c8e'>...</body> The
leftmargin attribute on the
body element is obsolete.
Use CSS instead.
<body text='#000000' bgcolor='#d7d7cd' leftmargin='0px' topmargin='0px' marginwidth='0px' marginheight='0px' link='#226c8e' vlink='#226c8e' alink='#226c8e'>...</body> The
topmargin attribute on the
body element is obsolete.
Use CSS instead.
<body text='#000000' bgcolor='#d7d7cd' leftmargin='0px' topmargin='0px' marginwidth='0px' marginheight='0px' link='#226c8e' vlink='#226c8e' alink='#226c8e'>...</body> The
marginwidth attribute on the
body element is obsolete.
Use CSS instead.
<body text='#000000' bgcolor='#d7d7cd' leftmargin='0px' topmargin='0px' marginwidth='0px' marginheight='0px' link='#226c8e' vlink='#226c8e' alink='#226c8e'>...</body> The
text attribute on the
body element is obsolete.
Use CSS instead.
<body text='#000000' bgcolor='#d7d7cd' leftmargin='0px' topmargin='0px' marginwidth='0px' marginheight='0px' link='#226c8e' vlink='#226c8e' alink='#226c8e'>...</body> The
vlink attribute on the
body element is obsolete.
Use CSS instead.
<body text='#000000' bgcolor='#d7d7cd' leftmargin='0px' topmargin='0px' marginwidth='0px' marginheight='0px' link='#226c8e' vlink='#226c8e' alink='#226c8e'>...</body> <body text="#000000" bgcolor="#D7D7CD" leftmargin="0px" topmargin="0px" marginwidth="0px" marginheight="0px" link="#226C8E" vlink="#226C8E" alink="#226C8E">
162 <div id="meta-header">
163 <p id="skipnav">
164 <a href="#page">Skip to inaccessible demo page</a>
165 </p>
166 <p id="logos">
167 <a href="https://www.w3.org/" title="W3C Home">
168 <img alt="W3C logo" src="../img/w3c.png" height="48" width="72"></a><a href="https://www.w3.org/WAI/" title="WAI Home">
169
Omitting image
width or
height causes the page layout to shift as each image loads.
<img alt='Web Accessibility Initiative (WAI) logo' src='../img/wai.png' height='48'> This makes the page very hard to read or click while images are loading,
and can make the page unusable on mobile devices with slow connections.width and height attributes to the img tag matching the image dimensions,
or add width: and height: CSS properties for the image.
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 }
<img alt="Web Accessibility Initiative (WAI) logo" src="../img/wai.png" height="48"> </a>
170 </p>
171 <h1>
172 <span class="subhead">Inaccessible Home Page</span><span class="hidden"> -</span> Before and After Demonstration
173 </h1>
174
Use at least a 12-point font on all web pages.
font-size: 10.80pt<p class='subline'>Improving a Web site ... Guidelines (WCAG) 2.0 </p>
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" >
<p class="subline"> Improving a Web site using Web Content Accessibility Guidelines (WCAG) 2.0</p>
175 <div id="mnav" class="inaccessible">
176 <ul>
177 <li class="first">
178 <a href="../Overview.html">Overview</a>
179 </li>
180 <li class="current first">
181 <span class="hidden">Current location: </span>
182 Home <div class="subnav">
183 <ul>
184 <li class="inaccessible">
185 <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>
186 </li>
187 <li class="accessible">
188 <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>
189 </li>
190 </ul><a href="./annotated/home.html" class="annotoggle">
191 Show <br>Annotations</a>
192 </div>
193 </li>
194 <li>
195 <a href="news.html">News</a>
196 </li>
197 <li>
198 <a href="tickets.html">Tickets</a>
199 </li>
200 <li>
201 <a href="survey.html">Survey</a>
202 </li>
203 <li>
204 <a href="template.html">Template</a>
205 </li>
206 </ul>
207 </div>
208 </div>
209 <div id="page">
210 <p class="skip" id="startcontent">Demo starts here</p>
211
<table width="100%" border="0px" cellspacing="0px" cellpadding="0px" bgcolor="#D7D7CD">
212 <tbody>
213
<tr valign="MIDDLE">
214
<td width="100%" align="CENTER">
215
This page uses nested tables, which do not make sense when read in a screen reader.
<table width='800px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table> 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.
<table width='800px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table> 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. <table width="800px" border="0px" cellspacing="0px" cellpadding="0px" bgcolor="WHITE">
216 <tbody>
217 <tr height="10px">
218
<td width="10px" background="./img/border_left_top.gif">
219
img elements must have an accessible name.
<img src='./img/border_left_top.gif' width='10px' height='10px'> 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 2025.3 Chrome 143 Windows 11 Reading: Image ignored. NVDA 2025.3 FF 140 Windows 11 Reading: Image ignored. NVDA 2025.3 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 FF 140 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. VoiceOver macOS 15.7 Safari 26.0 macOS 15.7.1 Reading: Image filename read out. VoiceOver iOS 18.6 Safari iOS 18.6 iOS 18.6.2 Touch: Image filename read out, along with OCR text from image. An
img element must have an
alt attribute, except under certain
conditions. For details, consult guidance on
providing text alternatives for images.
<img src='./img/border_left_top.gif' width='10px' height='10px'> <img src="./img/border_left_top.gif" width="10px" height="10px">
220 </td>
221
<td width="780px" background="./img/border_top.gif">
222
img elements must have an accessible name.
<img src='./img/border_top.gif' height='10px'> 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 2025.3 Chrome 143 Windows 11 Reading: Image ignored. NVDA 2025.3 FF 140 Windows 11 Reading: Image ignored. NVDA 2025.3 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 FF 140 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. VoiceOver macOS 15.7 Safari 26.0 macOS 15.7.1 Reading: Image filename read out. VoiceOver iOS 18.6 Safari iOS 18.6 iOS 18.6.2 Touch: Image filename read out, along with OCR text from image. Omitting image
width or
height causes the page layout to shift as each image loads.
<img src='./img/border_top.gif' height='10px'> This makes the page very hard to read or click while images are loading,
and can make the page unusable on mobile devices with slow connections.width and height attributes to the img tag matching the image dimensions,
or add width: and height: CSS properties for the image.
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 }
An
img element must have an
alt attribute, except under certain
conditions. For details, consult guidance on
providing text alternatives for images.
<img src='./img/border_top.gif' height='10px'> <img src="./img/border_top.gif" height="10px">
223 </td>
224
<td width="10px" background="./img/border_right_top.gif">
225
img elements must have an accessible name.
<img src='./img/border_right_top.gif' width='10px' height='10px'> 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 2025.3 Chrome 143 Windows 11 Reading: Image ignored. NVDA 2025.3 FF 140 Windows 11 Reading: Image ignored. NVDA 2025.3 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 FF 140 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. VoiceOver macOS 15.7 Safari 26.0 macOS 15.7.1 Reading: Image filename read out. VoiceOver iOS 18.6 Safari iOS 18.6 iOS 18.6.2 Touch: Image filename read out, along with OCR text from image. An
img element must have an
alt attribute, except under certain
conditions. For details, consult guidance on
providing text alternatives for images.
<img src='./img/border_right_top.gif' width='10px' height='10px'> <img src="./img/border_right_top.gif" width="10px" height="10px">
226 </td>
227 </tr>
228 <tr>
229
<td width="10px" background="./img/border_left.gif">
230
img elements must have an accessible name.
<img src='./img/border_left.gif' width='10px'> 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 2025.3 Chrome 143 Windows 11 Reading: Image ignored. NVDA 2025.3 FF 140 Windows 11 Reading: Image ignored. NVDA 2025.3 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 FF 140 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. VoiceOver macOS 15.7 Safari 26.0 macOS 15.7.1 Reading: Image filename read out. VoiceOver iOS 18.6 Safari iOS 18.6 iOS 18.6.2 Touch: Image filename read out, along with OCR text from image. Omitting image
width or
height causes the page layout to shift as each image loads.
<img src='./img/border_left.gif' width='10px'> This makes the page very hard to read or click while images are loading,
and can make the page unusable on mobile devices with slow connections.width and height attributes to the img tag matching the image dimensions,
or add width: and height: CSS properties for the image.
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 }
An
img element must have an
alt attribute, except under certain
conditions. For details, consult guidance on
providing text alternatives for images.
<img src='./img/border_left.gif' width='10px'> <img src="./img/border_left.gif" width="10px">
231 </td>
232
<td width="780px" align="CENTER">
233
This page uses nested tables, which do not make sense when read in a screen reader.
<table width='780px' height='144px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table> 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.
<table width='780px' height='144px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table> 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. <table width="780px" height="144px" border="0px" cellspacing="0px" cellpadding="0px" bgcolor="WHITE">
234 <tbody>
235 <tr height="86px">
236
<td width="443px" background="./img/top_logo_next.gif" valign="MIDDLE">
237 <div>
238 <a href="home.html">
239 <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>
240 </div>
241 </td>
242
<td width="24px" valign="MIDDLE">
243
img elements must have an accessible name.
<img src='./img/top_logo_next_end.gif' width='24px' height='86px'> 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 2025.3 Chrome 143 Windows 11 Reading: Image ignored. NVDA 2025.3 FF 140 Windows 11 Reading: Image ignored. NVDA 2025.3 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 FF 140 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. VoiceOver macOS 15.7 Safari 26.0 macOS 15.7.1 Reading: Image filename read out. VoiceOver iOS 18.6 Safari iOS 18.6 iOS 18.6.2 Touch: Image filename read out, along with OCR text from image. An
img element must have an
alt attribute, except under certain
conditions. For details, consult guidance on
providing text alternatives for images.
<img src='./img/top_logo_next_end.gif' width='24px' height='86px'> <img src="./img/top_logo_next_end.gif" width="24px" height="86px">
244 </td>
245
<td width="128px" valign="MIDDLE">
246
img elements must have an accessible name.
<img src='./img/top_weather.gif' width='128px' height='86px'> 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 2025.3 Chrome 143 Windows 11 Reading: Image ignored. NVDA 2025.3 FF 140 Windows 11 Reading: Image ignored. NVDA 2025.3 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 FF 140 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. VoiceOver macOS 15.7 Safari 26.0 macOS 15.7.1 Reading: Image filename read out. VoiceOver iOS 18.6 Safari iOS 18.6 iOS 18.6.2 Touch: Image filename read out, along with OCR text from image. An
img element must have an
alt attribute, except under certain
conditions. For details, consult guidance on
providing text alternatives for images.
<img src='./img/top_weather.gif' width='128px' height='86px'> <img src="./img/top_weather.gif" width="128px" height="86px">
247 </td>
248
<td width="22px" valign="MIDDLE">
249
img elements must have an accessible name.
<img src='./img/top_logo_next_start.gif' width='22px' height='86px'> 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 2025.3 Chrome 143 Windows 11 Reading: Image ignored. NVDA 2025.3 FF 140 Windows 11 Reading: Image ignored. NVDA 2025.3 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 FF 140 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. VoiceOver macOS 15.7 Safari 26.0 macOS 15.7.1 Reading: Image filename read out. VoiceOver iOS 18.6 Safari iOS 18.6 iOS 18.6.2 Touch: Image filename read out, along with OCR text from image. An
img element must have an
alt attribute, except under certain
conditions. For details, consult guidance on
providing text alternatives for images.
<img src='./img/top_logo_next_start.gif' width='22px' height='86px'> <img src="./img/top_logo_next_start.gif" width="22px" height="86px">
250 </td>
251
<td width="163px" background="./img/top_logo_next.gif" align="CENTER" valign="MIDDLE">
252
HTML form control elements must have an accessible name.
<select onchange='location.href = ...'>...</select> A label (or name) linked to the control allows screen readers to voice the label correctly when reading the control. To add a label do one of the following:
Use a label element with the for attribute set to the ID of the form control
Wrap a label element around the form control
Add a title attribute
Add an aria-label attribute
Add an aria-labelledby attribute
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.
<select onchange='location.href = this.value;' >...</select> Moving through the options with the arrow keys fires the change handler and
jumps to another page unexpectedly. Remove the navigation from the change
handler and add a separate Go button that performs the navigation instead.
<select onchange="location.href = this.value; ">
253 <option selected="">QUICKMENU ----> </option>
254 <option value="../offsite.html">Broadcasting </option>
255 <option value="../offsite.html">Education </option>
256 <option value="../offsite.html">Electricity </option>
257 <option value="../offsite.html">Fire service </option>
258 <option value="../offsite.html">Gas service </option>
259 <option value="../offsite.html">Health care </option>
260 <option value="../offsite.html">Police service </option>
261 <option value="../offsite.html">Public Libraries </option>
262 <option value="../offsite.html">Social services </option>
263 <option value="../offsite.html">Social housing </option>
264 <option value="../offsite.html">Telecommunications </option>
265 <option value="../offsite.html">Town planning </option>
266 <option value="../offsite.html">Transportation </option>
267 <option value="../offsite.html">Waste management </option>
268 <option value="../offsite.html">Water services </option>
269 </select>
270 </td>
271 </tr>
272 <tr height="7px">
273
<td width="780px" background="./img/mark.gif" colspan="5">
274
img elements must have an accessible name.
<img src='./img/mark.gif' width='158px' height='7px'> 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 2025.3 Chrome 143 Windows 11 Reading: Image ignored. NVDA 2025.3 FF 140 Windows 11 Reading: Image ignored. NVDA 2025.3 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 FF 140 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. VoiceOver macOS 15.7 Safari 26.0 macOS 15.7.1 Reading: Image filename read out. VoiceOver iOS 18.6 Safari iOS 18.6 iOS 18.6.2 Touch: Image filename read out, along with OCR text from image. An
img element must have an
alt attribute, except under certain
conditions. For details, consult guidance on
providing text alternatives for images.
<img src='./img/mark.gif' width='158px' height='7px'> <img src="./img/mark.gif" width="158px" height="7px">
275 </td>
276 </tr>
277 <tr height="25px">
278 <td colspan="5">
279
This page uses nested tables, which do not make sense when read in a screen reader.
<table width='780px' border='0px' cellspacing='0px' cellpadding='0px'>...</table> Add role='presentation' if the inner table is a layout table, otherwise modify the inner table to present the same data without nesting tables.
<table width="780px" border="0px" cellspacing="0px" cellpadding="0px">
280 <tbody>
281 <tr height="25px">
282
<td bgcolor="#EDEDED" width="380px">
283
<font color="BLACK" face="Verdana" size="2"> <b>Traffic:</b> Construction work on Main Road</font>
284 </td>
285
<td bgcolor="#EDEDED" align="RIGHT" id="WEATHER">
286
<font color="BLACK" face="Verdana" size="2"> <b>Today:</b>
287
<script language="JavaScript">
288 var now = new Date();
289 var days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
290 var months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
291 var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
292 function fourdigits(number) {
293 return (number < 1000) ? number + 1900 : number;
294 }
295 today = days[now.getDay()] + " " + date + " " + months[now.getMonth()] + " " + (fourdigits(now.getYear())) + ", Sunny, 23°C </FONT>";
296 document.all.WEATHER.setAttribute("BGCOLOR", "#EDEDED", 0);
297 document.write(today);
298
299 </script>
300 Sunday 09 August 2026, Sunny, 23°C </font>
301 </td>
302 </tr>
303 </tbody>
304 </table>
305 </td>
306 </tr>
307 <tr height="1px">
308
<td width="780px" background="./img/marker2_w.gif" colspan="5">
309
img elements must have an accessible name.
<img src='.img/marker2_w.gif' width='78px' height='1px'> 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 2025.3 Chrome 143 Windows 11 Reading: Image ignored. NVDA 2025.3 FF 140 Windows 11 Reading: Image ignored. NVDA 2025.3 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 FF 140 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. VoiceOver macOS 15.7 Safari 26.0 macOS 15.7.1 Reading: Image filename read out. VoiceOver iOS 18.6 Safari iOS 18.6 iOS 18.6.2 Touch: Image filename read out, along with OCR text from image. An
img element must have an
alt attribute, except under certain
conditions. For details, consult guidance on
providing text alternatives for images.
<img src='.img/marker2_w.gif' width='78px' height='1px'> <img src=".img/marker2_w.gif" width="78px" height="1px">
310 </td>
311 </tr>
312 <tr height="25px">
313 <td colspan="5"> </td>
314 </tr>
315 </tbody>
316 </table>
317
This page uses nested tables, which do not make sense when read in a screen reader.
<table width='780px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table> 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.
<table width='780px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table> 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. <table width="780px" border="0px" cellspacing="0px" cellpadding="0px" bgcolor="WHITE">
318 <tbody>
319 <tr width="780px">
320
<td width="155px" bgcolor="#E4E4E4" valign="TOP">
321
This page uses nested tables, which do not make sense when read in a screen reader.
<table width='155px' border='0px' cellspacing='0px' cellpadding='0px'>...</table> 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.
<table width='155px' border='0px' cellspacing='0px' cellpadding='0px'>...</table> 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. <table width="155px" border="0px" cellspacing="0px" cellpadding="0px">
322 <tbody>
323 <tr height="1px">
324
<td width="155px" background="./img/marker2_w.gif">
325
img elements must have an accessible name.
<img src='./img/marker2_w.gif' width='78px' height='1px'> 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 2025.3 Chrome 143 Windows 11 Reading: Image ignored. NVDA 2025.3 FF 140 Windows 11 Reading: Image ignored. NVDA 2025.3 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 FF 140 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. VoiceOver macOS 15.7 Safari 26.0 macOS 15.7.1 Reading: Image filename read out. VoiceOver iOS 18.6 Safari iOS 18.6 iOS 18.6.2 Touch: Image filename read out, along with OCR text from image. An
img element must have an
alt attribute, except under certain
conditions. For details, consult guidance on
providing text alternatives for images.
<img src='./img/marker2_w.gif' width='78px' height='1px'> <img src="./img/marker2_w.gif" width="78px" height="1px">
326 </td>
327
<td width="1px" background="./img/marker2_t.gif" rowspan="9" valign="TOP">
328
img elements must have an accessible name.
<img src='./img/marker2_t.gif' width='1' height='30px'> 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 2025.3 Chrome 143 Windows 11 Reading: Image ignored. NVDA 2025.3 FF 140 Windows 11 Reading: Image ignored. NVDA 2025.3 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 FF 140 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. VoiceOver macOS 15.7 Safari 26.0 macOS 15.7.1 Reading: Image filename read out. VoiceOver iOS 18.6 Safari iOS 18.6 iOS 18.6.2 Touch: Image filename read out, along with OCR text from image. An
img element must have an
alt attribute, except under certain
conditions. For details, consult guidance on
providing text alternatives for images.
<img src='./img/marker2_t.gif' width='1' height='30px'> <img src="./img/marker2_t.gif" width="1" height="30px">
329 </td>
330 </tr>
331 <tr height="34px">
332
All
mouseout handlers should have an equivalent keyboard handler.
<td width='154px' bgcolor='#ededed' id='home' onmouseover='...' onmouseout='switchImage('nav_home', './img/nav_home.gif'); ChangeColor('home','#EDEDED')' >...</td> Some users cannot use a mouse and rely on the keyboard instead. Add an
equivalent keyboard event handler (keydown for click and mouse button
events, focus/blur for mouseover/mouseout) so these users can
access the same functionality.
All
mouseover handlers should have an equivalent keyboard handler.
<td width='154px' bgcolor='#ededed' id='home' onmouseover='switchImage('nav_home', './img/nav_home2.gif'); ChangeColor('home','#FFF')' onmouseout='...'>...</td> Some users cannot use a mouse and rely on the keyboard instead. Add an
equivalent keyboard event handler (keydown for click and mouse button
events, focus/blur for mouseover/mouseout) so these users can
access the same functionality.
<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')">
333
Links must have an accessible name.
<a href='javascript:location.href='home.html';' onfocus='blur();'>...</a> A link name allows screen readers to voice what the link 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 keyboard users to navigate this form.
<a href='...ipt:location.href='home.html';' onfocus='blur();' >...</a> Using blur() in an onfocus handler makes the form impossible to use with a keyboard. Remove the call to blur() in the onfocus handler.
<a href="javascript:location.href='home.html'; " onfocus="blur();">
334
img elements must have an accessible name.
<img name='nav_home' src='./img/nav_home.gif' width='88' height='27' hspace='15' border='0px'> 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 2025.3 Chrome 143 Windows 11 Reading: Image ignored. NVDA 2025.3 FF 140 Windows 11 Reading: Image ignored. NVDA 2025.3 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 FF 140 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. VoiceOver macOS 15.7 Safari 26.0 macOS 15.7.1 Reading: Image filename read out. VoiceOver iOS 18.6 Safari iOS 18.6 iOS 18.6.2 Touch: Image filename read out, along with OCR text from image. An
img element must have an
alt attribute, except under certain
conditions. For details, consult guidance on
providing text alternatives for images.
<img name='nav_home' src='./img/nav_home.gif' width='88' height='27' hspace='15' border='0px'> <img name="nav_home" src="./img/nav_home.gif" width="88" height="27" hspace="15" border="0px"> </a>
335 </td>
336 </tr>
337 <tr height="1px">
338
<td width="154px" background="./img/marker2_w.gif">
339
img elements must have an accessible name.
<img src='./img/marker2_w.gif' width='78px' height='1px'> 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 2025.3 Chrome 143 Windows 11 Reading: Image ignored. NVDA 2025.3 FF 140 Windows 11 Reading: Image ignored. NVDA 2025.3 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 FF 140 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. VoiceOver macOS 15.7 Safari 26.0 macOS 15.7.1 Reading: Image filename read out. VoiceOver iOS 18.6 Safari iOS 18.6 iOS 18.6.2 Touch: Image filename read out, along with OCR text from image. An
img element must have an
alt attribute, except under certain
conditions. For details, consult guidance on
providing text alternatives for images.
<img src='./img/marker2_w.gif' width='78px' height='1px'> <img src="./img/marker2_w.gif" width="78px" height="1px">
340 </td>
341 </tr>
342 <tr height="34px">
343
All
mouseout handlers should have an equivalent keyboard handler.
<td width='154px' bgcolor='#ededed' id='news' onmouseover='...' onmouseout='switchImage('nav_news', './img/nav_news.gif'); ChangeColor('news','#EDEDED')' >...</td> Some users cannot use a mouse and rely on the keyboard instead. Add an
equivalent keyboard event handler (keydown for click and mouse button
events, focus/blur for mouseover/mouseout) so these users can
access the same functionality.
All
mouseover handlers should have an equivalent keyboard handler.
<td width='154px' bgcolor='#ededed' id='news' onmouseover='switchImage('nav_news', './img/nav_news2.gif'); ChangeColor('news','#FFF')' onmouseout='...'>...</td> Some users cannot use a mouse and rely on the keyboard instead. Add an
equivalent keyboard event handler (keydown for click and mouse button
events, focus/blur for mouseover/mouseout) so these users can
access the same functionality.
<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')">
344
Links must have an accessible name.
<a href='javascript:location.href='news.html';' onfocus='blur();'>...</a> A link name allows screen readers to voice what the link 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 keyboard users to navigate this form.
<a href='...ipt:location.href='news.html';' onfocus='blur();' >...</a> Using blur() in an onfocus handler makes the form impossible to use with a keyboard. Remove the call to blur() in the onfocus handler.
<a href="javascript:location.href='news.html'; " onfocus="blur();">
345
img elements must have an accessible name.
<img src='./img/nav_news.gif' name='nav_news' width='90' height='21' hspace='12' border='0px'> 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 2025.3 Chrome 143 Windows 11 Reading: Image ignored. NVDA 2025.3 FF 140 Windows 11 Reading: Image ignored. NVDA 2025.3 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 FF 140 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. VoiceOver macOS 15.7 Safari 26.0 macOS 15.7.1 Reading: Image filename read out. VoiceOver iOS 18.6 Safari iOS 18.6 iOS 18.6.2 Touch: Image filename read out, along with OCR text from image. An
img element must have an
alt attribute, except under certain
conditions. For details, consult guidance on
providing text alternatives for images.
<img src='./img/nav_news.gif' name='nav_news' width='90' height='21' hspace='12' border='0px'> <img src="./img/nav_news.gif" name="nav_news" width="90" height="21" hspace="12" border="0px"> </a>
346 </td>
347 </tr>
348 <tr height="1px">
349
<td width="154px" background="./img/marker2_w.gif">
350
img elements must have an accessible name.
<img src='./img/marker2_w.gif' width='78px' height='1px'> 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 2025.3 Chrome 143 Windows 11 Reading: Image ignored. NVDA 2025.3 FF 140 Windows 11 Reading: Image ignored. NVDA 2025.3 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 FF 140 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. VoiceOver macOS 15.7 Safari 26.0 macOS 15.7.1 Reading: Image filename read out. VoiceOver iOS 18.6 Safari iOS 18.6 iOS 18.6.2 Touch: Image filename read out, along with OCR text from image. An
img element must have an
alt attribute, except under certain
conditions. For details, consult guidance on
providing text alternatives for images.
<img src='./img/marker2_w.gif' width='78px' height='1px'> <img src="./img/marker2_w.gif" width="78px" height="1px">
351 </td>
352 </tr>
353 <tr height="34px">
354
All
mouseout handlers should have an equivalent keyboard handler.
<td width='154px' bgcolor='#ededed' id='tickets' onmouseover='...' onmouseout='switchImage('nav_facts', './img/nav_facts.gif'); ChangeColor('tickets','#EDEDED')' >...</td> Some users cannot use a mouse and rely on the keyboard instead. Add an
equivalent keyboard event handler (keydown for click and mouse button
events, focus/blur for mouseover/mouseout) so these users can
access the same functionality.
All
mouseover handlers should have an equivalent keyboard handler.
<td width='154px' bgcolor='#ededed' id='tickets' onmouseover='switchImage('nav_facts', './img/nav_facts2.gif'); ChangeColor('tickets','#FFF')' onmouseout='...'>...</td> Some users cannot use a mouse and rely on the keyboard instead. Add an
equivalent keyboard event handler (keydown for click and mouse button
events, focus/blur for mouseover/mouseout) so these users can
access the same functionality.
<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')">
355
Links must have an accessible name.
<a href='javascript:location.href='tickets.html';' onfocus='blur();'>...</a> A link name allows screen readers to voice what the link 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 keyboard users to navigate this form.
<a href='...:location.href='tickets.html';' onfocus='blur();' >...</a> Using blur() in an onfocus handler makes the form impossible to use with a keyboard. Remove the call to blur() in the onfocus handler.
<a href="javascript:location.href='tickets.html'; " onfocus="blur();">
356
img elements must have an accessible name.
<img name='nav_facts' src='./img/nav_facts.gif' width='105' height='23' hspace='9' border='0px'> 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 2025.3 Chrome 143 Windows 11 Reading: Image ignored. NVDA 2025.3 FF 140 Windows 11 Reading: Image ignored. NVDA 2025.3 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 FF 140 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. VoiceOver macOS 15.7 Safari 26.0 macOS 15.7.1 Reading: Image filename read out. VoiceOver iOS 18.6 Safari iOS 18.6 iOS 18.6.2 Touch: Image filename read out, along with OCR text from image. An
img element must have an
alt attribute, except under certain
conditions. For details, consult guidance on
providing text alternatives for images.
<img name='nav_facts' src='./img/nav_facts.gif' width='105' height='23' hspace='9' border='0px'> <img name="nav_facts" src="./img/nav_facts.gif" width="105" height="23" hspace="9" border="0px"> </a>
357 </td>
358 </tr>
359 <tr height="1px">
360
<td width="154px" background="./img/marker2_w.gif">
361
img elements must have an accessible name.
<img src='./img/marker2_w.gif' width='78px' height='1px'> 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 2025.3 Chrome 143 Windows 11 Reading: Image ignored. NVDA 2025.3 FF 140 Windows 11 Reading: Image ignored. NVDA 2025.3 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 FF 140 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. VoiceOver macOS 15.7 Safari 26.0 macOS 15.7.1 Reading: Image filename read out. VoiceOver iOS 18.6 Safari iOS 18.6 iOS 18.6.2 Touch: Image filename read out, along with OCR text from image. An
img element must have an
alt attribute, except under certain
conditions. For details, consult guidance on
providing text alternatives for images.
<img src='./img/marker2_w.gif' width='78px' height='1px'> <img src="./img/marker2_w.gif" width="78px" height="1px">
362 </td>
363 </tr>
364 <tr height="34px">
365
All
mouseout handlers should have an equivalent keyboard handler.
<td width='154px' bgcolor='#ededed' id='survey' onmouseover='...' onmouseout='switchImage('nav_survey', './img/nav_survey.gif'); ChangeColor('survey','#EDEDED')' >...</td> Some users cannot use a mouse and rely on the keyboard instead. Add an
equivalent keyboard event handler (keydown for click and mouse button
events, focus/blur for mouseover/mouseout) so these users can
access the same functionality.
All
mouseover handlers should have an equivalent keyboard handler.
<td width='154px' bgcolor='#ededed' id='survey' onmouseover='switchImage('nav_survey', './img/nav_survey2.gif'); ChangeColor('survey','#FFF')' onmouseout='...'>...</td> Some users cannot use a mouse and rely on the keyboard instead. Add an
equivalent keyboard event handler (keydown for click and mouse button
events, focus/blur for mouseover/mouseout) so these users can
access the same functionality.
<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')">
366
Links must have an accessible name.
<a href='javascript:location.href='survey.html';' onfocus='blur();'>...</a> A link name allows screen readers to voice what the link 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 keyboard users to navigate this form.
<a href='...t:location.href='survey.html';' onfocus='blur();' >...</a> Using blur() in an onfocus handler makes the form impossible to use with a keyboard. Remove the call to blur() in the onfocus handler.
<a href="javascript:location.href='survey.html'; " onfocus="blur();">
367
img elements must have an accessible name.
<img src='./img/nav_survey.gif' name='nav_survey' width='107' height='32' hspace='8' border='0px'> 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 2025.3 Chrome 143 Windows 11 Reading: Image ignored. NVDA 2025.3 FF 140 Windows 11 Reading: Image ignored. NVDA 2025.3 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 FF 140 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. VoiceOver macOS 15.7 Safari 26.0 macOS 15.7.1 Reading: Image filename read out. VoiceOver iOS 18.6 Safari iOS 18.6 iOS 18.6.2 Touch: Image filename read out, along with OCR text from image. An
img element must have an
alt attribute, except under certain
conditions. For details, consult guidance on
providing text alternatives for images.
<img src='./img/nav_survey.gif' name='nav_survey' width='107' height='32' hspace='8' border='0px'> <img src="./img/nav_survey.gif" name="nav_survey" width="107" height="32" hspace="8" border="0px"> </a>
368 </td>
369 </tr>
370 <tr height="1px">
371
<td width="154px" background="./img/marker2_w.gif">
372
img elements must have an accessible name.
<img src='./img/marker2_w.gif' width='78px' height='1px'> 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 2025.3 Chrome 143 Windows 11 Reading: Image ignored. NVDA 2025.3 FF 140 Windows 11 Reading: Image ignored. NVDA 2025.3 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 FF 140 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. VoiceOver macOS 15.7 Safari 26.0 macOS 15.7.1 Reading: Image filename read out. VoiceOver iOS 18.6 Safari iOS 18.6 iOS 18.6.2 Touch: Image filename read out, along with OCR text from image. An
img element must have an
alt attribute, except under certain
conditions. For details, consult guidance on
providing text alternatives for images.
<img src='./img/marker2_w.gif' width='78px' height='1px'> <img src="./img/marker2_w.gif" width="78px" height="1px">
373 </td>
374 </tr>
375 </tbody>
376 </table>
377 </td>
378
<td width="20px">
379
img elements must have an accessible name.
<img src='./img/blank_5x5.gif' width='20px' height='5px'> 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 2025.3 Chrome 143 Windows 11 Reading: Image ignored. NVDA 2025.3 FF 140 Windows 11 Reading: Image ignored. NVDA 2025.3 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 FF 140 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. VoiceOver macOS 15.7 Safari 26.0 macOS 15.7.1 Reading: Image filename read out. VoiceOver iOS 18.6 Safari iOS 18.6 iOS 18.6.2 Touch: Image filename read out, along with OCR text from image. An
img element must have an
alt attribute, except under certain
conditions. For details, consult guidance on
providing text alternatives for images.
<img src='./img/blank_5x5.gif' width='20px' height='5px'> <img src="./img/blank_5x5.gif" width="20px" height="5px">
380 </td>
381
<td width="434px" height="600px" valign="TOP" id="main">
382 <p class="headline">Welcome to CityLights</p>
383
Use at least a 12-point font on all web pages.
font-size: 11.25pt<p>Citylights is the new portal for ... tickets, and get the latest news. </p>
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" >
<p> Citylights is the new portal for visitors and residents. Find out what's on, book tickets, and get the latest news.</p>
384 <div id="content">
385 <div class="midwidth">
386 <div></div>
387 </div>
388 <div class="newsbar">
389 <div class="newsheadline">
390
img elements must have an accessible name.
<img src='./img/headline_middle.gif' width='23' height='24' align='absmiddle'> 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 2025.3 Chrome 143 Windows 11 Reading: Image ignored. NVDA 2025.3 FF 140 Windows 11 Reading: Image ignored. NVDA 2025.3 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 FF 140 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. VoiceOver macOS 15.7 Safari 26.0 macOS 15.7.1 Reading: Image filename read out. VoiceOver iOS 18.6 Safari iOS 18.6 iOS 18.6.2 Touch: Image filename read out, along with OCR text from image. An
img element must have an
alt attribute, except under certain
conditions. For details, consult guidance on
providing text alternatives for images.
<img src='./img/headline_middle.gif' width='23' height='24' align='absmiddle'> <img src="./img/headline_middle.gif" width="23" height="24" align="absmiddle">
This field removes focus when tabbed to, making it impossible for keyboard users to navigate this form.
<a href='news.html' onfocus='blur();' >Heat wave linked to temperatures</a> Using blur() in an onfocus handler makes the form impossible to use with a keyboard. Remove the call to blur() in the onfocus handler.
<a href="news.html" onfocus="blur(); ">Heat wave linked to temperatures</a>
391 </div>
392 <div class="newsheadline">
393
img elements must have an accessible name.
<img src='./img/headline_middle.gif' width='23' height='24' align='absmiddle'> 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 2025.3 Chrome 143 Windows 11 Reading: Image ignored. NVDA 2025.3 FF 140 Windows 11 Reading: Image ignored. NVDA 2025.3 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 FF 140 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. VoiceOver macOS 15.7 Safari 26.0 macOS 15.7.1 Reading: Image filename read out. VoiceOver iOS 18.6 Safari iOS 18.6 iOS 18.6.2 Touch: Image filename read out, along with OCR text from image. An
img element must have an
alt attribute, except under certain
conditions. For details, consult guidance on
providing text alternatives for images.
<img src='./img/headline_middle.gif' width='23' height='24' align='absmiddle'> <img src="./img/headline_middle.gif" width="23" height="24" align="absmiddle">
This field removes focus when tabbed to, making it impossible for keyboard users to navigate this form.
<a href='news.html' onfocus='blur();' >Man Gets Nine Months in Violin Case</a> Using blur() in an onfocus handler makes the form impossible to use with a keyboard. Remove the call to blur() in the onfocus handler.
<a href="news.html" onfocus="blur(); ">Man Gets Nine Months in Violin Case</a>
394 </div>
395 <div class="newsheadline">
396
img elements must have an accessible name.
<img src='./img/headline_middle.gif' width='23' height='24' align='absmiddle'> 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 2025.3 Chrome 143 Windows 11 Reading: Image ignored. NVDA 2025.3 FF 140 Windows 11 Reading: Image ignored. NVDA 2025.3 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 FF 140 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. VoiceOver macOS 15.7 Safari 26.0 macOS 15.7.1 Reading: Image filename read out. VoiceOver iOS 18.6 Safari iOS 18.6 iOS 18.6.2 Touch: Image filename read out, along with OCR text from image. An
img element must have an
alt attribute, except under certain
conditions. For details, consult guidance on
providing text alternatives for images.
<img src='./img/headline_middle.gif' width='23' height='24' align='absmiddle'> <img src="./img/headline_middle.gif" width="23" height="24" align="absmiddle">
This field removes focus when tabbed to, making it impossible for keyboard users to navigate this form.
<a href='news.html' onfocus='blur();' >Lack of brains hinders research</a> Using blur() in an onfocus handler makes the form impossible to use with a keyboard. Remove the call to blur() in the onfocus handler.
<a href="news.html" onfocus="blur(); ">Lack of brains hinders research</a>
397 </div>
398 <div class="clear">
399 <div class="null"></div>
400 </div>
401 </div>
402 <div class="newsbar">
403 <div class="image" style="background: url(./img/panda-sm.jpg) center center no-repeat #cccccc" title="image">
404 <div class="null"></div>
405 </div>
406 <div class="image" style="background: url(./img/oldenburgstudentviolin34.jpg) center center no-repeat #cccccc" title="image">
407 <div class="null"></div>
408 </div>
409 <div class="image" style="background: url(./img/BrainInJar.jpg) center center no-repeat #cccccc;" title="image">
410 <div class="null"></div>
411 </div>
412 <div class="clear">
413 <div class="null"></div>
414 </div>
415 </div>
416 <div class="newsbar">
417 <div class="story">
418
Use at least a 12-point font on all web pages.
font-size: 11.25pt<span>After three years of effort ... heatwave was hot air from our ...</span>
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" >
<span> After three years of effort city scientists now agree that the primary cause of the 2003 heatwave was hot air from our
Links must have an accessible name.
<a href='news.html' onfocus='blur();'>...</a> A link name allows screen readers to voice what the link 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 keyboard users to navigate this form.
<a href='news.html' onfocus='blur();' >...</a> Using blur() in an onfocus handler makes the form impossible to use with a keyboard. Remove the call to blur() in the onfocus handler.
<a href="news.html" onfocus="blur(); ">
419
The
border attribute on the
img element is obsolete.
Consider specifying
img { border: 0; } in CSS instead.
<img src='./img/morearrow.gif' width='48' height='10' alt='' border='0' onmouseover='this.src='./img/...' onmouseout='this.src='./img/...' style='vertical-align: ...'> <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>
420 </div>
421 <div class="story">
422
Use at least a 12-point font on all web pages.
font-size: 11.25pt<span>Mayor: These kinds of crimes ..., we could require compulsory ...</span>
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" >
<span> Mayor: These kinds of crimes need more creative, effective punishments. For example, we could require compulsory
Links must have an accessible name.
<a href='news.html' onfocus='blur();'>...</a> A link name allows screen readers to voice what the link 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 keyboard users to navigate this form.
<a href='news.html' onfocus='blur();' >...</a> Using blur() in an onfocus handler makes the form impossible to use with a keyboard. Remove the call to blur() in the onfocus handler.
<a href="news.html" onfocus="blur(); ">
423
The
border attribute on the
img element is obsolete.
Consider specifying
img { border: 0; } in CSS instead.
<img src='./img/morearrow.gif' width='48' height='10' alt='' border='0' onmouseover='this.src='./img/...' onmouseout='this.src='./img/...' style='vertical-align: ...'> <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>
424 </div>
425 <div class="story">
426
Use at least a 12-point font on all web pages.
font-size: 11.25pt<span>Brain donations: huge drop off ... Traffic, Safe Streets' policy ...</span>
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" >
<span> Brain donations: huge drop off in brain donations due to the great 'success' of 'Slow Traffic, Safe Streets' policy
Links must have an accessible name.
<a href='news.html' onfocus='blur();'>...</a> A link name allows screen readers to voice what the link 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 keyboard users to navigate this form.
<a href='news.html' onfocus='blur();' >...</a> Using blur() in an onfocus handler makes the form impossible to use with a keyboard. Remove the call to blur() in the onfocus handler.
<a href="news.html" onfocus="blur(); ">
427
The
border attribute on the
img element is obsolete.
Consider specifying
img { border: 0; } in CSS instead.
<img src='./img/morearrow.gif' width='48' height='10' alt='' border='0' onmouseover='this.src='./img/...' onmouseout='this.src='./img/...' style='vertical-align: ...'> <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>
428 </div>
429 </div>
430 <hr style="visibility:hidden; clear:both;">
431 <p class="subheadline">Elsewhere on the Web</p>
432
Use at least a 12-point font on all web pages.
font-size: 11.25pt<p>Please see the following websites ... advice, call the number below. <br>
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" >
<p>
433 Please see the following websites for important information. Citylights take no responsibility for their content. For artichoke advice, call the number below.<br>
434 <br><span>
435
alt text should not be a meaningless image file name.
Placeholder
alt text:
bullet<img src='./img/list_bullets.gif' alt='bullet' border='0' align='absmiddle'>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'.
Placeholder text:
bullet <img src='./img/list_bullets.gif' alt='bullet' border='0' align='absmiddle'>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 image
width or
height causes the page layout to shift as each image loads.
<img src='./img/list_bullets.gif' alt='bullet' border='0' align='absmiddle'> This makes the page very hard to read or click while images are loading,
and can make the page unusable on mobile devices with slow connections.width and height attributes to the img tag matching the image dimensions,
or add width: and height: CSS properties for the image.
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 }
<img src="./img/list_bullets.gif" alt="bullet" border="0" align="absmiddle"> Killer bees.
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<a onfocus='blur();' href='../offsite.html' target='_blank'>Click here </a>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.
<a onfocus='blur();' href='../offsite.html' target='_blank' >Click here</a> 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 non-descriptive text like 'Click Here' which doesn't explain link purpose.
Link text:
Click here <a onfocus='blur();' href='../offsite.html' target='_blank'>Click here </a>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 keyboard users to navigate this form.
<a onfocus='blur();' href='../offsite.html' target='_blank'>Click here</a> Using blur() in an onfocus handler makes the form impossible to use with a keyboard. Remove the call to blur() in the onfocus handler.
This link uses generic text like "click here" or "learn more", which gives search engines no information about the target page.
Link text:
Click here <a onfocus='blur();' href='../offsite.html' target='_blank'>Click here </a>Replace generic phrases like "click here" and "learn more" with a description of the content that appears after clicking the link.
Users should be able to quickly look at each link and tell where it goes.
Link text:
Click here<a onfocus='blur();' href='../offsite.html' target='_blank'>Click here </a>Don't use generic link labels like "click here" or "read more" because they're hard to tell apart when users scan a page.
<a onfocus="blur(); " href="../offsite.html" target="_blank">Click here</a>
436 .<br>
437
alt text should not be a meaningless image file name.
Placeholder
alt text:
bullet<img src='./img/list_bullets.gif' alt='bullet' border='0' align='absmiddle'>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'.
Placeholder text:
bullet <img src='./img/list_bullets.gif' alt='bullet' border='0' align='absmiddle'>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 image
width or
height causes the page layout to shift as each image loads.
<img src='./img/list_bullets.gif' alt='bullet' border='0' align='absmiddle'> This makes the page very hard to read or click while images are loading,
and can make the page unusable on mobile devices with slow connections.width and height attributes to the img tag matching the image dimensions,
or add width: and height: CSS properties for the image.
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 }
<img src="./img/list_bullets.gif" alt="bullet" border="0" align="absmiddle"> Onions.
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<a onfocus='blur();' href='../offsite.html' target='_blank'>Click here </a>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.
<a onfocus='blur();' href='../offsite.html' target='_blank' >Click here</a> 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 non-descriptive text like 'Click Here' which doesn't explain link purpose.
Link text:
Click here <a onfocus='blur();' href='../offsite.html' target='_blank'>Click here </a>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 keyboard users to navigate this form.
<a onfocus='blur();' href='../offsite.html' target='_blank'>Click here</a> Using blur() in an onfocus handler makes the form impossible to use with a keyboard. Remove the call to blur() in the onfocus handler.
This link uses generic text like "click here" or "learn more", which gives search engines no information about the target page.
Link text:
Click here <a onfocus='blur();' href='../offsite.html' target='_blank'>Click here </a>Replace generic phrases like "click here" and "learn more" with a description of the content that appears after clicking the link.
Users should be able to quickly look at each link and tell where it goes.
Link text:
Click here<a onfocus='blur();' href='../offsite.html' target='_blank'>Click here </a>Don't use generic link labels like "click here" or "read more" because they're hard to tell apart when users scan a page.
<a onfocus="blur(); " href="../offsite.html" target="_blank">Click here</a>.</span>
438 <br>
439 <br><b>Artichoke advice telephone hotline: </b>
440
Omitting image
width or
height causes the page layout to shift as each image loads.
<img src='./img/telefon_white_bg.gif' alt='1234 56789' border='0' align='absmiddle'> This makes the page very hard to read or click while images are loading,
and can make the page unusable on mobile devices with slow connections.width and height attributes to the img tag matching the image dimensions,
or add width: and height: CSS properties for the image.
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 }
<img src="./img/telefon_white_bg.gif" alt="1234 56789" border="0" align="absmiddle">
441 </p>
442 </div>
443 </td>
444
<td width="20px">
445
img elements must have an accessible name.
<img src='./img/blank_5x5.gif' width='20px' height='5px'> 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 2025.3 Chrome 143 Windows 11 Reading: Image ignored. NVDA 2025.3 FF 140 Windows 11 Reading: Image ignored. NVDA 2025.3 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 FF 140 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. VoiceOver macOS 15.7 Safari 26.0 macOS 15.7.1 Reading: Image filename read out. VoiceOver iOS 18.6 Safari iOS 18.6 iOS 18.6.2 Touch: Image filename read out, along with OCR text from image. An
img element must have an
alt attribute, except under certain
conditions. For details, consult guidance on
providing text alternatives for images.
<img src='./img/blank_5x5.gif' width='20px' height='5px'> <img src="./img/blank_5x5.gif" width="20px" height="5px">
446 </td>
447
<td width="151px" valign="TOP">
448
This page uses nested tables, which do not make sense when read in a screen reader.
<table width='151px' border='0px' cellspacing='0px' cellpadding='0px'>...</table> 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.
<table width='151px' border='0px' cellspacing='0px' cellpadding='0px'>...</table> 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. <table width="151px" border="0px" cellspacing="0px" cellpadding="0px">
449 <tbody>
450 <tr height="1px">
451
<td width="1px" background="./img/marker2_t.gif" rowspan="11" valign="TOP">
452
img elements must have an accessible name.
<img src='./img/marker2_t.gif' width='1px' height='30px'> 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 2025.3 Chrome 143 Windows 11 Reading: Image ignored. NVDA 2025.3 FF 140 Windows 11 Reading: Image ignored. NVDA 2025.3 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 FF 140 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. VoiceOver macOS 15.7 Safari 26.0 macOS 15.7.1 Reading: Image filename read out. VoiceOver iOS 18.6 Safari iOS 18.6 iOS 18.6.2 Touch: Image filename read out, along with OCR text from image. An
img element must have an
alt attribute, except under certain
conditions. For details, consult guidance on
providing text alternatives for images.
<img src='./img/marker2_t.gif' width='1px' height='30px'> <img src="./img/marker2_t.gif" width="1px" height="30px">
453 </td>
454
<td width="151px" background="./img/marker2_w.gif">
455
img elements must have an accessible name.
<img src='./img/marker2_w.gif' width='78px' height='1px'> 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 2025.3 Chrome 143 Windows 11 Reading: Image ignored. NVDA 2025.3 FF 140 Windows 11 Reading: Image ignored. NVDA 2025.3 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 FF 140 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. VoiceOver macOS 15.7 Safari 26.0 macOS 15.7.1 Reading: Image filename read out. VoiceOver iOS 18.6 Safari iOS 18.6 iOS 18.6.2 Touch: Image filename read out, along with OCR text from image. An
img element must have an
alt attribute, except under certain
conditions. For details, consult guidance on
providing text alternatives for images.
<img src='./img/marker2_w.gif' width='78px' height='1px'> <img src="./img/marker2_w.gif" width="78px" height="1px">
456 </td>
457 </tr>
458 <tr height="25px">
459
<td width="150px" bgcolor="#A9B8BF">
460
<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: 700<b>Free Penguins </b>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>
461 </td>
462 </tr>
463 <tr height="106px">
464
<td width="150px">
465 <div>
466
img elements must have an accessible name.
<img src='./img/teaser_right1.jpg' width='150px' height='106px'> 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 2025.3 Chrome 143 Windows 11 Reading: Image ignored. NVDA 2025.3 FF 140 Windows 11 Reading: Image ignored. NVDA 2025.3 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 FF 140 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. VoiceOver macOS 15.7 Safari 26.0 macOS 15.7.1 Reading: Image filename read out. VoiceOver iOS 18.6 Safari iOS 18.6 iOS 18.6.2 Touch: Image filename read out, along with OCR text from image. An
img element must have an
alt attribute, except under certain
conditions. For details, consult guidance on
providing text alternatives for images.
<img src='./img/teaser_right1.jpg' width='150px' height='106px'> <img src="./img/teaser_right1.jpg" width="150px" height="106px">
467 </div>
468 </td>
469 </tr>
470 <tr>
471
<td width="150px">
472
This page uses nested tables, which do not make sense when read in a screen reader.
<table width='150px' border='0px' cellspacing='0px' cellpadding='3px'>...</table> Add role='presentation' if the inner table is a layout table, otherwise modify the inner table to present the same data without nesting tables.
<table width="150px" border="0px" cellspacing="0px" cellpadding="3px">
473 <tbody>
474 <tr>
475 <td>
476 <div>
477 "Free penguins" slogan at zoo benefit concert causes confusion among city rockers. Adjective or verb?<br>
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<a href='tickets.html' onfocus='blur();' style='text-decoration:...'>Read More... </a>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 non-descriptive text like 'Click Here' which doesn't explain link purpose.
Link text:
Read More... <a href='tickets.html' onfocus='blur();' style='text-decoration:...'>Read More... </a>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 keyboard users to navigate this form.
<a href='tickets.html' onfocus='blur();' style='text-decoration:...'>Read More...</a> Using blur() in an onfocus handler makes the form impossible to use with a keyboard. Remove the call to blur() in the onfocus handler.
This link uses generic text like "click here" or "learn more", which gives search engines no information about the target page.
Link text:
Read More... <a href='tickets.html' onfocus='blur();' style='text-decoration:...'>Read More... </a>Replace generic phrases like "click here" and "learn more" with a description of the content that appears after clicking the link.
Users should be able to quickly look at each link and tell where it goes.
Link text:
Read More...<a href='tickets.html' onfocus='blur();' style='text-decoration:...'>Read More... </a>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.
<a href="tickets.html" onfocus="blur(); " style="text-decoration:none;">Read More...</a>
478 </div>
479 </td>
480 </tr>
481 </tbody>
482 </table>
483 </td>
484 </tr>
485 <tr height="17px">
486 <td> </td>
487 </tr>
488 <tr height="1px">
489
<td width="150px" background="./img/marker2_w.gif">
490
img elements must have an accessible name.
<img src='./img/marker2_w.gif' width='78px' height='1px'> 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 2025.3 Chrome 143 Windows 11 Reading: Image ignored. NVDA 2025.3 FF 140 Windows 11 Reading: Image ignored. NVDA 2025.3 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 FF 140 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. VoiceOver macOS 15.7 Safari 26.0 macOS 15.7.1 Reading: Image filename read out. VoiceOver iOS 18.6 Safari iOS 18.6 iOS 18.6.2 Touch: Image filename read out, along with OCR text from image. An
img element must have an
alt attribute, except under certain
conditions. For details, consult guidance on
providing text alternatives for images.
<img src='./img/marker2_w.gif' width='78px' height='1px'> <img src="./img/marker2_w.gif" width="78px" height="1px">
491 </td>
492 </tr>
493 <tr height="25px">
494
<td width="150px" bgcolor="#A9B8BF">
495
<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: 700<b>More City Parks </b>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>
496 </td>
497 </tr>
498 <tr height="154px">
499
<td width="150px">
500
img elements must have an accessible name.
<img src='./img/teaser_right2.jpg' width='150px' height='154px'> 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 2025.3 Chrome 143 Windows 11 Reading: Image ignored. NVDA 2025.3 FF 140 Windows 11 Reading: Image ignored. NVDA 2025.3 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 FF 140 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. VoiceOver macOS 15.7 Safari 26.0 macOS 15.7.1 Reading: Image filename read out. VoiceOver iOS 18.6 Safari iOS 18.6 iOS 18.6.2 Touch: Image filename read out, along with OCR text from image. An
img element must have an
alt attribute, except under certain
conditions. For details, consult guidance on
providing text alternatives for images.
<img src='./img/teaser_right2.jpg' width='150px' height='154px'> <img src="./img/teaser_right2.jpg" width="150px" height="154px">
501 </td>
502 </tr>
503 <tr>
504
<td width="150px">
505
This page uses nested tables, which do not make sense when read in a screen reader.
<table width='150px' border='0px' cellspacing='0px' cellpadding='3px'>...</table> Add role='presentation' if the inner table is a layout table, otherwise modify the inner table to present the same data without nesting tables.
<table width="150px" border="0px" cellspacing="0px" cellpadding="3px">
506 <tbody>
507 <tr>
508 <td>
509 More parks and more green throughout the city at the price of already rare car parking spaces, how will this affect you?<br>
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<a href='survey.html' onfocus='blur();' style='text-decoration:...'>Read More... </a>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 non-descriptive text like 'Click Here' which doesn't explain link purpose.
Link text:
Read More... <a href='survey.html' onfocus='blur();' style='text-decoration:...'>Read More... </a>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 keyboard users to navigate this form.
<a href='survey.html' onfocus='blur();' style='text-decoration:...'>Read More...</a> Using blur() in an onfocus handler makes the form impossible to use with a keyboard. Remove the call to blur() in the onfocus handler.
This link uses generic text like "click here" or "learn more", which gives search engines no information about the target page.
Link text:
Read More... <a href='survey.html' onfocus='blur();' style='text-decoration:...'>Read More... </a>Replace generic phrases like "click here" and "learn more" with a description of the content that appears after clicking the link.
Users should be able to quickly look at each link and tell where it goes.
Link text:
Read More...<a href='survey.html' onfocus='blur();' style='text-decoration:...'>Read More... </a>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.
<a href="survey.html" onfocus="blur(); " style="text-decoration:none;">Read More...</a>
510 </td>
511 </tr>
512 </tbody>
513 </table>
514 </td>
515 </tr>
516 </tbody>
517 </table>
518 </td>
519 </tr>
520 </tbody>
521 </table>
522
This page uses nested tables, which do not make sense when read in a screen reader.
<table width='780px' height='17px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='#ededed'>...</table> Add role='presentation' if the inner table is a layout table, otherwise modify the inner table to present the same data without nesting tables.
<table width="780px" height="17px" border="0px" cellspacing="0px" cellpadding="0px" bgcolor="#EDEDED">
523 <tbody>
524 <tr height="17px">
525
<td align="RIGHT">
526
<font color="BLACK" face="Verdana" size="1">
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<a rel='copyright' href='...ium/Legal/ipr-notice#Copyright'>Copyright </a>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
<a rel="Copyright" href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright"> Copyright</a> © 2012 <a href="https://www.w3.org/">
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<acronym title='World Wide Web Consortium'>W3C </acronym>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
<acronym title="World Wide Web Consortium"> W3C</acronym></a><sup>®</sup> (<a href="http://www.csail.mit.edu/">
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<acronym title='Massachusetts Institute of Technology'>MIT </acronym>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
<acronym title="Massachusetts Institute of Technology"> MIT</acronym></a>, <a href="http://www.ercim.org/">
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<acronym title='European Research Consortium for Informatics and Mathematics'>ERCIM </acronym>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
<acronym title="European Research Consortium for Informatics and Mathematics"> ERCIM</acronym></a>,
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<a href='http://www.keio.ac.jp/'>Keio </a>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
<a href="http://www.keio.ac.jp/"> Keio</a>)</font>
527 </td>
528 </tr>
529 </tbody>
530 </table><!--// END FOOTER AREA //-->
531 </td>
532
<td width="10px" background="./img/border_right.gif">
533
img elements must have an accessible name.
<img src='./img/border_right.gif' width='10px'> 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 2025.3 Chrome 143 Windows 11 Reading: Image ignored. NVDA 2025.3 FF 140 Windows 11 Reading: Image ignored. NVDA 2025.3 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 FF 140 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. VoiceOver macOS 15.7 Safari 26.0 macOS 15.7.1 Reading: Image filename read out. VoiceOver iOS 18.6 Safari iOS 18.6 iOS 18.6.2 Touch: Image filename read out, along with OCR text from image. Omitting image
width or
height causes the page layout to shift as each image loads.
<img src='./img/border_right.gif' width='10px'> This makes the page very hard to read or click while images are loading,
and can make the page unusable on mobile devices with slow connections.width and height attributes to the img tag matching the image dimensions,
or add width: and height: CSS properties for the image.
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 }
An
img element must have an
alt attribute, except under certain
conditions. For details, consult guidance on
providing text alternatives for images.
<img src='./img/border_right.gif' width='10px'> <img src="./img/border_right.gif" width="10px">
534 </td>
535 </tr>
536 <tr height="10px">
537
<td width="10px" height="10px" background="./img/border_bottom_left.gif">
538
img elements must have an accessible name.
<img src='./img/border_bottom_left.gif' width='10px' height='10px'> 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 2025.3 Chrome 143 Windows 11 Reading: Image ignored. NVDA 2025.3 FF 140 Windows 11 Reading: Image ignored. NVDA 2025.3 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 FF 140 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. VoiceOver macOS 15.7 Safari 26.0 macOS 15.7.1 Reading: Image filename read out. VoiceOver iOS 18.6 Safari iOS 18.6 iOS 18.6.2 Touch: Image filename read out, along with OCR text from image. An
img element must have an
alt attribute, except under certain
conditions. For details, consult guidance on
providing text alternatives for images.
<img src='./img/border_bottom_left.gif' width='10px' height='10px'> <img src="./img/border_bottom_left.gif" width="10px" height="10px">
539 </td>
540
<td width="780px" height="10px" background="./img/border_bottom.gif">
541
img elements must have an accessible name.
<img src='./img/border_bottom.gif' height='10px'> 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 2025.3 Chrome 143 Windows 11 Reading: Image ignored. NVDA 2025.3 FF 140 Windows 11 Reading: Image ignored. NVDA 2025.3 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 FF 140 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. VoiceOver macOS 15.7 Safari 26.0 macOS 15.7.1 Reading: Image filename read out. VoiceOver iOS 18.6 Safari iOS 18.6 iOS 18.6.2 Touch: Image filename read out, along with OCR text from image. Omitting image
width or
height causes the page layout to shift as each image loads.
<img src='./img/border_bottom.gif' height='10px'> This makes the page very hard to read or click while images are loading,
and can make the page unusable on mobile devices with slow connections.width and height attributes to the img tag matching the image dimensions,
or add width: and height: CSS properties for the image.
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 }
An
img element must have an
alt attribute, except under certain
conditions. For details, consult guidance on
providing text alternatives for images.
<img src='./img/border_bottom.gif' height='10px'> <img src="./img/border_bottom.gif" height="10px">
542 </td>
543
<td width="10px" height="10px" background="./img/border_bottom_right.gif">
544
img elements must have an accessible name.
<img src='./img/border_bottom_right.gif' width='10px' height='10px'> 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 2025.3 Chrome 143 Windows 11 Reading: Image ignored. NVDA 2025.3 FF 140 Windows 11 Reading: Image ignored. NVDA 2025.3 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 FF 140 Windows 11 Reading: Image ignored. JAWS 2025.2508.120 Chrome 143 Windows 11 Reading: Image ignored. VoiceOver macOS 15.7 Safari 26.0 macOS 15.7.1 Reading: Image filename read out. VoiceOver iOS 18.6 Safari iOS 18.6 iOS 18.6.2 Touch: Image filename read out, along with OCR text from image. An
img element must have an
alt attribute, except under certain
conditions. For details, consult guidance on
providing text alternatives for images.
<img src='./img/border_bottom_right.gif' width='10px' height='10px'> <img src="./img/border_bottom_right.gif" width="10px" height="10px">
545 </td>
546 </tr>
547 </tbody>
548 </table>
549 </td>
550 </tr>
551 </tbody>
552 </table>
553 </div>
554 <div id="meta-footer" class="meta">
555 <hr>
556 <p>
557 <strong>Status:</strong> 20 February 2012 (see <a href="../changelog.html">changelog</a>
558 ) <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>
559 . <br>Developed with support from <a href="https://www.w3.org/WAI/TIES/">
The
acronym element is obsolete. Use the
abbr element instead.
<acronym title='Web Accessibility Initiative: Training, Implementation, Education, Support'>WAI-TIES</acronym> <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>]
560 </p>
561 <p>
562 [
The
shape attribute on the
a element is obsolete.
For image maps, use the
area element instead of the
a element.
<a href='...://www.w3.org/WAI/sitemap.html' shape='rect' >WAI Site Map</a> <a href="https://www.w3.org/WAI/sitemap.html" shape="rect"> WAI Site Map</a>] [
The
shape attribute on the
a element is obsolete.
For image maps, use the
area element instead of the
a element.
<a href='...//www.w3.org/WAI/sitehelp.html' shape='rect' >Help ... Website</a> <a href="https://www.w3.org/WAI/sitehelp.html" shape="rect"> Help with WAI Website</a>] [
The
shape attribute on the
a element is obsolete.
For image maps, use the
area element instead of the
a element.
<a href='...ps://www.w3.org/WAI/search.php' shape='rect' >Search</a> <a href="https://www.w3.org/WAI/search.php" shape="rect"> Search</a>] [
The
shape attribute on the
a element is obsolete.
For image maps, use the
area element instead of the
a element.
<a href='...ttps://www.w3.org/WAI/contacts' shape='rect' >Contacting WAI</a> <a href="https://www.w3.org/WAI/contacts" shape="rect"> Contacting WAI</a>
563 ] <br><strong>Feedback welcome to
The
shape attribute on the
a element is obsolete.
For image maps, use the
area element instead of the
a element.
<a href='mailto:wai-eo-editors@w3.org' shape='rect' >wai-eo-editors@w3.org</a> <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).
564 </p>
565 <div class="copyright">
566 <p>
567 <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/">
<acronym title="Massachusetts Institute of Technology"> MIT</acronym></a>, <a href="http://www.ercim.org/">
<acronym title="European Research Consortium for Informatics and Mathematics"> ERCIM</acronym></a>, <a href="http://www.keio.ac.jp/">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.
568 </p>
569 </div>
570 </div><!-- Piwik -->
571
<script type="text/javascript">
572 var _paq = _paq || [];
573 _paq.push(["setDomains", ["*.www.w3.org/WAI"]]);
574 _paq.push(['trackPageView']);
575 _paq.push(['enableLinkTracking']);
576 (function() {
577 var u="//www.w3.org/analytics/piwik/";
578 _paq.push(['setTrackerUrl', u+'piwik.php']);
579 _paq.push(['setSiteId', 328]);
580 var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
581 g.type='text/javascript';
582 g.async=true;
583 g.defer=true;
584 g.src=u+'piwik.js';
585 s.parentNode.insertBefore(g,s);
586 }
587 )();
588
589 </script>
590
591 <noscript>
592 <p>
593 <img src="//www.w3.org/analytics/piwik/piwik.php?idsite=328" style="border:0;" alt="" />
594 </p>
595 </noscript><!-- End Piwik Code -->
596 </body>
597</html>
Issues: