Screen Reader Text Format

The most common use case is when the text had been formated using things like strike. This is great for visual users, but users who are accessing content via a screen reader will not know what has happened.

For example, let’s say you are writting about a product and that product is normally $100 but the price is marked down to $80. This might be represented as ~$100~ $80. That is to say <del>$100</del> $80. A screen reader will read “$100 $80” with no mention of the strike through.

In the best case scenerio this would be written out “Was $100 now $80” but often the design will not allow the space, hence the shorthand. To fix this for screen readers, the screen reader text format can be used to include “was” and “now” so this will make more sense for screen readers.

In the block editor, most text content like paragraphs, headings, and lists have a text format toolbar. To use the tool add your text, then highlight it. This should bring up the text format toolbar. Click the down arrow and select the screen reader text format.

Once you add and hide text it may be difficult to find. Fortunately we added some highlighting to make this easier. When you are editing a block, any text that is hidden within the block or it’s children will be displayed with highlighted.