{"id":1132,"date":"2019-05-08T15:32:29","date_gmt":"2019-05-08T19:32:29","guid":{"rendered":"https:\/\/wordpress.ocps.net\/presenceblog\/?p=1132"},"modified":"2019-05-08T15:35:22","modified_gmt":"2019-05-08T19:35:22","slug":"ada-and-tables","status":"publish","type":"post","link":"https:\/\/wordpress.ocps.net\/presenceblog\/ada-and-tables\/","title":{"rendered":"ADA and Tables"},"content":{"rendered":"

A few quick guide to ADA requirements for tables:<\/p>\n

    \n
  1. \n
    Every table must have a caption (title). In HTML, it looks like this:<\/div>\n

    <table Border=”0″><caption>Cups of coffee consumed by each teacher per week<\/caption>
    \n<\/span><\/li>\n<\/ol>\n

        This is not the same as text that might appear above the table.<\/p>\n

            <strong>Cups of coffee consumed by principals per week<\/strong>
    \n<\/span><\/p>\n

            <table border=”0″>
    \n<\/span><\/p>\n

                \u2026.
    \n<\/span><\/p>\n

            <\/table
    \n<\/span><\/p>\n

      \n
    1. Every table must have a single row of headers<\/li>\n
    2. Every header row must have a text value for every column<\/li>\n
    3. You must associate all cells in the table with the corresponding header for that column<\/li>\n
    4. You cannot use merged or split cells<\/li>\n
    5. While a table can consist of text rather than numbers, a table should not be used to format other content on the page.<\/li>\n<\/ol>\n

      Using SchoolMessenger’s editor for tables, these requirements are easy to meet. Using the figure below, let’s see how easy this is:<\/p>\n

      \"\"<\/p>\n

      The above image shows a table of the Partners in Education for one of our schools (Yes, I know the data is old, but that is a different story.) Note that table has a single row of headers across the top with a value for each column header. Also notice that each of the cells has a single value, well sort of. They did combine the contact name with their title in a few cases. But the main point here is that there are no merged or split cells. To format this table, locate the table icon in the Edit menu and click the down arrow to the right of the grid image to open the dropdown. The last button in the bottom right is the Table Properties button. Click it.<\/p>\n

      \"\"<\/p>\n

      This button shows the user definable properties of the table. The first three tab pages contains properties related to the table rows and columns (Table Design), table dimensions and layout (Table Properties), and cell properties which lets you customize the appearance of the cells and the Accessibility tab. Clicking this last tab shows the properties below:<\/p>\n

      \"\"<\/p>\n

      In Heading Rows (1), we type in a ‘1’ to select the first row as the headings row. It is also possible to create a table with a single column as a row header, but that is not as common so I will skip over that for now.<\/p>\n

      At the bottom of the screen is check box (2) which allow you to associate the cells in the table with the headers with a single click.<\/p>\n

      The Caption property (3) serves as the table title and using the Caption Align dropdown (4) lets you place the caption on the top, bottom, left, right or center of the table.<\/p>\n

      Partially hidden is the Summary field. When the table is very complex, you may need to supply a summary to explain the structure of the table. However, others believe that if the table structure is that complex, you would better serve the disabled who use screen readers by simplifying the table,<\/p>\n

      To summarize, creating an accessible table is partly a function of creating the correct table layout and partly a function of using the Table Wizard in SchoolMessenger’s editor. From within Microsoft Word, there is similar functionality by first creating a table layout. Then right-click in any cell and select table properties from the popup menu. Again, look for and open the Accessibility tab to access the properties.<\/p>\n

      \"\"<\/p>\n

      Table related Accessibility errors include:<\/h2>\n

      Level A:<\/p>\n

      All layout tables make sense when linearized.<\/p>\n

      All data tables contain <th> elements<\/p>\n

          This error occurs for any table that does not contain <th> elements (headers)<\/p>\n

      All layout tables do not contain <th> elements<\/p>\n

      Use <thead> to group repeated table headers, <tfoot> for repeated table footers<\/p>\n

          Just like <tbody> groups <tr> and <td> definitions in the body of the table, <thead> groups <tr> and <th> definitions in headers<\/p>\n

      Data tables that contain both row and column headers use the <scope> attribute to identify cells.<\/p>\n

      \"\"<\/p>\n

      All complex data tables have a summary<\/p>\n

      The summary is useful when the table has a complex structure (for example, when there are several sets of row or column headers, or when there are multiple groups of columns or rows). The summary may also be helpful for simple data tables that contain many columns or rows of data. Although many recommend simplifying the table.<\/p>\n

      All data table summaries describe navigation and structure of the table<\/p>\n

          Related to above.<\/p>\n

      Table captions identify the table<\/p>\n

      All data tables contain a <caption> unless the table is identified within the document<\/p>\n

      Data tables that contain more than one row\/column of headers use the <id> and <headers> attributes to identify cells.<\/p>\n

          Best to avoid this complication by limiting tables to a single row and\/or column header<\/p>\n

      Table summaries do not duplicate the table captions.<\/p>\n","protected":false},"excerpt":{"rendered":"

      A few quick guide to ADA requirements for tables: Every table must have a caption (title). In HTML, it looks like this: <table Border=”0″><caption>Cups of coffee consumed by each teacher per week<\/caption>     This is not the same as text that might appear above the table.         <strong>Cups of coffee consumed by principals per week<\/strong>         <table border=”0″> … <\/p>\n

      Continue reading “ADA and Tables”<\/span><\/a><\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[28,33,32,87,31],"tags":[93],"class_list":["post-1132","post","type-post","status-publish","format-standard","hentry","category-news-related-to-ada-and-accessibility","category-post-that-explains-how-to-perform-a-specific-activity","category-news-related-to-internet-and-intranet-sites","category-monsido-news","category-news-related-specifically-to-school-sites","tag-monsido-tables-accessibility-errors"],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":1316,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/a-couple-of-table-issues\/","url_meta":{"origin":1132,"position":0},"title":"A Couple of Table Issues","author":"Carlos Hernandez","date":"October 1, 2019","format":false,"excerpt":"In this post, we will look at a couple of table issues and the corresponding Monsido Issues that they may raise. First, you need to understand that there are essentially two types of tables possible, layout tables and data tables. Layout Tables Web designers used layout tables from the early\u2026","rel":"","context":"In "ADA News"","block_context":{"text":"ADA News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-to-ada-and-accessibility\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1252,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/quick-ada-hint-tables-cannot-be-included-as-an-image\/","url_meta":{"origin":1132,"position":1},"title":"Quick ADA Hint: Tables Cannot Be Included as an Image","author":"Carlos Hernandez","date":"August 30, 2019","format":false,"excerpt":"Tables with valuable information cannot be included as an image.\u00a0 They must be created as a table within the portal editor (there is too much information to be conveyed by simply including the text in the Alt-Text of the image.\u00a0 When a visually impaired person attempts to read this page\u2026","rel":"","context":"In "ADA News"","block_context":{"text":"ADA News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-to-ada-and-accessibility\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":875,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/schoolmessenger-makes-it-easy-to-build-ada-compliant-and-responsive-tables\/","url_meta":{"origin":1132,"position":2},"title":"SchoolMessenger Makes It Easy to Build ADA Compliant and Responsive Tables","author":"Carlos Hernandez","date":"November 8, 2018","format":false,"excerpt":"In this post, I am going to examine several issues related to using tables on your SchoolMessenger web pages. First some Do's and Don'ts. Do's Use tables to display numeric or alphanumeric data Provide a table title or caption to identify the table especially when referenced from accompanying text. Provide\u2026","rel":"","context":"In "ADA News"","block_context":{"text":"ADA News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-to-ada-and-accessibility\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":781,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/tables-have-accessibility-requirements-too\/","url_meta":{"origin":1132,"position":3},"title":"Tables Have Accessibility Requirements Too","author":"Carlos Hernandez","date":"September 12, 2018","format":false,"excerpt":"Tables have long been a popular way of displaying related information that would be difficult to read if you provided the same information in paragraph form. Tables imply a structure to the data and thus are visual. Each row of the table represents an instance of whatever you are listing\u2026","rel":"","context":"In "ADA News"","block_context":{"text":"ADA News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-to-ada-and-accessibility\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1075,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/accessibility-errors-with-monsido-part-1\/","url_meta":{"origin":1132,"position":4},"title":"Tackling Accessibility Errors with Monsido \u2013 Part 1","author":"Carlos Hernandez","date":"April 24, 2019","format":false,"excerpt":"The new Monsido Accessibility reports break down errors into three major categories: Quality Assurance \u2013 Includes broken links and misspellings. Accessibility \u2013 These are the common ADA issues. SEO (Search Engine Optimization) \u2013 These issues affect the overall performance of the pages This post focuses on the Accessibility area only.\u2026","rel":"","context":"In "ADA News"","block_context":{"text":"ADA News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-to-ada-and-accessibility\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1143,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/are-you-a-new-editor-to-our-web-sites\/","url_meta":{"origin":1132,"position":5},"title":"Are You a New Editor To Our Web Sites?","author":"Carlos Hernandez","date":"May 23, 2019","format":false,"excerpt":"First, Happy 100th post! If you have just been assigned to work on your district department or school web site, you may be asking yourself where to begin. There is no quick 5-minute course on everything you need to know. However, here are some suggestions on how to start learning\u2026","rel":"","context":"In "ADA News"","block_context":{"text":"ADA News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-to-ada-and-accessibility\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/wordpress.ocps.net\/wp-content\/uploads\/2019\/05\/Monsido-001-1024x576.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/wordpress.ocps.net\/wp-content\/uploads\/2019\/05\/Monsido-001-1024x576.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/wordpress.ocps.net\/wp-content\/uploads\/2019\/05\/Monsido-001-1024x576.png?resize=525%2C300 1.5x"},"classes":[]}],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/1132","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/comments?post=1132"}],"version-history":[{"count":2,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/1132\/revisions"}],"predecessor-version":[{"id":1135,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/1132\/revisions\/1135"}],"wp:attachment":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/media?parent=1132"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/categories?post=1132"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/tags?post=1132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}