WordPress 7.1 后台 List Table 的 HTML 结构重构,可能会造成一些插件的功能无法使用

💡 原文中文,约2400字,阅读约需6分钟。
📝

内容提要

WordPress 7.1重构后台列表表格HTML,将复选框列从`<th>`改为`<td>`,文章标题列升级为`<th>`并加`aria-label`,以提升无障碍访问。此变更可能影响依赖旧结构的插件,需更新CSS/JS选择器适配,普通用户和前端无影响。

🔎

延伸解读

为什么这次重构是必要的

WordPress 7.1 对后台列表表格的 HTML 结构重构,主要为了解决一个存在 11 年之久的无障碍(Accessibility)问题。旧结构中,复选框列使用 `<th>` 标签,导致屏幕阅读器将“全选”误读为行标题,且锁定文章缺少文字标签,视障用户难以识别。新结构将复选框列改为 `<td>`,文章标题列升级为 `<th>` 并添加 `aria-label`,显著提升了无障碍体验。

对插件开发者的影响

此次重构是破坏性变更,主要影响依赖旧 HTML 结构的插件和自定义代码。如果插件使用 CSS 或 JavaScript 选择器,如 `th.check-column` 或假设标题在 `<td>` 内,在 7.1 中可能失效。开发者需更新选择器,例如使用 `th.check-column, td.check-column` 或 `*.column-title` 等更灵活的类名,以确保兼容性。

普通用户无需担心

本次重构仅涉及后台管理界面,对前端主题和普通用户无任何影响。前台展示和主题渲染不受干扰,用户无需采取任何操作。但建议网站管理员在更新到 7.1 前,在测试环境中检查后台功能是否正常,尤其是使用自定义插件时,以避免潜在问题。

Q&A

WordPress 7.1 后台列表表格的 HTML 结构具体有哪些变化?

WordPress 7.1 将复选框列从 `<th scope="row">` 改为 `<td>`,文章标题列从 `<td>` 升级为 `<th scope="row">` 并新增 `aria-label` 属性,同时响应式布局的 CSS 改为 Flexbox。

WordPress 7.1 的列表表格重构会影响哪些用户?

普通用户和前端主题完全不受影响,但依赖旧 HTML 结构的插件和自定义扩展可能遇到兼容性问题。

为什么 WordPress 7.1 要重构后台列表表格的 HTML 结构?

为了提升无障碍访问(Accessibility),解决屏幕阅读器将复选框误识别为行标题、以及锁定文章时缺少文字标签的问题,该问题已存在 11 年。

插件开发者如何适配 WordPress 7.1 的列表表格变化?

需要更新 CSS 和 JavaScript 选择器:复选框选择器建议使用 `th.check-column, td.check-column` 或 `th input[type="checkbox"], td input[type="checkbox"]`;标题和行操作选择器建议使用 `td.title, th.title`、`*.column-title`、`*.column-primary` 或 `*.row-actions`。

WPJAM Basic 插件在 WordPress 7.1 中遇到了什么问题?

WPJAM Basic 的所有自定义 List Table 的编辑、删除等操作都失效了,作者计划推出新版解决,并提供了临时修复代码。

WordPress 7.1 更新后,屏幕阅读器用户能获得哪些改进?

屏幕阅读器不再将复选框误读为行标题,文章标题列成为真正的行标题并带有 `aria-label`,使视障用户能准确识别文章,提升了无障碍体验。

🏷️

标签

➡️

继续阅读