无障碍 - freeCodeCamp.org

Ep. 10 对话视障开发者李连才：信息无障碍，让我们拥有平等的机会

Miya Liu — Thu, 21 Sep 2023 13:00:00 +0000

这是 freeCodeCamp 中文播客的第 10 期节目。在这个播客上线的一个多月里，我们收到很多听众表达的喜爱和支持，非常感谢大家，你们的反馈对 freeCodeCamp 社区持续推动教育公益非常重要。

希望这些关于学习编程和职业发展的经验乃至对于生活的思考能够给更多人传递能量和动力。

如果你也想在这个播客中讲述自己的故事，或者提供建议，欢迎给我们发邮件。你可以在这篇文章里找到邮箱地址。

今天我们邀请了无障碍工程师李连才。首先我想说他的表达很有感染力，我很开心能够和他一起录这个对话。

李连才

他因为视力障碍，在初中时从普通的学校辍学，接着进入一所特殊教育学校学按摩。在按摩店工作期间，他摸索着学习电脑基础知识，例如，看不清键盘找不到按键的时候，他用手在父亲的手上描绘出按键的首字母，请父亲帮忙找到按键。

接着他接触到其他盲人朋友讲的编程课程，开始在每天十多个小时的按摩工作之余自学编程，慢慢地主要学习微信小程序开发。

2018 年，他加入另一位视障开发者蔡勇斌创办的公司，正式从事无障碍开发工作。团队为众多互联网产品提供无障碍测试服务，开发一些应用程序为残障人士的学习、工作和生活提供支持，也向大众普及无障碍知识。他们相信，盲人只要有平等的机会获取互联网信息，就有超越的可能。

在节目中，李老师还分享了无障碍开发的技术实践、学习资源。希望这些内容对你有帮助，期待你在收听播客的平台上给我们五星或者好评，并把节目分享给更多朋友。

欢迎在 https://chinese.freecodecamp.org/ 查看更多免费的编程学习资源。

主要话题

03:46 什么是信息无障碍
05:03 辍学后学按摩
08:00 盲人就业的多种可能性
12:21 电脑窗口都没啦
19:43 读屏软件
23:20 在安卓 TalkBack 模式下使用微信
27:32 学的第一门编程语言是易语言
29:27 专注学小程序
31:11 在盲人社区中学习
31:56 视障人群学编程的障碍
33:55 VS Code 支持无障碍吗
38:45 开发图片识别小程序
40:30 离开按摩店，成为无障碍工程师
42:22 人生的意义和价值
46:20 团队的业务范围
48:43 创造平等的机会
51:47 产品在什么阶段进行无障碍优化
55:58 无障碍不是做公益
58:44 覆盖哪些障碍人群
59:55 被用户真诚的反馈打动
63:12 无障碍学习资源
63:58 freeCodeCamp 支持无障碍
64:19 开发者如何进行无障碍测试
65:52 用 HTML 语义化标签而不是 div
68:18 alt 属性和图注
69:20 色彩对比度为 4.5:1 及以上
70:42 uniapp 开发中的无障碍
72:08 最关键的是键盘可访问
73:40 无障碍硬件设备
74:32 期待解决验证码的问题

提到的资源

无障碍最佳实践——创建无障碍 Web 应用程序的注意事项

Miya Liu — Fri, 15 Sep 2023 04:57:46 +0000

原文： https://www.freecodecamp.org/news/accessibility-best-practices-to-make-web-apps-accessible/

任何人都应该能够使用你的网站和应用程序，包括残障人士和健全人士。这将增强你的网站的可访问性。

想想你创建的上一个网站，或者你最喜欢的网站，你是否确信任何人都能使用你的网站并执行其所需的关键操作？你是否考虑过患有运动障碍、视力障碍、认知障碍和听力障碍的人呢？

无障碍往往是事后才想到的问题。当需要发布一项功能时，我们会进行无障碍测试，然后发现我们的网站并不具有无障碍特性，于是就进行简单的修复。

创建一个无障碍网站是一项艰巨的任务。但如果我们从一开始就牢记无障碍，那么创建一个无障碍的 Web 应用程序就会容易得多。

在本篇文章中，我将介绍你在创建应用程序的过程中可以牢记的 5 件事，这样你就不必在最后一筹莫展了。

实现良好的无障碍需牢记的 5 件事

语义化 HTML（Semantinc HTML）
Tabindex
Aria 属性（Aria attributes）
Role
键盘导航和屏幕阅读器（Keyboard navigation and screen readers）

简而言之，S.T.A.R.K。

