插件可访问性

没有插件插件 插件是一种包含一组功能的软件,可以添加到WordPress网站。他们可以扩展功能或为WordPress网站添加新功能。WordPress插件是用PHP编程语言编写的,并与WordPres无缝集成。这些可以在WordPress.org插件目录中免费https://wordpress.org/插件/或者可以是第三方基于成本的插件 可达性无障碍 无障碍性(通常简称为a11y)是指为残疾人设计产品、设备、服务或环境。无障碍设计的概念确保了“直接访问”(即无人协助)和“间接访问”,即与个人的辅助技术(例如计算机屏幕阅读器)兼容。(https://en.wikipedia.org/wiki/Accessibility网站)WordPress插件目录中的要求。这是因为测试插件的可访问性需要耗费大量人力。然而,强烈建议您在创建或更新插件时考虑可访问性。

为什么插件可访问性很重要?

可访问性是使您的插件可供残疾人使用的关键。用户界面的可访问性会影响哪些国家和组织可以合法使用您的插件。许多政府要求任何商业网站都必须具备可访问性,政府支持的机构(如学校)内的网站更是如此。管理可访问性的法律是可变的,但大多数法律都参考了一组称为“Web内容可访问性指南”的指南(WCAG公司WCAG公司 WCAG是Web Content Accessibility Guidelines的缩写。这些指南有助于确保所有人都可以访问互联网,无论他们需要如何访问互联网(屏幕阅读器、键盘等)https://www.w3.org/TR/WCAG21网站/.)由万维网联盟编写(W3C公司W3C公司 万维网联盟(W3C)是一个国际社区,成员组织、全职员工和公众共同努力制定网络标准。https://www.w3.org/.).

当前使用的最常见准则是AA级WCAG 2.1版虽然这些指导原则中有许多是针对内容的,但插件可以也应该使用许多方面的可访问性。

顶部↑

资源:

顶部↑

交互式元素

表单、按钮、切换、选项卡–这些都是插件管理和公共界面中常用的元素。它们也是实现基本可访问性的最关键部分。

至少,您应该考虑:

顶部↑

应标记字段。

每个表单输入都需要有一个关联的`<label>`元素。这些标签应准确表示该表单所需的信息。标签应使用for/id关系与字段关联:

分享你的故事<textarea id=“my_field”name=“my_story”>

避免在视觉上隐藏标签。如果确实需要隐藏标签,请使用标准的`.screen-reader-text`类进行隐藏。<a href=“https://make.wordpress.org/accessibility/handbook/markup/the-css-class-screen-reader-text/“>了解有关视觉隐藏文本的更多信息</a>

顶部↑

表单组需要组名称。

如果你提供了一组复选框或单选按钮,输入的标签通常不是足够的信息:它告诉你选择的值,但不是你试图回答的问题。复选框和单选按钮应分组在带有“<legend>`”的“<fieldset>`”中。

<字段集><legend>你为什么喜欢WordPress插件</图例><input type=“radio”id=“radio1”value=“money”><label for=“radia1”>money<input type=“radio”id=“radio2”value=“fame”><label for=“radio2”>fame</label>尊重</fieldset>

顶部↑

按钮应为`<button>`或`<input>`元素

正在附加JavaScript脚本JavaScript脚本 JavaScript或JS是一种面向对象的计算机编程语言,常用于在web浏览器中创建交互效果。WordPress广泛使用JS以获得更好的用户体验。当PHP在服务器上执行时,JS在用户浏览器中执行。https://www.javascript.com/.to`<div>`或`<span>`元素对鼠标用户来说非常有用,但对于任何使用屏幕阅读器或键盘来使用您的站点的人来说,都会留下大量空白。使用标准表单元素有助于确保表单和切换对每个人都有效。

您可以将锚元素用于类似按钮的行为,但这会产生可访问性问题,例如阻止用户取消操作.

顶部↑

听到动态变化

当AJAX操作运行时,可以听到它的声音或将焦点移动到页面上合适的新位置。

WordPress包含一个名为“wp.a11y.speak()”的有用方法,您可以使用它以声音方式宣布结果。这为屏幕阅读器用户提供了重要的反馈,告诉他们正在发生的事情以及他们接下来可以做什么。如果你想直观地显示结果,你也应该用声音宣布。了解有关wp.a11y.speak()的更多信息.

将焦点移动到页面上的新位置也会为屏幕阅读器生成新信息。当所采取的操作更改了用户的视图并且需要通知他们更改时,这是适当的。

顶部↑

便于识别和纠正错误

当用户在表单中输入数据时,在提交时向他们提供反馈,并在输入错误时通知他们。错误消息应清楚地描述错误,并为他们提供纠正错误的建议。错误必须不仅仅是通过改变颜色来表示。

你可以使用图标和错误列表来直观地呈现这一点,但一定要用声音来宣布。

顶部↑

适当使用颜色

良好的颜色对比度对于确保具有各种视觉障碍的用户可以使用您的界面非常重要。最常见的问题是色盲,但老视(与年龄相关的视力障碍)更为常见,尤其是受低对比度影响。随着眼睛年龄的增长,他们感知低对比度差异的能力下降。

WCAG 2.1指南使用比较颜色相对亮度的比率来测量对比度。指南规定,使用此比率,正常文本的最小对比度为4.5:1,大型文本的最小对照度为3.0:1。

您可以使用许多不同的工具测试颜色:

良好的色彩对比度并不意味着对比度极高;准则设定了一个最小基线,任何符合该基线的对比都是可以接受的。

顶部↑

可访问的图像

您可能会认为您的项目中没有包含任何图像。这可能是真的;但你在用吗达什康人或其他图标字体?您是否在使用SVG图形?

对于可访问性,“images”不仅仅指“img”元素。它表示页面上的任何非文本图形元素。 

如果您使用图像来表示控件,这一点尤其重要,例如汉堡菜单图标、箭头或加号或减号图标。这些图像用于表示信息。

所有这些图像都需要考虑可访问性。W3C提供了有用的决策树可以帮助您做出决策图像需要什么样的文本。如果您的图像正在传递信息或激活控件,则需要某种形式的可访问名称。

然而,使图像可访问并不一定意味着确保它已命名。如果图像是数据的唯一表示形式,则需要对其进行命名。如果它是补充性的,并且相同的信息以文本形式呈现,那么它应该对屏幕阅读器隐藏。

顶部↑

动画

动画可以引起许多用户的各种症状,从轻微的头晕到引发偏头痛和恶心。通过使所有动画都支持“prefers-reduced-motion”标志,可以帮助用户避免这些问题。 

`prefers-reduced-motion是一个系统首选项,允许用户指示他们不希望看到动画。但这只有在代码正确支持的情况下才有效!

您可以使用CSS公司CSS公司 CSS是级联样式表的缩写。这是控制网站设计或外观的因素。媒体功能:

@媒体(首选减少移动){.动画{//如果需要减少运动,请调整动画。}}

减少运动并不意味着完全没有动画,但它应该是非常小的-不超过绝对必要的。如果有疑问,请完全消除动画。

您可以通过检查媒体查询的值来检查JavaScript中的媒体查询:

`const mediaQuery=window.matchMedia(“(prefers-reduced-motion:reduce)”)`

上次更新时间: