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 provides 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.
The WordPress Accessibility Coding Standards state that “All new or updated code released in WordPress must conform with the Web Content Accessibility Guidelines 2.0 at level AA.”
Yes, absolutely – if you want to display data. You should not use tables for layout, but you definitely must use tables to display tabular information in a meaningful way.
Well-coded tables are important for screen reader users to read, navigate, and understand the data in the table.
Creating a table for data 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 that data much harder to understand for a screen reader user.
Choose your HTMLHTMLHTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. based on semantics: use a table to show tabular information.
// 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.