WordPress节日
1月22日,2021年

选择一种语言

This is an archive of the January 2021 event

那么,我如何知道我的WordPress网站是否可访问?

有很多资源可以帮助设计师、开发者和内容作者创建无障碍网站。我们可以看看完整的WCAG2.1规范,但在很多情况下,人们需要了解所有的无障碍概念,才有可能理解这一切。个别的博客文章可以帮助解开这些无障碍指南的神秘面纱,但这些资源是零散的。

如果有一个最常见和最紧迫的无障碍问题的快速指南,其中包括一系列的"是"/"否"的问题,任何人都可以回答网站的问题,那会如何?

在这个演讲中,我将介绍这样的问题清单,并讨论人们可以用来测试自己网站的可访问性的简单技术。

演讲者:Graham ArmfieldGraham Armfield

时间:世界协调时下午1点
地区:欧洲、中东和非洲地区
阶段。GoDaddy专业阶段

大家好,我叫格雷厄姆-阿姆菲尔德,来自于

Coolfields咨询公司和我的演讲

叫做"那么我怎么知道我的WordPress的"。

网站是否可以访问?

这是我做过几次演讲的内容

之前,但我最近更新了它,所以你是。

会得到新的版本。

在我开始之前,先介绍一下我。我是一个网络

无障碍环境顾问及其意义

我的日常工作是与组织合作

以帮助他们改善无障碍环境。

他们的数字产品 - 无论是网站

或应用程序。我做的是可访问性测试,工作是

与设计师和开发人员一起改进

的情况。我也办了很多培训班。

与另一家公司合作,为网站开发人员。

其实我是一个网站开发人员,我已经建立了

许多使用WordPress的无障碍网站比

的年月。所以,在这里,我们去,这是一个有点关于

我。

在我真正开始主材料之前

我想说一下为什么无障碍化

是很重要的。我相信你们大多数人都会明白

但实际上,目的是,与网站

是让它们尽可能地被人利用。

因为如果你有一个网站,卖的是

产品或服务,重要的是

你可以卖给尽可能多的人。

还有大约20到25%的人口

可能有不同的访问需求,当涉及到

到网站。这可能是由以下情况引起的

如失明或视力差,色盲。

阅读障碍,多动症,自闭症,耳聋,人谁谁谁

聋哑人或类似的人

我的父母,谁是刚刚老了。

重要的是,虽然有一个非常重要的。

无障碍网站是伟大的,即使只是小

改善可以使每个人都有所改变。

这张照片在这里 - 你可能想知道为什么

I’m showing you that – it’s the hill up from

千禧桥北端

圣保罗大教堂

你可以看到在远处。

而且它实际上是一个长长的山丘,而且它是。

大部分时间都在楼梯上。但当他们

他们把这个坡道,你可以看到。

那里也是。而我相信,人们

设计这个的人认为,这将

由使用轮椅的人使用。

或使用越野车的人也是如此。

但事实上,如果你站在这里,就像我站在这里一样。

几年前的这个潮湿的日子。

你可以看到,其实大多数人谁

上山下海,会不会

实际使用坡道而不是使用

楼梯。这也说明了

您可以添加到您的网站的功能

可以真正帮助大家,而不是

的人,他们只是针对。

那么,我要介绍的是。

我很熟悉,我一直在无障碍环境中工作。

大约20年了。我很熟悉

网络内容无障碍指南--已知

简称WCAG。我们目前的版本是2.1

而这些都是一个很好的资源,对于网络

无障碍。但有很多材料

在那里,如果你不熟悉的。

领土,他们可以是相当困难的解释。

值得一试,但你知道的

他们可以是一个有点坚不可摧的真的。

那么,如果你有一个简单的"是"与"否"的检查表呢?

你可以很容易地检查你的

用一些免费的工具建立自己的网站?那就是

这次演讲的内容是什么。

在我的半小时内

不过,我只能涵盖一些常见的无障碍性

问题。我有时间去解决所有的问题。

所以我把一些常见的,和一些重要的。

我在网站上发现的可访问性问题。

多年来。但如果你能回答所有

问题成功,那么您的网站

将会比

很多网站都有。

那我们就开始吧。

前面几个问题我要讲的是

关于都是与键盘交互。

这是无障碍的一个非常重要的方面

因为有些人不会使用鼠标或触控板。

或触摸命令,也许是因为他们已经

得到某种运动障碍与他们的

上肢。所以他们可能真的要

依靠键盘来实际使用他们的机器。

包括浏览网站。

另外,使用读屏器的人,还有那

是典型的盲人,但不完全是

盲人,如果我使用屏幕阅读器的话

在台式机或笔记本电脑上,那么我就会

也会用按键来实

向读屏器发出指令

时间。所以,重要的是,你要把键盘上的

无障碍权利;

所以,前几个问题,正如它所说的

在那里,你需要对这两个问题做出肯定的回答。

我可以轻松地看到键盘焦点在哪里吗?

第二个问题,我可以轻松地访问所有的

网站的部分内容,只能使用键盘。

这个是关于在你的

页。

但是,第一个--我很容易就能看出来。

键盘的焦点是什么?如果我是一个视力键盘

用户我将会经常使用tab键。

在页面内移动,链接和

页面内的按钮,使我能够

访问其他地方,或者做一些功能。

这真的很重要,我可以很容易地看到。

键盘焦点当前在哪里。在许多

的网站,但事实并非如此。

第二件事是的,我已经说过了,这是关于。

导航。我希望能够访问所有的

如果我是一个键盘用户,网站的部分。

而遗憾的是,在很多网站上,导航

并不总是满足键盘用户的需求。所以

我们来看看几个例子

的这些现。

所以gov.uk是英国一个非常著名的网站。

丰富的活动信息

与政府和税收,以及驾驶执照。

护照等等等等。其中一个伟大的事情

它的特点是,它有很好的键盘对焦能力。

表示。所以,在这里,我已经来到了顶层的。

页,我已经标签了一下,我。

现在在这个链接这里 - 一个得到了

黄色背景。

这个网站上所有的焦点指示都是非常

显而易见的,有视力的键盘用户会

真的很感谢他们。好了,所以这是一个例子

的一个很好的焦点指示。

这里还有一个网站,是一家公司。

我做了很多工作--哈塞尔包容。

到处都有良好、清晰的键盘焦点

在这个网站上。此外,导航是完全

也可以访问。我有这些子菜单

箭头所指的地方。

这里,这些都是完全可以用键盘访问的

以及。所以,键盘用户可以到任何地方

在该网站。

一个网站,如果没有搞好,那就是。

不承认是WordPress网站,但这里

Odeon电影院的网站。如果我悬停在这个上面

这里的链接 - 什么是上,我得到这个面板,。

弹出,它有一个搜索设施和。

很多链接带我去看各种电影

和你有什么和一切。这是伟大的。

所以,我可以很容易地在网站周围。

但是,如果我把标签转到那个链接,我就会发现

不得到看到的面板,所以我还没有。

得到了访问那里的搜索设施,和

这些各种链接和你有什么。好的。

所以这不是一个好的键盘体验

用户。

接下来几个问题。键盘上的标签

顺序是否合理,我是否可以轻松访问

所有功能都只用键盘?

第一个有--键盘标签顺序。

浏览器在加载时设置标签顺序

页面,理想的情况下,它应该遵循的是。

内容顺序。如果你的标签顺序是

上下跳动的页面,它可以得到真正的。

让人们使用起来很混乱。你再一次

可以使用tab键进行测试。

第二个问题--问题四--能否

我可以通过键盘轻松访问所有功能

仅仅是?这不是在说导航。

它说的是你的页面的互动性。

而且是模态窗口等东西。

所以我们现在来看一个例子。这个

是一个使用灯箱插件的WordPress网站。

如果你不熟悉那是什么?

是的,我已经得到了这些小版本的图像。

这里。如果我点击图片,或标签到它,

按回车键,它实际上显示了一个

像这样的全尺寸版本的图片。

覆盖在底层页面之上。

这个特殊插件的问题是

是键盘的焦点实际上停留在

下面的页面。所以现在键盘用户要

挣扎着去找这些按钮,在。

底部,让我看到上一个和下一个

系列中的图像,或完全关闭该图像。

如果我是键盘用户的话,我就无法到达那里。

所以这是一个真正的问题。

也是在Jetpack网站上。主要是,这

网站的无障碍性还不错

的角度。然而,它有这样的语言

选择器在这里,如果我把标签贴到这里,按下

按回车键,就会打开语言选择器。

但键盘的焦点再次还是在

底层屏幕,所以视线键盘

用户实际上会很难真正选择

在这个网站上的不同语言。所以这就是

不是一件好事。

好了,远离键盘交互。

我们来谈谈链接。第一个在这里。

你需要对这个问题做出肯定的回答-----------------------。

你的链接显然是链接?

现在,它是一个从黎明时分开始的惯例。

网站的链接会用下划线标记。

然而,这个特定的WordPress主题实际上

选择不这样做。它把底线

离所有的链接,你可以看到这个

左边一段关于埃克塞特的文字。

有很多链接在里面。那里标有

绿色的文字。看到这些

当我把下划线恢复到原来的位置时,链接

又来了?

因为色盲的用户,或者有

盲人摸象

在左侧,因为绿色的文字是

与灰色文字颇为相似。好吧,那么

要避免的事情有。

下一个关于链接--做你所有的链接

足够说明

它们会导致什么?

这里我们要研究的是屏幕阅读器的问题。

用户--通常是我之前说的盲人。

所以我在这里有一个WordPress网站,它是关于

一个可用的插件。我有一个链接

这里写着"点击这里",那是为了找到

出更多。我有另一个链接,说

'点击这里'就是阅读条款和。

条件。现在我没有得到一个问题

这里的动词,因为显然不是每个人的

点击,他们可能是触摸或键盘

标签到它。

问题是对于屏幕阅读器用户来说,是

通常屏幕阅读器用户会使用的功能

像这样--这是一个所有链接的列表。

的页面上,他们可以看一看。

而这是使用NVDA屏幕阅读器,它的功能是

是可用于Windows的,它有那些。

两个链接在那里。现在他们带我到两个不同的

的地方,但没有什么明显的在。

链接文字,告诉我他们要去哪里。

带我去。而为什么这很重要

在这里,是因为我可以用这个盒子这里

其实从这里链接,不如说

比回到底层页面。

好吧,所以这真的很容易解决。相当

容易测试,而且相当容易修复。

将内容改为"查找

了解我们如何更新插件"和"条款和。

条件'。

所以现在当我使用屏幕阅读器和

我得到的链接列表,它是更多的

很明显,这些链接是为了什么。

所以对于右手边的人来说,这就容易多了。

侧的屏幕阅读器用户。

好的,我们要避免这种情况,大量的"点击"。

这里的和"阅读更多的在你的页面。

我们来谈谈图像和视频。的

下一个问题--你的所有图像都有适当的

交替的文字?你可以测试一下

使用一个名为Wave的浏览器扩展,就能轻松实现。

这将告诉你什么是替代文本

是为图像。

这对于屏幕用户来说很重要,他们可能

是盲目的,因为他们将知道有

潜在的图像在那里,但他们会想。

要知道图像的意思好不好。所以当你

将您的替代文本设置在经典的

编辑器,你会用这里的这个盒子。而这是一个

好主意,即使你提供字幕。

实际上也是为了设置备用文本。

这就是使用古腾堡软件的效果。

编辑也是--同样的事情。你是

在这里帮助屏幕阅读器用户。

如果你得到的图像是链接,并经常

在你的博客索引页上,你会这样做。

您的WordPress主题实际上可能使这些

博客索引页上的图片

其实是博文的链接。而这个

是一个WordPress的主题,我已经用在我的

自己的音乐网站和WordPress主题

自动为我做的。实际上

将链接目的地作为备用的

这张图的文字,而不是说

"我弹吉他",这是更多的

有用的。

你可以看到这里,我已经得到了基本的。

代码。我在这里得到了这个链接,唯一的

那个链接里的东西就是这张图片。而这个

备用文本,在这种情况下,就变成了......。

该图片的链接文本。所以,这是很好的。

现在并不是所有的主题都能做到这一点,很遗憾。这个特殊的

主题做不到。所以在这里我有一个列表

在我的屏幕阅读器中的链接,这是我的屏幕阅读器。

本篇博文的特色图片

这就是所谓的ISTC南部地区。这就是

的博文,那是博文的链接。

但这也是同一篇博文的链接。

但备用文本是考拉熊。那是

隔行如隔山,因为这其实是......。

不是真的关于考拉熊。这只是我

碰巧选择了这张图片作为特色

该博文的图片。

下一个是围绕视频的。问题八

- 你的所有视频都有字幕吗?

这是我在做这个演讲,一些

时间前,有一个视频的YouTube上。

我已经确保所有的标题都是。

正确的。显然,标题很重要

为聋哑人或重听人提供服务。

但其实很多人都在用字幕

在观看视频时也是如此--也许在

嘈杂的环境。

下一节是围绕

标志着你的内容。而主要是在这里

我们正在帮助屏幕阅读器用户。

所以下一个问题--你的页面标题是否

独特而有意义?显然,你

需要回答"是"。

一般来说,这个问题可以通过以下方式来解决。

WordPress主题。在这里,我已经得到了页面的标题。

这就是浏览器标签页中显示的内容。

頂在這裡,通常會是任何

页面标题在您的WordPress中设置为

编辑。所以这很好。为什么这很重要

是标题元素在这里设置,而当

屏读机用户到达一个页面,以获得

第一时间的第一件事,得到

念给他们听的是页面标题。所以,它

帮助他们知道他们是在正确的。

的地方。你可以通过检查

浏览器标签在这里的顶部。

下一个问题--你的网页是否使用了适当的

标题和小标题?

对于屏幕阅读器来说,再次相当重要

用户。好了,你可以用浏览器测试一下

扩展名为"Wave",而在这里我已经得到了一个

标题第1级,因为Wave也会向你显示

这里的标题层次。最高级别的标题。

和二级标题这里。好,还有这个

是一件好事,你居然在使用

标题正确。

对于屏幕阅读器来说,这是件好事的原因。

用户是因为再一次在NVDA中,你能

在这里使用这个元素列表,实际上

将向您展示一个标题列表,其中包括

页。所以,如果我能找到一个我感兴趣的标题。

中,我可以迅速跳到该标题,并。

它会把我移到那一节的。

页。

需要注意的是,NVDA曝光的是

的标题层次,无论我看到的是

它在这里或听到它宣布给我。而且

因此,它将帮助我建立一个如何的图片。

页面的结构。所以,重要的是

试着让你的标题层次结构尽可能准确。

尽可能的。

屏幕阅读器用户的另一种移动方式

在页面周围使用的是地标。那么什么是

我可能会听到你说:"地标"。

好吧,地标是预定义的区域,在... ...

页面。比如横幅、导航。

主要内容,页脚,侧边栏,如果你有。

一。而屏幕阅读器用户可以跳转

页到这些不同的部分。

好吧,那你怎么用这些?

事实上,现在大多数WordPress的主题都是

使用HTML5分段元素。而这正是

他们的目的,他们实际上提供了地标。

对于屏幕阅读器用户来说。这就是为什么他们

有,无障碍功能。

所以我有<header>,<nav>,,<main>。</main></nav></header> <header> <nav> <main> <footer></main></nav></header>

和<aside>。而这些相当于地标。</aside>

但你怎么测试,我听得出来你在问。

好吧,有一个浏览器的扩展

也。好了,通过键盘进行地标导航

或弹出窗口。它在Chrome和Firefox中可用。

它将显示你所有的地标在

一个页面。这是很有用的,所以你可以

快速测试自己的页面。而且还有

但这个WordPress主题的一个关键问题。

在任何页面上都没有显示主要的地标。

或员额。

而这可能是最重要的一个

在每一页中,都是主要的地标,它是...。

主要内容在哪里,但它不在这里。

好了,移开你的内容的路标。

让我们来谈谈一些文本格式。

这个问题 - 我可以调整页面上的文字大小吗?

而不破坏布局?这种情况仍然会发生

在不少网站上。重要的是

对于视力不好的人来说,他们可能需要

事情要大一点,好不好。

举个例子,说明哪里不对......不对。

一个WordPress网站这一个,它是相当的

旧的。它是一个盒子里的链接列表,而这个

当我把文字做成这样的时候,它是这样的

更大。链接已经溢出,因为

它们占据了更多的空间。他们已经蔓延到外面

盒,并已开始溢出其他

位的页面上。

重要的是,要意识到文本大小调整的重要性。

和变焦不是一回事。它们是

既是所有浏览器提供的功能,又是

人们以不同的方式使用它们。通常情况下:

我们说的是视力不好的人

在这里,谁都想把事情做大。有些人

会缩放,有些人将文字调整大小。你

需要用你自己的网站来测试

在这里,以确保它不会打破的。

这样一来。

这是我最近发现的一些例子。

所以很多冲突在那里发生,还有。

和一些截断,在这里,它是越来越到

到了看不懂的地步

的这个东西,当我把文字做大后。

接下来要讲的是格式化的问题

文本完全对齐。

好吧,这里有一段关于埃克塞特的文字。

- 是左对齐的。这就是它的样子

喜欢当它的充分理由。

浏览器所做的是在拉伸

词之间的空隙,这就造成了。

大家的认知负荷有点大。

我在这里表示的是一种效果

你可以得到所谓的"白色河流"。

空格",如果你有阅读障碍,你可能会

承认这个词,因为完全有理由

文字会让一些人的生活变得非常困难

阅读障碍者;

我有一个朋友有明显的阅读障碍。

她就是看不懂那段文字。

在右侧,因为空白处的空格

会只是接管。

大约有8-10%的人有。

某种形式的阅读障碍,所以这是一个很大的。

人。

好看的用户输入。表单字段。这是...

重要的是,你的所有表格字段都有一个

附带的标签。

现在,这对屏幕阅读器用户来说很重要

因为标签告诉他们输入的是什么

领域是关于。而重要的是

标签在程序上与输入的

字段,这样屏幕阅读器就能读出

正确的文字给用户,当他们到达

一个输入字段。

而在这里,我已经用浪潮浏览器测试过了。

扩展,它给我这些绿色的图标

在此表格中,正确的标签为

与输入字段一起分配。

然而,情况并非总是如此。而这里

我在一个网站上使用过联系表格7插件。

只是为了试一试。而这是在默认的

设置,不幸的是标签是

没有正确链接到输入字段,所以

这将使屏幕上的生活变得非常艰难

读者用户。所以你可以用浪潮测试一下。

好了,进入最后一节,也是最后一节。

最后一个问题围绕着色彩对比。

这不是我母亲的照片,但我。

看到她抱怨的网站,其中

摸不着头脑,因为

颜色对比不够清晰。

而这里是一个WordPress网站,不幸的是

他们选择的品牌颜色提供了

很多色彩对比的问题,在整个

该网站。

我在这里用了一个工具,叫"颜色"。

对比分析器。我给你看一下链接

对于这一点,稍后。你可以选择

前景色和背景色,它

会立即告诉你是否有

足够的色彩对比度,到算法

WCAG指南所规定的。而在这个

实际上很少有符合

的要求。

您可以使用该工具来测试您的页面或

你可以使用这个其他的浏览器扩展名为

aXe。它适用于Chrome和Firefox。

而且它实际上会在布局时向你展示

让你看到不少的无障碍问题。

包括色彩对比问题。还有

这里的问题是,绿色文本没有足够的

与白色背景形成对比。

好了,问题就这么多,15道题。

还有一些有用的资源。

第一个是那个颜色对比的链接

我刚才讲的工具。它是可以使用的

的Mac,以及Windows机器和。

那么我已经得到了两个浏览器扩展。

Wave适用于Chrome和Firefox。

aXe可用于Chrome、Firefox和。

Edge,但这是微软新的Edge。而

我预计Wave工具将可用于

边缘在太长时间之前。

好了,还有几个有用的链接。我已经写了

很多关于无障碍的博客文章--不是

竟然是十年前的作品

前,关于写好替代文本的

你的图像。即使它是10年前的。

在这个博客文章的东西仍然是非常

相关的。好了,你可以看看

那。

我还写了一些博客文章,围绕着

正确的做表格字段。有几个

在那里,你可以按照它,它会

给你看看那里的那些名单也。

就这样,我们开始了。这就是我关于

我如何知道我的WordPress网站是否可以访问?

分享本届会议

分享到Facebook
在微博上分享
在linkedin上分享
分享到pinterest
分享到电子邮件