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 in IE, Firefox and most other browsers. This means pages may look different in different browsers.
<html ><head><title>Welcome ... Page]</title><style>...</style>...</head>...</html>
Add a
DOCTYPE statement to the top of the document.
No meta description tag found. Use a description tag that accurately describes the contents of a web page.
<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! [Inaccessible News Page]</TITLE> <STYLE>
4 td {
5 color: #000000;
6 text-decoration: none;
7 font: 15px/17px "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 padding:
12 0
6 0;
15 margin:0;
16 }
17 #main div {
18 padding:10px
19 }
20 #main a {
21 color: #226C8E;
22 text-decoration: none;
23 }
24 #main a:hover, a:active, a
Unknown pseudo-element or pseudo-class name.
focused
The :pseudo-class or ::pseudo-element name name may be misspelled or not yet standardized.
Line 24 CSS Validation
:focused, a:visited {
25 color: #226C8E;
26 text-decoration: none;
27 }
28 #data td {
29 border:none;
30 }
31 </STYLE>
32 <LINK HREF="../css/meta.css" rel="stylesheet" type="text/css">
33 <SCRIPT type="text/javascript">
34 function ChangeColor(id, colour){
35 document.getElementById(id).style.backgroundColor=colour;
36 }
37 function switchImage(imgName, imgSrc){
38 if (document.images){
39 if (imgSrc != "none"){
40 document.images[imgName].src = imgSrc;
41 }
42 }
43 }
44 </SCRIPT>
45 <NOSCRIPT><B><FONT COLOR=RED>This page uses scripts!!!</FONT></B></NOSCRIPT>
46 <script src="../js/onload.js" type="text/javascript"></script>
47 </HEAD>
48
The
alink attribute on the
body element is obsolete.
Use CSS instead.
<body text='#000000' bgcolor='#d7d7cd' leftmargin='0px' topmargin='0px' marginwidth='0px' marginheight='0px' link='#226c8e' vlink='#226c8e' alink='#226c8e' >...</body> The
bgcolor attribute on the
body element is obsolete.
Use CSS instead.
<body text='#000000' bgcolor='#d7d7cd' leftmargin='0px' topmargin='0px' marginwidth='0px' marginheight='0px' link='#226c8e' vlink='#226c8e' alink='#226c8e'>...</body> The
link attribute on the
body element is obsolete.
Use CSS instead.
<body text='#000000' bgcolor='#d7d7cd' leftmargin='0px' topmargin='0px' marginwidth='0px' marginheight='0px' link='#226c8e' vlink='#226c8e' alink='#226c8e'>...</body> The
marginheight attribute on the
body element is obsolete.
Use CSS instead.
<body text='#000000' bgcolor='#d7d7cd' leftmargin='0px' topmargin='0px' marginwidth='0px' marginheight='0px' link='#226c8e' vlink='#226c8e' alink='#226c8e'>...</body> The
leftmargin attribute on the
body element is obsolete.
Use CSS instead.
<body text='#000000' bgcolor='#d7d7cd' leftmargin='0px' topmargin='0px' marginwidth='0px' marginheight='0px' link='#226c8e' vlink='#226c8e' alink='#226c8e'>...</body> The
topmargin attribute on the
body element is obsolete.
Use CSS instead.
<body text='#000000' bgcolor='#d7d7cd' leftmargin='0px' topmargin='0px' marginwidth='0px' marginheight='0px' link='#226c8e' vlink='#226c8e' alink='#226c8e'>...</body> The
marginwidth attribute on the
body element is obsolete.
Use CSS instead.
<body text='#000000' bgcolor='#d7d7cd' leftmargin='0px' topmargin='0px' marginwidth='0px' marginheight='0px' link='#226c8e' vlink='#226c8e' alink='#226c8e'>...</body> The
text attribute on the
body element is obsolete.
Use CSS instead.
<body text='#000000' bgcolor='#d7d7cd' leftmargin='0px' topmargin='0px' marginwidth='0px' marginheight='0px' link='#226c8e' vlink='#226c8e' alink='#226c8e'>...</body> The
vlink attribute on the
body element is obsolete.
Use CSS instead.
<body text='#000000' bgcolor='#d7d7cd' leftmargin='0px' topmargin='0px' marginwidth='0px' marginheight='0px' link='#226c8e' vlink='#226c8e' alink='#226c8e'>...</body> <BODY TEXT=#000000 BGCOLOR=#D7D7CD LEFTMARGIN=0px TOPMARGIN=0px MARGINWIDTH=0px MARGINHEIGHT=0px LINK=#226C8E VLINK=#226C8E ALINK=#226C8E>
49 <div id="meta-header">
50 <p id="skipnav"><a href="#page">Skip to inaccessible demo page</a></p>
51 <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">
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 }
<img alt="Web Accessibility Initiative (WAI) logo" src="../img/wai.png" height="48"> </a></p>
52 <h1><span class="subhead">Inaccessible News Page</span><span class="hidden"> -</span> Before and After Demonstration</h1>
53
Use at least a 12-point font on all web pages.
font-size: 10.80pt<p class='subline'>Improving a Web site ... Guidelines (WCAG) 2.0 </p>
For users over age 65, it may be better to use at least fourteen-point fonts.
Never use less than nine-point font on a Web site.
The following are all smaller than 12 point:
<p style="font-size: 11pt;" >
<p style="font-size: 15px;" >
<p style="font-size: small;" >
<font size="2" >
<font size="-1" >
<p class="subline"> Improving a Web site using Web Content Accessibility Guidelines (WCAG) 2.0</p>
54 <div id="mnav" class="inaccessible">
55 <ul>
56 <li class="first"><a href="../Overview.html">Overview</a></li>
57 <li class="first"><a href="home.html">Home</a></li>
58 <li class="current"><span class="hidden">Current location: </span>News
59 <div class="subnav"><ul>
60 <li class="inaccessible"><strong>Inaccessible:</strong><a class="page current"><span class="hidden">Inaccessible </span>News Page</a><a href="./reports/news.html" class="report"><span class="hidden">Inaccessible News Page </span> Report</a></li>
61 <li class="accessible"><strong>Accessible:</strong><a href="../after/news.html" class="page"><span class="hidden">Accessible </span>News Page</a><a href="../after/reports/news.html" class="report"><span class="hidden">Accessible News Page </span> Report</a></li>
62 </ul><a href="./annotated/news.html" class="annotoggle">Show <br>Annotations</a></div>
63 </li>
64 <li><a href="tickets.html">Tickets</a></li>
65 <li><a href="survey.html">Survey</a></li>
66 <li><a href="template.html">Template</a></li>
67 </ul>
68 </div>
69 </div>
70 <div id="page">
71 <p class="skip" id="startcontent">Demo starts here</p>
72
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. <TABLE WIDTH=100% BORDER=0px CELLSPACING=0px CELLPADDING=0px BGCOLOR=#D7D7CD>
<TR VALIGN=MIDDLE>
<TD WIDTH=100% ALIGN=CENTER>
73
This page uses nested tables, which do not make sense when read in a screen reader.
<table width='800px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table> Add role='presentation' if the inner table is a layout table, otherwise modify the inner table to present the same data without nesting tables.
Identify row and column headers in data tables using
th elements, and mark layout tables with
role=presentation.
<table width='800px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table> Data tables allow screen reader users to understand column and row relationships.
Layout tables read cells as a series of unrelated paragraphs with no tabular structure.
Without
th or
role, screen readers apply heuristics to decide whether a table is a layout table or data table.
These heuristics vary greatly between screen readers, and are affected by browser being used, window size,
and font size (so the outcome is very unpredictable without
th or
role).
If a data table has headers marked up using
td, then change these to
th.
If a data table has no headers, add
th elements describing each row and/or column.
If the table is only used for layout add
role=presentation to the
table element.
Impact on users:
JAWS Reading: Treats tables without th and role as layout tables if the table contains cells above or below certain pixel sizes. This measurement is affected by browser window size, browser font size, and the browser used. NVDA Reading: Applies a layout table heuristic to tables without th and role which varies depending on the browser used and on the window size in some circumstances. VoiceOver Reading: Uses a sophisticated heuristic on tables without th and role, which is similar (but not identical) to the heuristic used by NVDA with Firefox. <TABLE WIDTH=800px BORDER=0px CELLSPACING=0px CELLPADDING=0px BGCOLOR=WHITE>
74
Attribute
height not allowed on element.
<TR HEIGHT=10px>
75
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.
<TD WIDTH=10px BACKGROUND=./img/border_left_top.gif>
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'> <IMG SRC=./img/border_left_top.gif WIDTH=10px HEIGHT=10px> </TD>
76
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.
<TD WIDTH=780px BACKGROUND=./img/border_top.gif>
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'> <IMG SRC=./img/border_top.gif HEIGHT=10px> </TD>
77
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.
<TD WIDTH=10px BACKGROUND=./img/border_right_top.gif>
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'> <IMG SRC=./img/border_right_top.gif WIDTH=10px HEIGHT=10px> </TD>
78 </TR>
79 <TR>
80
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.
<TD WIDTH=10px BACKGROUND=./img/border_left.gif>
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'> <IMG SRC=./img/border_left.gif WIDTH=10px> </TD>
81
<TD WIDTH=780px ALIGN=CENTER>
82
This page uses nested tables, which do not make sense when read in a screen reader.
<table width='780px' height='144px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table> Add role='presentation' if the inner table is a layout table, otherwise modify the inner table to present the same data without nesting tables.
Identify row and column headers in data tables using
th elements, and mark layout tables with
role=presentation.
<table width='780px' height='144px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table> Data tables allow screen reader users to understand column and row relationships.
Layout tables read cells as a series of unrelated paragraphs with no tabular structure.
Without
th or
role, screen readers apply heuristics to decide whether a table is a layout table or data table.
These heuristics vary greatly between screen readers, and are affected by browser being used, window size,
and font size (so the outcome is very unpredictable without
th or
role).
If a data table has headers marked up using
td, then change these to
th.
If a data table has no headers, add
th elements describing each row and/or column.
If the table is only used for layout add
role=presentation to the
table element.
Impact on users:
JAWS Reading: Treats tables without th and role as layout tables if the table contains cells above or below certain pixel sizes. This measurement is affected by browser window size, browser font size, and the browser used. NVDA Reading: Applies a layout table heuristic to tables without th and role which varies depending on the browser used and on the window size in some circumstances. VoiceOver Reading: Uses a sophisticated heuristic on tables without th and role, which is similar (but not identical) to the heuristic used by NVDA with Firefox. <TABLE WIDTH=780px HEIGHT=144px BORDER=0px CELLSPACING=0px CELLPADDING=0px BGCOLOR=WHITE>
83
Attribute
height not allowed on element.
<TR HEIGHT=86px>
84
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.
<TD WIDTH=443px BACKGROUND=./img/top_logo_next.gif VALIGN=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>
85
<TD WIDTH=24px VALIGN=MIDDLE>
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'> <IMG SRC=./img/top_logo_next_end.gif WIDTH=24px HEIGHT=86px> </TD>
86
<TD WIDTH=128px VALIGN=MIDDLE>
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'> <IMG SRC=./img/top_weather.gif WIDTH=128px HEIGHT=86px> </TD>
87
<TD WIDTH=22px VALIGN=MIDDLE>
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'> <IMG SRC=./img/top_logo_next_start.gif WIDTH=22px HEIGHT=86px> </TD>
88
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.
<TD WIDTH=163px BACKGROUND=./img/top_logo_next.gif ALIGN=CENTER VALIGN=MIDDLE>
89
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.
<SELECT ONCHANGE="location.href = this.value; ">
90 <OPTION SELECTED>QUICKMENU ---->
91 <OPTION VALUE="../offsite.html">Broadcasting
92 <OPTION VALUE="../offsite.html">Education
93 <OPTION VALUE="../offsite.html">Electricity
94 <OPTION VALUE="../offsite.html">Fire service
95 <OPTION VALUE="../offsite.html">Gas service
96 <OPTION VALUE="../offsite.html">Health care
97 <OPTION VALUE="../offsite.html">Police service
98 <OPTION VALUE="../offsite.html">Public Libraries
99 <OPTION VALUE="../offsite.html">Social services
100 <OPTION VALUE="../offsite.html">Social housing
101 <OPTION VALUE="../offsite.html">Telecommunications
102 <OPTION VALUE="../offsite.html">Town planning
103 <OPTION VALUE="../offsite.html">Transportation
104 <OPTION VALUE="../offsite.html">Waste management
105 <OPTION VALUE="../offsite.html">Water services
106 </SELECT>
107 </TD>
108 </TR>
109
Attribute
height not allowed on element.
<TR HEIGHT=7px>
110
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.
<TD WIDTH=780px BACKGROUND=./img/mark.gif COLSPAN=5>
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'> <IMG SRC=./img/mark.gif WIDTH=158px HEIGHT=7px> </TD>
111 </TR>
112
Attribute
height not allowed on element.
<TR HEIGHT=25px>
113 <TD COLSPAN=5>
114
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. <TABLE WIDTH=780px BORDER=0px CELLSPACING=0px CELLPADDING=0px>
115
Attribute
height not allowed on element.
<TR HEIGHT=25px>
116
<TD BGCOLOR="#EDEDED" WIDTH=380px>
<FONT COLOR=BLACK FACE=Verdana SIZE=2> <B>Traffic:</B> Construction work on Main Road</FONT></TD>
117
<TD BGCOLOR="#FFFFFF" ALIGN=RIGHT ID="WEATHER">
<FONT COLOR=BLACK FACE=Verdana SIZE=2> <B>Today:</B>
118
<SCRIPT LANGUAGE="JavaScript">
119 var now = new Date();
120 var days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
121 var months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
122 var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
123 function fourdigits(number) {
124 return (number < 1000) ? number + 1900 : number;
125 }
126 today = days[now.getDay()] + " " + date + " " + months[now.getMonth()] + " " + (fourdigits(now.getYear())) + ", Sunny, 23°C </FONT>";
127 document.all.WEATHER.setAttribute("BGCOLOR", "#EDEDED", 0);
128 document.write(today);
129 </SCRIPT><
Unclosed element
font.
/TD>
130 </TR>
131 </TABLE>
132 </TD>
133 </TR>
134
Attribute
height not allowed on element.
<TR HEIGHT=1px>
135
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.
<TD WIDTH=780px BACKGROUND=./img/marker2_w.gif COLSPAN=5>
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'> <IMG SRC=.img/marker2_w.gif WIDTH=78px HEIGHT=1px> </TD>
136 </TR>
137
Attribute
height not allowed on element.
<TR HEIGHT=25px>
138 <TD COLSPAN=5> </TD>
139 </TR>
140 </TABLE>
141
This page uses nested tables, which do not make sense when read in a screen reader.
<table width='780px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table> Add role='presentation' if the inner table is a layout table, otherwise modify the inner table to present the same data without nesting tables.
Identify row and column headers in data tables using
th elements, and mark layout tables with
role=presentation.
<table width='780px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table> Data tables allow screen reader users to understand column and row relationships.
Layout tables read cells as a series of unrelated paragraphs with no tabular structure.
Without
th or
role, screen readers apply heuristics to decide whether a table is a layout table or data table.
These heuristics vary greatly between screen readers, and are affected by browser being used, window size,
and font size (so the outcome is very unpredictable without
th or
role).
If a data table has headers marked up using
td, then change these to
th.
If a data table has no headers, add
th elements describing each row and/or column.
If the table is only used for layout add
role=presentation to the
table element.
Impact on users:
JAWS Reading: Treats tables without th and role as layout tables if the table contains cells above or below certain pixel sizes. This measurement is affected by browser window size, browser font size, and the browser used. NVDA Reading: Applies a layout table heuristic to tables without th and role which varies depending on the browser used and on the window size in some circumstances. VoiceOver Reading: Uses a sophisticated heuristic on tables without th and role, which is similar (but not identical) to the heuristic used by NVDA with Firefox. <TABLE WIDTH=780px BORDER=0px CELLSPACING=0px CELLPADDING=0px BGCOLOR=WHITE>
142
Attribute
width not allowed on element.
<TR WIDTH=780px>
143
<TD WIDTH=155px BGCOLOR=#E4E4E4 VALIGN=TOP>
144
This page uses nested tables, which do not make sense when read in a screen reader.
<table width='155px' border='0px' cellspacing='0px' cellpadding='0px'>...</table> Add role='presentation' if the inner table is a layout table, otherwise modify the inner table to present the same data without nesting tables.
Identify row and column headers in data tables using
th elements, and mark layout tables with
role=presentation.
<table width='155px' border='0px' cellspacing='0px' cellpadding='0px'>...</table> Data tables allow screen reader users to understand column and row relationships.
Layout tables read cells as a series of unrelated paragraphs with no tabular structure.
Without
th or
role, screen readers apply heuristics to decide whether a table is a layout table or data table.
These heuristics vary greatly between screen readers, and are affected by browser being used, window size,
and font size (so the outcome is very unpredictable without
th or
role).
If a data table has headers marked up using
td, then change these to
th.
If a data table has no headers, add
th elements describing each row and/or column.
If the table is only used for layout add
role=presentation to the
table element.
Impact on users:
JAWS Reading: Treats tables without th and role as layout tables if the table contains cells above or below certain pixel sizes. This measurement is affected by browser window size, browser font size, and the browser used. NVDA Reading: Applies a layout table heuristic to tables without th and role which varies depending on the browser used and on the window size in some circumstances. VoiceOver Reading: Uses a sophisticated heuristic on tables without th and role, which is similar (but not identical) to the heuristic used by NVDA with Firefox. <TABLE WIDTH=155px BORDER=0px CELLSPACING=0px CELLPADDING=0px>
145
Attribute
height not allowed on element.
<TR HEIGHT=1px>
146
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.
<TD WIDTH=155px BACKGROUND=./img/marker2_w.gif>
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'> <IMG SRC=./img/marker2_w.gif WIDTH=78px HEIGHT=1px> </TD>
147
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.
<TD WIDTH=1px BACKGROUND=./img/marker2_t.gif ROWSPAN=9 VALIGN=TOP>
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'> <IMG SRC=./img/marker2_t.gif WIDTH=1 HEIGHT=30px> </TD>
148 </TR>
149
Attribute
height not allowed on element.
<TR HEIGHT=34px>
150
<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')">
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.
<A HREF="javascript:location.href='home.html'; " onFocus="blur();">
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'> <img name="nav_home" src=./img/nav_home.gif width=88 height=27 hspace="15" border=0px> </a></TD>
151 </TR>
152
Attribute
height not allowed on element.
<TR HEIGHT=1px>
153
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.
<TD WIDTH=154px BACKGROUND=./img/marker2_w.gif>
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'> <IMG SRC=./img/marker2_w.gif WIDTH=78px HEIGHT=1px> </TD>
154 </TR>
155
Attribute
height not allowed on element.
<TR HEIGHT=34px>
156
<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')">
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.
<A HREF="javascript:location.href='news.html'; " ONFOCUS="blur();">
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'> <IMG SRC=./img/nav_news.gif name="nav_news" WIDTH=90 HEIGHT=21 hspace="12" BORDER=0px> </A></TD>
157 </TR>
158
Attribute
height not allowed on element.
<TR HEIGHT=1px>
159
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.
<TD WIDTH=154px BACKGROUND=./img/marker2_w.gif>
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'> <IMG SRC=./img/marker2_w.gif WIDTH=78px HEIGHT=1px> </TD>
160 </TR>
161
Attribute
height not allowed on element.
<TR HEIGHT=34px>
162
<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')">
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.
<A HREF="javascript:location.href='tickets.html'; " ONFOCUS="blur();">
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'> <IMG name="nav_facts" SRC=./img/nav_facts.gif WIDTH=105 HEIGHT=23 hspace="9" BORDER=0px> </A></TD>
163 </TR>
164
Attribute
height not allowed on element.
<TR HEIGHT=1px>
165
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.
<TD WIDTH=154px BACKGROUND=./img/marker2_w.gif>
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'> <IMG SRC=./img/marker2_w.gif WIDTH=78px HEIGHT=1px> </TD>
166 </TR>
167
Attribute
height not allowed on element.
<TR HEIGHT=34px>
168
<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')">
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.
<A HREF="javascript:location.href='survey.html'; " ONFOCUS="blur();">
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'> <IMG SRC=./img/nav_survey.gif name="nav_survey" WIDTH=107 HEIGHT=32 hspace="8" BORDER=0px> </A></TD>
169 </TR>
170
Attribute
height not allowed on element.
<TR HEIGHT=1px>
171
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.
<TD WIDTH=154px BACKGROUND=./img/marker2_w.gif>
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'> <IMG SRC=./img/marker2_w.gif WIDTH=78px HEIGHT=1px> </TD>
172 </TR>
173 </TABLE>
174 </TD>
175
<TD WIDTH=20px>
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'> <IMG SRC=./img/blank_5x5.gif WIDTH=20px HEIGHT=5px> </TD>
176
<TD WIDTH=625px HEIGHT="600px" VALIGN=TOP id="main">
177 <P class=headline>Citylights News</P>
178 <div style="width:100%;padding:0px;margin:0px;">
179 <div style="float:left;width:48%;padding:0px 0px 0px 0px;margin:0px;">
<font size="5" color="#FFFFFF">
<P class=headline> Heat wave linked to temperatures</P></font></div>
180 <div style="float:right; width: 48%;padding:0px 10px 0px 0px;margin:0px;">
<font size="7" color="#FFFFFF">
<P class=headline> Man Gets Nine Months in Violin Case</P></font></div>
181 </div>
182 <div style="clear:both;height:1px;padding:0px;margin:0px;">
183
Use at least a 12-point font on all web pages.
font-size: 11.25pt<div style='...'>After three years of ... a student to do the job." </div>
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" >
<div style="float:left; width:48%;padding:10px 0px 10px 0px;margin:0px;">After three years of effort city scientists now agree that the primary cause of the 2003 heatwave was hot air from our air conditioning units. "The study cost the city taxpayer under 10 million dollars" said Prof. Steve 'Call me Stephen' Wahoonie, of City University Public Expenditure on Science dept. "We had five top statisticians working on it: one to write the grant proposal, one to do the mathematical modelling, two to collaborate on the research paper, and one to hire a student to do the job."</div>
184
Use at least a 12-point font on all web pages.
font-size: 11.25pt<div style='float:right; width: ...'>As news of the ... Last year's ...</div>
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" >
<div style="float:right; width: 48%;padding:10px 10px 10px 0px;margin:0px;">As news of the conviction and sentencing of infamous violin thief Pasquale Ginkgo-Biloba reached city hall, Mayor Auberon 'Slim' Shadi stated that he was furious at the boring sentence handed down by the judge in the case, and is demanding a review of sentencing policy. This is not the first time that judges have come under fire for lenient sentencing in musical-instrument related cases. Last year's
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 href='../offsite.html'>trombone forgery debacle </a>Some users find it hard to read light gray text on a white background, dark gray text on a black background and white text on a red background.
The contrast ratio should be 4.5 or more for 18 point text, or larger
The contrast ratio should be 4.5 or more for 14 point bold text, or larger
The contrast ratio should be 7.0 or more for all other text
<a href="../offsite.html"> trombone forgery debacle</a> also resulted in a formal rebuke from the Mayor.</div>
185 </div>
186 <div style="clear:both;padding:0px;margin:0px;">
187
Use at least a 12-point font on all web pages.
font-size: 11.25pt<div style='...'>...</div>
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" >
<div style="float:left; width:48%;padding:10px 0px 10px 0px;margin:0px;">
<p class=headline align="center">
<font size="3"> Tough Wahoonie</font></p> "We soon realized that we were seeing a rise in temperatures every time a heatwave occurred. Also, the more air conditioning used, the bigger the heatwave. We knew it couldn't just be a coincidence, the match was 100%. Air conditioning was driving temperatures up, which in turn resulted in a heatwave," the Prof. explained. "It all comes from
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 href='../offsite.html'>the way that air conditioning works </a>Some users find it hard to read light gray text on a white background, dark gray text on a black background and white text on a red background.
The contrast ratio should be 4.5 or more for 18 point text, or larger
The contrast ratio should be 4.5 or more for 14 point bold text, or larger
The contrast ratio should be 7.0 or more for all other text
<a href="../offsite.html"> the way that air conditioning works</a>. Air conditioners produce cold air to go into the room
Use at least a 12-point font on all web pages.
font-size: 11.25pt<span style='font-style: italic;'>but also hot air ... to the outside </span>
For users over age 65, it may be better to use at least fourteen-point fonts.
Never use less than nine-point font on a Web site.
The following are all smaller than 12 point:
<p style="font-size: 11pt;" >
<p style="font-size: 15px;" >
<p style="font-size: small;" >
<font size="2" >
<font size="-1" >
<span style="font-style: italic; ">but also hot air that's ducted away to the outside</span>. We are recommending a new city ordinance restricting use of air conditioning to winter months, when the heat will come in useful."</div>
188 <div style="float:right; width: 48%;padding:10px 10px 10px 0px;margin:0px;">
189
This page uses nested tables, which do not make sense when read in a screen reader.
<table cellspacing='0' cellpadding='0' width='100%' border='0'>...</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 cellspacing='0' cellpadding='0' width='100%' border='0'>...</table> Data tables allow screen reader users to understand column and row relationships.
Layout tables read cells as a series of unrelated paragraphs with no tabular structure.
Without
th or
role, screen readers apply heuristics to decide whether a table is a layout table or data table.
These heuristics vary greatly between screen readers, and are affected by browser being used, window size,
and font size (so the outcome is very unpredictable without
th or
role).
If a data table has headers marked up using
td, then change these to
th.
If a data table has no headers, add
th elements describing each row and/or column.
If the table is only used for layout add
role=presentation to the
table element.
Impact on users:
JAWS Reading: Treats tables without th and role as layout tables if the table contains cells above or below certain pixel sizes. This measurement is affected by browser window size, browser font size, and the browser used. NVDA Reading: Applies a layout table heuristic to tables without th and role which varies depending on the browser used and on the window size in some circumstances. VoiceOver Reading: Uses a sophisticated heuristic on tables without th and role, which is similar (but not identical) to the heuristic used by NVDA with Firefox. <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0 >
190 <TBODY>
191 <TR>
192
Use background images sparingly and make sure they are simple, especially behind text.
<td valign='top' width='1' background='./img/marker2_t.gif' rowspan='9'>...</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.
<TD vAlign=top width=1 background=./img/marker2_t.gif rowSpan=9>
img elements must have an accessible name.
<img height='30' src='./img/marker2_t.gif' width='1'> 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 height='30' src='./img/marker2_t.gif' width='1'> <IMG height=30 src="./img/marker2_t.gif" width=1> </TD>
193
Use background images sparingly and make sure they are simple, especially behind text.
<td 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.
<TD background=./img/marker2_w.gif>
img elements must have an accessible name.
<img height='1' src='./img/marker2_w.gif' width='78'> 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 height='1' src='./img/marker2_w.gif' width='78'> <IMG height=1 src="./img/marker2_w.gif" width=78> </TD>
194 </TR>
195
<TR bgColor=#ededed>
196 <TD><p class=headline>
img elements must have an accessible name.
<img height='24' src='./img/headline_middle.gif' width='23' 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 height='24' src='./img/headline_middle.gif' width='23' align='absmiddle'> <IMG height=24 src="./img/headline_middle.gif" width=23 align="absmiddle">
Ensure that text and background colors have a 7:1 contrast ratio.
The text color to background color contrast ratio after composition is:
6.77 with
color: background: font-size: 12ptfont-weight: 400<font size='3'>Your Shout </font>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
<font size="3"> Your Shout</font></p></TD>
197
Use background images sparingly and make sure they are simple, especially behind text.
<td valign='top' width='1' background='./img/marker2_t.gif' rowspan='9'>...</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.
<TD vAlign=top width=1 background=./img/marker2_t.gif rowSpan=9>
img elements must have an accessible name.
<img height='30' src='./img/marker2_t.gif' width='1'> 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 height='30' src='./img/marker2_t.gif' width='1'> <IMG height=30 src="./img/marker2_t.gif" width=1> </TD>
198 </TR>
199 <TR>
200 <TD>
Use at least a 12-point font on all web pages.
font-size: 11.25pt<blockquote><a href='../offsite.html'>...</a>"Well I .... </blockquote>
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" >
<blockquote> <a href="../offsite.html">
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/smzappa2.jpg actual dimensions:
80 x 94 pixels.
<img src='./img/smzappa2.jpg' width='65' height='80' alt='picture of Clara F.' style='...' align='left'><img src="./img/smzappa2.jpg" width="65" height="80" alt="picture of Clara F." style="float:left; margin-right:5px;" align="left" /></a> "Well I think the Mayor's getting all heated up about nothing. Remember that 15 months is pretty much a lifetime to someone like me. But hey, I'm just a baby, and can't even vote, so you can ignore my opinion. And I can tell you that I'm standing for mayor on a ticket of infant suffrage".</blockquote> <strong> Clara F., 15 months, via email</strong><br/><br/></TD>
201 </TR>
202
Use background images sparingly and make sure they are simple, especially behind text.
<td width='275' 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.
td start tag in table body.
<TD width=275 background=./img/marker2_w.gif>
img elements must have an accessible name.
<img height='1' src='./img/marker2_w.gif' width='78'> 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 height='1' src='./img/marker2_w.gif' width='78'> <IMG height=1 src="./img/marker2_w.gif" width=78> </TD>
203 </TR>
204 </TBODY>
205 </TABLE>
206 </div>
207 </div>
208 <div style="clear:both;float:right; width: 47%;padding:10px 0px 10px 10px;margin:0px;">
209
This page uses nested tables, which do not make sense when read in a screen reader.
<table cellspacing='0' cellpadding='0' border='0' width='49%'>...</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 cellspacing='0' cellpadding='0' border='0' width='49%'>...</table> Data tables allow screen reader users to understand column and row relationships.
Layout tables read cells as a series of unrelated paragraphs with no tabular structure.
Without
th or
role, screen readers apply heuristics to decide whether a table is a layout table or data table.
These heuristics vary greatly between screen readers, and are affected by browser being used, window size,
and font size (so the outcome is very unpredictable without
th or
role).
If a data table has headers marked up using
td, then change these to
th.
If a data table has no headers, add
th elements describing each row and/or column.
If the table is only used for layout add
role=presentation to the
table element.
Impact on users:
JAWS Reading: Treats tables without th and role as layout tables if the table contains cells above or below certain pixel sizes. This measurement is affected by browser window size, browser font size, and the browser used. NVDA Reading: Applies a layout table heuristic to tables without th and role which varies depending on the browser used and on the window size in some circumstances. VoiceOver Reading: Uses a sophisticated heuristic on tables without th and role, which is similar (but not identical) to the heuristic used by NVDA with Firefox. <TABLE cellSpacing=0 cellPadding=0 border=0 width="49%">
210
Start tag
p seen in
table.
<p class=headline>
Start tag
font seen in
table.
<font size="5"> Lack of Brains Hinders Research<
Stray end tag
font.
/font> <
Stray end tag
p.
/p>
211 <TBODY>
212 <TR>
213
Use background images sparingly and make sure they are simple, especially behind text.
<td valign='top' width='1' background='./img/marker2_t.gif' rowspan='9'>...</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.
<TD vAlign=top width=1 background=./img/marker2_t.gif rowSpan=9>
img elements must have an accessible name.
<img height='30' src='./img/marker2_t.gif' width='1'> 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 height='30' src='./img/marker2_t.gif' width='1'> <IMG height=30 src="./img/marker2_t.gif" width=1> </TD>
214
Use background images sparingly and make sure they are simple, especially behind text.
<td 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.
<TD background=./img/marker2_w.gif>
img elements must have an accessible name.
<img height='1' src='./img/marker2_w.gif' width='78'> 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 height='1' src='./img/marker2_w.gif' width='78'> <IMG height=1 src="./img/marker2_w.gif" width=78> </TD>
215
Use background images sparingly and make sure they are simple, especially behind text.
<td valign='top' width='1' background='./img/marker2_t.gif' rowspan='9'>...</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.
<TD vAlign=top width=1 background=./img/marker2_t.gif rowSpan=9>
img elements must have an accessible name.
<img height='30' src='./img/marker2_t.gif' width='1'> 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 height='30' src='./img/marker2_t.gif' width='1'> <IMG height=30 src="./img/marker2_t.gif" width=1> </TD>
216 </TR>
217
<TR bgColor=#ededed>
218
<TD width="300"> <p class=headline>
img elements must have an accessible name.
<img height='24' src='./img/headline_middle.gif' width='23' 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 height='24' src='./img/headline_middle.gif' width='23' align='absmiddle'> <IMG height=24 src="./img/headline_middle.gif" width=23 align="absmiddle">
Ensure that text and background colors have a 7:1 contrast ratio.
The text color to background color contrast ratio after composition is:
6.77 with
color: background: font-size: 10.67ptfont-weight: 400<font size='2'>Brain donations at city hospital (by month) </font>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
Use at least a 12-point font on all web pages.
font-size: 10.67pt<font size='2'>Brain donations at city hospital (by month) </font>
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="2"> Brain donations at city hospital (by month)</font></p></TD>
219 </TR>
220 <TR>
221 <TD><DIV>
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/smzappa2.jpg actual dimensions:
80 x 94 pixels.
<img src='./img/chart1.jpg' alt='' width='270' height='150' border='0'><img src="./img/chart1.jpg" alt="" width="270" height="150" border="0"> </DIV></TD>
222 </TR>
223
Use background images sparingly and make sure they are simple, especially behind text.
<td width='275' 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.
td start tag in table body.
<TD width=275 background=./img/marker2_w.gif>
img elements must have an accessible name.
<img height='1' src='./img/marker2_w.gif' width='78'> 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 height='1' src='./img/marker2_w.gif' width='78'> <IMG height=1 src="./img/marker2_w.gif" width=78> </TD>
224 </TR>
225 </TBODY>
226 </TABLE>
227 </div>
228 <div style="float:left;width:48%;padding:10px 0px 10px 0px;margin-bottom:0px;">
229
<p class=headline align="center">
<font size="3"> Return To Sender</font></p>When questioned whether their results would be affected if air conditioners were found to be used on cold days, Wahoonie responded: "we had one guy in the lab whining those kinds of questions. 'Why are you doing this? Why are there all those discrepencies in the department accounts?', but it was after we had written up the results. We later found that he took 40% of his sick days on Mondays or Fridays. How convenient. Some people have no shame."</div>
230
This page uses nested tables, which do not make sense when read in a screen reader.
<table width='100%' style='float:right; ...'><tbody><tr>...</tr></tbody></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='100%' style='float:right; ...'><tbody><tr>...</tr></tbody></table> Data tables allow screen reader users to understand column and row relationships.
Layout tables read cells as a series of unrelated paragraphs with no tabular structure.
Without
th or
role, screen readers apply heuristics to decide whether a table is a layout table or data table.
These heuristics vary greatly between screen readers, and are affected by browser being used, window size,
and font size (so the outcome is very unpredictable without
th or
role).
If a data table has headers marked up using
td, then change these to
th.
If a data table has no headers, add
th elements describing each row and/or column.
If the table is only used for layout add
role=presentation to the
table element.
Impact on users:
JAWS Reading: Treats tables without th and role as layout tables if the table contains cells above or below certain pixel sizes. This measurement is affected by browser window size, browser font size, and the browser used. NVDA Reading: Applies a layout table heuristic to tables without th and role which varies depending on the browser used and on the window size in some circumstances. VoiceOver Reading: Uses a sophisticated heuristic on tables without th and role, which is similar (but not identical) to the heuristic used by NVDA with Firefox. <table width="100%" style="float:right; padding:0px;margin:0px">
231 <tr>
232
<TD width="48%">
233
This page uses nested tables, which do not make sense when read in a screen reader.
<table cellspacing='0' cellpadding='0' border='0' style='position: relative; ...'>...</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 cellspacing='0' cellpadding='0' border='0' style='position: relative; ...'>...</table> Data tables allow screen reader users to understand column and row relationships.
Layout tables read cells as a series of unrelated paragraphs with no tabular structure.
Without
th or
role, screen readers apply heuristics to decide whether a table is a layout table or data table.
These heuristics vary greatly between screen readers, and are affected by browser being used, window size,
and font size (so the outcome is very unpredictable without
th or
role).
If a data table has headers marked up using
td, then change these to
th.
If a data table has no headers, add
th elements describing each row and/or column.
If the table is only used for layout add
role=presentation to the
table element.
Impact on users:
JAWS Reading: Treats tables without th and role as layout tables if the table contains cells above or below certain pixel sizes. This measurement is affected by browser window size, browser font size, and the browser used. NVDA Reading: Applies a layout table heuristic to tables without th and role which varies depending on the browser used and on the window size in some circumstances. VoiceOver Reading: Uses a sophisticated heuristic on tables without th and role, which is similar (but not identical) to the heuristic used by NVDA with Firefox. <TABLE cellSpacing=0 cellPadding=0 border=0 style="position: relative; left: 15px;top:-15px;padding-top:0;margin-top:0">
234 <TBODY>
235 <TR>
236
Use background images sparingly and make sure they are simple, especially behind text.
<td valign='top' width='1' background='./img/marker2_t.gif' rowspan='9'>...</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.
<TD vAlign=top width=1 background=./img/marker2_t.gif rowSpan=9>
img elements must have an accessible name.
<img height='30' src='./img/marker2_t.gif' width='1'> 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 height='30' src='./img/marker2_t.gif' width='1'> <IMG height=30 src="./img/marker2_t.gif" width=1> </TD>
237
Use background images sparingly and make sure they are simple, especially behind text.
<td 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.
<TD background=./img/marker2_w.gif>
img elements must have an accessible name.
<img height='1' src='./img/marker2_w.gif' width='78'> 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 height='1' src='./img/marker2_w.gif' width='78'> <IMG height=1 src="./img/marker2_w.gif" width=78> </TD>
238
Use background images sparingly and make sure they are simple, especially behind text.
<td valign='top' width='1' background='./img/marker2_t.gif' rowspan='9'>...</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.
<TD vAlign=top width=1 background=./img/marker2_t.gif rowSpan=9>
img elements must have an accessible name.
<img height='30' src='./img/marker2_t.gif' width='1'> 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 height='30' src='./img/marker2_t.gif' width='1'> <IMG height=30 src="./img/marker2_t.gif" width=1> </TD>
239 </TR>
240
<TR bgColor=#ededed>
241 <TD>
img elements must have an accessible name.
<img height='24' src='./img/headline_middle.gif' width='23' 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 height='24' src='./img/headline_middle.gif' width='23' align='absmiddle'> <IMG height=24 src="./img/headline_middle.gif" width=23 align="absmiddle"> Air-Con Fact Finding Mission</TD>
242 </TR>
243 <TR>
244
<TD valign="top"> <DIV>
<img src="./img/blanca.jpg" alt="Mrs B. Wahoonie investigates shipping hot air to Australia" width="240" height="180" border="0"> </DIV></TD>
245 </TR>
246
Use background images sparingly and make sure they are simple, especially behind text.
<td width='240' 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.
td start tag in table body.
<TD width=240 background=./img/marker2_w.gif>
img elements must have an accessible name.
<img height='1' src='./img/marker2_w.gif' width='78'> 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 height='1' src='./img/marker2_w.gif' width='78'> <IMG height=1 src="./img/marker2_w.gif" width=78> </TD>
247 </TR>
248 </TBODY>
249 </TABLE>
250 </TD>
251
Use at least a 12-point font on all web pages.
font-size: 11.25pt<td width='60%' valign='top' style='padding-left:15px'>There .... <br>... ...</td>
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" >
<td width="60%" valign="top" style="padding-left:15px"> There has been a significant drop in brain donations as a result of the successful 'Slow Traffic, Safe Streets' policy, say city doctors. <br/> "Brain donations are essential" said Dr. Liam Colluspid of Central Hospital, at a press conference yesterday. "I must ask that the Mayor either dispenses with these road safety measures, or else that every concerned citizen should consider right now whether there are any brains they aren't making much use of at the moment, that they might like to drop off".<
No
p element in scope but a
p end tag seen.
/p> </td>
252 </tr>
253 </table>
254 <
Stray end tag
div.
/div>
255 </TD>
256 </TR>
257 </TABLE>
258
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. <TABLE WIDTH=780px HEIGHT=17px BORDER=0px CELLSPACING=0px CELLPADDING=0px BGCOLOR=#EDEDED>
259
Attribute
height not allowed on element.
<TR HEIGHT=17px>
260
<TD ALIGN=RIGHT>
<FONT COLOR=BLACK FACE=Verdana SIZE=1>
Ensure that text and background colors have a 7:1 contrast ratio.
The text color to background color contrast ratio after composition is:
4.98 with
color: background: font-size: 9ptfont-weight: 400<a rel='copyright' href='...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
<a rel="Copyright" href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright"> Copyright</a> © 2012 <a href="https://www.w3.org/">
Ensure that text and background colors have a 7:1 contrast ratio.
The text color to background color contrast ratio after composition is:
4.98 with
color: background: font-size: 9ptfont-weight: 400<acronym title='World Wide Web Consortium'>W3C </acronym>Some users find it hard to read light gray text on a white background, dark gray text on a black background and white text on a red background.
The contrast ratio should be 4.5 or more for 18 point text, or larger
The contrast ratio should be 4.5 or more for 14 point bold text, or larger
The contrast ratio should be 7.0 or more for all other text
<acronym title="World Wide Web Consortium"> W3C</acronym></a><sup>®</sup> (<a href="http://www.csail.mit.edu/">
Ensure that text and background colors have a 7:1 contrast ratio.
The text color to background color contrast ratio after composition is:
4.98 with
color: background: font-size: 9ptfont-weight: 400<acronym title='Massachusetts Institute of Technology'>MIT </acronym>Some users find it hard to read light gray text on a white background, dark gray text on a black background and white text on a red background.
The contrast ratio should be 4.5 or more for 18 point text, or larger
The contrast ratio should be 4.5 or more for 14 point bold text, or larger
The contrast ratio should be 7.0 or more for all other text
<acronym title="Massachusetts Institute of Technology"> MIT</acronym></a>, <a href="http://www.ercim.org/">
Ensure that text and background colors have a 7:1 contrast ratio.
The text color to background color contrast ratio after composition is:
4.98 with
color: background: font-size: 9ptfont-weight: 400<acronym title='European Research Consortium for Informatics and Mathematics'>ERCIM </acronym>Some users find it hard to read light gray text on a white background, dark gray text on a black background and white text on a red background.
The contrast ratio should be 4.5 or more for 18 point text, or larger
The contrast ratio should be 4.5 or more for 14 point bold text, or larger
The contrast ratio should be 7.0 or more for all other text
<acronym title="European Research Consortium for Informatics and Mathematics"> ERCIM</acronym></a>,
Ensure that text and background colors have a 7:1 contrast ratio.
The text color to background color contrast ratio after composition is:
4.98 with
color: background: font-size: 9ptfont-weight: 400<a href='http://www.keio.ac.jp/'>Keio </a>Some users find it hard to read light gray text on a white background, dark gray text on a black background and white text on a red background.
The contrast ratio should be 4.5 or more for 18 point text, or larger
The contrast ratio should be 4.5 or more for 14 point bold text, or larger
The contrast ratio should be 7.0 or more for all other text
<a href="http://www.keio.ac.jp/"> Keio</a>)</FONT></TD>
261 </TR>
262 </TABLE>
263
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.
<TD WIDTH=10px BACKGROUND=./img/border_right.gif>
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'> <IMG SRC=./img/border_right.gif WIDTH=10px> </TD>
264 </TR>
265
Attribute
height not allowed on element.
<TR HEIGHT=10px>
266
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.
<TD WIDTH=10px HEIGHT=10px BACKGROUND=./img/border_bottom_left.gif>
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'> <IMG SRC=./img/border_bottom_left.gif WIDTH=10px HEIGHT=10px> </TD>
267
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.
<TD WIDTH=780px HEIGHT=10px BACKGROUND=./img/border_bottom.gif>
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'> <IMG SRC=./img/border_bottom.gif HEIGHT=10px> </TD>
268
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.
<TD WIDTH=10px HEIGHT=10px BACKGROUND=./img/border_bottom_right.gif>
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'> <IMG SRC=./img/border_bottom_right.gif WIDTH=10px HEIGHT=10px> </TD>
269 </TR>
270 </TABLE>
271 </TD></TR><
Stray end tag
tr.
/TR> </TABLE>
272 </div>
273 <div id="meta-footer" class="meta">
274 <hr>
275 <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
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" >
<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/">
The
acronym element is obsolete. Use the
abbr element instead.
<acronym title='Web Accessibility Initiative: Training, Implementation, Education, Support'>WAI-TIES</acronym> <acronym title="Web Accessibility Initiative: Training, Implementation, Education, Support"> WAI-TIES</acronym></a> and <a href="https://www.w3.org/WAI/WAI-AGE/">
<acronym title="Web Accessibility Initiative: Ageing Education and Harmonisation"> WAI-AGE</acronym></a> projects, co-funded by the European Commission
<acronym title="Information Society Technologies"> IST</acronym> Programme. [see <a href="../acks.html">Acknowledgements</a>]</p>
276 <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
The
shape attribute on the
a element is obsolete.
For image maps, use the
area element instead of the
a element.
<a href='mailto:wai-eo-editors@w3.org' shape='rect' >wai-eo-editors@w3.org</a> <a href="mailto:wai-eo-editors@w3.org" shape="rect"> wai-eo-editors@w3.org</a></strong> (a publicly archived list) or
<a href="mailto:wai@w3.org" shape="rect"> wai@w3.org</a> (a WAI staff-only list).</p>
277 <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>
278 </div>
279 <!-- Piwik -->
280 <script type="text/javascript">
281 var _paq = _paq || [];
282 _paq.push(["setDomains", ["*.www.w3.org/WAI"]]);
283 _paq.push(['trackPageView']);
284 _paq.push(['enableLinkTracking']);
285 (function() {
286 var u="//www.w3.org/analytics/piwik/";
287 _paq.push(['setTrackerUrl', u+'piwik.php']);
288 _paq.push(['setSiteId', 328]);
289 var d=document, g=d.createElement('script'),
290 s=d.getElementsByTagName('script')[0];
291 g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js';
292 s.parentNode.insertBefore(g,s);
293 })();
294 </script>
295 <noscript><p><img src="//www.w3.org/analytics/piwik/piwik.php?idsite=328"
296 style="border:0;" alt="" /></p></noscript>
297 <!-- End Piwik Code -->
298</body>
299</html>
Issues: