Making Tables accessible on WordPress

How do I make these tables accessible on WordPress

<!-- wp:paragraph --> <p>By Kate Deibel, PhD, Inclusion &amp; Accessibility Librarian</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>Every year, the third Thursday of May marks <a href="https://globalaccessibilityawarenessday.org/events/">Global Accessibility Awareness Day</a> (GAAD), a day to teach and focus on digital access and inclusion. Accessibility is an every day activity that should be incorporated into your work always. The way to do this is through practice and habit. Ergo, I encourage you to take 5-10 minutes today and try out a new practice. Here are some examples of brief things you can do to take action:</p> <!-- /wp:paragraph --> <!-- wp:list --> <ul> <li>While working on a PowerPoint deck, Word document, or a lengthy email in Outlook, give the accessibility checker a try. Under the <em>Review</em> tab in the ribbon, use the <em>Check Accessibility</em> tool to get input on your content. If you're working on a PDF document, go to <em>View</em>, <em>Tools</em>, <em>Accessibility </em>and use the <em>Accessibility Check</em>. These tools come with suggestions on how to fix accessibility issues.</li><li>Got a few more minutes? Open an old document or slide deck and check to see if it needs accessibility remediation. Why? Accessibility features go with you most of the time when you copy and paste. Write that alt text for that photograph once in Word and it will be there if you paste the image from the first document to another. You still need to check accessibility, of course. </li><li>Ever wonder how accessible some webpage or e-resource are? Take a brief moment and do keyboard testing. Open the page in a browser and try to use it only with your keyboard. Can you navigate everywhere? Click every link and button? Keyboard accessibility is a major keystone to accessibility as it is crucial for users with vision or motor disabilities. Moreover, 95% of the issues related to keyboard access cannot be tested automatically. A human has to do it. Here is a list of what keys do what:</li></ul> <!-- /wp:list --> <!-- wp:table {"align":"center"} --> <figure class="wp-block-table aligncenter"><table><thead><tr><th>Keyboard Key</th><th>What it does</th></tr></thead><tbody><tr><td><em>Tab</em></td><td>Move to next link, button, or form&nbsp; field</td></tr><tr><td><em>Shift + Tab</em></td><td>Move to previous link, button, etc.</td></tr><tr><td><em>Enter</em></td><td>Trigger current link or button</td></tr><tr><td><em>Space</em></td><td>Trigger interactive element (dropdown menus, buttons, checkboxes, etc.)</td></tr><tr><td><em>Up / Down</em></td><td>Navigate menus, choose radio buttons, adjust number inputs</td></tr><tr><td><em>Right / Left</em></td><td>Navigate menus, adjust sliders, etc.</td></tr><tr><td><em>Escape</em></td><td>Close menu or modal</td></tr></tbody></table></figure> <!-- /wp:table --> <!-- wp:list --> <ul><li>Although the above actions are about doing accessibility, it’s important to also understand why to do it. Take a moment to listen or read from disabled voices. Some of my online faves are <a href="https://www.youtube.com/user/MissJessicaKH/featured">Jessica Kellgren-Fozard</a>, <a href="https://www.youtube.com/channel/UCld5SlwHrXgAYRE83WJOPCw">Tommy Edison</a>, and the <a href="https://disabilityvisibilityproject.com/">Disability Visibility Project by Alice Wong</a>. You could also watch the <a href="https://www.netflix.com/title/81001496">Crip Camp</a> documentary on Netflix. </li></ul> <!-- /wp:list --> <!-- wp:paragraph --> <p>While Global Accessibility Awareness Day is one day for the world to focus for disability access, people with disabilities have that focus 365 days a year. Do your part to make the world better and more accessible for all.</p> <!-- /wp:paragraph -->

Code (markup):

 

I am confused.

The code you posted looks like copy paste from a webpage instead of tables. Further since it is not formatted, it is all on one line making it hard to examine.

Do you mean accessible to you on turdpress or accessible to search engines, visitors, etc. on the internet?

 

<!-- wp:paragraph -->
<p>By Kate Deibel, PhD, Inclusion &amp; Accessibility Librarian</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Every year, the third Thursday of May marks <a href="https://globalaccessibilityawarenessday.org/events/">Global Accessibility Awareness Day</a> (GAAD), a day to teach and focus on digital access and inclusion. Accessibility is an every day activity that should be incorporated into your work always. The way to do this is through practice and habit. Ergo, I encourage you to take 5-10 minutes today and try out a new practice. Here are some examples of brief things you can do to take action:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul>
<li>While working on a PowerPoint deck, Word document, or a lengthy email in Outlook, give the accessibility checker a try. Under the <em>Review</em> tab in the ribbon, use the <em>Check Accessibility</em> tool to get input on your content. If you're working on a PDF document, go to <em>View</em>, <em>Tools</em>, <em>Accessibility </em>and use the <em>Accessibility Check</em>. These tools come with suggestions on how to fix accessibility issues.</li><li>Got a few more minutes? Open an old document or slide deck and check to see if it needs accessibility remediation. Why? Accessibility features go with you most of the time when you copy and paste. Write that alt text for that photograph once in Word and it will be there if you paste the image from the first document to another. You still need to check accessibility, of course. </li><li>Ever wonder how accessible some webpage or e-resource are? Take a brief moment and do keyboard testing. Open the page in a browser and try to use it only with your keyboard. Can you navigate everywhere? Click every link and button? Keyboard accessibility is a major keystone to accessibility as it is crucial for users with vision or motor disabilities. Moreover, 95% of the issues related to keyboard access cannot be tested automatically. A human has to do it. Here is a list of what keys do what:</li></ul>
<!-- /wp:list -->

<!-- wp:table {"align":"center"} -->
<figure class="wp-block-table aligncenter"><table><thead><tr><th>Keyboard Key</th><th>What it does</th></tr></thead><tbody><tr><td><em>Tab</em></td><td>Move to next link, button, or form&nbsp; field</td></tr><tr><td><em>Shift + Tab</em></td><td>Move to previous link, button, etc.</td></tr><tr><td><em>Enter</em></td><td>Trigger current link or button</td></tr><tr><td><em>Space</em></td><td>Trigger interactive element (dropdown menus, buttons, checkboxes, etc.)</td></tr><tr><td><em>Up / Down</em></td><td>Navigate menus, choose radio buttons, adjust number inputs</td></tr><tr><td><em>Right / Left</em></td><td>Navigate menus, adjust sliders, etc.</td></tr><tr><td><em>Escape</em></td><td>Close menu or modal</td></tr></tbody></table></figure>
<!-- /wp:table -->

<!-- wp:list -->
<ul><li>Although the above actions are about doing accessibility, it’s important to also understand why to do it. Take a moment to listen or read from disabled voices. Some of my online faves are <a href="https://www.youtube.com/user/MissJessicaKH/featured">Jessica Kellgren-Fozard</a>, <a href="https://www.youtube.com/channel/UCld5SlwHrXgAYRE83WJOPCw">Tommy Edison</a>, and the <a href="https://disabilityvisibilityproject.com/">Disability Visibility Project by Alice Wong</a>. You could also watch the <a href="https://www.netflix.com/title/81001496">Crip Camp</a> documentary on Netflix. </li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>While Global Accessibility Awareness Day is one day for the world to focus for disability access, people with disabilities have that focus 365 days a year. Do your part to make the world better and more accessible for all.</p>
<!-- /wp:paragraph -->

Code (markup):

 

That looks a lot better, but we still do not know what you mean by "accessibility."

 

The table needs to be made properly accessible. The first row needs to be table headers: th elements not td elements. Ideally, each cell in the header row should be
<th scope=”col”>…</th>
Also, the markup on the page is really bad. There are individual lists instead of a solid list.

It seems like the issue is The table should be within the list and the paragraph right after the table belongs to the third list item.

Best way to be is to copy the content out and reconstruct it as pure html. Then, insert it back into the page as a single “custom html” block.

 

To create a table, find TablePress in the WordPress dashboard, and select TablePress > Add New Table.

When you add a new table, you’ll be prompted to name it and select the number of rows and columns you would like included. If your site uses tables frequently, it may be helpful to add a description of what the table is used for as well.

Click Add Table at the bottom of the page when those are set.
With your table created, you can begin filling in the cells and organizing your content. The Table Manipulation pane offers options to easily insert links, images, and to add more rows or columns.