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.
1<HTML>
2 <HEAD>
3<TITLE>Welcome to CityLights! [Annotated Inaccessible Home Page]</TITLE> <STYLE>
4 #main * {
5 color: #000000;
6 font: normal 15px "Times New Roman", Times, serif;
7 text-decoration: none;
8 }
9 #main p{
10 margin: 6px 0;
11 }
12 #main a {
13 text-decoration: none;
14 color: #226C8E;
15 }
16 #main .headline {
17 margin-top: 0px;
18 color: #41545d;
19 font: 24px verdana;
20 font-family: impact;
21 text-decoration: none;
22 margin-bottom: 0px;
23 }
24 #main .subheadline {
25 padding:16px 0 6px 0;
26 color: #41545d;
27 font: 20px verdana;
28 font-family: impact;
29 text-decoration: none;
30 }
31 #content * {
32 margin: 0;
33 padding: 0;
34 }
35 #content p{
36 margin: 6px 0;
37 }
38 #content .newsbar {
39 background: #eeeee;
40 }
41 :root #content .newsbar {
42 float: left;
43 width: 100%;
44 }
45 #content .newsheadline img {
46 float: left;
47 padding: 0;
48 margin: 0 5px 15px 0;
49 }
50 #content .newsheadline {
51 width: 135px;
52 margin-right: 5px;
53 background: #ededed;
54 padding-right: 10px;
55 vertical-align: top;
56 display: inline-block;
57 }
58 #content .newsheadline a {
59 color: black;
60 font-weight: bold;
61 background: #ededed;
62 }
63 #content .newsheadline p {
64 font-weight: bold;
65 background: #ededed;
66 }
67 * html #content .newsheadline {
68 width: 138px;
69 display: inline;
70 }
71 :root #content .newsheadline {
72 float: left;
73 width: 128px;
74 display: inline;
75 }
76 #content .image {
77 width: 135px;
78 height: 119px;
79 padding: 0 5px;
80 margin-right: 5px;
81 background: #cccccc;
82 display: inline-block;
83 }
84 * html #content .image {
85 width: 138px;
86 display: inline;
87 }
88 :root #content .image {
89 float: left;
90 width: 128px;
91 display: block;
92 display: inline;
93 }
94 #content .story {
95 width: 135px;
96 margin-right: 5px;
97 background: #ededed;
98 vertical-align: top;
99 padding: 2px 5px 5px;
100 display: inline-block;
101 }
102 #content .story span {
103 }
104 * html #content .story {
105 width: 138px;
106 display: inline;
107 }
108 :root #content .story {
109 float: left;
110 width: 128px;
111 display: inline;
112 }
113 #content .headline {
114 clear: left;
115 color: #41545d;
116 margin-top: 5px;
117 padding-top: 1em;
118 font: 24px verdana;
119 font-family: impact;
120 margin-bottom: 15px;
121 text-decoration: none;
122 }
123 #content .midwidth {
124 height: 1px;
125 }
126 #content .clear {
127 clear: left;
128 }
129 </STYLE>
130 <LINK HREF="../../css/meta.css" rel="stylesheet" type="text/css">
131 <SCRIPT type="text/javascript">
132 function ChangeColor(id, colour){
133 document.getElementById(id).style.backgroundColor=colour;
134 }
135 function switchImage(imgName, imgSrc){
136 if (document.images){
137 if (imgSrc != "none"){
138 document.images[imgName].src = imgSrc;
139 }
140 }
141 }
142 </SCRIPT>
143 <NOSCRIPT><B><FONT COLOR=RED>This page uses scripts!!!</FONT></B></NOSCRIPT>
144 <script src="../../js/onload.js" type="text/javascript"></script>
145 <link href="../../css/inbetween.css" rel="stylesheet" type="text/css">
146 <script src="../../js/annotations.js" type="text/javascript"></script>
147 </HEAD>
148 <BODY TEXT=#000000 BGCOLOR=#D7D7CD LEFTMARGIN=0px TOPMARGIN=0px MARGINWIDTH=0px MARGINHEIGHT=0px LINK=#226C8E VLINK=#226C8E ALINK=#226C8E>
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> 149 <div id="meta-header">
150 <p id="skipnav"></p><ul class="skip"><li><a href="#page">Skip to inaccessible demo page</a></li><li><a href="#annotations">Skip to annotations for demo page</a></li></ul>
151 <p id="logos"><a href="https://www.w3.org/" title="W3C Home"><img alt="W3C logo" src="../../img/w3c.png" height="48" width="72"></a><a href="https://www.w3.org/WAI/" title="WAI Home"><img alt="Web Accessibility Initiative (WAI) logo" src="../../img/wai.png" height="48"></a></p>
Omitting
img width or
height attributes makes the page layout jump about as images load.
<img alt='Web Accessibility Initiative (WAI) logo' src='../../img/wai.png' height='48'> This makes the page very hard to read or click while it's loading.
Fix by adding width and height attributes to the img tag matching the image dimensions.
In responsive layouts, specifying width and height prevents layout jumping because the browser can
pre-calculate the final image size when CSS like this is used:
img { max-width: 100%; height: auto }
152 <h1><span class="subhead">Annotated Inaccessible Home Page</span><span class="hidden"> -</span> Before and After Demonstration</h1>
153 <p class="subline">Improving a Web site using Web Content Accessibility Guidelines (WCAG) 2.0</p>
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" >
154 <div id="mnav" class="inaccessible">
155 <ul>
156 <li class="first"><a href="../../Overview.html">Overview</a></li>
157 <li class="current first"><span class="hidden">Current location: </span>Home
158 <div class="subnav"><ul>
159 <li class="inaccessible"><strong>Inaccessible:</strong><a class="page current"><span class="hidden">Inaccessible </span>Home Page</a><a href="../reports/home.html" class="report"><span class="hidden">Inaccessible Home Page </span> Report</a></li>
160 <li class="accessible"><strong>Accessible:</strong><a href="../../after/annotated/home.html" class="page"><span class="hidden">Accessible </span>Home Page</a><a href="../../after/reports/home.html" class="report"><span class="hidden">Accessible Home Page </span> Report</a></li>
161 </ul><a href="../home.html" class="annotoggle">Hide <br>Annotations</a></div>
162 </li>
163 <li><a href="news.html">News</a></li>
164 <li><a href="tickets.html">Tickets</a></li>
165 <li><a href="survey.html">Survey</a></li>
166 <li><a href="template.html">Template</a></li>
167 </ul>
168 </div>
169 </div>
170 <div id="page">
171 <p class="skip" id="startcontent">Demo starts here</p>
172 <TABLE WIDTH=100% BORDER=0px CELLSPACING=0px CELLPADDING=0px BGCOLOR=#D7D7CD><TR VALIGN=MIDDLE><TD WIDTH=100% ALIGN=CENTER>
Identify row and column headers in data tables using
th elements, and mark layout tables with
role=presentation.
<table width='100%' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='#d7d7cd'>...</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. 173 <TABLE WIDTH=800px BORDER=0px CELLSPACING=0px CELLPADDING=0px BGCOLOR=WHITE>
This page uses nested tables, which do not make sense when read in a screen reader.
<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. 174 <TR HEIGHT=10px>
Attribute
height not allowed on element.
175 <TD WIDTH=10px BACKGROUND=../img/border_left_top.gif><IMG SRC=../img/border_left_top.gif WIDTH=10px HEIGHT=10px></TD>
Use background images sparingly and make sure they are simple, especially behind text.
<td width='10px' background='../img/border_left_top.gif' >...</td> Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
img 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 2024.4 Chrome 131 Windows 10 Reading: Image ignored. NVDA 2024.4 FF 128 Windows 10 Reading: Image ignored. NVDA 2024.4 Edge 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Chrome 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 FF 128 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Edge 131 Windows 10 Reading: Image ignored. VoiceOver macOS 14.6 Safari 17.6 macOS 14.6.1 Reading: Image filename read out. VoiceOver iOS 17.7 Safari iOS 17.7 iOS 17.7.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'> 176 <TD WIDTH=780px BACKGROUND=../img/border_top.gif><IMG SRC=../img/border_top.gif HEIGHT=10px></TD>
Use background images sparingly and make sure they are simple, especially behind text.
<td width='780px' background='../img/border_top.gif' >...</td> Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
img 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 2024.4 Chrome 131 Windows 10 Reading: Image ignored. NVDA 2024.4 FF 128 Windows 10 Reading: Image ignored. NVDA 2024.4 Edge 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Chrome 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 FF 128 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Edge 131 Windows 10 Reading: Image ignored. VoiceOver macOS 14.6 Safari 17.6 macOS 14.6.1 Reading: Image filename read out. VoiceOver iOS 17.7 Safari iOS 17.7 iOS 17.7.2 Touch: Image filename read out, along with OCR text from image. Omitting
img width or
height attributes makes the page layout jump about as images load.
<img src='../img/border_top.gif' height='10px'> This makes the page very hard to read or click while it's loading.
Fix by adding width and height attributes to the img tag matching the image dimensions.
In responsive layouts, specifying width and height prevents layout jumping because the browser can
pre-calculate the final image size when CSS like this is used:
img { max-width: 100%; height: auto }
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'> 177 <TD WIDTH=10px BACKGROUND=../img/border_right_top.gif><IMG SRC=../img/border_right_top.gif WIDTH=10px HEIGHT=10px></TD>
Use background images sparingly and make sure they are simple, especially behind text.
<td width='10px' background='../img/border_right_top.gif' >...</td> Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
img 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 2024.4 Chrome 131 Windows 10 Reading: Image ignored. NVDA 2024.4 FF 128 Windows 10 Reading: Image ignored. NVDA 2024.4 Edge 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Chrome 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 FF 128 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Edge 131 Windows 10 Reading: Image ignored. VoiceOver macOS 14.6 Safari 17.6 macOS 14.6.1 Reading: Image filename read out. VoiceOver iOS 17.7 Safari iOS 17.7 iOS 17.7.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'> 178 </TR>
179 <TR>
180 <TD WIDTH=10px BACKGROUND=../img/border_left.gif><IMG SRC=../img/border_left.gif WIDTH=10px></TD>
Use background images sparingly and make sure they are simple, especially behind text.
<td width='10px' background='../img/border_left.gif' >...</td> Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
img 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 2024.4 Chrome 131 Windows 10 Reading: Image ignored. NVDA 2024.4 FF 128 Windows 10 Reading: Image ignored. NVDA 2024.4 Edge 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Chrome 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 FF 128 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Edge 131 Windows 10 Reading: Image ignored. VoiceOver macOS 14.6 Safari 17.6 macOS 14.6.1 Reading: Image filename read out. VoiceOver iOS 17.7 Safari iOS 17.7 iOS 17.7.2 Touch: Image filename read out, along with OCR text from image. Omitting
img width or
height attributes makes the page layout jump about as images load.
<img src='../img/border_left.gif' width='10px'> This makes the page very hard to read or click while it's loading.
Fix by adding width and height attributes to the img tag matching the image dimensions.
In responsive layouts, specifying width and height prevents layout jumping because the browser can
pre-calculate the final image size when CSS like this is used:
img { max-width: 100%; height: auto }
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'> 181 <TD WIDTH=780px ALIGN=CENTER>
182 <TABLE WIDTH=780px HEIGHT=144px BORDER=0px CELLSPACING=0px CELLPADDING=0px BGCOLOR=WHITE>
This page uses nested tables, which do not make sense when read in a screen reader.
<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. 183 <TR HEIGHT=86px>
Attribute
height not allowed on element.
184 <TD WIDTH=443px BACKGROUND=../img/top_logo_next.gif VALIGN=MIDDLE><DIV class="annot_link_parent"><A HREF=home.html><IMG SRC=../img/top_logo.gif WIDTH=443px HEIGHT=86px ALT="Red dot with a white letter 'C' that symbolizes a moon crescent as well as the sun. This logo is followed by a black banner that says 'CITYLIGHTS' which is the name of this online portal. Finally, the slogan of the portal, 'your access to the city', follows in a turquoise green handwriting style and with a slight slant across the top banner."></A><span id="annot_link_01" class="annot_link prev_sib" style="margin-top: 25px;padding-right: 25px;"><a href="#annot_01" title="01: Image with incorrect text alternative">01</a></span></DIV></TD>
Use background images sparingly and make sure they are simple, especially behind text.
<td width='443px' background='../img/top_logo_next.gif' valign='middle'>...</td> Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
185 <TD WIDTH=24px VALIGN=MIDDLE><IMG SRC=../img/top_logo_next_end.gif WIDTH=24px HEIGHT=86px></TD>
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 2024.4 Chrome 131 Windows 10 Reading: Image ignored. NVDA 2024.4 FF 128 Windows 10 Reading: Image ignored. NVDA 2024.4 Edge 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Chrome 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 FF 128 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Edge 131 Windows 10 Reading: Image ignored. VoiceOver macOS 14.6 Safari 17.6 macOS 14.6.1 Reading: Image filename read out. VoiceOver iOS 17.7 Safari iOS 17.7 iOS 17.7.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'> 186 <TD WIDTH=128px VALIGN=MIDDLE><IMG SRC=../img/top_weather.gif WIDTH=128px HEIGHT=86px></TD>
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 2024.4 Chrome 131 Windows 10 Reading: Image ignored. NVDA 2024.4 FF 128 Windows 10 Reading: Image ignored. NVDA 2024.4 Edge 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Chrome 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 FF 128 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Edge 131 Windows 10 Reading: Image ignored. VoiceOver macOS 14.6 Safari 17.6 macOS 14.6.1 Reading: Image filename read out. VoiceOver iOS 17.7 Safari iOS 17.7 iOS 17.7.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'> 187 <TD WIDTH=22px VALIGN=MIDDLE><IMG SRC=../img/top_logo_next_start.gif WIDTH=22px HEIGHT=86px></TD>
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 2024.4 Chrome 131 Windows 10 Reading: Image ignored. NVDA 2024.4 FF 128 Windows 10 Reading: Image ignored. NVDA 2024.4 Edge 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Chrome 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 FF 128 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Edge 131 Windows 10 Reading: Image ignored. VoiceOver macOS 14.6 Safari 17.6 macOS 14.6.1 Reading: Image filename read out. VoiceOver iOS 17.7 Safari iOS 17.7 iOS 17.7.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'> 188 <TD WIDTH=163px BACKGROUND=../img/top_logo_next.gif ALIGN=CENTER VALIGN=MIDDLE>
Use background images sparingly and make sure they are simple, especially behind text.
<td width='163px' background='../img/top_logo_next.gif' align='center' valign='middle'>...</td> Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
189 <SELECT ONCHANGE="location.href = this.value;">
HTML form control has no accessible name.
<select onchange='location.href = ...'><option selected>...></option>...</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 list items using the arrow keys will jump to another page unexpectedly.
Use option groups when a drop down list has more than 10 items.
<select onchange='location.href = ...'><option selected>...></option>...</select> Group related options using optgroup elements.
190 <OPTION SELECTED>QUICKMENU ---->
191 <OPTION VALUE="../../offsite.html">Broadcasting
192 <OPTION VALUE="../../offsite.html">Education
193 <OPTION VALUE="../../offsite.html">Electricity
194 <OPTION VALUE="../../offsite.html">Fire service
195 <OPTION VALUE="../../offsite.html">Gas service
196 <OPTION VALUE="../../offsite.html">Health care
197 <OPTION VALUE="../../offsite.html">Police service
198 <OPTION VALUE="../../offsite.html">Public Libraries
199 <OPTION VALUE="../../offsite.html">Social services
200 <OPTION VALUE="../../offsite.html">Social housing
201 <OPTION VALUE="../../offsite.html">Telecommunications
202 <OPTION VALUE="../../offsite.html">Town planning
203 <OPTION VALUE="../../offsite.html">Transportation
204 <OPTION VALUE="../../offsite.html">Waste management
205 <OPTION VALUE="../../offsite.html">Water services
206 </SELECT>
207 </TD>
208 </TR>
209 <TR HEIGHT=7px>
Attribute
height not allowed on element.
210 <TD WIDTH=780px BACKGROUND=../img/mark.gif COLSPAN=5><IMG SRC=../img/mark.gif WIDTH=158px HEIGHT=7px></TD>
Use background images sparingly and make sure they are simple, especially behind text.
<td width='780px' background='../img/mark.gif' colspan='5'>...</td> Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
img 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 2024.4 Chrome 131 Windows 10 Reading: Image ignored. NVDA 2024.4 FF 128 Windows 10 Reading: Image ignored. NVDA 2024.4 Edge 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Chrome 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 FF 128 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Edge 131 Windows 10 Reading: Image ignored. VoiceOver macOS 14.6 Safari 17.6 macOS 14.6.1 Reading: Image filename read out. VoiceOver iOS 17.7 Safari iOS 17.7 iOS 17.7.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'> 211 </TR>
212 <TR HEIGHT=25px>
Attribute
height not allowed on element.
213 <TD COLSPAN=5>
214 <TABLE WIDTH=780px BORDER=0px CELLSPACING=0px CELLPADDING=0px>
This page uses nested tables, which do not make sense when read in a screen reader.
<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.
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'>...</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. 215 <TR HEIGHT=25px>
Attribute
height not allowed on element.
216 <TD BGCOLOR="#EDEDED" WIDTH=380px><FONT COLOR=BLACK FACE=Verdana SIZE=2> <B>Traffic:</B> Construction work on Main Road</FONT></TD>
217 <TD BGCOLOR="#FFFFFF" ALIGN=RIGHT ID="WEATHER"><FONT COLOR=BLACK FACE=Verdana SIZE=2><B>Today:</B>
218 <SCRIPT LANGUAGE="JavaScript">
219 var now = new Date();
220 var days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
221 var months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
222 var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
223 function fourdigits(number) {
224 return (number < 1000) ? number + 1900 : number;
225 }
226 today = days[now.getDay()] + " " + date + " " + months[now.getMonth()] + " " + (fourdigits(now.getYear())) + ", Sunny, 23°C </FONT>";
227 document.all.WEATHER.setAttribute("BGCOLOR", "#EDEDED", 0);
228 document.write(today);
229 </SCRIPT></TD>
Unclosed element
font.
230 </TR>
231 </TABLE>
232 </TD>
233 </TR>
234 <TR HEIGHT=1px>
Attribute
height not allowed on element.
235 <TD WIDTH=780px BACKGROUND=../img/marker2_w.gif COLSPAN=5><IMG SRC=../img/marker2_w.gif WIDTH=78px HEIGHT=1px></TD>
Use background images sparingly and make sure they are simple, especially behind text.
<td width='780px' background='../img/marker2_w.gif' colspan='5'>...</td> Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
img 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 2024.4 Chrome 131 Windows 10 Reading: Image ignored. NVDA 2024.4 FF 128 Windows 10 Reading: Image ignored. NVDA 2024.4 Edge 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Chrome 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 FF 128 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Edge 131 Windows 10 Reading: Image ignored. VoiceOver macOS 14.6 Safari 17.6 macOS 14.6.1 Reading: Image filename read out. VoiceOver iOS 17.7 Safari iOS 17.7 iOS 17.7.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'> 236 </TR>
237 <TR HEIGHT=25px>
Attribute
height not allowed on element.
238 <TD COLSPAN=5> </TD>
239 </TR>
240 </TABLE>
241 <TABLE WIDTH=780px BORDER=0px CELLSPACING=0px CELLPADDING=0px BGCOLOR=WHITE>
This page uses nested tables, which do not make sense when read in a screen reader.
<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. 242 <TR WIDTH=780px>
Attribute
width not allowed on element.
243 <TD WIDTH=155px BGCOLOR=#E4E4E4 VALIGN=TOP>
244 <TABLE WIDTH=155px BORDER=0px CELLSPACING=0px CELLPADDING=0px>
This page uses nested tables, which do not make sense when read in a screen reader.
<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. 245 <TR HEIGHT=1px>
Attribute
height not allowed on element.
246 <TD WIDTH=155px BACKGROUND=../img/marker2_w.gif><IMG SRC=../img/marker2_w.gif WIDTH=78px HEIGHT=1px></TD>
Use background images sparingly and make sure they are simple, especially behind text.
<td width='155px' background='../img/marker2_w.gif' >...</td> Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
img 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 2024.4 Chrome 131 Windows 10 Reading: Image ignored. NVDA 2024.4 FF 128 Windows 10 Reading: Image ignored. NVDA 2024.4 Edge 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Chrome 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 FF 128 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Edge 131 Windows 10 Reading: Image ignored. VoiceOver macOS 14.6 Safari 17.6 macOS 14.6.1 Reading: Image filename read out. VoiceOver iOS 17.7 Safari iOS 17.7 iOS 17.7.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'> 247 <TD WIDTH=1px BACKGROUND=../img/marker2_t.gif ROWSPAN=9 VALIGN=TOP><IMG SRC=../img/marker2_t.gif WIDTH=1 HEIGHT=30px></TD>
Use background images sparingly and make sure they are simple, especially behind text.
<td width='1px' background='../img/marker2_t.gif' rowspan='9' valign='top'>...</td> Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
img 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 2024.4 Chrome 131 Windows 10 Reading: Image ignored. NVDA 2024.4 FF 128 Windows 10 Reading: Image ignored. NVDA 2024.4 Edge 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Chrome 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 FF 128 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Edge 131 Windows 10 Reading: Image ignored. VoiceOver macOS 14.6 Safari 17.6 macOS 14.6.1 Reading: Image filename read out. VoiceOver iOS 17.7 Safari iOS 17.7 iOS 17.7.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'> 248 </TR>
249 <TR HEIGHT=34px>
Attribute
height not allowed on element.
250 <TD WIDTH=154px bgcolor="#EDEDED" id="home" onMouseOver="switchImage('nav_home', '../img/nav_home2.gif'); ChangeColor('home','#FFF')" onMouseOut="switchImage('nav_home', '../img/nav_home.gif'); ChangeColor('home','#EDEDED')"><A HREF="javascript:location.href='home.html';" onFocus="blur();"><img name="nav_home" src=../img/nav_home.gif width=88 height=27 hspace="15" border=0px></a></TD>
Links must have an accessible name.
<a href='...;' onfocus='blur();'>...</a> A link name allows screen readers to voice what the links does. If there is no link content, or the link content is hidden by CSS, screen readers have nothing to read, so read out the URL instead. To add a name do one of the following:
Add text between the a element start and end tags
Add an aria-label attribute
Add an aria-labelledby attribute
Add an img alt attribute labeling the link if it contains an img element
img elements with
role=presentation or
role=none are not included in the link's accessible name.
This field removes focus when tabbed to making it impossible for disabled users to navigate this form via the keyboard.
<a href='...;' 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.
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 2024.4 Chrome 131 Windows 10 Reading: Image ignored. NVDA 2024.4 FF 128 Windows 10 Reading: Image ignored. NVDA 2024.4 Edge 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Chrome 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 FF 128 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Edge 131 Windows 10 Reading: Image ignored. VoiceOver macOS 14.6 Safari 17.6 macOS 14.6.1 Reading: Image filename read out. VoiceOver iOS 17.7 Safari iOS 17.7 iOS 17.7.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'> 251 </TR>
252 <TR HEIGHT=1px>
Attribute
height not allowed on element.
253 <TD WIDTH=154px BACKGROUND=../img/marker2_w.gif><IMG SRC=../img/marker2_w.gif WIDTH=78px HEIGHT=1px></TD>
Use background images sparingly and make sure they are simple, especially behind text.
<td width='154px' background='../img/marker2_w.gif' >...</td> Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
img 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 2024.4 Chrome 131 Windows 10 Reading: Image ignored. NVDA 2024.4 FF 128 Windows 10 Reading: Image ignored. NVDA 2024.4 Edge 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Chrome 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 FF 128 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Edge 131 Windows 10 Reading: Image ignored. VoiceOver macOS 14.6 Safari 17.6 macOS 14.6.1 Reading: Image filename read out. VoiceOver iOS 17.7 Safari iOS 17.7 iOS 17.7.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'> 254 </TR>
255 <TR HEIGHT=34px>
Attribute
height not allowed on element.
256 <TD WIDTH=154px bgcolor="#EDEDED" id="news" onMouseOver="switchImage('nav_news', '../img/nav_news2.gif'); ChangeColor('news','#FFF')" onMouseOut="switchImage('nav_news', '../img/nav_news.gif'); ChangeColor('news','#EDEDED')"><A HREF="javascript:location.href='news.html';" ONFOCUS="blur();"><IMG SRC=../img/nav_news.gif name="nav_news" WIDTH=90 HEIGHT=21 hspace="12" BORDER=0px></A></TD>
Links must have an accessible name.
<a href='...;' onfocus='blur();'>...</a> A link name allows screen readers to voice what the links does. If there is no link content, or the link content is hidden by CSS, screen readers have nothing to read, so read out the URL instead. To add a name do one of the following:
Add text between the a element start and end tags
Add an aria-label attribute
Add an aria-labelledby attribute
Add an img alt attribute labeling the link if it contains an img element
img elements with
role=presentation or
role=none are not included in the link's accessible name.
This field removes focus when tabbed to making it impossible for disabled users to navigate this form via the keyboard.
<a href='...;' 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.
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 2024.4 Chrome 131 Windows 10 Reading: Image ignored. NVDA 2024.4 FF 128 Windows 10 Reading: Image ignored. NVDA 2024.4 Edge 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Chrome 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 FF 128 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Edge 131 Windows 10 Reading: Image ignored. VoiceOver macOS 14.6 Safari 17.6 macOS 14.6.1 Reading: Image filename read out. VoiceOver iOS 17.7 Safari iOS 17.7 iOS 17.7.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'> 257 </TR>
258 <TR HEIGHT=1px>
Attribute
height not allowed on element.
259 <TD WIDTH=154px BACKGROUND=../img/marker2_w.gif><IMG SRC=../img/marker2_w.gif WIDTH=78px HEIGHT=1px></TD>
Use background images sparingly and make sure they are simple, especially behind text.
<td width='154px' background='../img/marker2_w.gif' >...</td> Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
img 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 2024.4 Chrome 131 Windows 10 Reading: Image ignored. NVDA 2024.4 FF 128 Windows 10 Reading: Image ignored. NVDA 2024.4 Edge 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Chrome 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 FF 128 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Edge 131 Windows 10 Reading: Image ignored. VoiceOver macOS 14.6 Safari 17.6 macOS 14.6.1 Reading: Image filename read out. VoiceOver iOS 17.7 Safari iOS 17.7 iOS 17.7.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'> 260 </TR>
261 <TR HEIGHT=34px>
Attribute
height not allowed on element.
262 <TD WIDTH=154px bgcolor="#EDEDED" id="tickets" onMouseOver="switchImage('nav_facts', '../img/nav_facts2.gif'); ChangeColor('tickets','#FFF')" onMouseOut="switchImage('nav_facts', '../img/nav_facts.gif'); ChangeColor('tickets','#EDEDED')"><A HREF="javascript:location.href='tickets.html';" ONFOCUS="blur();"><IMG name="nav_facts" SRC=../img/nav_facts.gif WIDTH=105 HEIGHT=23 hspace="9" BORDER=0px></A></TD>
Links must have an accessible name.
<a href='...;' onfocus='blur();'>...</a> A link name allows screen readers to voice what the links does. If there is no link content, or the link content is hidden by CSS, screen readers have nothing to read, so read out the URL instead. To add a name do one of the following:
Add text between the a element start and end tags
Add an aria-label attribute
Add an aria-labelledby attribute
Add an img alt attribute labeling the link if it contains an img element
img elements with
role=presentation or
role=none are not included in the link's accessible name.
This field removes focus when tabbed to making it impossible for disabled users to navigate this form via the keyboard.
<a href='...;' 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.
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 2024.4 Chrome 131 Windows 10 Reading: Image ignored. NVDA 2024.4 FF 128 Windows 10 Reading: Image ignored. NVDA 2024.4 Edge 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Chrome 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 FF 128 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Edge 131 Windows 10 Reading: Image ignored. VoiceOver macOS 14.6 Safari 17.6 macOS 14.6.1 Reading: Image filename read out. VoiceOver iOS 17.7 Safari iOS 17.7 iOS 17.7.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'> 263 </TR>
264 <TR HEIGHT=1px>
Attribute
height not allowed on element.
265 <TD WIDTH=154px BACKGROUND=../img/marker2_w.gif><IMG SRC=../img/marker2_w.gif WIDTH=78px HEIGHT=1px></TD>
Use background images sparingly and make sure they are simple, especially behind text.
<td width='154px' background='../img/marker2_w.gif' >...</td> Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
img 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 2024.4 Chrome 131 Windows 10 Reading: Image ignored. NVDA 2024.4 FF 128 Windows 10 Reading: Image ignored. NVDA 2024.4 Edge 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Chrome 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 FF 128 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Edge 131 Windows 10 Reading: Image ignored. VoiceOver macOS 14.6 Safari 17.6 macOS 14.6.1 Reading: Image filename read out. VoiceOver iOS 17.7 Safari iOS 17.7 iOS 17.7.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'> 266 </TR>
267 <TR HEIGHT=34px>
Attribute
height not allowed on element.
268 <TD WIDTH=154px bgcolor="#EDEDED" id="survey" onMouseOver="switchImage('nav_survey', '../img/nav_survey2.gif'); ChangeColor('survey','#FFF')" onMouseOut="switchImage('nav_survey', '../img/nav_survey.gif'); ChangeColor('survey','#EDEDED')"><A HREF="javascript:location.href='survey.html';" ONFOCUS="blur();"><IMG SRC=../img/nav_survey.gif name="nav_survey" WIDTH=107 HEIGHT=32 hspace="8" BORDER=0px></A></TD>
Links must have an accessible name.
<a href='...;' onfocus='blur();'>...</a> A link name allows screen readers to voice what the links does. If there is no link content, or the link content is hidden by CSS, screen readers have nothing to read, so read out the URL instead. To add a name do one of the following:
Add text between the a element start and end tags
Add an aria-label attribute
Add an aria-labelledby attribute
Add an img alt attribute labeling the link if it contains an img element
img elements with
role=presentation or
role=none are not included in the link's accessible name.
This field removes focus when tabbed to making it impossible for disabled users to navigate this form via the keyboard.
<a href='...;' 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.
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 2024.4 Chrome 131 Windows 10 Reading: Image ignored. NVDA 2024.4 FF 128 Windows 10 Reading: Image ignored. NVDA 2024.4 Edge 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Chrome 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 FF 128 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Edge 131 Windows 10 Reading: Image ignored. VoiceOver macOS 14.6 Safari 17.6 macOS 14.6.1 Reading: Image filename read out. VoiceOver iOS 17.7 Safari iOS 17.7 iOS 17.7.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'> 269 </TR>
270 <TR HEIGHT=1px>
Attribute
height not allowed on element.
271 <TD WIDTH=154px BACKGROUND=../img/marker2_w.gif><IMG SRC=../img/marker2_w.gif WIDTH=78px HEIGHT=1px></TD>
Use background images sparingly and make sure they are simple, especially behind text.
<td width='154px' background='../img/marker2_w.gif' >...</td> Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
img 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 2024.4 Chrome 131 Windows 10 Reading: Image ignored. NVDA 2024.4 FF 128 Windows 10 Reading: Image ignored. NVDA 2024.4 Edge 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Chrome 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 FF 128 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Edge 131 Windows 10 Reading: Image ignored. VoiceOver macOS 14.6 Safari 17.6 macOS 14.6.1 Reading: Image filename read out. VoiceOver iOS 17.7 Safari iOS 17.7 iOS 17.7.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'> 272 </TR>
273 </TABLE>
274 </TD>
275 <TD WIDTH=20px><IMG SRC=../img/blank_5x5.gif WIDTH=20px HEIGHT=5px></TD>
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 2024.4 Chrome 131 Windows 10 Reading: Image ignored. NVDA 2024.4 FF 128 Windows 10 Reading: Image ignored. NVDA 2024.4 Edge 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Chrome 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 FF 128 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Edge 131 Windows 10 Reading: Image ignored. VoiceOver macOS 14.6 Safari 17.6 macOS 14.6.1 Reading: Image filename read out. VoiceOver iOS 17.7 Safari iOS 17.7 iOS 17.7.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'> 276 <TD WIDTH=434px HEIGHT="600px" VALIGN=TOP id="main">
277 <p class="headline">Welcome to CityLights</p>
278 <p>Citylights is the new portal for visitors and residents. Find out what's on, book tickets, and get the latest news.</p>
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" >
279 <div id="content">
280 <div class="midwidth"><div></div></div>
281 <div class="newsbar">
282 <div class="newsheadline annot_link_parent"><img src="../img/headline_middle.gif" width="23" height="24" align="absmiddle"> <a href="../news/annotations" onFocus="blur();">Heat wave linked to temperatures</a><span id="annot_link_03" class="annot_link prev_sib" style="margin-left: -13.2em !important;padding-right: 17.2em;width: 20px !important;border-right: dashed blue 1px !important;height: 1em;margin-top: -1em;"><a href="#annot_03" title="03: Link not visually distinct">03</a></span></div>
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 2024.4 Chrome 131 Windows 10 Reading: Image ignored. NVDA 2024.4 FF 128 Windows 10 Reading: Image ignored. NVDA 2024.4 Edge 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Chrome 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 FF 128 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Edge 131 Windows 10 Reading: Image ignored. VoiceOver macOS 14.6 Safari 17.6 macOS 14.6.1 Reading: Image filename read out. VoiceOver iOS 17.7 Safari iOS 17.7 iOS 17.7.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'> This field removes focus when tabbed to making it impossible for disabled users to navigate this form via the keyboard.
<a href='../news/annotations' onfocus='blur();' >Heat wave ...s</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.
283 <div class="newsheadline"><img src="../img/headline_middle.gif" width="23" height="24" align="absmiddle"> <a href="../news/annotations" onFocus="blur();">Man Gets Nine Months in Violin Case</a></div>
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 2024.4 Chrome 131 Windows 10 Reading: Image ignored. NVDA 2024.4 FF 128 Windows 10 Reading: Image ignored. NVDA 2024.4 Edge 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Chrome 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 FF 128 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Edge 131 Windows 10 Reading: Image ignored. VoiceOver macOS 14.6 Safari 17.6 macOS 14.6.1 Reading: Image filename read out. VoiceOver iOS 17.7 Safari iOS 17.7 iOS 17.7.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'> This field removes focus when tabbed to making it impossible for disabled users to navigate this form via the keyboard.
<a href='../news/annotations' onfocus='blur();' >Man Gets ... 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.
284 <div class="newsheadline"><img src="../img/headline_middle.gif" width="23" height="24" align="absmiddle"> <a href="../news/annotations" onFocus="blur();">Lack of brains hinders research</a></div>
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 2024.4 Chrome 131 Windows 10 Reading: Image ignored. NVDA 2024.4 FF 128 Windows 10 Reading: Image ignored. NVDA 2024.4 Edge 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Chrome 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 FF 128 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Edge 131 Windows 10 Reading: Image ignored. VoiceOver macOS 14.6 Safari 17.6 macOS 14.6.1 Reading: Image filename read out. VoiceOver iOS 17.7 Safari iOS 17.7 iOS 17.7.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'> This field removes focus when tabbed to making it impossible for disabled users to navigate this form via the keyboard.
<a href='../news/annotations' onfocus='blur();' >Lack of ... 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.
285 <div class="clear"><div class="null"></div></div>
286 </div>
287 <div class="newsbar">
288 <div class="image" style="background: url(../img/panda-sm.jpg) center center no-repeat #cccccc" title="image"><div class="null"></div></div>
289 <div class="image" style="background: url(../img/oldenburgstudentviolin34.jpg) center center no-repeat #cccccc" title="image"><div class="null"></div></div>
290 <div class="image annot_link_parent" style="background: url(../img/BrainInJar.jpg) center center no-repeat #cccccc;" title="image"><div class="null"><span id="annot_link_04" class="annot_link prev_sib" style="margin-left: -32.4em !important;padding-right: 32.4em;width: 2em !important;border-right: dashed blue 1px !important;height: 1.5em;margin-top: .5em;"><a href="#annot_04" title="04: Image with inadequate text alternative">04</a></span></div></div>
291 <div class="clear"><div class="null"></div></div>
292 </div>
293 <div class="newsbar">
294 <div class="story"><span class="annot_link_parent">After three years of effort city scientists now agree that the primary cause of the 2003 heatwave was hot air from our <a href="../news/annotations" onFocus="blur();"><img src="../img/morearrow.gif" width="48" height="10" alt="" border="0" onMouseOver="this.src='../img/morearrow_a.gif'" onMouseOut="this.src='../img/morearrow.gif'" style="vertical-align: bottom"></a><span id="annot_link_07" class="annot_link prev_sib" style="margin-left: -13.5em !important;padding-right: 12.2em;width: 20px !important;margin-top: 6.8em;"><a href="#annot_07" title="07: Link with image has empty text alternative">07</a></span></span></div>
Use at least a 12-point font on all web pages.
font-size: 11.25pt<span class='annot_link_parent'>After three years ... 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" >
Links must have an accessible name.
<a href='../news/annotations' onfocus='blur();'>...</a> A link name allows screen readers to voice what the links does. If there is no link content, or the link content is hidden by CSS, screen readers have nothing to read, so read out the URL instead. To add a name do one of the following:
Add text between the a element start and end tags
Add an aria-label attribute
Add an aria-labelledby attribute
Add an img alt attribute labeling the link if it contains an img element
img elements with
role=presentation or
role=none are not included in the link's accessible name.
This field removes focus when tabbed to making it impossible for disabled users to navigate this form via the keyboard.
<a href='../news/annotations' 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.
295 <div class="story annot_link_parent"><span id="annot_link_06" class="annot_link next_sib" style="margin-left: -22.7em !important;padding-right: 21.7em;width: 20px !important;border-right: dashed blue 1px !important;height: .5em;margin-top: -0.5em;"><a href="#annot_06" title="06: Reading sequence not meaningful">06</a></span><span>Mayor: These kinds of crimes need more creative, effective punishments. For example, we could require compulsory <a href="../news/annotations" onFocus="blur();"><img src="../img/morearrow.gif" width="48" height="10" alt="" border="0" onMouseOver="this.src='../img/morearrow_a.gif'" onMouseOut="this.src='../img/morearrow.gif'" style="vertical-align: bottom"></a></span></div>
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" >
Links must have an accessible name.
<a href='../news/annotations' onfocus='blur();'>...</a> A link name allows screen readers to voice what the links does. If there is no link content, or the link content is hidden by CSS, screen readers have nothing to read, so read out the URL instead. To add a name do one of the following:
Add text between the a element start and end tags
Add an aria-label attribute
Add an aria-labelledby attribute
Add an img alt attribute labeling the link if it contains an img element
img elements with
role=presentation or
role=none are not included in the link's accessible name.
This field removes focus when tabbed to making it impossible for disabled users to navigate this form via the keyboard.
<a href='../news/annotations' 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.
296 <div class="story"><span>Brain donations: huge drop off in brain donations due to the great 'success' of 'Slow Traffic, Safe Streets' policy <a href="../news/annotations" onFocus="blur();"><img src="../img/morearrow.gif" width="48" height="10" alt="" border="0" onMouseOver="this.src='../img/morearrow_a.gif'" onMouseOut="this.src='../img/morearrow.gif'" style="vertical-align: bottom"></a></span></div>
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" >
Links must have an accessible name.
<a href='../news/annotations' onfocus='blur();'>...</a> A link name allows screen readers to voice what the links does. If there is no link content, or the link content is hidden by CSS, screen readers have nothing to read, so read out the URL instead. To add a name do one of the following:
Add text between the a element start and end tags
Add an aria-label attribute
Add an aria-labelledby attribute
Add an img alt attribute labeling the link if it contains an img element
img elements with
role=presentation or
role=none are not included in the link's accessible name.
This field removes focus when tabbed to making it impossible for disabled users to navigate this form via the keyboard.
<a href='../news/annotations' 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.
297 </div>
298 <hr style="visibility:hidden; clear:both;">
299 <p class="subheadline">Elsewhere on the Web</p>
300 <p class="annot_link_parent">Please see the following websites for important information. Citylights take no responsibility for their content. For artichoke advice, call the number below.<br/><br/><span class="annot_link_parent"><span id="annot_link_08" class="annot_link next_sib" style="margin-left: -13em !important;padding-right: 12em;width: 20px !important;margin-top: 0em;"><a href="#annot_08" title="08: Decorative image without empty text alternative">08</a></span><img src="../img/list_bullets.gif" alt="bullet" border="0" align="absmiddle"> Killer bees. <a onFocus="blur();" href="../../offsite.html" target="_blank">Click here</a>.<br/><img src="../img/list_bullets.gif" alt="bullet" border="0" align="absmiddle"><span id="annot_link_09" class="annot_link prev_sib" style="margin-left: -13em !important;padding-right: 12.5em;height: .9em;margin-top: 1.5em;"><a href="#annot_09" title="09: List not marked up as such">09</a></span> Onions. <a onFocus="blur();" href="../../offsite.html" target="_blank">Click here</a>.</span><br/><br/><b>Artichoke advice telephone hotline: </b><img src="../img/telefon_white_bg.gif" alt="1234 56789" border="0" align="absmiddle"><span id="annot_link_10" class="annot_link prev_sib" style="margin-left: -13em !important;padding-right: 27em;width: 20px !important;border-right: dashed blue 1px !important;height: .5em;top: auto !important;bottom:1em;"><a href="#annot_10" title="10: Image with incorrect text alternative">10</a></span></p>
Use at least a 12-point font on all web pages.
font-size: 11.25pt<p class='annot_link_parent'>Please see the ... the number below. <br><br>...</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" >
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
img width or
height attributes makes the page layout jump about as images load.
<img src='../img/list_bullets.gif' alt='bullet' border='0' align='absmiddle'> This makes the page very hard to read or click while it's loading.
Fix by adding width and height attributes to the img tag matching the image dimensions.
In responsive layouts, specifying width and height prevents layout jumping because the browser can
pre-calculate the final image size when CSS like this is used:
img { max-width: 100%; height: auto }
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 disabled users to navigate this form via the keyboard.
<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.
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.
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
img width or
height attributes makes the page layout jump about as images load.
<img src='../img/list_bullets.gif' alt='bullet' border='0' align='absmiddle'> This makes the page very hard to read or click while it's loading.
Fix by adding width and height attributes to the img tag matching the image dimensions.
In responsive layouts, specifying width and height prevents layout jumping because the browser can
pre-calculate the final image size when CSS like this is used:
img { max-width: 100%; height: auto }
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 disabled users to navigate this form via the keyboard.
<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.
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.
Omitting
img width or
height attributes makes the page layout jump about as images load.
<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 it's loading.
Fix by adding width and height attributes to the img tag matching the image dimensions.
In responsive layouts, specifying width and height prevents layout jumping because the browser can
pre-calculate the final image size when CSS like this is used:
img { max-width: 100%; height: auto }
301 </div>
302 </TD>
303 <TD WIDTH=20px><IMG SRC=../img/blank_5x5.gif WIDTH=20px HEIGHT=5px></TD>
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 2024.4 Chrome 131 Windows 10 Reading: Image ignored. NVDA 2024.4 FF 128 Windows 10 Reading: Image ignored. NVDA 2024.4 Edge 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Chrome 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 FF 128 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Edge 131 Windows 10 Reading: Image ignored. VoiceOver macOS 14.6 Safari 17.6 macOS 14.6.1 Reading: Image filename read out. VoiceOver iOS 17.7 Safari iOS 17.7 iOS 17.7.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'> 304 <TD WIDTH=151px VALIGN=TOP>
305 <TABLE WIDTH=151px BORDER=0px CELLSPACING=0px CELLPADDING=0px>
This page uses nested tables, which do not make sense when read in a screen reader.
<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. 306 <TR HEIGHT=1px>
Attribute
height not allowed on element.
307 <TD WIDTH=1px BACKGROUND=../img/marker2_t.gif ROWSPAN=11 VALIGN=TOP><IMG SRC=../img/marker2_t.gif WIDTH=1px HEIGHT=30px></TD>
Use background images sparingly and make sure they are simple, especially behind text.
<td width='1px' background='../img/marker2_t.gif' rowspan='11' valign='top'>...</td> Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
img 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 2024.4 Chrome 131 Windows 10 Reading: Image ignored. NVDA 2024.4 FF 128 Windows 10 Reading: Image ignored. NVDA 2024.4 Edge 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Chrome 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 FF 128 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Edge 131 Windows 10 Reading: Image ignored. VoiceOver macOS 14.6 Safari 17.6 macOS 14.6.1 Reading: Image filename read out. VoiceOver iOS 17.7 Safari iOS 17.7 iOS 17.7.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'> 308 <TD WIDTH=151px BACKGROUND=../img/marker2_w.gif><IMG SRC=../img/marker2_w.gif WIDTH=78px HEIGHT=1px></TD>
Use background images sparingly and make sure they are simple, especially behind text.
<td width='151px' background='../img/marker2_w.gif' >...</td> Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
img 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 2024.4 Chrome 131 Windows 10 Reading: Image ignored. NVDA 2024.4 FF 128 Windows 10 Reading: Image ignored. NVDA 2024.4 Edge 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Chrome 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 FF 128 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Edge 131 Windows 10 Reading: Image ignored. VoiceOver macOS 14.6 Safari 17.6 macOS 14.6.1 Reading: Image filename read out. VoiceOver iOS 17.7 Safari iOS 17.7 iOS 17.7.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'> 309 </TR>
310 <TR HEIGHT=25px>
Attribute
height not allowed on element.
311 <TD WIDTH=150px BGCOLOR=#A9B8BF><FONT COLOR=#41545D FACE=Verdana SIZE=2> <B>Free Penguins</B></FONT></TD>
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
312 </TR>
313 <TR HEIGHT=106px>
Attribute
height not allowed on element.
314 <TD WIDTH=150px><DIV class="annot_link_parent"><IMG SRC=../img/teaser_right1.jpg WIDTH=150px HEIGHT=106px><span id="annot_link_02" class="annot_link prev_sib" style="margin-left: -40.9em !important;padding-right: 41em;top: .5em !important;"><a href="#annot_02" title="02: Image without any text alternative">02</a></span></DIV></TD>
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 2024.4 Chrome 131 Windows 10 Reading: Image ignored. NVDA 2024.4 FF 128 Windows 10 Reading: Image ignored. NVDA 2024.4 Edge 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Chrome 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 FF 128 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Edge 131 Windows 10 Reading: Image ignored. VoiceOver macOS 14.6 Safari 17.6 macOS 14.6.1 Reading: Image filename read out. VoiceOver iOS 17.7 Safari iOS 17.7 iOS 17.7.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'> 315 </TR>
316 <TR>
317 <TD WIDTH=150px>
318 <TABLE WIDTH=150px BORDER=0px CELLSPACING=0px CELLPADDING=3px>
This page uses nested tables, which do not make sense when read in a screen reader.
<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.
Identify row and column headers in data tables using
th elements, and mark layout tables with
role=presentation.
<table width='150px' border='0px' cellspacing='0px' cellpadding='3px'>...</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. 319 <TR>
320 <TD><DIV class="annot_link_parent">"Free penguins" slogan at zoo benefit concert causes confusion among city rockers. Adjective or verb?<BR><A HREF=../tickets/annotations ONFOCUS="blur();" STYLE="text-decoration:none;">Read More...</A><span id="annot_link_05" class="annot_link prev_sib" style="margin-left: -40.9em !important;padding-right: 39em;border-right: dashed blue 1px !important;height: 1.5em;margin-bottom: .5em;bottom: 0;top: auto !important;"><a href="#annot_05" title="05: Link text is not descriptive">05</a></span></DIV></TD>
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/annotations' onfocus='blur();' style='...'>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/annotations' onfocus='blur();' style='...'>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 disabled users to navigate this form via the keyboard.
<a href='../tickets/annotations' onfocus='blur();' style='...'>....</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.
Users should be able to quickly look at each link and tell where it goes.
Link text:
Read More...<a href='../tickets/annotations' onfocus='blur();' style='...'>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.
321 </TR>
322 </TABLE>
323 </TD>
324 </TR>
325 <TR HEIGHT=17px>
Attribute
height not allowed on element.
326 <TD> </TD>
327 </TR>
328 <TR HEIGHT=1px>
Attribute
height not allowed on element.
329 <TD WIDTH=150px BACKGROUND=../img/marker2_w.gif><IMG SRC=../img/marker2_w.gif WIDTH=78px HEIGHT=1px></TD>
Use background images sparingly and make sure they are simple, especially behind text.
<td width='150px' background='../img/marker2_w.gif' >...</td> Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
img 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 2024.4 Chrome 131 Windows 10 Reading: Image ignored. NVDA 2024.4 FF 128 Windows 10 Reading: Image ignored. NVDA 2024.4 Edge 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Chrome 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 FF 128 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Edge 131 Windows 10 Reading: Image ignored. VoiceOver macOS 14.6 Safari 17.6 macOS 14.6.1 Reading: Image filename read out. VoiceOver iOS 17.7 Safari iOS 17.7 iOS 17.7.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'> 330 </TR>
331 <TR HEIGHT=25px>
Attribute
height not allowed on element.
332 <TD WIDTH=150px BGCOLOR=#A9B8BF><FONT COLOR=#41545D FACE=Verdana SIZE=2> <B>More City Parks</B></FONT></TD>
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
333 </TR>
334 <TR HEIGHT=154px>
Attribute
height not allowed on element.
335 <TD WIDTH=150px><IMG SRC=../img/teaser_right2.jpg WIDTH=150px HEIGHT=154px></TD>
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 2024.4 Chrome 131 Windows 10 Reading: Image ignored. NVDA 2024.4 FF 128 Windows 10 Reading: Image ignored. NVDA 2024.4 Edge 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Chrome 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 FF 128 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Edge 131 Windows 10 Reading: Image ignored. VoiceOver macOS 14.6 Safari 17.6 macOS 14.6.1 Reading: Image filename read out. VoiceOver iOS 17.7 Safari iOS 17.7 iOS 17.7.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'> 336 </TR>
337 <TR>
338 <TD WIDTH=150px>
339 <TABLE WIDTH=150px BORDER=0px CELLSPACING=0px CELLPADDING=3px>
This page uses nested tables, which do not make sense when read in a screen reader.
<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.
Identify row and column headers in data tables using
th elements, and mark layout tables with
role=presentation.
<table width='150px' border='0px' cellspacing='0px' cellpadding='3px'>...</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. 340 <TR>
341 <TD>More parks and more green throughout the city at the price of already rare car parking spaces, how will this affect you?<BR><A HREF=../survey/annotations ONFOCUS="blur();" STYLE="text-decoration:none;">Read More...</A></TD>
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/annotations' onfocus='blur();' style='...'>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/annotations' onfocus='blur();' style='...'>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 disabled users to navigate this form via the keyboard.
<a href='../survey/annotations' onfocus='blur();' style='...'>....</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.
Users should be able to quickly look at each link and tell where it goes.
Link text:
Read More...<a href='../survey/annotations' onfocus='blur();' style='...'>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.
342 </TR>
343 </TABLE>
344 </TD>
345 </TR>
346 </TABLE>
347 </TD>
348 </TR>
349 </TABLE>
350 <TABLE WIDTH=780px HEIGHT=17px BORDER=0px CELLSPACING=0px CELLPADDING=0px BGCOLOR=#EDEDED>
This page uses nested tables, which do not make sense when read in a screen reader.
<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.
Identify row and column headers in data tables using
th elements, and mark layout tables with
role=presentation.
<table width='780px' height='17px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='#ededed'>...</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. 351 <TR HEIGHT=17px>
Attribute
height not allowed on element.
352 <TD ALIGN=RIGHT><FONT COLOR=BLACK FACE=Verdana SIZE=1><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>)</FONT></TD>
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='...t'>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
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
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
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
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
353 </TR>
354 </TABLE>
355 <TD WIDTH=10px BACKGROUND=../img/border_right.gif><IMG SRC=../img/border_right.gif WIDTH=10px></TD>
Use background images sparingly and make sure they are simple, especially behind text.
<td width='10px' background='../img/border_right.gif' >...</td> Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
img 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 2024.4 Chrome 131 Windows 10 Reading: Image ignored. NVDA 2024.4 FF 128 Windows 10 Reading: Image ignored. NVDA 2024.4 Edge 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Chrome 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 FF 128 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Edge 131 Windows 10 Reading: Image ignored. VoiceOver macOS 14.6 Safari 17.6 macOS 14.6.1 Reading: Image filename read out. VoiceOver iOS 17.7 Safari iOS 17.7 iOS 17.7.2 Touch: Image filename read out, along with OCR text from image. Omitting
img width or
height attributes makes the page layout jump about as images load.
<img src='../img/border_right.gif' width='10px'> This makes the page very hard to read or click while it's loading.
Fix by adding width and height attributes to the img tag matching the image dimensions.
In responsive layouts, specifying width and height prevents layout jumping because the browser can
pre-calculate the final image size when CSS like this is used:
img { max-width: 100%; height: auto }
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'> 356 </TR>
357 <TR HEIGHT=10px>
Attribute
height not allowed on element.
358 <TD WIDTH=10px HEIGHT=10px BACKGROUND=../img/border_bottom_left.gif><IMG SRC=../img/border_bottom_left.gif WIDTH=10px HEIGHT=10px></TD>
Use background images sparingly and make sure they are simple, especially behind text.
<td width='10px' height='10px' background='../img/border_bottom_left.gif' >...</td> Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
img 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 2024.4 Chrome 131 Windows 10 Reading: Image ignored. NVDA 2024.4 FF 128 Windows 10 Reading: Image ignored. NVDA 2024.4 Edge 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Chrome 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 FF 128 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Edge 131 Windows 10 Reading: Image ignored. VoiceOver macOS 14.6 Safari 17.6 macOS 14.6.1 Reading: Image filename read out. VoiceOver iOS 17.7 Safari iOS 17.7 iOS 17.7.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'> 359 <TD WIDTH=780px HEIGHT=10px BACKGROUND=../img/border_bottom.gif><IMG SRC=../img/border_bottom.gif HEIGHT=10px></TD>
Use background images sparingly and make sure they are simple, especially behind text.
<td width='780px' height='10px' background='../img/border_bottom.gif' >...</td> Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
img 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 2024.4 Chrome 131 Windows 10 Reading: Image ignored. NVDA 2024.4 FF 128 Windows 10 Reading: Image ignored. NVDA 2024.4 Edge 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Chrome 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 FF 128 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Edge 131 Windows 10 Reading: Image ignored. VoiceOver macOS 14.6 Safari 17.6 macOS 14.6.1 Reading: Image filename read out. VoiceOver iOS 17.7 Safari iOS 17.7 iOS 17.7.2 Touch: Image filename read out, along with OCR text from image. Omitting
img width or
height attributes makes the page layout jump about as images load.
<img src='../img/border_bottom.gif' height='10px'> This makes the page very hard to read or click while it's loading.
Fix by adding width and height attributes to the img tag matching the image dimensions.
In responsive layouts, specifying width and height prevents layout jumping because the browser can
pre-calculate the final image size when CSS like this is used:
img { max-width: 100%; height: auto }
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'> 360 <TD WIDTH=10px HEIGHT=10px BACKGROUND=../img/border_bottom_right.gif><IMG SRC=../img/border_bottom_right.gif WIDTH=10px HEIGHT=10px></TD>
Use background images sparingly and make sure they are simple, especially behind text.
<td width='10px' height='10px' background='../img/border_bottom_right.gif' >...</td> Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
img 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 2024.4 Chrome 131 Windows 10 Reading: Image ignored. NVDA 2024.4 FF 128 Windows 10 Reading: Image ignored. NVDA 2024.4 Edge 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Chrome 131 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 FF 128 Windows 10 Reading: Image ignored. JAWS 2024.2409.2 Edge 131 Windows 10 Reading: Image ignored. VoiceOver macOS 14.6 Safari 17.6 macOS 14.6.1 Reading: Image filename read out. VoiceOver iOS 17.7 Safari iOS 17.7 iOS 17.7.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'> 361 </TR>
362 </TABLE>
363 </TD></TR></TR></TABLE>
Stray end tag
tr.
364 <div id="annotations">
365 <hr>
366 <h2>Annotations</h2>
367 <div id="annot_01">
368 <h3>Note 01: Image with incorrect text alternative</h3>
369<p>The text alternative for this image of text is overly verbose and does not serve the equivalent purpose of the image. The text alternative is as follows:</p><p class="code"><code><img src="top_logo.gif" 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." ... ></code></p><p>Note: This error is derived from the <a href="template.html">Template</a> design and occurs throughout the entire website.</p>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<p>The text alternative for this ... text alternative is as follows: </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" >
370 <dl>
371 <dt><a href="https://www.w3.org/WAI/WCAG20/quickref/#text-equiv-all">Success Criterion 1.1.1 - Non-text Content</a></dt>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<a href='...l'>Success Criterion 1.1.1 - Non-text Content </a>
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" >
372 <dd><a href="https://www.w3.org/TR/WCAG20-TECHS/F30">Failure 30</a>: Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not alternatives (e.g. filenames or placeholder text)</dd>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<dd><a href='...0'>Failure 30 </a>: Failure of ... placeholder text) </dd>
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" >
373 </dl>
374 <p><a href="#annot_link_01">Back to demo</a></p>
375 </div>
376 <div id="annot_02">
377 <h3>Note 02: Image without any text alternative</h3>
378<p>This image does not have any text alternative, so that it is unclear to some reasers if the image is important or not.</p><p class="code"><code><img src="teaser_right1.jpg" ... ></code></p><p>Note: Every <code>img</code> element should have an <code>alt</code> attribute. The attribute should be empty if the image should be ignored by assistive technology.</p>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<p>This image does not have any text ... if the image is important or not. </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" >
379 <dl>
380 <dt><a href="https://www.w3.org/WAI/WCAG20/quickref/#text-equiv-all">Success Criterion 1.1.1 - Non-text Content</a></dt>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<a href='...l'>Success Criterion 1.1.1 - Non-text Content </a>
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" >
381 <dd><a href="https://www.w3.org/TR/WCAG20-TECHS/F65">Failure 65</a>: Failure of Success Criterion 1.1.1 due to omitting the alt attribute on img elements, area elements, and input elements of type "image"</dd>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<dd><a href='...5'>Failure 65 </a>: Failure of ... of type "image" </dd>
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" >
382 </dl>
383 <p><a href="#annot_link_02">Back to demo</a></p>
384 </div>
385 <div id="annot_03">
386 <h3>Note 03: Link not visually distinct</h3>
387<p>The link "heat wave linked to temperature" is not sufficiently distinct because it resembles a heading, and will not be recognized as a link by many readers.
Use at least a 12-point font on all web pages.
font-size: 10.20pt<p>The link "heat wave linked to ... as a link by many readers. </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" >
388 <dl>
389 <dt><a href="https://www.w3.org/WAI/WCAG20/quickref/#visual-audio-contrast-visual-presentation">Success Criterion 1.4.8 - Visual Presentation</a></dt>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<a href='...n'>Success Criterion 1.4.8 - Visual Presentation </a>
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" >
390 <dd>Advisory Technique: Making links visually distinct (future link)</dd>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<dd>Advisory Technique: Making links visually distinct (future link) </dd>
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" >
391 <dt><a href="https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms">Guideline 2.4 - Navigable</a></dt>
392 <dd>Advisory Technique: Making links visually distinct (future link)</dd>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<dd>Advisory Technique: Making links visually distinct (future link) </dd>
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" >
393 <dt><a href="https://www.w3.org/WAI/WCAG20/quickref/#meaning">Guideline 3.1 - Readable</a></dt>
394 <dd>Advisory Technique: Making links visually distinct (future link)</dd>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<dd>Advisory Technique: Making links visually distinct (future link) </dd>
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" >
395 </dl>
396 <p><a href="#annot_link_03">Back to demo</a></p>
397 </div>
398 <div id="annot_04">
399 <h3>Note 04: Image with inadequate text alternative</h3>
400<p>The text alternative for this image is provided in the <code>title</code> attribute alone, which is not usable for many readers. Moreover, the text alternative "image" does not describe the image.</p><p class="code"><code><div style="background: url(BrainInJar.jpg)" title="image" ... ></code></p><p>Note: The techniques for retrofitting this image differ depending if the author regards this image as purely decorative or as informative.</p>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<p>The text alternative for this image is provided in the <code>title </code>attribute alone, which is not usable for many readers. Moreover, the text alternative "image" does not describe the image. </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" >
Use at least a 12-point font on all web pages.
font-size: 10.20pt<p>Note: The techniques for ... decorative or as informative. </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" >
401 <dl>
402 <dt><a href="https://www.w3.org/WAI/WCAG20/quickref/#text-equiv-all">Success Criterion 1.1.1 - Non-text Content</a></dt>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<a href='...l'>Success Criterion 1.1.1 - Non-text Content </a>
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" >
403 <dd><ul><li><a href="https://www.w3.org/TR/WCAG20-TECHS/F3">Failure 3</a>: Failure of Success Criterion 1.1.1 due to using CSS to include images that convey important information</li><li><a href="https://www.w3.org/TR/WCAG20-TECHS/F30">Failure 30</a>: Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not alternatives (e.g. filenames or placeholder text)</li></ul></dd>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<li><a href='...3'>Failure 3 </a>: Failure of ... information </li>
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" >
Use at least a 12-point font on all web pages.
font-size: 10.20pt<li><a href='...0'>Failure 30 </a>: Failure of ... placeholder text) </li>
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" >
404 </dl>
405 <p><a href="#annot_link_04">Back to demo</a></p>
406 </div>
407 <div id="annot_05">
408 <h3>Note 05: Link text is not descriptive</h3>
409<p>The link text "Read more..." is not descriptive to convey the purpose of the link.</p>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<p>The link text "Read more..." is ... convey the purpose of the link. </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" >
410 <dl>
411 <dt><a href="https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-refs">Success Criterion 2.4.4 - Link Purpose (In Context)</a></dt>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<a href='...s'>Success Criterion 2.4.4 - Link Purpose (In Context) </a>
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" >
412 <dd><a href="https://www.w3.org/TR/WCAG20-TECHS/F63">Failure 63</a>: Failure of Success Criterion 2.4.4 due to providing link context only in content that is not related to the link</dd>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<dd><a href='...3'>Failure 63 </a>: Failure of ... to the link </dd>
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" >
413 <dt><a href="https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-link">Success Criterion 2.4.9 - Link Purpose (Link Only)</a></dt>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<a href='...k'>Success Criterion 2.4.9 - Link Purpose (Link Only) </a>
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" >
414 <dd><a href="https://www.w3.org/TR/WCAG20-TECHS/F84">Failure 84</a>: Failure of Success Criterion 2.4.9 due to using a non-specific link such as "click here" or "more" without a mechanism to change the link text to specific text.</dd>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<dd><a href='...4'>Failure 84 </a>: Failure of ... to specific text. </dd>
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" >
415 </dl>
416 <p><a href="#annot_link_05">Back to demo</a></p>
417 </div>
418 <div id="annot_06">
419 <h3>Note 06: Reading sequence not meaningful</h3>
420<p>These three columns of text appear to be visually distinct but according to the markup code they appear as one piece of running text. They would read as follows:</p><p class="code"><code>"<em>After three years of effort city scientists now agree that the primary cause of the 2003 heatwave was hot air from our Mayor: These kinds of crimes need more creative, effective punishments. For example, we could require compulsory Brain donations: huge drop off in brain donations down due to the 'success' of 'Slow Traffic, Safe Streets' policy</em>"</code></p>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<p>These three columns of text ... text. They would read as follows: </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" >
Use italic text sparingly - for one or two words or a short phrase.
<em>After three years of effort city ... Traffic, Safe Streets' policy </em> Keep runs of styled text to less than 70 characters.
When used well, styled text draws attention to important words, but also decreases reading speed by almost twenty percent.
Use at least a 12-point font on all web pages.
font-size: 11.22pt<em>After three years of effort city ... Traffic, Safe Streets' policy </em>
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" >
421 <dl>
422 <dt><a href="https://www.w3.org/WAI/WCAG20/quickref/#content-structure-separation-programmatic">Success Criterion 1.3.1 - Info and Relationships</a></dt>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<a href='...c'>Success Criterion 1.3.1 - Info and Relationships </a>
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" >
423 <dd><a href="https://www.w3.org/TR/WCAG20-TECHS/F2">Failure 2</a>: Failure of Success Criterion 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text</dd>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<dd><a href='...2'>Failure 2 </a>: Failure of ... markup or text </dd>
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" >
424 <dt><a href="https://www.w3.org/WAI/WCAG20/quickref/#content-structure-separation-sequence">Success Criterion 1.3.2 - Meaningful Sequence</a></dt>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<a href='...e'>Success Criterion 1.3.2 - Meaningful Sequence </a>
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" >
425 <dd><ul><li><a href="https://www.w3.org/TR/WCAG20-TECHS/F1">Failure 1</a>: Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS</li><li><a href="https://www.w3.org/TR/WCAG20-TECHS/F49">Failure 49</a>: Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized</li></ul></dd>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<li><a href='...1'>Failure 1 </a>: Failure of ... with CSS </li>
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" >
Use at least a 12-point font on all web pages.
font-size: 10.20pt<li><a href='...9'>Failure 49 </a>: Failure of ... when linearized </li>
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" >
426 </dl>
427 <p><a href="#annot_link_06">Back to demo</a></p>
428 </div>
429 <div id="annot_07">
430 <h3>Note 07: Link with image has empty text alternative</h3>
431<p>This image has an empty text alternative but it is the only content in the link, so that the purpose of the link is unclear to some users.</p><p class="code"><code><a href="news.html" ... ><img src="morearrow.gif" alt="" ... ></a></code></p>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<p>This image has an empty text ... link is unclear to some users. </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" >
432 <dl>
433 <dt><a href="https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-refs">Success Criterion 2.4.4 - Link Purpose (In Context)</a></dt>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<a href='...s'>Success Criterion 2.4.4 - Link Purpose (In Context) </a>
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" >
434 <dd><a href="https://www.w3.org/TR/WCAG20-TECHS/F89">Failure 89</a>: Failure of 2.4.4, 2.4.9 and 4.1.2 due to using null alt on an image where the image is the only content in a link</dd>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<dd><a href='...9'>Failure 89 </a>: Failure of ... content in a link </dd>
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" >
435 <dt><a href="https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-link">Success Criterion 2.4.9 - Link Purpose (Link Only)</a></dt>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<a href='...k'>Success Criterion 2.4.9 - Link Purpose (Link Only) </a>
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" >
436 <dd><a href="https://www.w3.org/TR/WCAG20-TECHS/F89">Failure 89</a>: Failure of 2.4.4, 2.4.9 and 4.1.2 due to using null alt on an image where the image is the only content in a link</dd>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<dd><a href='...9'>Failure 89 </a>: Failure of ... content in a link </dd>
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" >
437 <dt><a href="https://www.w3.org/WAI/WCAG20/quickref/#ensure-compat-rsv">Success Criterion 4.1.2 - Name, Role, Value</a></dt>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<a href='...v'>Success Criterion 4.1.2 - Name, Role, Value </a>
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" >
438 <dd><a href="https://www.w3.org/TR/WCAG20-TECHS/F89">Failure 89</a>: Failure of 2.4.4, 2.4.9 and 4.1.2 due to using null alt on an image where the image is the only content in a link</dd>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<dd><a href='...9'>Failure 89 </a>: Failure of ... content in a link </dd>
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" >
439 </dl>
440 <p><a href="#annot_link_07">Back to demo</a></p>
441 </div>
442 <div id="annot_08">
443 <h3>Note 08: Decorative image without empty text alternative</h3>
444<p>This image has the text alternative "bullet", which does not provide any useful information. The image should have an empty text alternative to indicate that it is a decorative image that should be ignored by assistive technology.</p><p class="code"><code><img src="list_bullets.gif" alt="bullet" ... ></code></p><p>Note: The image can also be dispayed using CSS rather than the <code>img</code> element.</p>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<p>This image has the text ... ignored by assistive technology. </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" >
Use at least a 12-point font on all web pages.
font-size: 10.20pt<p>Note: The image can also be dispayed using CSS rather than the ...</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" >
445 <dl>
446 <dt><a href="https://www.w3.org/WAI/WCAG20/quickref/#text-equiv-all">Success Criterion 1.1.1 - Non-text Content</a></dt>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<a href='...l'>Success Criterion 1.1.1 - Non-text Content </a>
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" >
447 <dd><a href="https://www.w3.org/TR/WCAG20-TECHS/F39">Failure 39</a>: Failure of Success Criterion 1.1.1 due to providing a text alternative that is not null (e.g. alt="spacer" or alt="image") for images that should be ignored by assistive technology</dd>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<dd><a href='...9'>Failure 39 </a>: Failure of ... technology </dd>
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" >
448 </dl>
449 <p><a href="#annot_link_08">Back to demo</a></p>
450 </div>
451 <div id="annot_09">
452 <h3>Note 09: List not marked up as such</h3>
453<p>The items "Killer bees" and "Onions" are formatted to visually resemble a list but this structural information is not represented in the HTML code.</p>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<p>The items "Killer bees" and ... not represented in the HTML code. </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" >
454 <dl>
455 <dt><a href="https://www.w3.org/WAI/WCAG20/quickref/#content-structure-separation-programmatic">Success Criterion 1.3.1 - Info and Relationships</a></dt>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<a href='...c'>Success Criterion 1.3.1 - Info and Relationships </a>
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" >
456 <dd><a href="https://www.w3.org/TR/WCAG20-TECHS/F2">Failure 2</a>: Failure of Success Criterion 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text</dd>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<dd><a href='...2'>Failure 2 </a>: Failure of ... markup or text </dd>
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" >
457 </dl>
458 <p><a href="#annot_link_09">Back to demo</a></p>
459 </div>
460 <div id="annot_10">
461 <h3>Note 10: Image with incorrect text alternative</h3>
462<p>This image has an incorrect text alternative, "1234 56789"; possibly because the text alternative is outdated or a placeholder.</p><p class="code"><code><img src="telefon_white_bg.gif" alt="1234 56789" ... ></code></p>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<p>This image has an incorrect text ... is outdated or a placeholder. </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" >
463 <dl>
464 <dt><a href="https://www.w3.org/WAI/WCAG20/quickref/#text-equiv-all">Success Criterion 1.1.1 - Non-text Content</a></dt>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<a href='...l'>Success Criterion 1.1.1 - Non-text Content </a>
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" >
465 <dd><ul><li><a href="https://www.w3.org/TR/WCAG20-TECHS/F20">Failure 20</a>: Failure of Success Criterion 1.1.1 and 4.1.2 due to not updating text alternatives when changes to non-text content occur</li><li><a href="https://www.w3.org/TR/WCAG20-TECHS/F30">Failure 30</a>: Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not alternatives (e.g. filenames or placeholder text)</li><li><a href="https://www.w3.org/TR/WCAG20-TECHS/F71">Failure 71</a>: Failure of Success Criterion 1.1.1 due to using text look-alikes to represent text without providing a text alternative</li></ul></dd>
Use at least a 12-point font on all web pages.
font-size: 10.20pt<li><a href='...0'>Failure 20 </a>: Failure of ... content occur </li>
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" >
Use at least a 12-point font on all web pages.
font-size: 10.20pt<li><a href='...0'>Failure 30 </a>: Failure of ... placeholder text) </li>
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" >
Use at least a 12-point font on all web pages.
font-size: 10.20pt<li><a href='...1'>Failure 71 </a>: Failure of ... text alternative </li>
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" >
466 </dl>
467 <p><a href="#annot_link_10">Back to demo</a></p>
468 </div>
469 </div>
470 </div>
471 <div id="meta-footer" class="meta">
472 <hr>
473 <p><strong>Status:</strong> 20 February 2012 (see <a href="../../changelog.html">changelog</a>) <br>Editors: <a href="https://www.w3.org/People/shadi/">Shadi Abou-Zahra</a> and the <a href="https://www.w3.org/WAI/EO/">Education and Outreach Working Group (EOWG)</a>. <br>Developed with support from <a href="https://www.w3.org/WAI/TIES/"><acronym title="Web Accessibility Initiative: Training, Implementation, Education, Support">WAI-TIES</acronym></a> and <a href="https://www.w3.org/WAI/WAI-AGE/"><acronym title="Web Accessibility Initiative: Ageing Education and Harmonisation">WAI-AGE</acronym></a> projects, co-funded by the European Commission <acronym title="Information Society Technologies">IST</acronym> Programme. [see <a href="../../acks.html">Acknowledgements</a>]</p>
Use at least a 12-point font on all web pages.
font-size: 10.80pt<a href='https://www.w3.org/WAI/EO/'>Education and ... Group (EOWG) </a>
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" >
The
acronym element is obsolete. Use the
abbr element instead.
<acronym title='Web Accessibility Initiative: Training, Implementation, Education, Support'>WAI-TIES</acronym> 474 <p>[<a href="https://www.w3.org/WAI/sitemap.html" shape="rect">WAI Site Map</a>] [<a href="https://www.w3.org/WAI/sitehelp.html" shape="rect">Help with WAI Website</a>] [<a href="https://www.w3.org/WAI/search.php" shape="rect">Search</a>] [<a href="https://www.w3.org/WAI/contacts" shape="rect">Contacting WAI</a>] <br><strong>Feedback welcome to <a href="mailto:wai-eo-editors@w3.org" shape="rect">wai-eo-editors@w3.org</a></strong> (a publicly archived list) or <a href="mailto:wai@w3.org" shape="rect">wai@w3.org</a> (a WAI staff-only list).</p>
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> 475 <div class="copyright"><p><a rel="Copyright" href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2012 <a href="https://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><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.</p></div>
476 </div>
477 <div id="lightbox_background"><div id="lightbox_container"></div></div>
478 <!-- Piwik -->
479 <script type="text/javascript">
480 var _paq = _paq || [];
481 _paq.push(["setDomains", ["*.www.w3.org/WAI"]]);
482 _paq.push(['trackPageView']);
483 _paq.push(['enableLinkTracking']);
484 (function() {
485 var u="//www.w3.org/analytics/piwik/";
486 _paq.push(['setTrackerUrl', u+'piwik.php']);
487 _paq.push(['setSiteId', 328]);
488 var d=document, g=d.createElement('script'),
489 s=d.getElementsByTagName('script')[0];
490 g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js';
491 s.parentNode.insertBefore(g,s);
492 })();
493 </script>
494 <noscript><p><img src="//www.w3.org/analytics/piwik/piwik.php?idsite=328"
495 style="border:0;" alt="" /></p></noscript>
496 <!-- End Piwik Code -->
497</body>
498</html>
Issues: