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/..
In an archive template it is common to have a list of posts with the following elements for each post:
the post title
the excerptExcerptAn excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox.
There are a few things to watch out for to make this usable for everyone.
avoid multiple / duplicate links to the same location (see examples below)
avoid meaningless link texts (see examples below)
make sure that the thumbnail has an appropriate link text
avoid blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. level links
How many links per block will go to the same location? Is the post title, the thumbnail and the read more all linked to the same destination? That will cause a great deal of link clutter on your page. If you have, for example, 3 links to the same destination, consider removing 2 from the link list by adding the attribute aria-hidden=”true”. Then the link is removed from the screen readers link list.
But adding aria-hidden="true" alone might be confusing because you can tab into it, but it doesn’t announce anything for the screen reader users.
So: take the link also out of the tab order by using tabindex="-1":
Link text like “Read more…” or “Continue reading…” are meaningless, especially in a link list for screen reader users. Read more about what? It’s best to give context to links. Include the post title for your “read more” links so screen readers understand what’s being linked to, and optionally hide this by using the CSSCSSCSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. class screen reader text.
<a href="your-url">Continue reading
<span class="screen-reader-text"> Your post title</span>
Notice the blank space inside the .screen-readertext? This separates teh words so the text is read out as “continue reading your” instead of “continue readingyour”.
Wrapping a block level element, for example a heading and an image, inside a link is not helpful for screen readers. The whole content is read and there is no indication if an element inside the block is a heading or an image. Therefore do not wrap the block level element in a link but place the link inside the child elements of the block.
<div class="your-card"><h3><a href="your-url">Your post title</a></h3><img src="img-url" alt="Your post title"></div>
Putting this all together, the following code will have one link in the link list and one tab stop per block.
Note: this 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./PHPPHPPHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. http://php.net/manual/en/intro-whatis.php. is only basic, without the styling that a theme may need.
Removing a visible link from the tab order could be confusing for keyboard users.
Adding a link inside a heading is open to debate. But the link will show up in the headings list too this way, so that’s probably not a bad thing. As we are all used to the heading being a link, it has become a WordPress convention. Removing the “continue reading” link could be an option to cleanup the link clutter.
The “continue reading” link is hidden for screen readers, but it has screen reader text. This is useful because, if a user has her own stylesheet, or watches the sites without stylesheet, the link text is still understandable. Also adding the screen-reader-text class improves the quality of the link text, important for SEO (search engine optimization).