Accessibility feedback on the Spacer Block

[annezazu]

What problem does this address?

In chatting with Taylor Ardnt a few weeks ago around using FSE with screen reader technology, the Spacer Block came up as a particular problem point in the current FSE and general editing experience. From that conversation, two issues in particular came up that I wanted to flag here:

• Ensure the Spacer Block description is properly read out when using VoiceOver.
• Scale back the number of Spacer Blocks included in the default template when one enables FSE.

What other feedback to people have around how the Spacer Block can be improved from an accessibility point of view?

It would be great to gather feedback here to then figure out specific enhancements can be made.

[carolinan]

We can reduce the spacer blocks in TT1 Blocks after
#29779
And / Or #28845

[joedolson]

For a general reference, the spacer block needs to serve very different purposes depending on whether it's viewed from the perspective of the editing process or in the front-end UI of the site.

In the front-end of the site, it needs to be totally silent: it should be hidden from screen readers and should never contain content of any kind - including CSS content using :before or :after. This is basically the equivalent of the invisible spacer.gif used in web design in the late 1990's, and should be invisible to the user.

In the back-end of the site, it needs to be perceivable as to purpose; it needs to declare that it's a spacer and any other relevant characteristics, such as the height of the spacer.

[joedolson]

Looks like the current output HTML for the spacer block is variations on

<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>

Adding aria-hidden=true is unnecessary, and could cause problems in some admittedly rare circumstances. If I hypothesize developers abusing the element to insert content or interactions via JS (for example, using a spacer div as a container to load feedback about the content above or below), then the aria-hidden=true attribute will make that content inaccessible. While this is a rare circumstance, I don't see any way that using aria-hidden benefits the user. An empty div is always going to be a silent presentational element, as it contains no text content, has no role, and no functionality.

[joedolson]

Block is announced for me in the admin as 'Block: Spacer'. I think it might be useful to also announce the height of a given spacer. It would be a very small amount of additional text announced, but would help in creating a mental map of the output. E.g., "Block: Spacer - 200px tall". I'd appreciate a comment from @alexstine or @MarcoZehe regarding whether they'd consider that useful, however.

[alexstine]

I am not sure that would be useful considering I am not sure what 200px really is anymore.