Делаем таблицы доступными в WordPress

Как сделать эти таблицы доступными в WordPress?

 <!-- wp:paragraph --> <p>By Kate Deibel, PhD, Inclusion & Accessibility Librarian</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>Every year, the third Thursday of May marks <a href="[URL='https://lumtu.com/yti/c0550cy9odHRwczovL2dsb2JhbGFjY2Vzc2liaWxpdHlhd2FyZW5lc3NkYXkub3JnL2V2ZW2V2']https://globalaccessibilityawarenessday.org/events/[/URL]">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="[URL='https://lumtu.com/yti/ZIXXIZWRodHRwczovL3lvdXR1YmUuY29tL3VzZXIvTWlzc0plc3NpY2FLSC9mZWF0dFWZ']https://www.youtube.com/user/MissJessicaKH/featured[/URL]">Jessica Kellgren-Fozard</a>, <a href="[URL='https://lumtu.com/yti/QAUUAQ3dodHRwczovL3lvdXR1YmUuY29tL2NoYW5uZWwvVUNsZDVTbHdIclhnQVlSRTgzV0pP0Vz']https://www.youtube.com/channel/UCld5SlwHrXgAYRE83WJOPCw[/URL]">Tommy Edison</a>, and the <a href="[URL='https://lumtu.com/yti/bwbbwbS9odHRwczovL2Rpc2FiaWxpdHl2aXNpYmlsaXR5cHJvamVjdC5jCdj']https://disabilityvisibilityproject.com/[/URL]">Disability Visibility Project by Alice Wong</a>. You could also watch the <a href="[URL='https://lumtu.com/yti/OANNAOTZodHRwczovL25ldGZsaXguY29tL3RpdGxlLzgxMDAxDMx']https://www.netflix.com/title/81001496[/URL]">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 -->

Код (разметка):

Я смущен. Размещенный вами код выглядит как копия с веб-страницы, а не как таблица.

Кроме того, поскольку он не отформатирован, он находится в одной строке, что затрудняет его изучение. Вы имеете в виду доступный для вас на turdpress или доступный для поисковых систем, посетителей и т. д. в Интернете?

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

<!-- wp:paragraph -->
<p>Every year, the third Thursday of May marks <a href="[URL='https://lumtu.com/yti/c0550cy9odHRwczovL2dsb2JhbGFjY2Vzc2liaWxpdHlhd2FyZW5lc3NkYXkub3JnL2V2ZW2V2']https://globalaccessibilityawarenessday.org/events/[/URL]">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="[URL='https://lumtu.com/yti/ZIXXIZWRodHRwczovL3lvdXR1YmUuY29tL3VzZXIvTWlzc0plc3NpY2FLSC9mZWF0dFWZ']https://www.youtube.com/user/MissJessicaKH/featured[/URL]">Jessica Kellgren-Fozard</a>, <a href="[URL='https://lumtu.com/yti/QAUUAQ3dodHRwczovL3lvdXR1YmUuY29tL2NoYW5uZWwvVUNsZDVTbHdIclhnQVlSRTgzV0pP0Vz']https://www.youtube.com/channel/UCld5SlwHrXgAYRE83WJOPCw[/URL]">Tommy Edison</a>, and the <a href="[URL='https://lumtu.com/yti/bwbbwbS9odHRwczovL2Rpc2FiaWxpdHl2aXNpYmlsaXR5cHJvamVjdC5jCdj']https://disabilityvisibilityproject.com/[/URL]">Disability Visibility Project by Alice Wong</a>. You could also watch the <a href="[URL='https://lumtu.com/yti/OANNAOTZodHRwczovL25ldGZsaXguY29tL3RpdGxlLzgxMDAxDMx']https://www.netflix.com/title/81001496[/URL]">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):

Чтобы создать таблицу, найдите TablePress на панели управления WordPress и выберите TablePress > Добавить новую таблицу. Когда вы добавляете новую таблицу, вам будет предложено дать ей имя и выбрать количество строк и столбцов, которые вы хотите включить.

Если на вашем сайте часто используются таблицы, возможно, будет полезно добавить описание того, для чего они используются. Нажмите «Добавить таблицу» внизу страницы, когда они будут установлены. Создав таблицу, вы можете начать заполнять ячейки и систематизировать содержимое.

Панель «Манипуляция таблицами» предлагает возможности для простой вставки ссылок, изображений, а также добавления дополнительных строк или столбцов.

Стол должен быть обеспечен надлежащим доступом.

Первая строка должна быть заголовками таблиц: элементы th, а не элементы td. В идеале каждая ячейка в строке заголовка должна быть … Кроме того, разметка на странице очень плохая.

Вместо сплошного списка существуют отдельные списки. Похоже, проблема в том, что таблица должна находиться в списке, а абзац сразу после таблицы принадлежит третьему элементу списка. Лучший способ — скопировать контент и восстановить его как чистый HTML.

Затем вставьте его обратно на страницу как один блок «пользовательский HTML».