{"id":1518,"date":"2019-12-03T12:47:26","date_gmt":"2019-12-03T12:47:26","guid":{"rendered":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/?p=1518"},"modified":"2020-02-21T08:09:19","modified_gmt":"2020-02-21T08:09:19","slug":"accessible-pdfs-complex-tables-5-5","status":"publish","type":"post","link":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/posts\/1518","title":{"rendered":"Accessible PDFs &#8211; Complex Tables (5\/5)"},"content":{"rendered":"<p>This is the last post of Accessible PDFs series of blogs that I am doing. You can view the other posts from<\/p>\n<ul>\n<li><a href=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/posts\/1463\">Accessible PDFs \u2013 Creating a PDF (1\/5)<\/a><\/li>\n<li><a href=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/posts\/1474\">Accessible PDFs \u2013 Document Structure (2\/5)<\/a><\/li>\n<li><a href=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/posts\/1488\">Accessible PDFs \u2013 Tags and Reading Order (3\/5)<\/a><\/li>\n<li><a href=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/posts\/1507\">Accessible PDFs \u2013 Accessibility Checking (4\/5)<\/a><\/li>\n<\/ul>\n<h3>Tables<\/h3>\n<p>It is difficult for screen reader users to visualise tables unless they are correctly tagged. I have shown how Table headers and Data Cells should be defined in\u00a0<a href=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/posts\/1474\">Accessible PDFs \u2013 Document Structure (2\/5)<\/a>\u00a0blog post.<\/p>\n<p>However, I wasn&#8217;t sure of how to make complex PDFs tables accessible. So I installed the <a href=\"https:\/\/www.nvaccess.org\/\">NVDA (free screen reader) software\u00a0<\/a>and tried it myself. Here I will share what I learnt in the blog.<\/p>\n<p>These two resources were very useful to me in developing my understanding of complex tables:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=H3R9OAIPBeY\">Complex Table Header IDs [You Tube video]<\/a><\/li>\n<li><a href=\"https:\/\/www.adobe.com\/accessibility\/products\/acrobat\/pdf-repair-repair-tables.html\">PDF Accessibility Repair: Examine and Repair Tables<\/a><\/li>\n<\/ul>\n<h3>Complex Tables<\/h3>\n<p>Any table that has merged rows or columns or more than one level of heading are complex tables. I take the example here:<\/p>\n<table style=\"height: 148px;\" border=\"1\" width=\"714\">\n<tbody>\n<tr>\n<td colspan=\"2\" width=\"301\">\n<p style=\"text-align: center;\"><strong>English Marks Average<\/strong><\/p>\n<\/td>\n<td colspan=\"2\" width=\"301\">\n<p style=\"text-align: center;\"><strong>Maths marks Average<\/strong><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td width=\"150\">\n<p style=\"text-align: center;\"><strong>Girls<\/strong><\/p>\n<\/td>\n<td style=\"text-align: center;\" width=\"150\"><strong>Boys<\/strong><\/td>\n<td style=\"text-align: center;\" width=\"150\"><strong>Girls<\/strong><\/td>\n<td style=\"text-align: center;\" width=\"150\"><strong>Boys<\/strong><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center;\" width=\"150\">81<\/td>\n<td style=\"text-align: center;\" width=\"150\">82<\/td>\n<td style=\"text-align: center;\" width=\"150\">77<\/td>\n<td width=\"150\">\n<p style=\"text-align: center;\">76<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Here I have two merged cells making it a complex table.<\/p>\n<p>First I assigned TH (Table Header) and TD (Table Data) to correct the table&#8217;s structure. If you are unfamiliar with how to do this please visit\u00a0\u00a0<a href=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/posts\/1474\">Accessible PDFs \u2013 Document Structure (2\/5)<\/a>\u00a0blog post.<\/p>\n<p>However, NVDA screen reader was not reading the structure of the table correctly.<\/p>\n<p>Listen to what NVDA read to me:<\/p>\n<!--[if lt IE 9]><script>document.createElement('audio');<\/script><![endif]-->\n<audio class=\"wp-audio-shortcode\" id=\"audio-1518-1\" preload=\"none\" style=\"width: 100%;\" controls=\"controls\"><source type=\"audio\/mpeg\" src=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/12\/Table-read-incorrectly.mp3?_=1\" \/><a href=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/12\/Table-read-incorrectly.mp3\">https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/12\/Table-read-incorrectly.mp3<\/a><\/audio>\n<div style=\"background-color: #e6e6ea;\">\n<p>Transcript:<\/p>\n<p>Table with three rows and four columns row one column one English Marks Average. Column two Maths Marks Average. Row two\u00a0English Marks Average column one Girls.\u00a0Maths Marks Average column two Boys. Column three Girls. Column four Boys. Row three\u00a0English Marks Average Girls column one 81.\u00a0Maths Marks Average\u00a0column two 82. Column three 77. Column four 76.<\/p>\n<\/div>\n<p>This table structure is not correctly read out by the screen reader as it stands. We need to make use of Column Span, Row Span, Scope, ID and Associated Header Cell IDs to give the correct structure to the screen reader software.<\/p>\n<p>English Marks Average and Maths Marks Average are column headers spanning two columns. So for the header cell <em>English Marks Average<\/em> in the <strong>Table Cell Properties<\/strong> I selected:<\/p>\n<ul>\n<li>Type: Header Cell<\/li>\n<li><strong>Scope: None<\/strong><\/li>\n<li>Row Span: 1<\/li>\n<li>Column Span: 2<\/li>\n<li>ID: English (you can give any name you want as long as it makes sense to you. This is not read out by the screen reader and only used to indicate the structure)<\/li>\n<\/ul>\n<p>Note: Scope should be selected as None.<\/p>\n<figure id=\"attachment_1522\" aria-describedby=\"caption-attachment-1522\" style=\"width: 1004px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/12\/Engl.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1522 size-full\" src=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/12\/Engl.png\" alt=\"Table Cell Properties options selected for header cell English Marks Average\" width=\"1004\" height=\"554\" srcset=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/12\/Engl.png 1004w, https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/12\/Engl-300x166.png 300w, https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/12\/Engl-768x424.png 768w\" sizes=\"(max-width: 1004px) 100vw, 1004px\" \/><\/a><figcaption id=\"caption-attachment-1522\" class=\"wp-caption-text\">Figure 1: Table Cell Properties for first level header<\/figcaption><\/figure>\n<p>I did the same for <em>Maths Marks Average<\/em> header cell and gave ID as Math.\u00a0If your table has headers spanning rows you will have to do similar to rows.<\/p>\n<p>Second row carry second level header cells for my table. For each of these cells I selected Type: Header Cell and Scope: None and gave G1, B1 and G2, B2 as IDs.<\/p>\n<p><strong>IMPORTANT: <\/strong>You have to select <strong>Scope<\/strong> as <strong>None<\/strong> if you are setting heading IDs.<\/p>\n<p>Next I added English as Associated Header Cell IDs for G1 and B1; and Math as\u00a0 Associated Header Cell IDs for G2 and B2.<\/p>\n<figure id=\"attachment_1523\" aria-describedby=\"caption-attachment-1523\" style=\"width: 560px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/12\/second.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1523 size-full\" src=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/12\/second.png\" alt=\"Table Cell Properties associating Header Cell IDs for second level headers\" width=\"560\" height=\"537\" srcset=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/12\/second.png 560w, https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/12\/second-300x288.png 300w\" sizes=\"(max-width: 560px) 100vw, 560px\" \/><\/a><figcaption id=\"caption-attachment-1523\" class=\"wp-caption-text\">Figure 2: Table Cell Properties for second level header cell<\/figcaption><\/figure>\n<p>Now for each of the data cells you have to do the same &#8211; that is for each data cell open Table Cell Properties and insert Associated Header Cell IDs. The order Associated Header Cell IDs appear on the screen is the order that the screen reader will read them. So make sure to associate them in the order that it should be presented to the screen reader user.\u00a0 I know this because I tried the other way around to test.<\/p>\n<p>Because I want the first level header and then the second level header read in that order, for third row first column I selected following Associated Header Cell IDs: English, G1. This will make the screen reader to say\u00a0<em>English Marks Average<\/em> and then <em>Girls<\/em> before reading the value of the cell.<\/p>\n<figure id=\"attachment_1524\" aria-describedby=\"caption-attachment-1524\" style=\"width: 556px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/12\/g1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1524 size-full\" src=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/12\/g1.png\" alt=\"Table Cell Properties for first data cell\" width=\"556\" height=\"539\" srcset=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/12\/g1.png 556w, https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/12\/g1-300x291.png 300w\" sizes=\"(max-width: 556px) 100vw, 556px\" \/><\/a><figcaption id=\"caption-attachment-1524\" class=\"wp-caption-text\">Figure 3: Table Cell Properties for first data cell<\/figcaption><\/figure>\n<p>Once you assign all data cells with Associated Header Cell IDs the table will be fully accessible.<\/p>\n<p>Now listen to how NVDA screen reader reads the table correctly.<\/p>\n<audio class=\"wp-audio-shortcode\" id=\"audio-1518-2\" preload=\"none\" style=\"width: 100%;\" controls=\"controls\"><source type=\"audio\/mpeg\" src=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/12\/corrected.mp3?_=2\" \/><a href=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/12\/corrected.mp3\">https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/12\/corrected.mp3<\/a><\/audio>\n<div style=\"background-color: #e6e6ea;\">\n<p>Transcript:<\/p>\n<p>In the first row column one and two and column three and four were merged. Table with three rows and four columns.\u00a0 Row one column one through two English Marks Average. Column three through four Maths Marks Average. Row two\u00a0English Marks Average column one Girls.\u00a0English Marks Average column two Boys. Maths Marks Average column three Girls.\u00a0Maths Marks Average column four Boys.\u00a0 Row three English Marks Average Girls column one 81. English Marks Average Boys column two 82. Maths Marks Average Girls column three 77. Maths Marks Average Boys column four 76.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>This is the last post of Accessible PDFs series of blogs that I am doing. You can view the other posts from Accessible PDFs \u2013&hellip;<\/p>\n","protected":false},"author":10,"featured_media":1481,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[36],"tags":[26,136,134,133,137,135],"_links":{"self":[{"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/posts\/1518"}],"collection":[{"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/comments?post=1518"}],"version-history":[{"count":8,"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/posts\/1518\/revisions"}],"predecessor-version":[{"id":1584,"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/posts\/1518\/revisions\/1584"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/media\/1481"}],"wp:attachment":[{"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/media?parent=1518"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/categories?post=1518"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/tags?post=1518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}