如果你需要什么来辅助记住这一点，想想托尼-斯塔克（Tony Stark）。

让我们逐一了解如何在 Web 应用程序中使用它们。

语义化 HTML 是什么

使用语义化 HTML 对于无障碍非常重要。这是因为屏幕阅读器等辅助技术能够通过解析页面的 HTML 来解释页面上的内容。它们能让用户根据元素采取相应的行动。

例如，如果屏幕阅读器遇到一个按钮，它就会向用户发出信号，让他们点击该按钮。

让我们来看看不使用语义化 HTML 时会发生什么情况：

使用 `div` 而不是 `button` 创建按钮：

div 是容器元素，因此当屏幕阅读器遇到 div 时，它会自动认为这是一个呈现元素。

当屏幕阅读器用户遇到一个内含内容或子元素的 div 时，屏幕阅读器会宣布 role="group"，而用户将完全不知道这个 div 是交互式的。因此，请确保使用适当的语义元素来实现其目的。这是实现轻松实现无障碍的方法。

使用 CSS 写标题，而不是使用 `h1-6` 标记：

和
等标题标记可以让辅助技术知道这是重要的文本，屏幕阅读器会提示 "标题"。
如果使用 CSS 而不是正确的语义来生成标题，屏幕阅读器就会忽略文本的重要性。
因此，请确保尽可能使用语义化 HTML。
Tabindex 是什么
添加 `tabindex` 可使交互式元素具有键盘导航功能。为元素添加 `tabindex` 后，用户只需使用键盘和/或辅助技术就能导航到该元素。
`tabindex` 为 `0` 时，按默认制表顺序将焦点设置到元素上
`tabindex` 为 `-1` 时，使用 JavaScript 通过编程的方式让元素获得焦点
不要为 `tabindex` 赋值 > 1
但有一点要注意——你只能为交互式元素添加 `tabindex`。为 `div` 等元素添加 `tabindex` 并不是一种好的做法。
在这种情况下，请使用语义元素（如 `button`）来代替添加 `tabindex`，因为语义元素已经可以添加 `tabbable`，不需要额外的 `tabindex` 值。

Aria 属性是什么

aria-checked 和 aria-label 等 Aria 属性可为辅助技术提供额外信息。

Aria 属性是一组 HTML 属性，用于提供有关网页上元素的目的和状态的附加信息。这些属性尤其有利于辅助技术为用户提供更多的上下文和更好的导航。

一些常见的 aria-attributes 包括：

aria-label：用于为元素提供标签或名称
aria-hidden：用于表示元素应从辅助技术中隐藏，这对用于布局但与页面内容无关的元素非常有用
aria-describedby：用于将元素与描述关联起来，这有助于提供元素的上下文
aria-live：用于表示元素的内容可能会动态变化，辅助技术应注意元素内容的变化

你可以将这些属性与标准 HTML 属性结合起来使用，以创建更易于访问的和用户友好的网页内容。

`aria-role` 属性是什么

你可以使用 aria-role 属性来定义 HTML 元素的用途并提供其语义。

例如，如果你正在使用 CSS 和 div 创建一个网格组件，你可以使用 role="grid" 让辅助技术了解该组件的语义。

一些常见的 aria-role 包括：

button：用于表示一个元素应被视为一个按钮
alert：用于表示某个元素是一个提示框
presentation：用于表示一个元素只是演示性的

使用 aria-role 时一定要谨慎。切记不要过度使用。

如何操作键盘导航和屏幕阅读器

许多有运动障碍的用户依靠键盘和辅助技术来浏览网页。因此，每个组件都必须能够使用键盘和屏幕阅读器进行导航。

你可以通过仅使用键盘导航网站来测试键盘的无障碍性。以下是一些常用键：

tab 键，用于浏览网站的不同部分
空格键，用于选择元素，如复选框
回车键，用于按下按钮

在测试键盘导航时，请务必考虑以下几点：

焦点保持可见：确保你能清楚地看到页面上哪个元素获得焦点。焦点应始终保持可见。
选项卡顺序：在各部分之间切换时，切换顺序应遵循网站的自然流程和逻辑结构。不应在各部分之间来回跳转。
键盘陷阱：确保使用键盘导航时，焦点不会被困在某个元素上。例如，当打开模态框或焦点导航到日历或表情符号选择器等小工具时，就会出现这种情况。确保你在选择部件中的元素时，能够导航回网站。

总结

