{"id":909,"date":"2022-05-20T13:58:06","date_gmt":"2022-05-20T13:58:06","guid":{"rendered":"https:\/\/web.tarleton.edu\/accessibility\/?page_id=909"},"modified":"2025-05-12T16:46:13","modified_gmt":"2025-05-12T16:46:13","slug":"tables","status":"publish","type":"page","link":"https:\/\/www.tarleton.edu\/accessibility\/tables\/","title":{"rendered":"Tables"},"content":{"rendered":"\n<p><a href=\"http:\/\/webaim.org\/techniques\/tables\/data\">Tables are only for tabular data.<\/a>&nbsp;Given how they can often force users to scroll horizontally on webpages across video screen sizes, more complex tables should be in spreadsheet documents where they can be more easily navigated or reorganized into simple tables. For example, the Tarleton website&#8217;s new responsive template is best at 4 or fewer table columns, so there isn&#8217;t horizontal scrolling on mobile phones.<\/p>\n\n\n\n<p>Where word processor functionality is possible (e.g. WYSIWYG editor), you should use lists (ordered\/numeric or unordered\/bulleted) for simple lists of ideas and tables for tabular data.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Proper Semantic Usage<\/h1>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use a table header, not a\u00a0<a href=\"https:\/\/www.tarleton.edu\/accessibility\/standards\/headings.html\">heading (Heading 1 &#8211; 6)<\/a>, to\u00a0<a href=\"http:\/\/webaim.org\/techniques\/tables\/data\">identify the contents in the column or row<\/a>.<\/li>\n\n\n\n<li>Do not use bold (the &lt;strong> HTML tag) to create table headers. The table cell should be defined in its properties as a\u00a0<strong>header<\/strong>\u00a0as instead of\u00a0<strong>data<\/strong>.<\/li>\n\n\n\n<li>Define the scope of a table header to its column or row to assist screen readers in identifying table cell locations.<\/li>\n\n\n\n<li>Where word processor functionality is possible, never use spacing to format any alignment issues or special characters (e.g. *, !, -, +, #, ^)\u00a0to lay out content.<\/li>\n\n\n\n<li>Where word processor functionality is possible, never use special characters (e.g. *, !, -, +, #, ^) to emphasize the importance of something.<\/li>\n\n\n\n<li>Use only one (1) space at the end of a sentence before starting a new sentence.<\/li>\n\n\n\n<li>Do use bold (the &lt;strong>\u00a0HTML tag) or italics (the &lt;em>\u00a0HTML tag) on important phrases.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><th scope=\"col\">Bad Table Example<\/th><th scope=\"col\">Why is it Ineffective?<\/th><\/tr><tr><td>Cats&#8230;&#8230;&#8230;..Number<br>Tabby&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;.1<br>Tuxedo&#8230;&#8230;&#8230;&#8230;&#8230;.12<br>Calico&#8230;&#8230;&#8230;&#8230;&#8230;.355<\/td><td>Without semantic formatting, screen readers view the alignment via the period (.) as another character in the paragraph, and it reads it as just another part of the paragraph. The line breaks do not distinguish between rows. It provide no indication that it is a table or use the table mode functionality.<\/td><\/tr><tr><td>Cats &#8211; Number &#8211; Bad<br>Tabby &#8211; 1 &#8211; No<br>Tuxedo &#8211; 12 &#8211; Some<br>Calico &#8211; 355 &#8211; All<\/td><td>Without semantic formatting, screen readers view the separation of columns via the hyphen (-) as another character in the paragraph, and it reads it as just another part of the paragraph. The line breaks do not distinguish between rows. It provide no indication that it is a table or use the table mode functionality.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">References<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Guides and How-To&#8217;s<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/webstandards.hhs.gov\/guidelines\/\">Usability.gov&#8217;s Web Standards and Usability Guidelines<\/a>\n<ul class=\"wp-block-list\">\n<li>Chapter 3: Accessibility<\/li>\n\n\n\n<li>Chapter 9: Headings, Titles, and Labels<\/li>\n\n\n\n<li>Chapter 11: Text Appearance<\/li>\n\n\n\n<li>Chapter 12: Lists<\/li>\n\n\n\n<li>Chapter 15: Writing Web Content<\/li>\n\n\n\n<li>Chapter 16: Content Organization<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Web Accessibility Initiative (WAI)\n<ul class=\"wp-block-list\">\n<li>Tutorials\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/page-structure\/headings\/\">Headings<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/page-structure\/content\/\">Content Structure<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/tables\/\">Tables<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Designing and Developing\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tips\/writing\/#use-headings-to-convey-meaning-and-structure\">Use headings to convey meaning and structure<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tips\/writing\/#make-link-text-meaningful\">Make link text meaningful<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tips\/writing\/#provide-clear-instructions\">Provide clear instructions<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tips\/writing\/#keep-content-clear-and-concise\">Keep content clear and concise<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tips\/designing\/#provide-clear-and-consistent-navigation-options\">Provide clear and consistent navigation options<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tips\/designing\/#create-designs-for-different-viewport-sizes\">Create designs for different viewport sizes<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tips\/developing\/#use-mark-up-to-convey-meaning-and-structure\">Use mark-up to convey meaning and structure<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Web\u00a0AIM\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/webaim.org\/techniques\/tables\/data\">Creating Accessible Tables<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/webaim.org\/techniques\/screenreader\/\">Designing for Screen Reader Compatibility<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Guidelines<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/www.w3.org\/WAI\/WCAG20\/quickref\/#content-structure-separation\"><abbr title=\"Web Content Accessibility Guidelines\">WCAG<\/abbr>\u00a02.0 Guideline 1.3 &#8211; Adaptable<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/content-structure-separation.html\">Understanding\u00a0<abbr title=\"Web Content Accessibility Guidelines\">WCAG<\/abbr>\u00a02.0 Guideline 1.3<\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/content-structure-separation-programmatic.html\">1.3.1 Info and Relationships Level A<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/content-structure-separation-sequence.html\">1.3.2 Meaningful Sequence Level A<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/content-structure-separation-understanding.html\">1.3.3 Sensory Characteristics Level A<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"http:\/\/www.w3.org\/TR\/WCAG20-TECHS\/G115.html\">Techniques for\u00a0<abbr title=\"Web Content Accessibility Guidelines\">WCAG<\/abbr>\u00a02.0 G115: Using semantic elements to mark up structure<\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/www.w3.org\/TR\/WCAG20-TECHS\/H39.html\">H39: Using caption elements to associate data table captions with data tables<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.w3.org\/TR\/WCAG20-TECHS\/H51.html\">H51: Using table markup to present tabular information<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Simulations<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=d5oZf9ULAyw\">User Simulation: Through Eyes of a Screen Reader<\/a><\/li>\n\n\n\n<li>LevelAccess\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=EEN79RRvKqE\">Simulation: ZoomText Demo<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=fCrZhnFrxjk\">Simulation: Screen Magnification &amp; Reflow in Acrobat Reader<\/a>\u00a0(also example of horizontal scrolling issues)<\/li>\n\n\n\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=45R0pb8YwFE\">Simulation: Screen Reader Language Support<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=QP1rzxMRap4\">Simulation: Web Headings for Screen Readers<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=6dFakpCp7S8\">Simulation: Readability<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=KmDGvquzn2k\">User Simulation: Carly&#8217;s Caf\u00e9 &#8211; Experience Autism Through Carly&#8217;s Eyes<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=ycCN3qTYVyo\">The National Autistic Society Simulation: Autism and sensory sensitivity<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Tables are only for tabular data.&nbsp;Given how they can often force users to scroll horizontally on webpages across video screen sizes, more complex tables should be in spreadsheet documents where &#8230;<\/p>\n","protected":false},"author":3,"featured_media":580,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-fullwidth.php","meta":{"_acf_changed":false,"inline_featured_image":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"class_list":["post-909","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"coauthors":[],"author_meta":{"author_link":"https:\/\/www.tarleton.edu\/accessibility\/author\/keegan-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2\/","display_name":"keegan"},"relative_dates":{"created":"Posted 4 years ago","modified":"Updated 11 months ago"},"absolute_dates":{"created":"Posted on May 20, 2022","modified":"Updated on May 12, 2025"},"absolute_dates_time":{"created":"Posted on May 20, 2022 1:58 pm","modified":"Updated on May 12, 2025 4:46 pm"},"featured_img_caption":"","featured_img":false,"series_order":"","_links":{"self":[{"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/wp\/v2\/pages\/909","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/wp\/v2\/comments?post=909"}],"version-history":[{"count":1,"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/wp\/v2\/pages\/909\/revisions"}],"predecessor-version":[{"id":1532,"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/wp\/v2\/pages\/909\/revisions\/1532"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/wp\/v2\/media?parent=909"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}