搜索
首页web前端css教程我们无法认真对待可访问性的3种方法

我们无法认真对待可访问性的3种方法

你听到了开玩笑,对吗? “两个前端开发人员走进酒吧,发现他们绝对没有共同点。”有趣的,但也是一个令人沮丧的事实,反映了一个很大的差距。

本文探讨了有关Web可访问性的三个共同观点,突出了用户与开发人员/设计师之间的潜在桥梁。我们的目标?找到更具包容性网络的共同点。

行为1:开发商的困境

“我只是不明白开发人员如何忽略可访问性。”

让我们考虑开发人员的观点。构建网站成功需要大量技能。除了基本原理(HTML,CSS,ARIA,JavaScript)之外,开发人员还完成了无数其他任务:软件包管理,版本控制,测试(单位,集成,视觉回归,浏览器兼容性),代码审查,部署,安全性,安全性,UX/UI设计,UI设计,响应设计,响应设计,数据管理...列表无尽。

令人印象深刻的是开发人员知道了多少!能够建立网站的人数仅占全球人口的一小部分 - 这是一个非常非凡的壮举。成功的运输代码的满足感,即成就感,令人难以置信。

现在想象一下,可访问性专家指出您的工作缺陷,这意味着您多年来一直在做“错误”。认知失调可能令人震惊。突然,您来之不易的专业知识感觉不足,并且意识到您无意中被排除在外的用户可能会深感不安。防御反应是可以理解的。

很容易看出为什么开发人员可能会选择忽略可访问性 - 这是痛苦的对抗,潜在的不足和过去的监督罪恶感。

行为2:用户的挫败感

“我感到完全看不见。”

依靠辅助技术的用户通常会遇到无法使用的网站。颜色不良的对比使文本难以辨认。复杂的互动元素(例如嵌套按钮)可以防止基本操作,例如支付账单或在线购物。随着键盘导航无法访问,伪装的按钮。

这种挫败感通常是针对那些努力争取包容性的人,创造了负面的反馈循环。一些开发人员认为担忧是“粗鲁的”,而另一些开发人员则为无障碍工作的情感负担而挣扎。用户感到被忽视,导致无能为力。诉讼通常成为唯一的追索权,但即使那样,变化也可能很慢。人们的看法是,声音和自信是唯一的听到途径。

行为3:设计师的约束

“我知道颜色的对比是熄灭的,但感觉如此创造性地限制。我讨厌它的外观。”

许多设计师将可访问性指南视为其艺术愿景的局限性。他们看到了错误的二分法:美丽的设计与可访问的设计。

但是请记住:网页设计不仅是自我表达;这是关于为每个人创造可用的体验。面临的挑战是找到美学上令人愉悦且完全易于访问的设计。这不是一个/或情况;这是关于找到符合这两个标准的创新解决方案。

重新标记对话

这些问题超出了这三个观点。项目经理优先考虑功能交付,一些开发商表示不屑一顾的态度,而其他开发人员则在解决可访问性之前等待浏览器授权。

解决方案?我们需要将可访问性教育整合到开发人员和设计师培训的早期阶段。可以将其视为学习外语 - 只知道语限制沟通。同样,以JavaScript为中心的方法经常忽略HTML固有的可访问性功能。

我们必须确保所有文档包括可访问的代码示例,设计具有可访问性注释,并优先考虑可访问性讨论。我们的工具必须可以固有地访问。这是新的最低标准。

现有的代码和资源呢?我们不能居住过去的错误,但是我们可以以同情心和好奇心前进。我们有能力学习和改进。我们以前克服了具有挑战性的技术障碍;可访问性是我们可以征服的另一个挑战。

可行的步骤:

富有同情心的自我完善:

  1. 跟随社交媒体上的残疾人从他们的经验中学习。倾听,学习并避免有争议的回应。
  2. 更新您的知识。优先考虑HTML优先开发,然后添加JavaScript功能。参加以可访问性为中心的课程。
  3. 使用屏幕读取器了解其功能和局限性。探索仅文本模式,语音设置,标题导航和键盘快捷键。

奖励:有助于可访问性工具项目。

增量代码改进:

地址关键可访问性阻滞剂:

  1. 避免嵌套的交互元素。
  2. 确保所有输入字段具有清晰且相关的标签。
  3. 防止键盘陷阱。
  4. 为所有图像提供有意义的ALT文本。
  5. 删除断裂或不必要的链接。

使用像A11Y项目这样的清单作为起点。

从今天开始。从您的位置开始。更具包容性网络的旅程始于一步。

Scott Rodgerson在Unsplash上​​的特色标题照片

以上是我们无法认真对待可访问性的3种方法的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
什么是CSS网格?什么是CSS网格?Apr 30, 2025 pm 03:21 PM

CSS网格是创建复杂,响应式Web布局的强大工具。它简化了设计,提高可访问性并提供了比旧方法更多的控制权。

什么是CSS Flexbox?什么是CSS Flexbox?Apr 30, 2025 pm 03:20 PM

文章讨论了CSS FlexBox,这是一种布局方法,用于有效地对齐和分布响应设计中的空间。它说明了FlexBox用法,将其与CSS网格进行了比较,并详细浏览了浏览器支持。

我们如何使用CSS使网站迅速响应?我们如何使用CSS使网站迅速响应?Apr 30, 2025 pm 03:19 PM

本文讨论了使用CSS创建响应网站的技术,包括视口元标签,灵活的网格,流体媒体,媒体查询和相对单元。它还涵盖了使用CSS网格和Flexbox一起使用,并推荐CSS框架

CSS盒装属性有什么作用?CSS盒装属性有什么作用?Apr 30, 2025 pm 03:18 PM

本文讨论了CSS盒装属性,该属性控制了元素维度的计算方式。它解释了诸如Content-Box,Border-Box和Padding-Box之类的值,以及它们对布局设计和形式对齐的影响。

我们如何使用CSS动画?我们如何使用CSS动画?Apr 30, 2025 pm 03:17 PM

文章讨论使用CSS,关键属性并与JavaScript结合创建动画。主要问题是浏览器兼容性。

我们可以使用CSS向我们的项目添加3D转换吗?我们可以使用CSS向我们的项目添加3D转换吗?Apr 30, 2025 pm 03:16 PM

文章讨论了Web项目的3D转换,关键属性,浏览器兼容性和性能注意事项的讨论。(角色计数:159)

我们如何在CSS中添加梯度?我们如何在CSS中添加梯度?Apr 30, 2025 pm 03:15 PM

文章讨论了使用CSS梯度(线性,径向,重复)来增强网站视觉效果,添加深度,焦点和现代美学。

CSS中的伪元素是什么?CSS中的伪元素是什么?Apr 30, 2025 pm 03:14 PM

文章讨论了CSS中的伪元素,它们在增强HTML样式方面的使用以及与伪级的差异。提供实用的例子。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器