Repository navigation
Hide decorative characters from screen readers - #142
MaggieCabrera wants to merge 1 commit into
Conversation
The separators, chevrons, arrow, quote marks and citation dashes are decorative, but screen readers announced them. Wrap the ones in patterns in aria-hidden spans, and give the CSS-generated ones empty alternative text, like the Quote Mark block style already does. The theme validator now ignores markup inside text attributes, so the span in the Read more text isn't reported as untranslated text. Part of #44. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
github-actions
Bot
added
[Area] Global Styles
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. Props Bot commandsYou can trigger Props Bot actions by commenting on this PR:
|
|
Tested on WordPress 7.2-beta1 with this PR on current Ipsum trunk (merges cleanly), front page, Chromium.
Checked by walking the DOM text nodes and testing whether each character sits inside an |
Description
Part of #44, for Alternative text on images and graphics. Screen readers no longer read out the theme's decorative characters: the
·and›separators in post meta, the›in Read more, the↑in Back to top, the dot before comment Reply links, and the quote mark and dash on quotes and pullquotes.Before, each one was exposed as text, so JAWS said "dot", VoiceOver said "middle dot", NVDA said "up arrow", and Read more links were named "Read more › : Post title". The images and icons passed the audit, so this only covers characters.
<span aria-hidden="true">, as the guideline asks. The blocks stay valid, and the spans survive editing.content: "·" / ""), like the Quote Mark block style already does.Screenshots
No visual change.
Testing Instructions
·,›,❝or—, and Read more links are named "Read more : Post title".I checked every template, including the sidebar variants, and every pattern, on the front end, in the Site Editor, and in the default and Evening variations, with WordPress 7.1.3 and Gutenberg 24.1.0.
Use of AI Tools
AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 5.5
Used for: Auditing the theme against the guideline, writing and testing the fix, and drafting this description.
🤖 Generated with Claude Code