发布于 2026-01-05 0 阅读
0

除了“alt”标签、“颜色对比度”和语义标签之外,无障碍设计还包括:1) 语言 2) 日期 3) 时间 4) 货币 5) 数字 6) 用户界面 7) 从右到左 8) 响应式设计

除了“alt”标签、“颜色对比度”和语义标签之外,还有其他可访问性选项。

1)语言

2)日期

3)时间

4)货币

5)数字

6)用户界面

7)从右到左

8)响应式

无障碍设计是否仅限于使用正确的 alt 标签、符合 WCAG 标准的颜色对比度或使用语义标签?

我们在开发Web应用程序时应该扪心自问这个问题。作为一名无障碍设计爱好者,我一直在思考这个问题。

简而言之:

不,可访问性不仅仅局限于替代标签、语义标签或颜色对比度等。

今天我们将学习除了 alt 标签、颜色对比度、语义标签之外,我们(网页开发人员和设计师)还应该注意哪些可访问性方面的问题。

在本篇博客中,让我们以我们虚构的美味糖果电商商店——“独角兽糖果店”为例

独角兽糖果店

我们独角兽糖果店最棒的地方在于我们的客户遍布全球(这是我们最近通过分析数据发现的)。这让我们有机会开展全球配送服务。

以下是我们针对无障碍设计方面所遇到的经验教训和挑战:

1)语言

很遗憾,我们当时没有语言翻译人员,因此无法完成内容翻译。我们开始在非英语国家/地区损失业务。经过分析,我们发现来自非英语国家/地区的用户访问我们的商店时,却无法访问相关内容。

你知道网络浏览器会根据用户访问的地理位置来翻译网站内容吗?

内容是日语的,客户感到困惑。

我们只需要添加lang="JA"即可。我们可以根据用户访问的国家/地区更改lang属性。

要点:如果您要发布全球通用的网络应用程序,请确保内容不限于英语,并提供 lang 属性。

2)日期

我们的一位顾客下了糖果订单,并收到了这封邮件:

独角兽们正在处理您的订单,将于 2020 年 10 月 11 日送达。

那么,格式是DD/MM/YYYY还是MM/DD/YYYY呢?

用户对日期格式感到困惑

如果你和美国人交流,他们会读作MM/DD/YYYY,而印度人则会读作DD/MM/YYY。由此,我们独角兽糖果店的混乱和差评就开始了。

日期最好设置为2020年9月6日。这样清晰易懂。
(感谢Kim的精彩建议)

要点:不要让用户自行猜测日期。务必认真对待日期格式。不同国家/地区的日期格式各不相同。请务必根据网站访问的地区更改日期。

3)时间

我们独角兽糖果店会保存订单历史记录。现在,我们的一位顾客正在访问订单历史记录:

您在23:05:00订购了菠萝糖。

用户对时区感到困惑

这将再次造成混乱。想象一下顾客和独角兽糖果店客服代表之间的对话。如果顾客查看的是基于其地理位置的时区格式,而独角兽糖果店客服代表指的是基于商店地理位置的时区,那将会是怎样一番景象?

就像语言一样,时间也基于地理位置,或者遵循某种标准格式。例如,“所有时间格式均采用印度标准时间 (IST)”这样的消息就足够了。

要点:如果申请表里有时间,请确保使用正确的时区,或者提供一个链接供申请人查看时区。

4)货币

即使我们解决了非英语国家/地区的语言问题,购物车中的商品数量仍然大幅下降。经过分析,我们发现问题出在货币上。

我们的“独角兽糖果店”所有商品价格均以印度卢比标价。因此,来自印度以外的顾客无法理解价格。

用户对货币感到困惑

要点:就像时间一样,货币应该与访问所在国家/地区的货币一致,或者提供货币转换器(如果可能)。

5)数字

在解决货币问题的过程中,我们发现数字格式在不同国家也有所不同。

这一点非常重要。原因是每个人都习惯于以特定格式读取数字,如果不遵循这种格式,就会难以辨认。

印度人能理解100,000 这个数字,但美国人读起来就比较困难了。

![用户对数字格式感到困惑]替代文字

例如:在我们的商店里,号码(电话号码或购买编号)默认采用印度格式。就像日期、时间和语言一样,我们会根据地理位置转换这些号码。

要点:就像其他方面(日期、时间等)一样,确定数字格式并在您的网站上使用该格式。

6)用户界面

引入不同语言后,我们遇到了新的问题。我们的用户界面在某些地区无法正常工作。

由于内容问题,用户界面出现故障。

在分析过程中,我们发现原因是我们的开发人员根据我们主要使用的语言“英语”,对元素(如按钮、导航)使用了固定的高度和宽度。

我们通过确保以下几点解决了这个问题:

1)我们的元素没有固定的高度和宽度。2
)我们已经用所有语言进行了测试。

要点:避免将元素的高度和宽度设为固定值,也不要认为英语是设计和开发的唯一语言。

7)从右到左

我们的糖果店风靡全球,吸引了大量来自阿联酋的流量,但用户数量却在不断下降。这是为什么呢?

阿联酋内容

因为我们完全没有考虑过从右到左的语言。这与第一点密切相关。不仅是文字内容,多媒体内容以及图片都应该改为从右到左排列。

8)响应式

我们的糖果店面向全球用户开放。许多用户通过手机或平板电脑访问我们的商店。我们应该确保我们的商店支持不同的屏幕尺寸,而不是向他们展示一个无法正常显示的网页应用,并告诉他们:

我们目前仅支持桌面版 1080 x 700 分辨率和 Chrome 浏览器

所以,今天我们看到,除了 alt 标签、颜色对比度和 Lighthouse 评分之外,无障碍设计领域还有更大的发展空间。

学习愉快!

PS:所有图片均由才华横溢的Poonam Jha设计。欢迎联系她表达您的喜爱和支持。

文章来源:https://dev.to/hellonehha/accessibility-beyond-alt-tag-color-contrast-and-semantic-tags-1g1e