总之，在开发过程中进行无障碍测试是整个流程的重要组成部分，有助于为所有用户创建更可用、更无障碍的软件。尽早测试无障碍特性有助于为每个人提供良好的用户体验。

在下一篇文章中，我将介绍各种无障碍性工具以及如何调试无障碍性问题。你可以在这里注册，在收件箱中收到这篇文章。

在此之前，请享受你的假期！

圣诞快乐

语义化 HTML 指南——div 的十种替换方案

PapayaHUANG — Wed, 09 Nov 2022 04:19:00 +0000

原文： Semantic HTML Guide – 10 Alternatives to Using divs

如果你的 HTML 布局是这个样子，请举手：


  
    
      
        Home
        About
        Contact
      
    
  
  
    
      This is the introduction to the site, which is full of divs.

大部分人在搭建 HTML 布局的时候会默认使用

元素。大多数人会把精力放在更有趣的 CSS 或者 JavaScript。

使用

元素在搭建页面的时候很简单，但是在后期会造成一些麻烦。

仅使用`div`带来的问题

使用

元素本身并没有什么问题。存在即合理。

但大量地使用 DIV 会给你和你的合作伙伴带来麻烦。

易读性问题

如果你尝试去看别人的代码，或者是几个月后回看自己的代码，如果整个页面只有

元素，很难快速浏览。

你得花费更多地时间去解构页面，这或许会成为你效率的绊脚石。仅是寻找某一个代码块的结束

标签都会花费你大量时间。

无障碍问题

遵循无障碍（a11y）原则是实践，不单是考虑颜色、对比和字幕。根据 WHO（联合国卫生组织）的统计结果：全世界约有 2.85 亿人口遭遇视觉损伤，其中 0.39 亿失明，2.46 亿视力低下。

这就是 HTML 应该无障碍的原因，也就是使用语义化代码。

屏幕阅读器需要通过上下文来判断网页的准确信息。对于屏幕阅读器来说，

和这类元素没有任何意义；而

和

无障碍 - freeCodeCamp.org

Ep. 10 对话视障开发者李连才：信息无障碍，让我们拥有平等的机会

主要话题

提到的资源

无障碍最佳实践——创建无障碍 Web 应用程序的注意事项

实现良好的无障碍需牢记的 5 件事

语义化 HTML 是什么

使用 `div` 而不是 `button` 创建按钮：

使用 CSS 写标题，而不是使用 `h1-6` 标记：

等标题标记可以让辅助技术知道这是重要的文本，屏幕阅读器会提示 "标题"。
如果使用 CSS 而不是正确的语义来生成标题，屏幕阅读器就会忽略文本的重要性。
因此，请确保尽可能使用语义化 HTML。

Tabindex 是什么

Aria 属性是什么

`aria-role` 属性是什么

如何操作键盘导航和屏幕阅读器

总结

语义化 HTML 指南——div 的十种替换方案

仅使用`div`带来的问题

易读性问题

无障碍问题

一致性问题

SEO 问题

HTML 中`div`的替换元素

元素

元素

The Godfather of All Content

The Wedding

无障碍 - freeCodeCamp.org

Ep. 10 对话视障开发者李连才：信息无障碍，让我们拥有平等的机会

主要话题

提到的资源

无障碍最佳实践——创建无障碍 Web 应用程序的注意事项

实现良好的无障碍需牢记的 5 件事

语义化 HTML 是什么

使用 div 而不是 button 创建按钮：

使用 CSS 写标题，而不是使用 h1-6 标记：

等标题标记可以让辅助技术知道这是重要的文本，屏幕阅读器会提示 "标题"。 如果使用 CSS 而不是正确的语义来生成标题，屏幕阅读器就会忽略文本的重要性。因此，请确保尽可能使用语义化 HTML。

Tabindex 是什么

Aria 属性是什么

aria-role 属性是什么

如何操作键盘导航和屏幕阅读器

总结

语义化 HTML 指南——div 的十种替换方案

仅使用div带来的问题

易读性问题

无障碍问题

一致性问题

SEO 问题

HTML 中div的替换元素

元素

元素

The Godfather of All Content

The Wedding

使用 `div` 而不是 `button` 创建按钮：

使用 CSS 写标题，而不是使用 `h1-6` 标记：

等标题标记可以让辅助技术知道这是重要的文本，屏幕阅读器会提示 "标题"。
如果使用 CSS 而不是正确的语义来生成标题，屏幕阅读器就会忽略文本的重要性。
因此，请确保尽可能使用语义化 HTML。

`aria-role` 属性是什么

仅使用`div`带来的问题

HTML 中`div`的替换元素