主题开发文档

区块主题无障碍访问

💡 云策文档标注

概述

本文档介绍区块主题如何支持无障碍访问,并简化添加无障碍功能的过程,包括地标区域、跳过内容链接和导航菜单等关键方面。

关键要点

  • 区块主题通过 Group、Template part 和 Query 块支持地标区域创建,可使用块标记或站点编辑器中的 HTML 元素选项。
  • 选择
    地标区域可自动生成跳过内容链接,提升键盘导航体验。
  • Navigation 块内置响应式视图、键盘导航、

代码示例

<!-- wp:group {"tagName":"header","layout":{"type":"constrained"}} -->
<header class="wp-block-group"><!-- wp:site-title /--></header>
<!-- /wp:group -->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group"><!-- wp:heading -->
<h2 id="hello-world">Hello World</h2>
<p>Welcome to WordPress. This is your first post. </p>
<!-- /wp:heading -->

注意事项

  • 文档更新于 2023-03-08,代码示例已反映 WordPress 6.1 的块标记变化。
  • 创建于 2022-01-25,建议开发者参考最新版本以确保兼容性。

📄 原文内容

Block themes support accessibility and simplify the process for adding accessibility.

Landmark

Group, Template part, and Query blocks can become a landmark. There are two ways to create landmark.

Using block markup
”tagName":"header” creates header landmark.

<!-- wp:group {"tagName":"header","layout":{"type":"constrained"}} -->
<header class="wp-block-group"><!-- wp:site-title /--></header>
<!-- /wp:group -->

Using site editor
HTML element under Advanced section in the Block panel provides the following landmark options.

HTML element under Advanced section in the Block panel provides the following landmark options.
<header> <main> <section> <article> <aside> <footer>.

Skip to content

By selecting <main> landmark on Group, Template part, or Query block generates the Skip to Content link. Learn more about the skip to content link here.

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group"><!-- wp:heading -->
<h2 id="hello-world">Hello World</h2>
<p>Welcome to WordPress. This is your first post. </p>
<!-- /wp:heading -->

Accessible navigation menu

Navigation block enables the following accessibility without additional code.

  • Support responsive view
  • Support keyboard navigation
  • Insert <nav> landmark role
  • Insert ARIA attributes aria-label aria-hidden

Additional resources

Changelog:

  • Updated 2023-03-08 Updated code examples to reflect WordPress 6.1 block markup.
  • Created 2022-01-25