The AccessibilityAccessibilityAccessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) Team shares accessibility expertise across the project to improve the accessibility of WordPress coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. and resources.
You can also ask questions during Accessibility Team Office Hours every Wednesday at 14:00 UTC in the accessibility channel in SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..
Tables are the recommended way to display tabular data. Tabular data is any data that is best navigated in two dimensions: where there are relationships both vertically along columns and horizontally in rows. Tables are not a good idea for layout, however.
Well-coded tables are important for screen reader users so they can read, navigate, and understand the data.
Creating a pseudo-table for data by using divs and CSSCSSCSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. will make the data much harder to understand for a screen reader user.
// Incorrect: don’t use a table for layout only, for example in forms.
<table>
<tr>
<td><label for="blogname">Site Title</label></th>
<td><input name="blogname" type="text" id="blogname" value="" /></td>
</tr>
[...etc…]
</table>
// A data table in it’s most basic form.
<table>
<caption>The cities of WordCamp Europe</caption>
<tr><th>Year</th><th>City</th></tr>
<tr><td>2017</td><td>Paris</td></tr>
<tr><td>2018</td><td>Belgrade</td></tr>
</table>
HeaderHeaderThe header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. cells must be marked up with <th>, and data cells with <td>. For more complex tables, you may need thead, colgroup, rowgroup, scope, id, and headers attributes. The W3CW3CThe World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards.https://www.w3.org/. WAI has a good and complete tutorial on how to do complex tables.
The rule of thumb is: the simpler the better. If your table is going to be very complex, consider splitting it up into more tables or find a different way to organize your data. It will probably also be easier to read for sighted users.
One of the major limitations to tables is that they are difficult to make responsive. There are ways to do it while retaining accessibilityAccessibilityAccessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility).