CINXE.COM

WebAIM: JAWS ate my tables

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>WebAIM: JAWS ate my tables</title> <link rel="shortcut icon" href="/media/favicon.ico"> <link rel="home" href="/"> <link rel="search" href="/search/"> <link rel="alternate" href="https://webaim.org/blog/feed" type="application/rss+xml" title="WebAIM Blog"> <script async src="https://www.googletagmanager.com/gtag/js?id=G-Y41PF8WV9X"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Y41PF8WV9X'); </script> <link href="/styles/main.css" rel="stylesheet" type="text/css"> <link href="/styles/print.css" rel="stylesheet" type="text/css" media="print"> <script src="/media/scripts/jquery.js"></script> <script src="/media/scripts/main.js"></script> <link href='https://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Kameron:400,700' rel='stylesheet' type='text/css'> <link href="/styles/documents.css?ver=2" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700" rel="stylesheet"> <!--[if lt IE 9]> <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div id="headcontainer" class="clearfix" style="background-image: url(/media/banners/community.jpg)"> <header> <div id="skiptocontent"><a href="#maincontent">skip to main content</a></div> <h2><a href="/"><img src="/media/logo.png" width="315" height="83" alt="WebAIM - Web Accessibility In Mind"></a></h2> <nav> <h2 class="hidden">Main Navigation</h2> <ul> <li><a href="/services/">Services</a></li> <li><a href="/articles/">Articles</a></li> <li><a href="/resources/">Resources</a></li> <li><a href="/projects/">Projects</a></li> <li class="current"><a href="/community/">Community</a></li> </ul> </nav> <div id="search"> <form method="get" role="search" action="/search/" id="sitesearch"> <p class="search"><span><label for="q">Search:</label> <input type="text" name="q" id="q"><input type="image" src="/media/template/search.svg" alt="Submit Search"></span></p> </form> <p class="intro"><a href="/intro">Introduction to Web Accessibility</a></p> <p class="training"><a href="/services/training">WebAIM Training</a></p> </div> </header> </div> <main id="maincontainer" class="clearfix"> <article id="maincontent"> <h1>JAWS ate my tables</h1> <p id="breadcrumbs"><span class="hidden">You are here: </span><a href="/">Home</a> &gt; <a href="/blog/">Blog</a> > JAWS ate my tables</p> <div class="section post" id="post-374"> <div class="entry"> <h3>Data Tables vs. Layout Tables</h3> <p><img decoding="async" src="https://webaim.org/blog/media/tables/jaws.jpg" alt="A large shark eats a wooden table" style="float:right;margin:3px;border:1px solid #666;" />Screen readers treat <a href="https://webaim.org/techniques/tables/data">data tables</a> differently than <a href="https://webaim.org/techniques/tables/">layout tables</a>. Layout tables are not identified and are read linearly as standard page content. Data tables, however, will be identified, the number or rows and columns read, and functionality provided for users to navigate through the table by cell.</p> <p>While tables have never been intended to control layout, they often are used this way. The problem is that there is not a clear way to identify whether a table is being used for tabular data or for controlling layout. Screen readers, therefore, apply heuristics to determine the type of table encountered. The heuristics in the popular JAWS screen reader are very poor.</p> <h3>JAWS Behavior</h3> <p><strong>UPDATE: In response to the details provided here, Freedom Scientific reports that JAWS 11.0.756 released Dec. 17, 2009 resolves many of these issues and now accounts for the presence of table headers in it&#8217;s consideration of table type.</strong></p> <p>Data tables should typically be assigned <a href="https://webaim.org/techniques/tables/data#th">table headers</a> (the &lt;th&gt; element) for all header cells. The presence of a &lt;th&gt; element in a table should be a dead giveaway that a table is intended for data. I&#8217;ve seen very few instances of the &lt;th&gt; element inappropriately used in layout tables. However, JAWS does not consider table headers or any other markup commonly used in data tables to determine the table type.</p> <p>Instead, JAWS assumes the presence of a data table if it has <strong>at least 2 rows and 2 columns <em>AND</em> at least 4 cells in the table are between 200 and 16000 square pixels in size</strong>. 16000 square pixels is not much &#8211; a long sentence of default text or a small 200X80 pixel image.</p> <p>Additionally, JAWS will treat tables with the DataTable=true or DataTable=1 attributes as data tables. Because this attribute is neither commonly used nor standards compliant, this will not be discussed as a viable solution to the problem, though it could be implemented as a &#8216;hack&#8217; if need be.</p> <p>This logic leaves much to be desired. It results in many data tables being incorrectly treated as layout tables, <strong>even if those data tables have appropriate header or other accessibility markup</strong>. Likewise, layout tables may be identified as data tables.</p> <h3>Examples</h3> <p>Consider the following simple table:</p> <table style="border-spacing: 0; "> <caption>Student Ages</caption> <tr> <th style="padding:6px;">Name</th> <th style="padding:6px;">Age</th> </tr> <tr> <td style="padding:6px;">Fred</td> <td style="padding:6px;">31</td> </tr> <tr> <td style="padding:6px;">Joe</td> <td style="padding:6px;">8<br /> <em>Note: Joe was born on February 29th of a leap year, so he really is older than Fred even though he only celebrates his birthday every 4 years.</em></td> </tr> </table> <p>This is clearly a data table. Table headers and a caption have been provided. However, in JAWS this table is not read as a data table because there are only 3 cells (those in the left hand column) that are less than 16000 square pixels (at least at standard resolutions and settings). The sentence of text in the last cell makes that cell and all other cells in that column more than 16000 square pixels. JAWS users navigating this table will not get additional accessibility functionality.</p> <p>Similarly, the following simple layout table which has no headers identified will be identified by JAWS as a data table simply because more than 4 cells are between 200 and 16000 square pixels in size.</p> <table> <tr> <td rowspan="3"><img decoding="async" src="https://webaim.org/blog/media/tables/logo1.jpg" alt="WebAIM logo" />&nbsp;</td> <td>WebAIM Logo</td> </tr> <tr> <td>150X76 pixels</td> </tr> <tr> <td>6kb</td> </tr> <tr> <td rowspan="3"><img decoding="async" src="https://webaim.org/blog/media/tables/logo2.jpg" alt="WAVE logo" width="76" height="76" />&nbsp;</td> <td>WAVE Logo</td> </tr> <tr> <td>76X76 pixels</td> </tr> <tr> <td>4kb</td> </tr> </table> <p>To compound this issue, JAWS analyzes the rendered size of the cell only, regardless of the cell contents making it virtually impossible for developers to control JAWS behavior. This means that users who increase their font size or zoom the page contents in their browser are more likely to have data tables be interpreted as layout tables because they are more likely to have cells over 16000 square pixels. This is particularly concerning because JAWS users with low vision are very likely to have enlarged content.</p> <h3>Now What?</h3> <p><a href="https://webaim.org/techniques/aria/">ARIA</a> does provide some assistance. Adding role=&quot;presentation&quot; to the table causes it to always be treated as a layout table and adding ARIA role=&quot;grid&quot; causes any table to be treated as a data table (note that with JAWS&#8217; updated table detection heuristics, role=&quot;grid&quot; is likely not necessary, and it could <a href="https://webaim.org/discussion/mail_thread.php?thread=4092">potentially cause confusion</a>). This is supported in JAWS 10+.</p> <p>Screen readers need heuristics to handle tables that are not coded with accessibility in mind, but no screen reader should <em>ever</em> treat a table with proper header markup as a layout table just because cells in that table happen to be big. Likewise, a layout table should not be treated as a data table just because none of the cells happen to be big. Hopefully Freedom Scientific will address this issue, <strike>though this is rather unlikely considering their responsiveness to such issues in the past</strike> (update &#8211; this issue has been at least partially resolved in JAWS 11.0.756). There&#8217;s little that developers can do about this issue. They should continue marking up data tables for accessibility as best as they can and transition away from using tables for layout. Additionally, screen reader users can use <a href="http://www.nvda-project.org/">NVDA</a> or another screen reader that handles tables appropriately.</p> </div> </div> <div class="navigation"> <div class="floatleft"></div> <div class="floatright"></div> </div> <!-- You can start editing here. --> <div id="blogcomments"> <h2 id="comments">Comments</h2> <div class="navigation"> <div class="alignleft"></div> <div class="alignright"></div> </div> <ol class="commentlist"> <li class="comment even thread-even depth-1" id="comment-61073"> <img alt='' src='https://secure.gravatar.com/avatar/7b1c00e9378f7b7f99d68393c25e072c?s=70&#038;d=mm&#038;r=r' srcset='https://secure.gravatar.com/avatar/7b1c00e9378f7b7f99d68393c25e072c?s=140&#038;d=mm&#038;r=r 2x' class='avatar avatar-70 photo' height='70' width='70' loading='lazy' decoding='async'/> <cite class="fn">Shrirang</cite> <div class="commentdate"><a href="https://webaim.org/blog/jaws-ate-my-tables/#comment-61073"> December 2, 2009</a></div> <div class="comment-content"><p>thanks Jared for the post.</p> </div> </li> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1" id="comment-61074"> <img alt='' src='https://secure.gravatar.com/avatar/6b9aae0c6c769a05be3420e4373a6f4b?s=70&#038;d=mm&#038;r=r' srcset='https://secure.gravatar.com/avatar/6b9aae0c6c769a05be3420e4373a6f4b?s=140&#038;d=mm&#038;r=r 2x' class='avatar avatar-70 photo' height='70' width='70' loading='lazy' decoding='async'/> <cite class="fn"><a href="http://interfree.ca/samuelp" class="url" rel="ugc external nofollow">fastfinge</a></cite> <div class="commentdate"><a href="https://webaim.org/blog/jaws-ate-my-tables/#comment-61074"> December 2, 2009</a></div> <div class="comment-content"><p>As a blind user, I find Jaws is like IE6: some things absolutely require it (especially old applications), but in the majority of cases, it should not be used. This is just a small example of the many thousands of things Jaws does wrong. I wouldn&#8217;t have a problem with web developers requiring NVDA or another screen reader that follows standards. We as blind people aren&#8217;t going to get full web accessibility until Jaws is no longer a factor. Freedom Scientific has shown, repeatedly, that they have no interest in working with standards bodies, following standards (either web standards or desktop standards like IAccessible2), or helping developers in any meaningful way. Currently, Jaws is one of the largest factors holding us back from full accessibility. We as users and concerned developers need to launch a marketing blitz similar to the one that&#8217;s made huge progress in killing off IE6. That&#8217;s the only way we&#8217;re going to see any improvement in the situation.</p> </div> </li> </li><!-- #comment-## --> <li class="comment even thread-even depth-1" id="comment-61076"> <img alt='' src='https://secure.gravatar.com/avatar/31ad88aec20bb7151e93cb7c452a095d?s=70&#038;d=mm&#038;r=r' srcset='https://secure.gravatar.com/avatar/31ad88aec20bb7151e93cb7c452a095d?s=140&#038;d=mm&#038;r=r 2x' class='avatar avatar-70 photo' height='70' width='70' loading='lazy' decoding='async'/> <cite class="fn"><a href="http://webaxe.blogspot.com/2009/05/video-importance-of-html-headings-for.html" class="url" rel="ugc external nofollow">Web Axe</a></cite> <div class="commentdate"><a href="https://webaim.org/blog/jaws-ate-my-tables/#comment-61076"> December 3, 2009</a></div> <div class="comment-content"><p>Great article, as usual! PS: I really like the title and graphic, too!</p> </div> </li> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1" id="comment-61077"> <img alt='' src='https://secure.gravatar.com/avatar/f2238ddd1518d2041d6ca4f657511fa0?s=70&#038;d=mm&#038;r=r' srcset='https://secure.gravatar.com/avatar/f2238ddd1518d2041d6ca4f657511fa0?s=140&#038;d=mm&#038;r=r 2x' class='avatar avatar-70 photo' height='70' width='70' loading='lazy' decoding='async'/> <cite class="fn">Oihana</cite> <div class="commentdate"><a href="https://webaim.org/blog/jaws-ate-my-tables/#comment-61077"> December 3, 2009</a></div> <div class="comment-content"><p>Great article! Very interesting post ;D</p> </div> </li> </li><!-- #comment-## --> <li class="comment even thread-even depth-1" id="comment-61078"> <img alt='' src='https://secure.gravatar.com/avatar/05b4770261aa6bf3256e68ec007254ff?s=70&#038;d=mm&#038;r=r' srcset='https://secure.gravatar.com/avatar/05b4770261aa6bf3256e68ec007254ff?s=140&#038;d=mm&#038;r=r 2x' class='avatar avatar-70 photo' height='70' width='70' loading='lazy' decoding='async'/> <cite class="fn"><a href="http://home.comcast.net/~marcus250" class="url" rel="ugc external nofollow">Marcus</a></cite> <div class="commentdate"><a href="https://webaim.org/blog/jaws-ate-my-tables/#comment-61078"> December 3, 2009</a></div> <div class="comment-content"><p>Most people who speak English but don&#8217;t know techese are going to have absolutely no idea what the hell you&#8217;re talking about! could you in English explain what your beef is? spacifically what is a lay out table? what is the difference between a lay out and data table? freedom scientific is giving this the attention it deserves which is absolutely none!</p> </div> </li> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1" id="comment-61079"> <img alt='' src='https://secure.gravatar.com/avatar/ae3acf7409a0c6ae6bbfe6aee7ba0559?s=70&#038;d=mm&#038;r=r' srcset='https://secure.gravatar.com/avatar/ae3acf7409a0c6ae6bbfe6aee7ba0559?s=140&#038;d=mm&#038;r=r 2x' class='avatar avatar-70 photo' height='70' width='70' loading='lazy' decoding='async'/> <cite class="fn"><a href="http://www.accessibilitywatch.com" class="url" rel="ugc external nofollow">Thomas Logan</a></cite> <div class="commentdate"><a href="https://webaim.org/blog/jaws-ate-my-tables/#comment-61079"> December 3, 2009</a></div> <div class="comment-content"><p>How about marking up the tables that are being used for layout with role=&#8217;presentation&#8217;. I have used this to cause JAWS to avoid reading the contents. I agree with the other commenters that it can be very difficult to work around these specific issues.</p> </div> </li> </li><!-- #comment-## --> <li class="comment even thread-even depth-1" id="comment-61080"> <img alt='' src='https://secure.gravatar.com/avatar/e21f8dfa59d3536a629998f78e0021eb?s=70&#038;d=mm&#038;r=r' srcset='https://secure.gravatar.com/avatar/e21f8dfa59d3536a629998f78e0021eb?s=140&#038;d=mm&#038;r=r 2x' class='avatar avatar-70 photo' height='70' width='70' loading='lazy' decoding='async'/> <cite class="fn"><a href="http://architecture.hhsc.state.tx.us/myweb/Accessibility/website/index.shtml" class="url" rel="ugc external nofollow">Mike Moore</a></cite> <div class="commentdate"><a href="https://webaim.org/blog/jaws-ate-my-tables/#comment-61080"> December 3, 2009</a></div> <div class="comment-content"><p>Thanks Jared, This explains an issue that we have been working on for a little while with no success. I will forward this blog post to the developers who originally sent the issue to me. I will also see if we can open a bug report with Freedom Scientific since this issue is likely to impact our case management system.</p> </div> </li> </li><!-- #comment-## --> <li class="comment byuser comment-author-admin bypostauthor odd alt thread-odd thread-alt depth-1" id="comment-61082"> <img alt='' src='https://secure.gravatar.com/avatar/68d5820d7821cc80ba38185a650995f7?s=70&#038;d=mm&#038;r=r' srcset='https://secure.gravatar.com/avatar/68d5820d7821cc80ba38185a650995f7?s=140&#038;d=mm&#038;r=r 2x' class='avatar avatar-70 photo' height='70' width='70' loading='lazy' decoding='async'/> <cite class="fn"><a href="http://webaim.org" class="url" rel="ugc">Jared Smith</a></cite> <div class="commentdate"><a href="https://webaim.org/blog/jaws-ate-my-tables/#comment-61082"> December 3, 2009</a></div> <div class="comment-content"><p>I made a minor update to the article to indicate that role=&#8221;presentation&#8221; can be used to force JAWS to treat tables as layout tables. There is also a role=&#8221;table&#8221; which should force it to treat the table as a data table, but this does not work.</p> </div> </li> </li><!-- #comment-## --> <li class="comment even thread-even depth-1" id="comment-61083"> <img alt='' src='https://secure.gravatar.com/avatar/a4584d47aea909975a99ffc6d7c95c68?s=70&#038;d=mm&#038;r=r' srcset='https://secure.gravatar.com/avatar/a4584d47aea909975a99ffc6d7c95c68?s=140&#038;d=mm&#038;r=r 2x' class='avatar avatar-70 photo' height='70' width='70' loading='lazy' decoding='async'/> <cite class="fn">Gonzalo González Mora</cite> <div class="commentdate"><a href="https://webaim.org/blog/jaws-ate-my-tables/#comment-61083"> December 3, 2009</a></div> <div class="comment-content"><p>@Marcus:<br /> Tables (the table element in HTML, and its related elements) can be used for two purposes: for data tables like Jared shows in this article, and for layout, which means that you use a table like a grid and position your content in the different cells according to where you want it to be displayed. This use is bad, and developers should use CSS for handling the presentation of the markup.</p> <p>There&#8217;s an article here on WebAIM which shows both types of tables: <a href="http://www.webaim.org/techniques/tables/" rel="nofollow">Creating Accessible Tables</a>. Remember that even though layout tables can be made more accessible, the optimal thing to do is not use them at all for that purpose (i.e., only use them for tabular data), and go for CSS instead.</p> <p>I hope this sheds some light to your doubt.</p> </div> </li> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1" id="comment-61086"> <img alt='' src='https://secure.gravatar.com/avatar/eb0a352717333aa136e9e085af2fd6ba?s=70&#038;d=mm&#038;r=r' srcset='https://secure.gravatar.com/avatar/eb0a352717333aa136e9e085af2fd6ba?s=140&#038;d=mm&#038;r=r 2x' class='avatar avatar-70 photo' height='70' width='70' loading='lazy' decoding='async'/> <cite class="fn"><a href="http://twitter.com/LynnHoldsworth" class="url" rel="ugc external nofollow">@LynnHoldsworth</a></cite> <div class="commentdate"><a href="https://webaim.org/blog/jaws-ate-my-tables/#comment-61086"> December 4, 2009</a></div> <div class="comment-content"><p>Good article as always Jared. Just a couple of questions:<br /> * Which version of Jaws did you test with? Jaws 10 picked up your data table but inaccurately flagged your layout table as a data table.<br /> * What heuristics would you like to see Jaws using? The tag alone wouldn&#8217;t be enough, since too many data tables don&#8217;t use these, and the SUMMARY attribute is too often used in layout tables. What heuristics is NVDA using?</p> </div> </li> </li><!-- #comment-## --> <li class="comment byuser comment-author-admin bypostauthor even thread-even depth-1" id="comment-61087"> <img alt='' src='https://secure.gravatar.com/avatar/68d5820d7821cc80ba38185a650995f7?s=70&#038;d=mm&#038;r=r' srcset='https://secure.gravatar.com/avatar/68d5820d7821cc80ba38185a650995f7?s=140&#038;d=mm&#038;r=r 2x' class='avatar avatar-70 photo' height='70' width='70' loading='lazy' decoding='async'/> <cite class="fn"><a href="http://webaim.org" class="url" rel="ugc">Jared Smith</a></cite> <div class="commentdate"><a href="https://webaim.org/blog/jaws-ate-my-tables/#comment-61087"> December 4, 2009</a></div> <div class="comment-content"><p>Lynn-</p> <p>I tested with JAWS 10. The fact that your installation identified the data table highlights the problem &#8211; that there&#8217;s no consistency. Your resolution or font size likely causes the table to render in a way that it meets the heuristics. Mine doesn&#8217;t.</p> <p>I think what they have now is fairly adequate, except that any table with headers or a caption should always be treated as a data table. And instead of calculating the cell size, I think measuring the length of text in the cell would be better.</p> </div> </li> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1" id="comment-61158"> <img alt='' src='https://secure.gravatar.com/avatar/9a1e5cfd98d95cfb1c3308ac0b10ec8b?s=70&#038;d=mm&#038;r=r' srcset='https://secure.gravatar.com/avatar/9a1e5cfd98d95cfb1c3308ac0b10ec8b?s=140&#038;d=mm&#038;r=r 2x' class='avatar avatar-70 photo' height='70' width='70' loading='lazy' decoding='async'/> <cite class="fn"><a href="http://blog.blackspheretech.com" class="url" rel="ugc external nofollow">Jeffrey - JDS</a></cite> <div class="commentdate"><a href="https://webaim.org/blog/jaws-ate-my-tables/#comment-61158"> December 11, 2009</a></div> <div class="comment-content"><p>This is why developers need to code to standards and not try and pander to freedom scientific &amp; all the different quirks it has at each version. Especially when products like Serotek&#8217;s System Access &amp; NVDA are available at no cost (or low cost). Serotek for example has proven itself to be willing to make changes and follow standards &amp; with the fact that they launch updates every week for their product, this could all be done relatively quickly.</p> <p>On another note, Tables for layout should be relegated to the vaults of history just like frames were in the 90s. We should not encourage this or pander to it.</p> </div> </li> </li><!-- #comment-## --> <li class="comment even thread-even depth-1" id="comment-61176"> <img alt='' src='https://secure.gravatar.com/avatar/b0d12b0d352dee274a06b666e37ef90e?s=70&#038;d=mm&#038;r=r' srcset='https://secure.gravatar.com/avatar/b0d12b0d352dee274a06b666e37ef90e?s=140&#038;d=mm&#038;r=r 2x' class='avatar avatar-70 photo' height='70' width='70' loading='lazy' decoding='async'/> <cite class="fn">Priti Rohra</cite> <div class="commentdate"><a href="https://webaim.org/blog/jaws-ate-my-tables/#comment-61176"> December 13, 2009</a></div> <div class="comment-content"><p>Brilliant post J.Smith! </p> <p>Thums up for NVDA, which follows standards and presents information to users as it is meant to be. This gives a clear indication where we are headed in the future, no matter what market stats show, NVDA &amp; SA2GO will definately be the choice for developers for screen reader testing. </p> <p>I will however like to make a point that it is not currently advisible to depend on ARIA role completely for identifying data tables since many have not yet started implementing ARIA completely, it should be a combine effort of looking for caption and attribute and look for ARIA if available.</p> </div> </li> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1" id="comment-61247"> <img alt='' src='https://secure.gravatar.com/avatar/81938dad67cfc52c3e292b23be1b2616?s=70&#038;d=mm&#038;r=r' srcset='https://secure.gravatar.com/avatar/81938dad67cfc52c3e292b23be1b2616?s=140&#038;d=mm&#038;r=r 2x' class='avatar avatar-70 photo' height='70' width='70' loading='lazy' decoding='async'/> <cite class="fn"><a href="http://cookiecrook.com/" class="url" rel="ugc external nofollow">James Craig</a></cite> <div class="commentdate"><a href="https://webaim.org/blog/jaws-ate-my-tables/#comment-61247"> December 21, 2009</a></div> <div class="comment-content"><p>The ARIA role for data tables is actually &#8216;grid&#8217; not &#8216;table&#8217;</p> <p><a href="http://www.w3.org/TR/wai-aria/roles#grid" rel="nofollow ugc">http://www.w3.org/TR/wai-aria/roles#grid</a></p> </div> </li> </li><!-- #comment-## --> <li class="comment byuser comment-author-admin bypostauthor even thread-even depth-1" id="comment-61248"> <img alt='' src='https://secure.gravatar.com/avatar/68d5820d7821cc80ba38185a650995f7?s=70&#038;d=mm&#038;r=r' srcset='https://secure.gravatar.com/avatar/68d5820d7821cc80ba38185a650995f7?s=140&#038;d=mm&#038;r=r 2x' class='avatar avatar-70 photo' height='70' width='70' loading='lazy' decoding='async'/> <cite class="fn"><a href="http://webaim.org" class="url" rel="ugc">Jared Smith</a></cite> <div class="commentdate"><a href="https://webaim.org/blog/jaws-ate-my-tables/#comment-61248"> December 21, 2009</a></div> <div class="comment-content"><p>Thanks James! My testing shows that JAWS will treat tables with role=&#8221;grid&#8221; as data tables. This seems to be a reasonable, though entirely unnecessary solution to this issue. I&#8217;ve updated the post to reflect this.</p> </div> </li> </li><!-- #comment-## --> <li class="comment byuser comment-author-admin bypostauthor odd alt thread-odd thread-alt depth-1" id="comment-61252"> <img alt='' src='https://secure.gravatar.com/avatar/68d5820d7821cc80ba38185a650995f7?s=70&#038;d=mm&#038;r=r' srcset='https://secure.gravatar.com/avatar/68d5820d7821cc80ba38185a650995f7?s=140&#038;d=mm&#038;r=r 2x' class='avatar avatar-70 photo' height='70' width='70' loading='lazy' decoding='async'/> <cite class="fn"><a href="http://webaim.org" class="url" rel="ugc">Jared Smith</a></cite> <div class="commentdate"><a href="https://webaim.org/blog/jaws-ate-my-tables/#comment-61252"> December 21, 2009</a></div> <div class="comment-content"><p>Freedom Scientific is reporting that table headers are now accounted for when determining the table type as of JAWS version 11.0.756 released Dec. 17th. This, of course, does not solve the problem for existing JAWS installations. My current recommendation would be to add the proper ARIA roles (grid or presentation) to tables that may be problematic to ensure proper treatment in JAWS 10+.</p> </div> </li> </li><!-- #comment-## --> <li class="comment even thread-even depth-1" id="comment-61258"> <img alt='' src='https://secure.gravatar.com/avatar/fef24bc1fe3378ad098ffd9d08029cbc?s=70&#038;d=mm&#038;r=r' srcset='https://secure.gravatar.com/avatar/fef24bc1fe3378ad098ffd9d08029cbc?s=140&#038;d=mm&#038;r=r 2x' class='avatar avatar-70 photo' height='70' width='70' loading='lazy' decoding='async'/> <cite class="fn">Don Mauck</cite> <div class="commentdate"><a href="https://webaim.org/blog/jaws-ate-my-tables/#comment-61258"> December 22, 2009</a></div> <div class="comment-content"><p>In my case I still se both tables on this page as data tables. I am running 11.0.756 so I&#8217;m not sure how right now this is really any better. I don&#8217;t believe that the second table here should been seen as a table, agreed?</p> </div> </li> </li><!-- #comment-## --> <li class="comment byuser comment-author-admin bypostauthor odd alt thread-odd thread-alt depth-1" id="comment-61259"> <img alt='' src='https://secure.gravatar.com/avatar/68d5820d7821cc80ba38185a650995f7?s=70&#038;d=mm&#038;r=r' srcset='https://secure.gravatar.com/avatar/68d5820d7821cc80ba38185a650995f7?s=140&#038;d=mm&#038;r=r 2x' class='avatar avatar-70 photo' height='70' width='70' loading='lazy' decoding='async'/> <cite class="fn"><a href="http://webaim.org" class="url" rel="ugc">Jared Smith</a></cite> <div class="commentdate"><a href="https://webaim.org/blog/jaws-ate-my-tables/#comment-61259"> December 22, 2009</a></div> <div class="comment-content"><p>Don-</p> <p>The updates help address data tables that are treated like layout tables. I don&#8217;t think the updates change the behavior of layout tables sometimes being treated like data tables. Fortunately, this is much less problematic than users losing the ability to navigate data tables. Also, I&#8217;m not really sure what they would change to make this better.</p> </div> </li> </li><!-- #comment-## --> <li class="comment even thread-even depth-1" id="comment-61273"> <img alt='' src='https://secure.gravatar.com/avatar/0089b3d3584696125e9c5e80ef7f278c?s=70&#038;d=mm&#038;r=r' srcset='https://secure.gravatar.com/avatar/0089b3d3584696125e9c5e80ef7f278c?s=140&#038;d=mm&#038;r=r 2x' class='avatar avatar-70 photo' height='70' width='70' loading='lazy' decoding='async'/> <cite class="fn">Sofia Celic-Li</cite> <div class="commentdate"><a href="https://webaim.org/blog/jaws-ate-my-tables/#comment-61273"> December 23, 2009</a></div> <div class="comment-content"><p>Great post!</p> <p>My only comment is in response to other comments that present NVDA as a viable screen reader alternative. The idea of NVDA is great but it lacks some important abilities &#8211; including data table functions. NVDA is only just starting to implement support for data tables on the web.</p> </div> </li> </li><!-- #comment-## --> <li class="comment byuser comment-author-admin bypostauthor odd alt thread-odd thread-alt depth-1" id="comment-61276"> <img alt='' src='https://secure.gravatar.com/avatar/68d5820d7821cc80ba38185a650995f7?s=70&#038;d=mm&#038;r=r' srcset='https://secure.gravatar.com/avatar/68d5820d7821cc80ba38185a650995f7?s=140&#038;d=mm&#038;r=r 2x' class='avatar avatar-70 photo' height='70' width='70' loading='lazy' decoding='async'/> <cite class="fn"><a href="http://webaim.org" class="url" rel="ugc">Jared Smith</a></cite> <div class="commentdate"><a href="https://webaim.org/blog/jaws-ate-my-tables/#comment-61276"> December 24, 2009</a></div> <div class="comment-content"><p>Sofia-</p> <p>Thank you for the comment. I understand that full data table support is not yet there in NVDA but is coming soon. However, it already properly detects the presence of tables correctly and allows navigation to them better than JAWS (at least before 11.0.756).</p> </div> </li> </li><!-- #comment-## --> <li class="comment even thread-even depth-1" id="comment-61524"> <img alt='' src='https://secure.gravatar.com/avatar/fc7940731323a945e3a165645a1fd4bf?s=70&#038;d=mm&#038;r=r' srcset='https://secure.gravatar.com/avatar/fc7940731323a945e3a165645a1fd4bf?s=140&#038;d=mm&#038;r=r 2x' class='avatar avatar-70 photo' height='70' width='70' loading='lazy' decoding='async'/> <cite class="fn">Sailesh Panchang</cite> <div class="commentdate"><a href="https://webaim.org/blog/jaws-ate-my-tables/#comment-61524"> January 18, 2010</a></div> <div class="comment-content"><p>Yes indeed NVDA has yet to catch up quite a bit. Only JAWS and Window-Eyes seem to read headers in complex tables when header-ids are used. Only JAWS supports the &#8216;scope&#8217; attribute. Support for scope had broken in JAWS 9 and 10 and Freedom Scientific finally fixed it after my repeated emails. Then when there are form controls in a table, it is useful to be able to navigate it as a table sometimes. Now Window-Eyes does not regard a table with form controls in it as a data table. Going forward, role=presentation will help to identify layout tables. But there are a whole lot of tables out there already and going by the way tables have been used, it is not easy to distinguish layout tables from data tables without some false positives.<br /> Sailesh</p> </div> </li> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1" id="comment-61826"> <img alt='' src='https://secure.gravatar.com/avatar/cef9dca4d413f27fd22378dadd15a86b?s=70&#038;d=mm&#038;r=r' srcset='https://secure.gravatar.com/avatar/cef9dca4d413f27fd22378dadd15a86b?s=140&#038;d=mm&#038;r=r 2x' class='avatar avatar-70 photo' height='70' width='70' loading='lazy' decoding='async'/> <cite class="fn"><a href="http://skazki-dlia-vseh.blogspot.com" class="url" rel="ugc external nofollow">skazka</a></cite> <div class="commentdate"><a href="https://webaim.org/blog/jaws-ate-my-tables/#comment-61826"> February 10, 2010</a></div> <div class="comment-content"><p>My only comment is in response to other comments that present NVDA as a viable screen reader alternative. The idea of NVDA is great but it lacks some important abilities — including data table functions. NVDA is only just starting to implement support for data tables on the web.</p> </div> </li> </li><!-- #comment-## --> <li class="comment even thread-even depth-1" id="comment-61940"> <img alt='' src='https://secure.gravatar.com/avatar/900a371839c45a2f42a15761ffa2b0ad?s=70&#038;d=mm&#038;r=r' srcset='https://secure.gravatar.com/avatar/900a371839c45a2f42a15761ffa2b0ad?s=140&#038;d=mm&#038;r=r 2x' class='avatar avatar-70 photo' height='70' width='70' loading='lazy' decoding='async'/> <cite class="fn"><a href="http://www.inline-block.co.uk" class="url" rel="ugc external nofollow">Joseph Chapman</a></cite> <div class="commentdate"><a href="https://webaim.org/blog/jaws-ate-my-tables/#comment-61940"> March 2, 2010</a></div> <div class="comment-content"><p>It&#8217;s very poor when developers are still using tables for layouts.<br /> Is it not true that ARIA is only supported when served with the xml MIME type, which is not supported in IE6?</p> </div> </li> </li><!-- #comment-## --> <li class="comment odd alt thread-odd thread-alt depth-1" id="comment-63796"> <img alt='' src='https://secure.gravatar.com/avatar/ae527a4de346214e12a69ec3ba9be07f?s=70&#038;d=mm&#038;r=r' srcset='https://secure.gravatar.com/avatar/ae527a4de346214e12a69ec3ba9be07f?s=140&#038;d=mm&#038;r=r 2x' class='avatar avatar-70 photo' height='70' width='70' loading='lazy' decoding='async'/> <cite class="fn"><a href="http://imediasolutions.eu" class="url" rel="ugc external nofollow">iMediaSolutions</a></cite> <div class="commentdate"><a href="https://webaim.org/blog/jaws-ate-my-tables/#comment-63796"> August 4, 2010</a></div> <div class="comment-content"><p>We really should use table only for tabular data and not for building website layout. I can remember early I also used tables, but now if I am thinking on it, it was a really bad habit. Anyway, good article.</p> </div> </li> </li><!-- #comment-## --> <li class="comment even thread-even depth-1" id="comment-64163"> <img alt='' src='https://secure.gravatar.com/avatar/792c8a7f0436a2e27c88b9e3cc4a942a?s=70&#038;d=mm&#038;r=r' srcset='https://secure.gravatar.com/avatar/792c8a7f0436a2e27c88b9e3cc4a942a?s=140&#038;d=mm&#038;r=r 2x' class='avatar avatar-70 photo' height='70' width='70' loading='lazy' decoding='async'/> <cite class="fn"><a href="http://www.aw-technik.at/" class="url" rel="ugc external nofollow">Aron Watch</a></cite> <div class="commentdate"><a href="https://webaim.org/blog/jaws-ate-my-tables/#comment-64163"> October 25, 2010</a></div> <div class="comment-content"><p>I made a minor update to the article to indicate that role=”presentation” can be used to force JAWS to treat tables as layout tables. There is also a role=”table” which should force it to treat the table as a data table, but this does not work.</p> </div> </li> </li><!-- #comment-## --> </ol> <div class="navigation"> <div class="alignleft"></div> <div class="alignright"></div> </div> </div> </article> <!-- --> <aside id="articlemeta"> <div id="updated">December 2, 2009<br><br> <img src="/blog/authors/1.jpg" alt="" /><br>Jared Smith<br><br> <a href="https://webaim.org/blog/jaws-ate-my-tables/#comments"><span class="comments">27 Comments</span><br /></a> </div> <div class="sidebox"> <h2>Search the blog</h2> <form role="search" method="get" id="searchform" class="searchform" action="https://webaim.org/blog/"> <div> <label class="screen-reader-text" for="s">Search for:</label> <input type="text" value="" name="s" id="s" /> <input type="submit" id="searchsubmit" value="Search" /> </div> </form> </div> <div class="sidebox"> <h2>Blog Archives</h2> <ul> <li><a href='https://webaim.org/blog/2024/11/'>November 2024</a></li> <li><a href='https://webaim.org/blog/2024/10/'>October 2024</a></li> <li><a href='https://webaim.org/blog/2024/09/'>September 2024</a></li> <li><a href='https://webaim.org/blog/2024/07/'>July 2024</a></li> <li><a href='https://webaim.org/blog/2024/05/'>May 2024</a></li> <li><a href='https://webaim.org/blog/2024/'>2024</a></li> <li><a href='https://webaim.org/blog/2023/'>2023</a></li> <li><a href='https://webaim.org/blog/2022/'>2022</a></li> <li><a href='https://webaim.org/blog/2021/'>2021</a></li> <li><a href='https://webaim.org/blog/2020/'>2020</a></li> <li><a href='https://webaim.org/blog/2019/'>2019</a></li> <li><a href='https://webaim.org/blog/2018/'>2018</a></li> <li><a href='https://webaim.org/blog/2017/'>2017</a></li> <li><a href='https://webaim.org/blog/2016/'>2016</a></li> <li><a href='https://webaim.org/blog/2015/'>2015</a></li> <li><a href='https://webaim.org/blog/2014/'>2014</a></li> <li><a href='https://webaim.org/blog/2013/'>2013</a></li> <li><a href='https://webaim.org/blog/2012/'>2012</a></li> <li><a href='https://webaim.org/blog/2011/'>2011</a></li> <li><a href='https://webaim.org/blog/2010/'>2010</a></li> <li><a href='https://webaim.org/blog/2009/'>2009</a></li> <li><a href='https://webaim.org/blog/2008/'>2008</a></li> <li><a href='https://webaim.org/blog/2007/'>2007</a></li> <li><a href='https://webaim.org/blog/2006/'>2006</a></li> </ul> <p><a href="/community/rss">RSS Feeds</a></p> </div> </aside> </main> <footer> <div id="footerresources"> <div class="footerblock"> <h2 id="copyright">&copy;2024 WebAIM</h2> <p id="contact">Institute for Disability Research, Policy, and Practice<br> Utah State University<br> 6807 Old Main Hill<br> Logan, UT 84322-6807<br> <a class="phone" href="tel:4357977024">435.797.7024</a></p> <div id="checkpage"> <h2>Check Your Accessibility</h2> <form action="https://wave.webaim.org/report" novalidate> <label for="waveurl">Web site address:</label> <input type="url" id="waveurl" name="url" title="Web site address"> <input type="submit" value="WAVE"> </form> </div> </div> <div class="footerblock"> <h2 id="blog">From the Blog</h2> <ul><li><a href="/blog/severity-ratings/">Using Severity Ratings to Prioritize Web Accessibility Remediation</a></li><li><a href="/blog/25-tips/">25 Accessibility Tips to Celebrate 25 Years</a></li><li><a href="/blog/celebrating-webaims-25th-anniversary/">Celebrating WebAIM's 25th Anniversary</a></li><li><a href="/blog/introducing-ncademi/">Introducing NCADEMI: The National Center on Accessible Digital Educational Materials & Instruction </a></li></ul> </div> <div class="footerblock"> <h2 id="popular">Popular Resources</h2> <ul> <li><a href="/training/virtual">WebAIM Training</a></li> <li><a href="/standards/wcag/checklist">WCAG 2 Checklist</a></li> <li><a href="/newsletter">WebAIM Monthly Newsletter</a></li> <li><a href="/resources/contrastchecker">Color Contrast Checker</a></li> <li><a href="/resources/designers/">Web Accessibility for Designers</a></li> <li><a href="http://wave.webaim.org/">WAVE Web Accessibility Evaluation Tool</a></li> </ul> </div> <div id="footerlinks"> <ul> <li><a id="footercontact" href="/contact">Contact</a></li> <li><a id="footerabout" href="/about">About</a></li> <li><a id="footerrss" href="/community/rss">RSS Feeds</a></li> <li><a id="footertwit" href="http://twitter.com/webaim">Twitter</a></li> <li><a id="footercopyright" href="/copyright">Copyright &amp; Terms of Use</a></li> </ul> </div> <div class="clear"></div> </div> </footer> </body> </html>

Pages: 1 2 3 4 5 6 7 8 9 10