|
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.
| 1.3.1 | |
| | | |
| <table width='100%' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='#d7d7cd'>...</table>
| Line 172 | |
| <table width='800px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table>
| Line 173 | |
| <table width='780px' height='144px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table>
| Line 182 | |
| <table width='780px' border='0px' cellspacing='0px' cellpadding='0px'>...</table>
| Line 214 | |
| <table width='780px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table>
| Line 241 | |
| https://www.w3.org/WAI/demos/bad/before/annotated/home.html | | |
| | | |
| <table width='100%' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='#d7d7cd'>...</table>
| Line 171 | |
| <table width='800px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table>
| Line 172 | |
| <table width='780px' height='144px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table>
| Line 181 | |
| <table width='780px' border='0px' cellspacing='0px' cellpadding='0px'>...</table>
| Line 213 | |
| <table width='780px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table>
| Line 240 | |
| https://www.w3.org/WAI/demos/bad/before/home.html | | |
| | | |
| <table width='100%' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='#d7d7cd'>...</table>
| Line 72 | |
| <table width='800px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table>
| Line 73 | |
| <table width='780px' height='144px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table>
| Line 82 | |
| <table width='780px' border='0px' cellspacing='0px' cellpadding='0px'>...</table>
| Line 114 | |
| <table width='780px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table>
| Line 141 | |
| https://www.w3.org/WAI/demos/bad/before/news.html | | |
| | | |
| <table width='780px' height='144px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table>
| Line 77 | |
| <table width='780px' border='0px' cellspacing='0px' cellpadding='0px'>...</table>
| Line 109 | |
| <table width='155px' border='0px' cellspacing='0px' cellpadding='0px'>...</table>
| Line 139 | |
| <table style='border; border: 1px ...' width='600px'>...</table>
| Line 173 | |
| <table width='250px' border='1' bordercolor='#C0C0C0' rules='rows'>...</table>
| Line 177 | |
| https://www.w3.org/WAI/demos/bad/before/tickets.html | | |
| This issue was found on another 2 pages.
The trial version is limited to showing issues on 4 pages.
| | |
|
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.
| 1.1.1 | |
| | | |
| <img src='../img/border_left_top.gif' width='10px' height='10px'>
| Line 175 | |
| <img src='../img/border_top.gif' height='10px'>
| Line 176 | |
| <img src='../img/border_right_top.gif' width='10px' height='10px'>
| Line 177 | |
| <img src='../img/border_left.gif' width='10px'>
| Line 180 | |
| <img src='../img/top_logo_next_end.gif' width='24px' height='86px'>
| Line 185 | |
| https://www.w3.org/WAI/demos/bad/before/annotated/home.html | | |
| | | |
| <img src='./img/border_left_top.gif' width='10px' height='10px'>
| Line 174 | |
| <img src='./img/border_top.gif' height='10px'>
| Line 175 | |
| <img src='./img/border_right_top.gif' width='10px' height='10px'>
| Line 176 | |
| <img src='./img/border_left.gif' width='10px'>
| Line 179 | |
| <img src='./img/top_logo_next_end.gif' width='24px' height='86px'>
| Line 184 | |
| https://www.w3.org/WAI/demos/bad/before/home.html | | |
| | | |
| <img src='./img/border_left_top.gif' width='10px' height='10px'>
| Line 75 | |
| <img src='./img/border_top.gif' height='10px'>
| Line 76 | |
| <img src='./img/border_right_top.gif' width='10px' height='10px'>
| Line 77 | |
| <img src='./img/border_left.gif' width='10px'>
| Line 80 | |
| <img src='./img/top_logo_next_end.gif' width='24px' height='86px'>
| Line 85 | |
| https://www.w3.org/WAI/demos/bad/before/news.html | | |
| | | |
| <img src='./img/border_left_top.gif' width='10px' height='10px'>
| Line 70 | |
| <img src='./img/border_top.gif' height='10px'>
| Line 71 | |
| <img src='./img/border_right_top.gif' width='10px' height='10px'>
| Line 72 | |
| <img src='./img/border_left.gif' width='10px'>
| Line 75 | |
| <img src='./img/top_logo_next_end.gif' width='24px' height='86px'>
| Line 80 | |
| https://www.w3.org/WAI/demos/bad/before/tickets.html | | |
| This issue was found on another 2 pages.
The trial version is limited to showing issues on 4 pages.
| | |
|
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. | 2.4.4 2.4.9 4.1.2 | |
| | | |
| <a href='...;' onfocus='blur();'>...</a>
| Line 250 | |
| <a href='...;' onfocus='blur();'>...</a>
| Line 256 | |
| <a href='...;' onfocus='blur();'>...</a>
| Line 262 | |
| <a href='...;' onfocus='blur();'>...</a>
| Line 268 | |
| <a href='../news/annotations' onfocus='blur();'>...</a>
| Line 294 | |
| https://www.w3.org/WAI/demos/bad/before/annotated/home.html | | |
| | | |
| <a href='...;' onfocus='blur();'>...</a>
| Line 249 | |
| <a href='...;' onfocus='blur();'>...</a>
| Line 255 | |
| <a href='...;' onfocus='blur();'>...</a>
| Line 261 | |
| <a href='...;' onfocus='blur();'>...</a>
| Line 267 | |
| <a href='news.html' onfocus='blur();'>...</a>
| Line 293 | |
| https://www.w3.org/WAI/demos/bad/before/home.html | | |
| | | |
| <a href='...;' onfocus='blur();'>...</a>
| Line 150 | |
| <a href='...;' onfocus='blur();'>...</a>
| Line 156 | |
| <a href='...;' onfocus='blur();'>...</a>
| Line 162 | |
| <a href='...;' onfocus='blur();'>...</a>
| Line 168 | |
| https://www.w3.org/WAI/demos/bad/before/news.html | | |
| | | |
| <a href='...;' onfocus='blur();'>...</a>
| Line 145 | |
| <a href='...;' onfocus='blur();'>...</a>
| Line 151 | |
| <a href='...;' onfocus='blur();'>...</a>
| Line 157 | |
| <a href='...;' onfocus='blur();'>...</a>
| Line 163 | |
| https://www.w3.org/WAI/demos/bad/before/tickets.html | | |
| This issue was found on another 2 pages.
The trial version is limited to showing issues on 4 pages.
| | |
|
Using blur() in an onfocus handler makes the form impossible to use with a keyboard. Remove the call to blur() in the onfocus handler. | 2.1.1 2.1.3 2.4.7 3.2.1 | |
| | | |
| <a href='...;' onfocus='blur();'>...</a>
| Line 250 | |
| <a href='...;' onfocus='blur();'>...</a>
| Line 256 | |
| <a href='...;' onfocus='blur();'>...</a>
| Line 262 | |
| <a href='...;' onfocus='blur();'>...</a>
| Line 268 | |
| <a href='../news/annotations' onfocus='blur();'>Heat wave ...s</a>
| Line 282 | |
| https://www.w3.org/WAI/demos/bad/before/annotated/home.html | | |
| | | |
| <a href='...;' onfocus='blur();'>...</a>
| Line 249 | |
| <a href='...;' onfocus='blur();'>...</a>
| Line 255 | |
| <a href='...;' onfocus='blur();'>...</a>
| Line 261 | |
| <a href='...;' onfocus='blur();'>...</a>
| Line 267 | |
| <a href='news.html' onfocus='blur();'>Heat wave linked to temperatures</a>
| Line 281 | |
| https://www.w3.org/WAI/demos/bad/before/home.html | | |
| | | |
| <a href='...;' onfocus='blur();'>...</a>
| Line 150 | |
| <a href='...;' onfocus='blur();'>...</a>
| Line 156 | |
| <a href='...;' onfocus='blur();'>...</a>
| Line 162 | |
| <a href='...;' onfocus='blur();'>...</a>
| Line 168 | |
| https://www.w3.org/WAI/demos/bad/before/news.html | | |
| | | |
| <a href='...;' onfocus='blur();'>...</a>
| Line 145 | |
| <a href='...;' onfocus='blur();'>...</a>
| Line 151 | |
| <a href='...;' onfocus='blur();'>...</a>
| Line 157 | |
| <a href='...;' onfocus='blur();'>...</a>
| Line 163 | |
| https://www.w3.org/WAI/demos/bad/before/tickets.html | | |
| This issue was found on another 2 pages.
The trial version is limited to showing issues on 4 pages.
| | |
|
Add role='presentation' if the inner table is a layout table, otherwise modify the inner table to present the same data without nesting tables. | 1.3.2 | |
| | | |
| <table width='800px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table>
| Line 173 | |
| <table width='780px' height='144px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table>
| Line 182 | |
| <table width='780px' border='0px' cellspacing='0px' cellpadding='0px'>...</table>
| Line 214 | |
| <table width='780px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table>
| Line 241 | |
| <table width='155px' border='0px' cellspacing='0px' cellpadding='0px'>...</table>
| Line 244 | |
| https://www.w3.org/WAI/demos/bad/before/annotated/home.html | | |
| | | |
| <table width='800px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table>
| Line 172 | |
| <table width='780px' height='144px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table>
| Line 181 | |
| <table width='780px' border='0px' cellspacing='0px' cellpadding='0px'>...</table>
| Line 213 | |
| <table width='780px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table>
| Line 240 | |
| <table width='155px' border='0px' cellspacing='0px' cellpadding='0px'>...</table>
| Line 243 | |
| https://www.w3.org/WAI/demos/bad/before/home.html | | |
| | | |
| <table width='800px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table>
| Line 73 | |
| <table width='780px' height='144px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table>
| Line 82 | |
| <table width='780px' border='0px' cellspacing='0px' cellpadding='0px'>...</table>
| Line 114 | |
| <table width='780px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table>
| Line 141 | |
| <table width='155px' border='0px' cellspacing='0px' cellpadding='0px'>...</table>
| Line 144 | |
| https://www.w3.org/WAI/demos/bad/before/news.html | | |
| | | |
| <table width='800px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table>
| Line 68 | |
| <table width='780px' height='144px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table>
| Line 77 | |
| <table width='780px' border='0px' cellspacing='0px' cellpadding='0px'>...</table>
| Line 109 | |
| <table width='780px' border='0px' cellspacing='0px' cellpadding='0px' bgcolor='white'>...</table>
| Line 136 | |
| <table width='155px' border='0px' cellspacing='0px' cellpadding='0px'>...</table>
| Line 139 | |
| https://www.w3.org/WAI/demos/bad/before/tickets.html | | |
| This issue was found on another 2 pages.
The trial version is limited to showing issues on 4 pages.
| | |
|
Some users find it hard to read light gray text on a white background, dark gray text on a black background and white text on a red background.
- The contrast ratio should be 3.0 or more for 18 point text, or larger
- The contrast ratio should be 3.0 or more for 14 point bold text, or larger
- The contrast ratio should be 4.5 or more for all other text
| 1.4.6 | |
| The text color to background color contrast ratio after composition is: | | |
| 3.88 with
color: rgb(65,84,93) background: rgb(169,184,191)
font-size: 10.67pt font-weight: 700 <b>Free Penguins</b>
| Line 311 | |
| 3.88 with
color: rgb(65,84,93) background: rgb(169,184,191)
font-size: 10.67pt font-weight: 700 <b>More City Parks</b>
| Line 332 | |
| https://www.w3.org/WAI/demos/bad/before/annotated/home.html | | |
| The text color to background color contrast ratio after composition is: | | |
| 3.88 with
color: rgb(65,84,93) background: rgb(169,184,191)
font-size: 10.67pt font-weight: 700 <b>Free Penguins</b>
| Line 310 | |
| 3.88 with
color: rgb(65,84,93) background: rgb(169,184,191)
font-size: 10.67pt font-weight: 700 <b>More City Parks</b>
| Line 331 | |
| https://www.w3.org/WAI/demos/bad/before/home.html | | |
| The text color to background color contrast ratio after composition is: | | |
| 3.88 with
color: rgb(65,84,93) background: rgb(169,184,191)
font-size: 10.67pt font-weight: 700 <b>[TITLE]</b>
| Line 178 | |
| 3.88 with
color: rgb(65,84,93) background: rgb(169,184,191)
font-size: 10.67pt font-weight: 700 <b>[TITLE]</b>
| Line 199 | |
| https://www.w3.org/WAI/demos/bad/before/template.html | | |
| The text color to background color contrast ratio after composition is: | | |
| 3.88 with
color: rgb(65,84,93) background: rgb(169,184,191)
font-size: 11.25pt font-weight: 700 <font color='41545d'>Les Garçons</font>
| Line 179 | |
| 3.88 with
color: rgb(65,84,93) background: rgb(169,184,191)
font-size: 11.25pt font-weight: 700 <font color='41545d'>The Obelisks</font>
| Line 180 | |
| 3.88 with
color: rgb(65,84,93) background: rgb(169,184,191)
font-size: 9pt font-weight: 700 <font color='41545d'>ADULT</font>
| Line 207 | |
| 3.88 with
color: rgb(65,84,93) background: rgb(169,184,191)
font-size: 9pt font-weight: 700 <font color='41545d'>FS</font>
| Line 208 | |
| 3.88 with
color: rgb(65,84,93) background: rgb(169,184,191)
font-size: 9pt font-weight: 700 <font color='41545d'>RS</font>
| Line 209 | |
| https://www.w3.org/WAI/demos/bad/before/tickets.html | | |
|
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
| | |
| The text color to background color contrast ratio after composition is: | | |
| 5.83 with
color: rgb(34,108,142) background: rgb(255,255,255)
font-size: 11.25pt font-weight: 400 <a onfocus='blur();' href='../../offsite.html' target='_blank'>Click here</a>
| Line 300 | |
| 5.83 with
color: rgb(34,108,142) background: rgb(255,255,255)
font-size: 12pt font-weight: 400 <a href='../tickets/annotations' onfocus='blur();' style='...'>Read More...</a>
| Line 320 | |
| 5.83 with
color: rgb(34,108,142) background: rgb(255,255,255)
font-size: 12pt font-weight: 400 <a href='../survey/annotations' onfocus='blur();' style='...'>Read More...</a>
| Line 341 | |
| 4.98 with
color: rgb(34,108,142) background: rgb(237,237,237)
font-size: 9pt font-weight: 400 <a rel='copyright' href='...t'>Copyright</a>
| Line 352 | |
| 4.98 with
color: rgb(34,108,142) background: rgb(237,237,237)
font-size: 9pt font-weight: 400 <acronym title='World Wide Web Consortium'>W3C</acronym>
| Line 352 | |
| https://www.w3.org/WAI/demos/bad/before/annotated/home.html | | |
| The text color to background color contrast ratio after composition is: | | |
| 5.83 with
color: rgb(34,108,142) background: rgb(255,255,255)
font-size: 11.25pt font-weight: 400 <a onfocus='blur();' href='../offsite.html' target='_blank'>Click here</a>
| Line 299 | |
| 5.83 with
color: rgb(34,108,142) background: rgb(255,255,255)
font-size: 11.25pt font-weight: 400 <a onfocus='blur();' href='../offsite.html' target='_blank'>Click here</a>
| Line 299 | |
| 5.83 with
color: rgb(34,108,142) background: rgb(255,255,255)
font-size: 12pt font-weight: 400 <a href='tickets.html' onfocus='blur();' style='...'>Read More...</a>
| Line 319 | |
| 5.83 with
color: rgb(34,108,142) background: rgb(255,255,255)
font-size: 12pt font-weight: 400 <a href='survey.html' onfocus='blur();' style='...'>Read More...</a>
| Line 340 | |
| 4.98 with
color: rgb(34,108,142) background: rgb(237,237,237)
font-size: 9pt font-weight: 400 <a rel='copyright' href='...t'>Copyright</a>
| Line 351 | |
| https://www.w3.org/WAI/demos/bad/before/home.html | | |
| The text color to background color contrast ratio after composition is: | | |
| 5.83 with
color: rgb(34,108,142) background: rgb(255,255,255)
font-size: 11.25pt font-weight: 400 <a href='../offsite.html'>trombone forgery debacle</a>
| Line 184 | |
| 5.83 with
color: rgb(34,108,142) background: rgb(255,255,255)
font-size: 11.25pt font-weight: 400 <a href='../offsite.html'>the way that air conditioning works</a>
| Line 187 | |
| 6.77 with
color: rgb(65,84,93) background: rgb(237,237,237)
font-size: 12pt font-weight: 400 <font size='3'>Your Shout</font>
| Line 196 | |
| 6.77 with
color: rgb(65,84,93) background: rgb(237,237,237)
font-size: 10.67pt font-weight: 400 <font size='2'>Brain donations at city hospital (by month)</font>
| Line 218 | |
| 4.98 with
color: rgb(34,108,142) background: rgb(237,237,237)
font-size: 9pt font-weight: 400 <a rel='copyright' href='...t'>Copyright</a>
| Line 260 | |
| https://www.w3.org/WAI/demos/bad/before/news.html | | |
| The text color to background color contrast ratio after composition is: | | |
| 4.98 with
color: rgb(34,108,142) background: rgb(237,237,237)
font-size: 9pt font-weight: 400 <a rel='copyright' href='...t'>Copyright</a>
| Line 279 | |
| 4.98 with
color: rgb(34,108,142) background: rgb(237,237,237)
font-size: 9pt font-weight: 400 <acronym title='World Wide Web Consortium'>W3C</acronym>
| Line 279 | |
| 4.98 with
color: rgb(34,108,142) background: rgb(237,237,237)
font-size: 9pt font-weight: 400 <acronym title='Massachusetts Institute of Technology'>MIT</acronym>
| Line 279 | |
| 4.98 with
color: rgb(34,108,142) background: rgb(237,237,237)
font-size: 9pt font-weight: 400 <acronym title='European Research Consortium for Informatics and Mathematics'>ERCIM</acronym>
| Line 279 | |
| 4.98 with
color: rgb(34,108,142) background: rgb(237,237,237)
font-size: 9pt font-weight: 400 <a href='http://www.keio.ac.jp/'>Keio</a>
| Line 279 | |
| https://www.w3.org/WAI/demos/bad/before/tickets.html | | |
| This issue was found on another 2 pages.
The trial version is limited to showing issues on 4 pages.
| | |
|
Screen reader users often tab from one link to the next, or use the 'Next Link' command.
Moving between links labelled 'click here' sounds like 'Click here, tab, click here, tab, click here'.
Change the link text, or add an aria-label , so the link makes sense when read without the surrounding text. | 2.4.9 | |
| | | |
| Link text: Click here<a onfocus='blur();' href='../../offsite.html' target='_blank'>Click here</a>
| Line 300 | |
| Link text: Click here<a onfocus='blur();' href='../../offsite.html' target='_blank'>Click here</a>
| Line 300 | |
| Link text: Read More...<a href='../tickets/annotations' onfocus='blur();' style='...'>Read More...</a>
| Line 320 | |
| Link text: Read More...<a href='../survey/annotations' onfocus='blur();' style='...'>Read More...</a>
| Line 341 | |
| https://www.w3.org/WAI/demos/bad/before/annotated/home.html | | |
| | | |
| Link text: Click here<a onfocus='blur();' href='../offsite.html' target='_blank'>Click here</a>
| Line 299 | |
| Link text: Click here<a onfocus='blur();' href='../offsite.html' target='_blank'>Click here</a>
| Line 299 | |
| Link text: Read More...<a href='tickets.html' onfocus='blur();' style='...'>Read More...</a>
| Line 319 | |
| Link text: Read More...<a href='survey.html' onfocus='blur();' style='...'>Read More...</a>
| Line 340 | |
| https://www.w3.org/WAI/demos/bad/before/home.html | | |
| | | |
| Link text: Read more...<a href='info' onfocus='blur();' style='...'>Read more...</a>
| Line 187 | |
| Link text: Read more...<a href='info' onfocus='blur();' style='...'>Read more...</a>
| Line 208 | |
| https://www.w3.org/WAI/demos/bad/before/template.html | | |