Skip to content

Playground block: A11Y: Add skip links for loaded preview/iFrame #293

@alexstine

Description

@alexstine

Test page: https://learn.wordpress.org/test/wordpress-playground-block-plugin-test-page/

After the Playground iFrame is loaded, there is no way for users to easily skip it. Could we append a "Skip passed iFrame" link or similar? Code structure could look something like this.

<span class="accessible-text">Beginning of Playground preview</span>
<a href="#">Skip Playground Preview</a>
<span class="accessible-text" tabindex="-1">End of Playground preview</span>

Focus could land on that last span with the tabindex="-1" set.

This will offer users to easily skip the frame since the content within the frame will also have semantics exposed to screen reader users such as headings and landmarks which could be used to skip content in other situations.

Metadata

Metadata

Assignees

Type

No type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions