This page has no doctype which triggers quirks mode in IE, Firefox and most other browsers. This means pages may look different in different browsers.
Add a
DOCTYPE statement to the top of the document.
1<
Use the
lang attribute to identify the language of the page.
In HTML add a lang attribute containing a language code to the html tag, and in PDF set the language using Document Properties in Acrobat. This allows screen readers to pronounce words correctly.
HTML>
2 <HEAD>
3<TITLE>Welcome to CityLights! [Inaccessible Tickets Page]</TITLE> <STYLE>
4 td {
5 color: #000000;
6 text-decoration: none;
7 font: 15px/15px "Times New Roman", Times, serif;
8 }
9 #main .headline {
10 color: #41545d;
11 font: 24px verdana;
12 font-family: impact;
13 text-decoration: none;
14 }
15 .prices td {
16 font: 12px/12px "Times New Roman", Times, serif;
17 }
18 #terms{
19 font-family: "Times New Roman", Times, serif;
20 text-transform:uppercase;
21
Use at least a 12-point font on all web pages.
For users over age 65, it may be better to use at least fourteen-point fonts.
Never use less than nine-point font on a Web site.
The following are all smaller than 12 point:
<p style="font-size: 11pt;" >
<p style="font-size: 15px;" >
<p style="font-size: small;" >
<font size="2" >
<font size="-1" >
font-size: 13px;
22 line-height: 13px;
23 padding:0;
24 margin:0;
25 }
26 </STYLE>
27 <LINK HREF="../css/meta.css" rel="stylesheet" type="text/css">
28 <SCRIPT type="text/javascript">
29 function ChangeColor(id, colour){
30 document.getElementById(id).style.backgroundColor=colour;
31 }
32 function switchImage(imgName, imgSrc){
33 if (document.images){
34 if (imgSrc != "none"){
35 document.images[imgName].src = imgSrc;
36 }
37 }
38 }
39 </SCRIPT>
40 <NOSCRIPT>
Bad start tag
b in
noscript in
head.
<
B> <FONT COLOR=
Ensure that text and background colors have enough contrast.
The text color to background color contrast ratio after composition is: 2.76 with
color: background: font-size: 12ptfont-weight: 700
Some users find it hard to read light gray text on a white background, dark gray text on a black background and white text on a red background.
The contrast ratio should be 3.0 or more for 18 point text, or larger
The contrast ratio should be 3.0 or more for 14 point bold text, or larger
The contrast ratio should be 4.5 or more for all other text
RED> This page uses scripts!!!</FONT></B><
Stray end tag
noscript.
/NOSCRIPT>
41 <script src="../js/onload.js" type="text/javascript"></script>
42 <
Stray end tag
head.
/HEAD>
43
<BODY TEXT=#000000 BGCOLOR=#D7D7CD LEFTMARGIN=0px TOPMARGIN=0px MARGINWIDTH=0px MARGINHEIGHT=0px LINK=#226C8E VLINK=#226C8E ALINK=#226C8E>
44 <div id="meta-header">
45 <p id="skipnav"><a href="#page">Skip to inaccessible demo page</a></p>
46 <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>
47 <h1><span class="subhead">Inaccessible Tickets Page</span><span class="hidden"> -</span> Before and After Demonstration</h1>
48 <p class="subline">Improving a Web site using Web Content Accessibility Guidelines (WCAG) 2.0</p>
49 <div id="mnav" class="inaccessible">
50 <ul>
51 <li class="first"><a href="../Overview.html">Overview</a></li>
52 <li class="first"><a href="home.html">Home</a></li>
53 <li><a href="news.html">News</a></li>
54 <li class="current"><span class="hidden">Current location: </span>Tickets
55 <div class="subnav"><ul>
56 <li class="inaccessible"><strong>Inaccessible:</strong><a class="page current"><span class="hidden">Inaccessible </span>Tickets Page</a><a href="./reports/tickets.html" class="report"><span class="hidden">Inaccessible Tickets Page </span> Report</a></li>
57 <li class="accessible"><strong>Accessible:</strong><a href="../after/tickets.html" class="page"><span class="hidden">Accessible </span>Tickets Page</a><a href="../after/reports/tickets.html" class="report"><span class="hidden">Accessible Tickets Page </span> Report</a></li>
58 </ul><a href="./annotated/tickets.html" class="annotoggle">Show <br>Annotations</a></div>
59 </li>
60 <li><a href="survey.html">Survey</a></li>
61 <li><a href="template.html">Template</a></li>
62 </ul>
63 </div>
64 </div>
65 <div id="page">
66 <p class="skip" id="startcontent">Demo starts here</p>
67 <TABLE WIDTH=100% BORDER=0px CELLSPACING=0px CELLPADDING=0px BGCOLOR=
#D7D7CD> <TR VALIGN=
MIDDLE> <TD WIDTH=100% ALIGN=
CENTER>
68 <TABLE WIDTH=800px BORDER=0px CELLSPACING=0px CELLPADDING=0px BGCOLOR=
This page uses nested tables, which do not make sense when read in a screen reader.
Add role='presentation' if the inner table is a layout table, otherwise modify the inner table to present the same data without nesting tables.
WHITE>
69 <TR HEIGHT=
Attribute
height not allowed on element.
10px>
70 <TD WIDTH=10px BACKGROUND=
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
Attribute
background not allowed on element.
./img/border_left_top.gif> <IMG SRC=./img/border_left_top.gif WIDTH=10px HEIGHT=
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. 10px> </TD>
71 <TD WIDTH=780px BACKGROUND=
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
Attribute
background not allowed on element.
./img/border_top.gif> <IMG SRC=./img/border_top.gif HEIGHT=
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. 10px> </TD>
72 <TD WIDTH=10px BACKGROUND=
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
Attribute
background not allowed on element.
./img/border_right_top.gif> <IMG SRC=./img/border_right_top.gif WIDTH=10px HEIGHT=
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. 10px> </TD>
73 </TR>
74 <TR>
75 <TD WIDTH=10px BACKGROUND=
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
Attribute
background not allowed on element.
./img/border_left.gif> <IMG SRC=./img/border_left.gif WIDTH=
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. 10px> </TD>
76 <TD WIDTH=780px ALIGN=
CENTER>
77 <TABLE WIDTH=780px HEIGHT=144px BORDER=0px CELLSPACING=0px CELLPADDING=0px BGCOLOR=
This page uses nested tables, which do not make sense when read in a screen reader.
Add role='presentation' if the inner table is a layout table, otherwise modify the inner table to present the same data without nesting tables.
Identify row and column headers in data tables using
th elements, and mark layout tables with
role=presentation.
Data tables allow screen reader users to understand column and row relationships.
Layout tables read cells as a series of unrelated paragraphs with no tabular structure.
Without
th or
role, screen readers apply heuristics to decide whether a table is a layout table or data table.
These heuristics vary greatly between screen readers, and are affected by browser being used, window size,
and font size (so the outcome is very unpredictable without
th or
role).
If a data table has headers marked up using
td, then change these to
th.
If a data table has no headers, add
th elements describing each row and/or column.
If the table is only used for layout add
role=presentation to the
table element.
Impact on users:
JAWS Reading: Treats tables without th and role as layout tables if the table contains cells above or below certain pixel sizes. This measurement is affected by browser window size, browser font size, and the browser used. NVDA Reading: Applies a layout table heuristic to tables without th and role which varies depending on the browser used and on the window size in some circumstances. VoiceOver Reading: Uses a sophisticated heuristic on tables without th and role, which is similar (but not identical) to the heuristic used by NVDA with Firefox. Attribute
height not allowed on element.
WHITE>
78 <TR HEIGHT=
Attribute
height not allowed on element.
86px>
79 <TD WIDTH=443px BACKGROUND=./img/top_logo_next.gif VALIGN=
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
Attribute
background not allowed on element.
MIDDLE> <DIV><A HREF=home.html><IMG SRC=./img/top_logo.gif WIDTH=443px HEIGHT=86px ALT="Red dot with a white letter 'C' that symbolizes a moon crescent as well as the sun. This logo is followed by a black banner that says 'CITYLIGHTS' which is the name of this online portal. Finally, the slogan of the portal, 'your access to the city', follows in a turquoise green handwriting style and with a slight slant across the top banner.
"> </A></DIV></TD>
80 <TD WIDTH=24px VALIGN=
MIDDLE> <IMG SRC=./img/top_logo_next_end.gif WIDTH=24px HEIGHT=
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. 86px> </TD>
81 <TD WIDTH=128px VALIGN=
MIDDLE> <IMG SRC=./img/top_weather.gif WIDTH=128px HEIGHT=
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. 86px> </TD>
82 <TD WIDTH=22px VALIGN=
MIDDLE> <IMG SRC=./img/top_logo_next_start.gif WIDTH=22px HEIGHT=
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. 86px> </TD>
83 <TD WIDTH=163px BACKGROUND=./img/top_logo_next.gif ALIGN=CENTER VALIGN=
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
Attribute
background not allowed on element.
MIDDLE>
84 <SELECT ONCHANGE="location.href = this.value;
select lists cannot be operated from the keyboard if they have a
change handler that performs navigation, because the handler fires as the user moves the selection up and down using the keyboard.
Moving through list items using the arrow keys will jump to another page unexpectedly.
Use option groups when a drop down list has more than 10 items.
Group related options using optgroup elements.
">
85 <OPTION SELECTED>QUICKMENU ---->
86 <OPTION VALUE="../offsite.html">Broadcasting
87 <OPTION VALUE="../offsite.html">Education
88 <OPTION VALUE="../offsite.html">Electricity
89 <OPTION VALUE="../offsite.html">Fire service
90 <OPTION VALUE="../offsite.html">Gas service
91 <OPTION VALUE="../offsite.html">Health care
92 <OPTION VALUE="../offsite.html">Police service
93 <OPTION VALUE="../offsite.html">Public Libraries
94 <OPTION VALUE="../offsite.html">Social services
95 <OPTION VALUE="../offsite.html">Social housing
96 <OPTION VALUE="../offsite.html">Telecommunications
97 <OPTION VALUE="../offsite.html">Town planning
98 <OPTION VALUE="../offsite.html">Transportation
99 <OPTION VALUE="../offsite.html">Waste management
100 <OPTION VALUE="../offsite.html">Water services
101 </SELECT>
102 </TD>
103 </TR>
104 <TR HEIGHT=
Attribute
height not allowed on element.
7px>
105 <TD WIDTH=780px BACKGROUND=./img/mark.gif COLSPAN=
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
Attribute
background not allowed on element.
5> <IMG SRC=./img/mark.gif WIDTH=158px HEIGHT=
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. 7px> </TD>
106 </TR>
107 <TR HEIGHT=
Attribute
height not allowed on element.
25px>
108 <TD COLSPAN=5>
109 <TABLE WIDTH=780px BORDER=0px CELLSPACING=0px CELLPADDING=
This page uses nested tables, which do not make sense when read in a screen reader.
Add role='presentation' if the inner table is a layout table, otherwise modify the inner table to present the same data without nesting tables.
Identify row and column headers in data tables using
th elements, and mark layout tables with
role=presentation.
Data tables allow screen reader users to understand column and row relationships.
Layout tables read cells as a series of unrelated paragraphs with no tabular structure.
Without
th or
role, screen readers apply heuristics to decide whether a table is a layout table or data table.
These heuristics vary greatly between screen readers, and are affected by browser being used, window size,
and font size (so the outcome is very unpredictable without
th or
role).
If a data table has headers marked up using
td, then change these to
th.
If a data table has no headers, add
th elements describing each row and/or column.
If the table is only used for layout add
role=presentation to the
table element.
Impact on users:
JAWS Reading: Treats tables without th and role as layout tables if the table contains cells above or below certain pixel sizes. This measurement is affected by browser window size, browser font size, and the browser used. NVDA Reading: Applies a layout table heuristic to tables without th and role which varies depending on the browser used and on the window size in some circumstances. VoiceOver Reading: Uses a sophisticated heuristic on tables without th and role, which is similar (but not identical) to the heuristic used by NVDA with Firefox. 0px>
110 <TR HEIGHT=
Attribute
height not allowed on element.
25px>
111 <TD BGCOLOR="#EDEDED" WIDTH=
380px> <FONT COLOR=BLACK FACE=Verdana SIZE=
Use at least a 12-point font on all web pages.
For users over age 65, it may be better to use at least fourteen-point fonts.
Never use less than nine-point font on a Web site.
The following are all smaller than 12 point:
<p style="font-size: 11pt;" >
<p style="font-size: 15px;" >
<p style="font-size: small;" >
<font size="2" >
<font size="-1" >
2> <B>Traffic:</B> Construction work on Main Road</FONT></TD>
112 <TD BGCOLOR="#FFFFFF" ALIGN=RIGHT ID="WEATHER
"> <FONT COLOR=BLACK FACE=Verdana SIZE=
2> <B>Today:</B>
113 <SCRIPT LANGUAGE="JavaScript
">
114 var now = new Date();
115 var days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
116 var months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
117 var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
118 function fourdigits(number) {
119 return (number < 1000) ? number + 1900 : number;
120 }
121 today = days[now.getDay()] + " " + date + " " + months[now.getMonth()] + " " + (fourdigits(now.getYear())) + ", Sunny, 23°C </FONT>";
122 document.all.WEATHER.setAttribute("BGCOLOR", "#EDEDED", 0);
123 document.write(today);
124 </SCRIPT><
Unclosed element
font.
/TD>
125 </TR>
126 </TABLE>
127 </TD>
128 </TR>
129 <TR HEIGHT=
Attribute
height not allowed on element.
1px>
130 <TD WIDTH=780px BACKGROUND=./img/marker2_w.gif COLSPAN=
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
Attribute
background not allowed on element.
5> <IMG SRC=.img/marker2_w.gif WIDTH=78px HEIGHT=
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. 1px> </TD>
131 </TR>
132 <TR HEIGHT=
Attribute
height not allowed on element.
25px>
133 <TD COLSPAN=5> </TD>
134 </TR>
135 </TABLE>
136 <TABLE WIDTH=780px BORDER=0px CELLSPACING=0px CELLPADDING=0px BGCOLOR=
This page uses nested tables, which do not make sense when read in a screen reader.
Add role='presentation' if the inner table is a layout table, otherwise modify the inner table to present the same data without nesting tables.
WHITE>
137 <TR WIDTH=
Attribute
width not allowed on element.
780px>
138 <TD WIDTH=155px BGCOLOR=#E4E4E4 VALIGN=
TOP>
139 <TABLE WIDTH=155px BORDER=0px CELLSPACING=0px CELLPADDING=
This page uses nested tables, which do not make sense when read in a screen reader.
Add role='presentation' if the inner table is a layout table, otherwise modify the inner table to present the same data without nesting tables.
Identify row and column headers in data tables using
th elements, and mark layout tables with
role=presentation.
Data tables allow screen reader users to understand column and row relationships.
Layout tables read cells as a series of unrelated paragraphs with no tabular structure.
Without
th or
role, screen readers apply heuristics to decide whether a table is a layout table or data table.
These heuristics vary greatly between screen readers, and are affected by browser being used, window size,
and font size (so the outcome is very unpredictable without
th or
role).
If a data table has headers marked up using
td, then change these to
th.
If a data table has no headers, add
th elements describing each row and/or column.
If the table is only used for layout add
role=presentation to the
table element.
Impact on users:
JAWS Reading: Treats tables without th and role as layout tables if the table contains cells above or below certain pixel sizes. This measurement is affected by browser window size, browser font size, and the browser used. NVDA Reading: Applies a layout table heuristic to tables without th and role which varies depending on the browser used and on the window size in some circumstances. VoiceOver Reading: Uses a sophisticated heuristic on tables without th and role, which is similar (but not identical) to the heuristic used by NVDA with Firefox. 0px>
140 <TR HEIGHT=
Attribute
height not allowed on element.
1px>
141 <TD WIDTH=155px BACKGROUND=
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
Attribute
background not allowed on element.
./img/marker2_w.gif> <IMG SRC=./img/marker2_w.gif WIDTH=78px HEIGHT=
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. 1px> </TD>
142 <TD WIDTH=1px BACKGROUND=./img/marker2_t.gif ROWSPAN=9 VALIGN=
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
Attribute
background not allowed on element.
TOP> <IMG SRC=./img/marker2_t.gif WIDTH=1 HEIGHT=
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. 30px> </TD>
143 </TR>
144 <TR HEIGHT=
Attribute
height not allowed on element.
34px>
145 <TD WIDTH=154px bgcolor="#EDEDED" id="home" onMouseOver="switchImage('nav_home', './img/nav_home2.gif'); ChangeColor('home','#FFF')" onMouseOut="switchImage('nav_home', './img/nav_home.gif'); ChangeColor('home','#EDEDED')
"> <A HREF="javascript:location.href='home.html';" onFocus="blur();
Links must have an accessible name.
A link name allows screen readers to voice what the links does. If there is no link content, or the link content is hidden by CSS, screen readers have nothing to read, so read out the URL instead. To add a name do one of the following:
Add text between the a element start and end tags
Add an aria-label attribute
Add an aria-labelledby attribute
Add an img alt attribute labeling the link if it contains an img element
img elements with
role=presentation or
role=none are not included in the link's accessible name.
This field removes focus when tabbed to making it impossible for disabled users to navigate this form via the keyboard.
Using blur() in an onfocus handler makes the form impossible to use with a keyboard. Remove the call to blur() in the onfocus handler.
"> <img name="nav_home" src=./img/nav_home.gif width=88 height=27 hspace="15" border=
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. 0px> </a></TD>
146 </TR>
147 <TR HEIGHT=
Attribute
height not allowed on element.
1px>
148 <TD WIDTH=154px BACKGROUND=
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
Attribute
background not allowed on element.
./img/marker2_w.gif> <IMG SRC=./img/marker2_w.gif WIDTH=78px HEIGHT=
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. 1px> </TD>
149 </TR>
150 <TR HEIGHT=
Attribute
height not allowed on element.
34px>
151 <TD WIDTH=154px bgcolor="#EDEDED" id="news" onMouseOver="switchImage('nav_news', './img/nav_news2.gif'); ChangeColor('news','#FFF')" onMouseOut="switchImage('nav_news', './img/nav_news.gif'); ChangeColor('news','#EDEDED')
"> <A HREF="javascript:location.href='news.html';" ONFOCUS="blur();
Links must have an accessible name.
A link name allows screen readers to voice what the links does. If there is no link content, or the link content is hidden by CSS, screen readers have nothing to read, so read out the URL instead. To add a name do one of the following:
Add text between the a element start and end tags
Add an aria-label attribute
Add an aria-labelledby attribute
Add an img alt attribute labeling the link if it contains an img element
img elements with
role=presentation or
role=none are not included in the link's accessible name.
This field removes focus when tabbed to making it impossible for disabled users to navigate this form via the keyboard.
Using blur() in an onfocus handler makes the form impossible to use with a keyboard. Remove the call to blur() in the onfocus handler.
"> <IMG SRC=./img/nav_news.gif name="nav_news" WIDTH=90 HEIGHT=21 hspace="12" BORDER=
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. 0px> </A></TD>
152 </TR>
153 <TR HEIGHT=
Attribute
height not allowed on element.
1px>
154 <TD WIDTH=154px BACKGROUND=
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
Attribute
background not allowed on element.
./img/marker2_w.gif> <IMG SRC=./img/marker2_w.gif WIDTH=78px HEIGHT=
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. 1px> </TD>
155 </TR>
156 <TR HEIGHT=
Attribute
height not allowed on element.
34px>
157 <TD WIDTH=154px bgcolor="#EDEDED" id="tickets" onMouseOver="switchImage('nav_facts', './img/nav_facts2.gif'); ChangeColor('tickets','#FFF')" onMouseOut="switchImage('nav_facts', './img/nav_facts.gif'); ChangeColor('tickets','#EDEDED')
"> <A HREF="javascript:location.href='tickets.html';" ONFOCUS="blur();
Links must have an accessible name.
A link name allows screen readers to voice what the links does. If there is no link content, or the link content is hidden by CSS, screen readers have nothing to read, so read out the URL instead. To add a name do one of the following:
Add text between the a element start and end tags
Add an aria-label attribute
Add an aria-labelledby attribute
Add an img alt attribute labeling the link if it contains an img element
img elements with
role=presentation or
role=none are not included in the link's accessible name.
This field removes focus when tabbed to making it impossible for disabled users to navigate this form via the keyboard.
Using blur() in an onfocus handler makes the form impossible to use with a keyboard. Remove the call to blur() in the onfocus handler.
"> <IMG name="nav_facts" SRC=./img/nav_facts.gif WIDTH=105 HEIGHT=23 hspace="9" BORDER=
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. 0px> </A></TD>
158 </TR>
159 <TR HEIGHT=
Attribute
height not allowed on element.
1px>
160 <TD WIDTH=154px BACKGROUND=
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
Attribute
background not allowed on element.
./img/marker2_w.gif> <IMG SRC=./img/marker2_w.gif WIDTH=78px HEIGHT=
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. 1px> </TD>
161 </TR>
162 <TR HEIGHT=
Attribute
height not allowed on element.
34px>
163 <TD WIDTH=154px bgcolor="#EDEDED" id="survey" onMouseOver="switchImage('nav_survey', './img/nav_survey2.gif'); ChangeColor('survey','#FFF')" onMouseOut="switchImage('nav_survey', './img/nav_survey.gif'); ChangeColor('survey','#EDEDED')
"> <A HREF="javascript:location.href='survey.html';" ONFOCUS="blur();
Links must have an accessible name.
A link name allows screen readers to voice what the links does. If there is no link content, or the link content is hidden by CSS, screen readers have nothing to read, so read out the URL instead. To add a name do one of the following:
Add text between the a element start and end tags
Add an aria-label attribute
Add an aria-labelledby attribute
Add an img alt attribute labeling the link if it contains an img element
img elements with
role=presentation or
role=none are not included in the link's accessible name.
This field removes focus when tabbed to making it impossible for disabled users to navigate this form via the keyboard.
Using blur() in an onfocus handler makes the form impossible to use with a keyboard. Remove the call to blur() in the onfocus handler.
"> <IMG SRC=./img/nav_survey.gif name="nav_survey" WIDTH=107 HEIGHT=32 hspace="8" BORDER=
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. 0px> </A></TD>
164 </TR>
165 <TR HEIGHT=
Attribute
height not allowed on element.
1px>
166 <TD WIDTH=154px BACKGROUND=
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
Attribute
background not allowed on element.
./img/marker2_w.gif> <IMG SRC=./img/marker2_w.gif WIDTH=78px HEIGHT=
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. 1px> </TD>
167 </TR>
168 </TABLE>
169 </TD>
170 <TD WIDTH=
20px> <IMG SRC=./img/blank_5x5.gif WIDTH=20px HEIGHT=
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. The
img width and
height attributes don't match the actual image size. This means the image will be distorted or resize during loading.
Image
https://www.w3.org/WAI/demos/bad/before/img/blank_5x5.gif actual dimensions:
5 x 5 pixels.
5px> </TD>
171 <TD WIDTH=625px HEIGHT="600px" VALIGN=TOP id="main
">
172 <p style="padding-top:5px;"><img src="./img/headline_ticket_offers.gif" border="0
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. "> </p>
173 <table style="border; border: 1px dashed Silver; margin:0px;" width="600px
This page uses nested tables, which do not make sense when read in a screen reader.
Add role='presentation' if the inner table is a layout table, otherwise modify the inner table to present the same data without nesting tables.
Identify row and column headers in data tables using
th elements, and mark layout tables with
role=presentation.
Data tables allow screen reader users to understand column and row relationships.
Layout tables read cells as a series of unrelated paragraphs with no tabular structure.
Without
th or
role, screen readers apply heuristics to decide whether a table is a layout table or data table.
These heuristics vary greatly between screen readers, and are affected by browser being used, window size,
and font size (so the outcome is very unpredictable without
th or
role).
If a data table has headers marked up using
td, then change these to
th.
If a data table has no headers, add
th elements describing each row and/or column.
If the table is only used for layout add
role=presentation to the
table element.
Impact on users:
JAWS Reading: Treats tables without th and role as layout tables if the table contains cells above or below certain pixel sizes. This measurement is affected by browser window size, browser font size, and the browser used. NVDA Reading: Applies a layout table heuristic to tables without th and role which varies depending on the browser used and on the window size in some circumstances. VoiceOver Reading: Uses a sophisticated heuristic on tables without th and role, which is similar (but not identical) to the heuristic used by NVDA with Firefox. ">
174 <tr>
175 <td><p>Citylights in partnership with globo enterprises are proud to offer specially priced tickets to see these great artists - <i><b>Les Garçons & The Obelisks</b></i></p><p>These <big style="font-weight:bold;
"> special deals</big> are exclusive to Citylights and can only be purchased by calling the ticket hotline:</p></td>
176 <td valign="top" align="center" width="300px
"> <DIV><b>concert dates</b>
177 <table width="250px" border="1" bordercolor="#C0C0C0" rules="rows
This page uses nested tables, which do not make sense when read in a screen reader.
Add role='presentation' if the inner table is a layout table, otherwise modify the inner table to present the same data without nesting tables.
Identify row and column headers in data tables using
th elements, and mark layout tables with
role=presentation.
Data tables allow screen reader users to understand column and row relationships.
Layout tables read cells as a series of unrelated paragraphs with no tabular structure.
Without
th or
role, screen readers apply heuristics to decide whether a table is a layout table or data table.
These heuristics vary greatly between screen readers, and are affected by browser being used, window size,
and font size (so the outcome is very unpredictable without
th or
role).
If a data table has headers marked up using
td, then change these to
th.
If a data table has no headers, add
th elements describing each row and/or column.
If the table is only used for layout add
role=presentation to the
table element.
Impact on users:
JAWS Reading: Treats tables without th and role as layout tables if the table contains cells above or below certain pixel sizes. This measurement is affected by browser window size, browser font size, and the browser used. NVDA Reading: Applies a layout table heuristic to tables without th and role which varies depending on the browser used and on the window size in some circumstances. VoiceOver Reading: Uses a sophisticated heuristic on tables without th and role, which is similar (but not identical) to the heuristic used by NVDA with Firefox. Attribute
bordercolor not allowed on element.
">
178 <tr bgcolor="#A9B8BF
">
179 <td><b><font color="41545D
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: 11.25ptfont-weight: 700
Some users find it hard to read light gray text on a white background, dark gray text on a black background and white text on a red background.
The contrast ratio should be 3.0 or more for 18 point text, or larger
The contrast ratio should be 3.0 or more for 14 point bold text, or larger
The contrast ratio should be 4.5 or more for all other text
"> Les Garçons</font></b></td>
180 <td><b><font color="41545D
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: 11.25ptfont-weight: 700
Some users find it hard to read light gray text on a white background, dark gray text on a black background and white text on a red background.
The contrast ratio should be 3.0 or more for 18 point text, or larger
The contrast ratio should be 3.0 or more for 14 point bold text, or larger
The contrast ratio should be 4.5 or more for all other text
"> The Obelisks</font></b></td>
181 </tr>
182 <tr>
183 <td>12/2/06</td>
184 <td>24/3/06</td>
185 </tr>
186 </table></DIV>
187 </td>
188 </tr>
189 <tr bgcolor="#EDEDED
">
190 <td colspan="2" align="center
">
191 <table width="550px" cellpadding="0" cellspacing="0" border="0
This page uses nested tables, which do not make sense when read in a screen reader.
Add role='presentation' if the inner table is a layout table, otherwise modify the inner table to present the same data without nesting tables.
Identify row and column headers in data tables using
th elements, and mark layout tables with
role=presentation.
Data tables allow screen reader users to understand column and row relationships.
Layout tables read cells as a series of unrelated paragraphs with no tabular structure.
Without
th or
role, screen readers apply heuristics to decide whether a table is a layout table or data table.
These heuristics vary greatly between screen readers, and are affected by browser being used, window size,
and font size (so the outcome is very unpredictable without
th or
role).
If a data table has headers marked up using
td, then change these to
th.
If a data table has no headers, add
th elements describing each row and/or column.
If the table is only used for layout add
role=presentation to the
table element.
Impact on users:
JAWS Reading: Treats tables without th and role as layout tables if the table contains cells above or below certain pixel sizes. This measurement is affected by browser window size, browser font size, and the browser used. NVDA Reading: Applies a layout table heuristic to tables without th and role which varies depending on the browser used and on the window size in some circumstances. VoiceOver Reading: Uses a sophisticated heuristic on tables without th and role, which is similar (but not identical) to the heuristic used by NVDA with Firefox. ">
192
td start tag in table body.
<td valign="middle" align="right" width="430px" style="border:0px; margin:0px;padding:0px;
"> Buy tickets by phoning the M-u-s-i-c line ---- get your tickets now!: </td>
193 <td valign="middle" align="left" width="120px" style="border:0px;margin:0px;padding:0px;
"> <DIV><img src="./img/telefon_lightgrey_bg.gif" alt="music line phone number" border="0" valign="absmiddle
Attribute
valign not allowed on element.
"> </div></td>
194 </table>
195 </td>
196 </tr>
197 </table>
198 <p> </p>
199 <table width="600px
This page uses nested tables, which do not make sense when read in a screen reader.
Add role='presentation' if the inner table is a layout table, otherwise modify the inner table to present the same data without nesting tables.
">
200 <tr align="left
">
201 <th style="padding-bottom:10px;"><img src="./img/headline_ticket_prices.gif" border="0
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. "> </th>
202 </tr>
203 </table>
204 <DIV></DIV>
205 <table width="600px" cellspacing="0" class="prices
This page uses nested tables, which do not make sense when read in a screen reader.
Add role='presentation' if the inner table is a layout table, otherwise modify the inner table to present the same data without nesting tables.
Identify row and column headers in data tables using
th elements, and mark layout tables with
role=presentation.
Data tables allow screen reader users to understand column and row relationships.
Layout tables read cells as a series of unrelated paragraphs with no tabular structure.
Without
th or
role, screen readers apply heuristics to decide whether a table is a layout table or data table.
These heuristics vary greatly between screen readers, and are affected by browser being used, window size,
and font size (so the outcome is very unpredictable without
th or
role).
If a data table has headers marked up using
td, then change these to
th.
If a data table has no headers, add
th elements describing each row and/or column.
If the table is only used for layout add
role=presentation to the
table element.
Impact on users:
JAWS Reading: Treats tables without th and role as layout tables if the table contains cells above or below certain pixel sizes. This measurement is affected by browser window size, browser font size, and the browser used. NVDA Reading: Applies a layout table heuristic to tables without th and role which varies depending on the browser used and on the window size in some circumstances. VoiceOver Reading: Uses a sophisticated heuristic on tables without th and role, which is similar (but not identical) to the heuristic used by NVDA with Firefox. ">
206 <tr bgcolor="#A9B8BF
">
207 <td><b><font color="41545D
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: 9ptfont-weight: 700
Some users find it hard to read light gray text on a white background, dark gray text on a black background and white text on a red background.
The contrast ratio should be 3.0 or more for 18 point text, or larger
The contrast ratio should be 3.0 or more for 14 point bold text, or larger
The contrast ratio should be 4.5 or more for all other text
"> ADULT</font></b></td>
208 <td><b><font color="41545D
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: 9ptfont-weight: 700
Some users find it hard to read light gray text on a white background, dark gray text on a black background and white text on a red background.
The contrast ratio should be 3.0 or more for 18 point text, or larger
The contrast ratio should be 3.0 or more for 14 point bold text, or larger
The contrast ratio should be 4.5 or more for all other text
"> FS</font></b></td>
209 <td><b><font color="41545D
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: 9ptfont-weight: 700
Some users find it hard to read light gray text on a white background, dark gray text on a black background and white text on a red background.
The contrast ratio should be 3.0 or more for 18 point text, or larger
The contrast ratio should be 3.0 or more for 14 point bold text, or larger
The contrast ratio should be 4.5 or more for all other text
"> RS</font></b></td>
210 <td><b><font color="41545D
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: 9ptfont-weight: 700
Some users find it hard to read light gray text on a white background, dark gray text on a black background and white text on a red background.
The contrast ratio should be 3.0 or more for 18 point text, or larger
The contrast ratio should be 3.0 or more for 14 point bold text, or larger
The contrast ratio should be 4.5 or more for all other text
"> DC</font></b></td>
211 <td><b><font color="41545D
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: 9ptfont-weight: 700
Some users find it hard to read light gray text on a white background, dark gray text on a black background and white text on a red background.
The contrast ratio should be 3.0 or more for 18 point text, or larger
The contrast ratio should be 3.0 or more for 14 point bold text, or larger
The contrast ratio should be 4.5 or more for all other text
"> ST</font></b></td>
212 </tr>
213 <tr>
214 <td><b><font color="41545D
"> Obelisks - Monkey, Monkey</font></b></td>
215 <td><font color="41545D
"> $20.90</font></td>
216 <td><font color="41545D
"> $20.90</font></td>
217 <td><font color="41545D
"> $20.90</font></td>
218 <td><font color="41545D
"> $20.90</font></td>
219 </tr>
220 <tr>
221 <td><b><font color="41545D
"> Les Garçons de la Plage</font></b></td>
222 <td><font color="41545D
"> $20.90</font></td>
223 <td><font color="41545D
"> $27.90</font></td>
224 <td><font color="41545D
"> $30.90</font></td>
225 <td><font color="41545D
"> $33.90</font></td>
226 </tr>
227 <tr>
228 <td colspan="5" bgcolor="A9B8BF
"> <b><font color="41545D
"> <font face="verdana
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: 9ptfont-weight: 700
Some users find it hard to read light gray text on a white background, dark gray text on a black background and white text on a red background.
The contrast ratio should be 3.0 or more for 18 point text, or larger
The contrast ratio should be 3.0 or more for 14 point bold text, or larger
The contrast ratio should be 4.5 or more for all other text
"> Concession</font></font></b></td>
229 </tr>
230 <tr>
231 <td><b><font color="41545D
"> Obelisks - Monkey, Monkey</font></b></td>
232 <td><font color="41545D
"> $20.90</font></td>
233 <td><font color="41545D
"> $20.90</font></td>
234 <td><font color="41545D
"> $20.90</font></td>
235 <td><font color="41545D
"> $20.90</font></td>
236 </tr>
237 <tr>
238 <td><b><font color="41545D
"> Les Garçons de la Plage</font></b></td>
239 <td><font color="41545D
"> $20.90</font></td>
240 <td><font color="41545D
"> $27.90</font></td>
241 <td><font color="41545D
"> $30.90</font></td>
242 <td><font color="41545D
"> $33.90</font></td>
243 </tr>
244 <tr bgcolor="#A9B8BF
">
245 <td colspan="5"><b><font color="41545D
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: 9ptfont-weight: 700
Some users find it hard to read light gray text on a white background, dark gray text on a black background and white text on a red background.
The contrast ratio should be 3.0 or more for 18 point text, or larger
The contrast ratio should be 3.0 or more for 14 point bold text, or larger
The contrast ratio should be 4.5 or more for all other text
"> Group (5 or more)</font></b></td>
246 </tr>
247 <tr>
248 <td><b><font color="41545D
"> Obelisks - Monkey, Monkey</font></b></td>
249 <td><font color="41545D
"> $14.90</font></td>
250 <td><font color="41545D
"> $14.90</font></td>
251 <td><font color="41545D
"> $14.90</font></td>
252 <td><font color="41545D
"> $14.90</font></td>
253 </tr>
254 <tr>
255 <td><b><font color="41545D
"> Les Garçons de la Plage</font></b></td>
256 <td><font color="41545D
"> $14.90</font></td>
257 <td><font color="41545D
"> $20.90</font></td>
258 <td><font color="41545D
"> $22.90</font></td>
259 <td><font color="41545D
"> $23.90</font></td>
260 </tr>
261 </table>
262 <table style="border:1px dashed silver;border-bottom:none;margin-top: 25px;" bgColor=#ededed width=
This page uses nested tables, which do not make sense when read in a screen reader.
Add role='presentation' if the inner table is a layout table, otherwise modify the inner table to present the same data without nesting tables.
Identify row and column headers in data tables using
th elements, and mark layout tables with
role=presentation.
Data tables allow screen reader users to understand column and row relationships.
Layout tables read cells as a series of unrelated paragraphs with no tabular structure.
Without
th or
role, screen readers apply heuristics to decide whether a table is a layout table or data table.
These heuristics vary greatly between screen readers, and are affected by browser being used, window size,
and font size (so the outcome is very unpredictable without
th or
role).
If a data table has headers marked up using
td, then change these to
th.
If a data table has no headers, add
th elements describing each row and/or column.
If the table is only used for layout add
role=presentation to the
table element.
Impact on users:
JAWS Reading: Treats tables without th and role as layout tables if the table contains cells above or below certain pixel sizes. This measurement is affected by browser window size, browser font size, and the browser used. NVDA Reading: Applies a layout table heuristic to tables without th and role which varies depending on the browser used and on the window size in some circumstances. VoiceOver Reading: Uses a sophisticated heuristic on tables without th and role, which is similar (but not identical) to the heuristic used by NVDA with Firefox. 600px>
263 <tr><td align="center
">
264 <table width="550px" cellpadding="0" cellspacing="0" border="0
This page uses nested tables, which do not make sense when read in a screen reader.
Add role='presentation' if the inner table is a layout table, otherwise modify the inner table to present the same data without nesting tables.
Identify row and column headers in data tables using
th elements, and mark layout tables with
role=presentation.
Data tables allow screen reader users to understand column and row relationships.
Layout tables read cells as a series of unrelated paragraphs with no tabular structure.
Without
th or
role, screen readers apply heuristics to decide whether a table is a layout table or data table.
These heuristics vary greatly between screen readers, and are affected by browser being used, window size,
and font size (so the outcome is very unpredictable without
th or
role).
If a data table has headers marked up using
td, then change these to
th.
If a data table has no headers, add
th elements describing each row and/or column.
If the table is only used for layout add
role=presentation to the
table element.
Impact on users:
JAWS Reading: Treats tables without th and role as layout tables if the table contains cells above or below certain pixel sizes. This measurement is affected by browser window size, browser font size, and the browser used. NVDA Reading: Applies a layout table heuristic to tables without th and role which varies depending on the browser used and on the window size in some circumstances. VoiceOver Reading: Uses a sophisticated heuristic on tables without th and role, which is similar (but not identical) to the heuristic used by NVDA with Firefox. "> <tr>
265 <td valign="middle" align="right" width="430px" style="border:0px;margin:0px;padding:0px;
"> <DIV>Buy tickets by phoning the M-u-s-i-c line ---- get your tickets now!: </DIV></td>
266 <td valign="middle" align="left" width="120px" style="border:0px;margin:0px;padding:0px;
"> <img src="./img/telefon_lightgrey_bg.gif" alt="music line phone number" border="0" valign="absmiddle
Attribute
valign not allowed on element.
"> </td>
267 </tr></table>
268 </td></tr>
269 <tr bgcolor="#ffffff"
>
270 <td style="padding:20px 5px 5px 5px"><div style="text-align: center;"><font size="4
"> <b>Citylights Terms and Conditions</b></font></div><p id="terms" align="justify
"> <
Use bold text sparingly - for one or two words or a short phrase.
Keep runs of bold text to less than 70 characters.
b> <br><br>[1] YOU AGREE THROUGH THE ACT OF CALLING THE M-U-S-I-C LINE OR BY READING ANY PART OF THESE TERMS AND CONDITIONS THAT YOU WILL NOT, NOW OR EVER, (A) TRANSMIT ANY MATERIAL TO ANY PERSON, LIVING OR DEAD, THAT MAY BE DEEMED BY THAT PERSON TO BE DEFAMATORY, HARMFUL, UNLAWFUL, ARGUMENTATIVE OR CONFUSING, AND THAT FURTHERMORE (B) ANY RESEMBLANCE BETWEEN YOURSELF OR YOUR FAMILY AND ANY PERSONS, VEGETABLES OR MUSICAL INSTRUMENTS LIVING, DEAD OR OTHER FEATURED ON THE CITYLIGHTS WEBSITE IS ENTIRELY UNINTENTIONAL AND THAT WHERE SUCH A RESEMBLANCE MAY OCCUR THAT YOU WILL TAKE IMMEDIATE ACTION TO PREVENT SUCH RESEMBLANCE REOCCURRING.<BR><BR>[2] CITYLIGHTS SHALL NOT BE LIABLE TO YOU FOR ANY DAMAGES OR LOSS OF REVENUE, GOODWILL, ENTHUSIASM OR SKIN TONE ARISING OUT OF OR IN CONNECTION WITH ANY USE OR OTHER INTERACTION WITH (A) THE CITYLIGHTS WEBSITES, (B) REVIEWS OF THE CITYLIGHTS WEBSITE, (C) ANY EMPLOYEES OR POTENTIAL EMPLOYEES OF CITYLIGHTS PAST OR PRESENT OR (D) ANY WEBSITE LINKING TO OR LINKED FROM THE CITYLIGHTS WEBSITE, WHETHER DIRECTLY OR THROUGH OTHER WEBSITES.<BR><BR>[3] REMEDIES. <
Avoid underlined text - people will click on it and think it's a broken link.
Use something other than underlining for highlighting text, because it looks like a link, and users become
frustrated when the "link" does not work.
U> SINCE CITYLIGHTS WOULD BE IRREPARABLY DAMAGED TO AN UNFORESEEABLE DEGREE IF SECTIONS [1] AND [2] WERE NOT SPECIFICALLY ENFORCED, CITYLIGHTS WILL BE ENTITLED WITHOUT BOND, OTHER SECURITY OR PROOF OF DAMAGES, TO APPROPRIATE EQUITABLE REMEDIES WITH RESPECT TO BREACHES OF SUCH SECTIONS, IN ADDITION TO ANY OTHER AVAILABLE REMEDIES.</u></b></p></td>
271 </tr>
272 </table>
273 <p> </p>
274 </TD>
275 </TR>
276 </TABLE>
277 <TABLE WIDTH=780px HEIGHT=17px BORDER=0px CELLSPACING=0px CELLPADDING=0px BGCOLOR=
This page uses nested tables, which do not make sense when read in a screen reader.
Add role='presentation' if the inner table is a layout table, otherwise modify the inner table to present the same data without nesting tables.
Identify row and column headers in data tables using
th elements, and mark layout tables with
role=presentation.
Data tables allow screen reader users to understand column and row relationships.
Layout tables read cells as a series of unrelated paragraphs with no tabular structure.
Without
th or
role, screen readers apply heuristics to decide whether a table is a layout table or data table.
These heuristics vary greatly between screen readers, and are affected by browser being used, window size,
and font size (so the outcome is very unpredictable without
th or
role).
If a data table has headers marked up using
td, then change these to
th.
If a data table has no headers, add
th elements describing each row and/or column.
If the table is only used for layout add
role=presentation to the
table element.
Impact on users:
JAWS Reading: Treats tables without th and role as layout tables if the table contains cells above or below certain pixel sizes. This measurement is affected by browser window size, browser font size, and the browser used. NVDA Reading: Applies a layout table heuristic to tables without th and role which varies depending on the browser used and on the window size in some circumstances. VoiceOver Reading: Uses a sophisticated heuristic on tables without th and role, which is similar (but not identical) to the heuristic used by NVDA with Firefox. Attribute
height not allowed on element.
#EDEDED>
278 <TR HEIGHT=
Attribute
height not allowed on element.
17px>
279 <TD ALIGN=
RIGHT> <FONT COLOR=BLACK FACE=Verdana SIZE=
Use at least a 12-point font on all web pages.
For users over age 65, it may be better to use at least fourteen-point fonts.
Never use less than nine-point font on a Web site.
The following are all smaller than 12 point:
<p style="font-size: 11pt;" >
<p style="font-size: 15px;" >
<p style="font-size: small;" >
<font size="2" >
<font size="-1" >
1> <a rel="Copyright" href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright
Ensure that text and background colors have a 7:1 contrast ratio.
The text color to background color contrast ratio after composition is: 4.98 with
color: background: font-size: 9ptfont-weight: 400
Some users find it hard to read light gray text on a white background, dark gray text on a black background and white text on a red background.
The contrast ratio should be 4.5 or more for 18 point text, or larger
The contrast ratio should be 4.5 or more for 14 point bold text, or larger
The contrast ratio should be 7.0 or more for all other text
"> Copyright</a> © 2012 <a href="https://www.w3.org/"><acronym title="World Wide Web Consortium
Ensure that text and background colors have a 7:1 contrast ratio.
The text color to background color contrast ratio after composition is: 4.98 with
color: background: font-size: 9ptfont-weight: 400
Some users find it hard to read light gray text on a white background, dark gray text on a black background and white text on a red background.
The contrast ratio should be 4.5 or more for 18 point text, or larger
The contrast ratio should be 4.5 or more for 14 point bold text, or larger
The contrast ratio should be 7.0 or more for all other text
"> W3C</acronym></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology
Ensure that text and background colors have a 7:1 contrast ratio.
The text color to background color contrast ratio after composition is: 4.98 with
color: background: font-size: 9ptfont-weight: 400
Some users find it hard to read light gray text on a white background, dark gray text on a black background and white text on a red background.
The contrast ratio should be 4.5 or more for 18 point text, or larger
The contrast ratio should be 4.5 or more for 14 point bold text, or larger
The contrast ratio should be 7.0 or more for all other text
"> MIT</acronym></a>, <a href="http://www.ercim.org/"><acronym title="European Research Consortium for Informatics and Mathematics
Ensure that text and background colors have a 7:1 contrast ratio.
The text color to background color contrast ratio after composition is: 4.98 with
color: background: font-size: 9ptfont-weight: 400
Some users find it hard to read light gray text on a white background, dark gray text on a black background and white text on a red background.
The contrast ratio should be 4.5 or more for 18 point text, or larger
The contrast ratio should be 4.5 or more for 14 point bold text, or larger
The contrast ratio should be 7.0 or more for all other text
"> ERCIM</acronym></a>, <a href="http://www.keio.ac.jp/
Ensure that text and background colors have a 7:1 contrast ratio.
The text color to background color contrast ratio after composition is: 4.98 with
color: background: font-size: 9ptfont-weight: 400
Some users find it hard to read light gray text on a white background, dark gray text on a black background and white text on a red background.
The contrast ratio should be 4.5 or more for 18 point text, or larger
The contrast ratio should be 4.5 or more for 14 point bold text, or larger
The contrast ratio should be 7.0 or more for all other text
"> Keio</a>)</FONT></TD>
280 </TR>
281 </TABLE>
282 <TD WIDTH=10px BACKGROUND=
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
Attribute
background not allowed on element.
./img/border_right.gif> <IMG SRC=./img/border_right.gif WIDTH=
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. 10px> </TD>
283 </TR>
284 <TR HEIGHT=
Attribute
height not allowed on element.
10px>
285 <TD WIDTH=10px HEIGHT=10px BACKGROUND=
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
Attribute
background not allowed on element.
./img/border_bottom_left.gif> <IMG SRC=./img/border_bottom_left.gif WIDTH=10px HEIGHT=
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. 10px> </TD>
286 <TD WIDTH=780px HEIGHT=10px BACKGROUND=
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
Attribute
background not allowed on element.
./img/border_bottom.gif> <IMG SRC=./img/border_bottom.gif HEIGHT=
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. 10px> </TD>
287 <TD WIDTH=10px HEIGHT=10px BACKGROUND=
Use background images sparingly and make sure they are simple, especially behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates.
Attribute
background not allowed on element.
./img/border_bottom_right.gif> <IMG SRC=./img/border_bottom_right.gif WIDTH=10px HEIGHT=
img elements must have an accessible name.
Add an
alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use
alt="" without any global ARIA attributes.
Do not use
alt text containing only spaces since that's voiced as an unlabeled image.
Impact on users:
NVDA 2023.3 Chrome 120 Windows 10 Reading: Image ignored. NVDA 2023.3 FF 115 Windows 10 Reading: Image ignored. NVDA 2023.3 Edge 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Chrome 120 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 FF 115 Windows 10 Reading: Image ignored. JAWS 2023.2311.34 Edge 120 Windows 10 Reading: Image ignored. VoiceOver macOS 13.6 Safari 16.6 macOS 13.6.0 Reading: Image filename read out. VoiceOver iOS 16.6 Safari iOS 16.6 iOS 16.6.1 Touch: Image filename read out, along with OCR text from image. 10px> </TD>
288 </TR>
289 </TABLE>
290 </TD></TR><
Stray end tag
tr.
/TR> </TABLE>
291 </div>
292 <div id="meta-footer" class="meta">
293 <hr>
294 <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>
295 <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>
296 <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>
297 </div>
298 <!-- Piwik -->
299 <script type="text/javascript">
300 var _paq = _paq || [];
301 _paq.push(["setDomains", ["*.www.w3.org/WAI"]]);
302 _paq.push(['trackPageView']);
303 _paq.push(['enableLinkTracking']);
304 (function() {
305 var u="//www.w3.org/analytics/piwik/";
306 _paq.push(['setTrackerUrl', u+'piwik.php']);
307 _paq.push(['setSiteId', 328]);
308 var d=document, g=d.createElement('script'),
309 s=d.getElementsByTagName('script')[0];
310 g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js';
311 s.parentNode.insertBefore(g,s);
312 })();
313 </script>
314 <noscript><p><img src="//www.w3.org/analytics/piwik/piwik.php?idsite=328"
315 style="border:0;" alt=""
This link is broken. The page could not be found on the target web server.
Broken link: https://www.w3.org/analytics/piwik/piwik.php?idsite=328 404 Not Found
Fixing this depends on how the link became broken:
The link has been mistyped and should be fixed
The destination page has moved and the link should be updated
The destination page no longer exists and the link should be removed
A file has been accidentally deleted and should be replaced
/> </p></noscript>
316 <!-- End Piwik Code -->
317</body>
318</html>
Issues: