blog
blog copied to clipboard
anjia
博客，积累与沉淀
> 原文：[Mobile App Accessibility Pitfalls, Plus an Intro on Testing for Accessibility.](https://www.microassist.com/digital-accessibility/mobile-application-accessibility-part-2-of-2/)  ## 确保残障用户可以访问移动应用程序：给设计师和开发人员的提示和测试指南 在[第1部分：移动应用程序可访问性的关键开发注意事项](https://www.microassist.com/digital-accessibility/mobile-application-accessibility-part-1-of-2/#utm_source=microassist&utm_medium=mobilapps&utm_campaign=Pt2)中，我们讨论了可访问性的人权和法律案例，了解了可访问性在移动应用程序和网站上的异同，也知道了实现移动应用程序可访问性的基本内容。 本文我们将介绍13个阻碍残障用户使用移动应用程序的可访问性问题，它们都会使企业面临潜在的法律诉讼或投诉；我们还将介绍如何[审计移动应用程序的可访问性](https://www.microassist.com/accessibility/accessibility-audit-services/)，并介绍其最佳实践。 在多数情况下，我们都会参考与手头问题相关的[Web内容可访问性指南（WCAG）2.0](https://www.w3.org/TR/WCAG20/#guidelines#utm_source=microassist&utm_medium=mobilapps&utm_campaign=Pt2)的标准。如第1部分所述，WCAG 2.0是国际公认的建议，旨在使数字内容（无论是网站还是应用程序）更易于访问，并且对所有人都更好用。  ## 13个常见的移动可访问性问题 在移动应用程序和移动网站的设计和开发阶段，需要考虑许多可访问性问题。根据我们的经验，以下是最常见的应用程序开发实践，可确保残障用户很好地导航和使用你的应用程序。 为了确保应用程序的良好访问性，设计团队和开发团队在编写移动网站和移动应用程序时需要避开下面的做法。 1. **禁用双指缩放** - 双指缩放是一个非常有用的辅助工具，它允许有视力障碍的人通过简单的多点触控手势放大一段内容。移动网页若使用了`user-scalable=no`的meta视口属性，便就阻止了用户使用扩大网站文本和图像的标准双指捏合缩放手势。绝不应该禁用这种非常常见的手势。 2. **未读出的表单验证错误消息**...
| 方式 | 全称 | 含义 | 说明 --|------|---------------------------|----------|--- 1 | CPM | Cost Per Mile/Impressions | 按千次曝光 | 1 | CPT | Cost Per Time | 按时长 |...
## 结构性标签 标识页面区域的语义 | 标签 | 含义 | 备注 -------|-----|:------|:------- 1 | `` | 页面的主要内容 | 通常只有一个 2 | `` | 导航到其它页面的部分 | 1. 顶部导航栏2. 页面锚点，eg.目录 | 3 |...
站在 Web 开发的角度，一提到网站的可访问性，可能大部分人最想知道的就是：如何评判一个网站的可访问性的好坏？是否有自动化的检测工具可用，可以很直接地指出问题所在和改进策略？ 本篇文章就来聊聊这个话题，主要包括： 1. 自动化测试工具 2. 手动测试的方法和工具 3. 可访问性需要覆盖的特性列表 ## 一、自动化测试工具 比较常用的四个工具： - [axe-core](https://github.com/dequelabs/axe-core) 是一个用于测试 Web UI 可访问性的引擎。可以将它合并到自动化测试套件中，在命令行中运行 - 浏览器扩展 [aXe](https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd?utm_source=chrome-ntp-icon) 或者 [WAVE](https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh?utm_source=chrome-ntp-icon) - Chrome 插件 [Lighthouse](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?utm_source=chrome-ntp-icon)，它内置了 axe-core，也能提供可访问性检测 -...
原文：https://www.a11ywithlindsey.com/blog/beginning-demystify-aria 当我在 [DEV](https://dev.to/) 上发布了[为什么可访问性不是边缘案例](https://dev.to/lkopacz/3-reasons-why-accessibility-is-not-an-edge-case-3da4)时，我收到一个评论，说希望可访问性更容易实现些。其实我还蛮好奇他们认为的难点是什么，因为我一直有在关注 HTML 和 CSS 的最佳实践，所以我自己没有觉得学习可访问性是有挑战的。当[对方回复](https://dev.to/marek/comment/882m)了之后，我了解到原来主要的痛点是 ARIA。 我看到很多关于 ARIA 的疑惑，比如什么时候该用它、什么时候不该用它、ARIA 的这些属性都是什么意思、所有的这些属性有一个列表吗、等等。我在考虑写一个关于 ARIA 的系列，可能每周写几个 ARIA 属性、如何使用它们、我是否喜欢它们等内容。在我了解所有的 ARIA 属性之前，我真的需要先聊聊 ARIA 的用途，以及我认为你不应该用它来做什么。 ## ARIA 到底是什么 ARIA 是一组属性，你可以将它们添加到元素中，以赋予元素额外的上下文和含义。这对许多事情是很有用的。以下是我认为 ARIA 很有帮助的实例： - 告诉你正在动态加载内容...
“Accessibility”，在 Web 发展的初期，人们习惯把它翻译成“无障碍”，因为它主要考虑如何让残障人士更容易地访问 Web 内容。诸如有行动障碍的人难以完成需要用鼠标进行的精确手部动作，他们更多的需要靠键盘；有视觉障碍的人（低视力、色盲、失明）需要使用屏幕放大镜（物理放大镜、网页的缩放功能、网页设置大字体）或屏幕阅读器来浏览网页内容；有听觉障碍的人需要靠阅读文本来替代音频和视频；有认知障碍的人需要网页本身尽可能地简单清晰、符合逻辑。 如今，访问 Web 的场景、设备和人群越来越多样化，Accessibility 已不再局限于满足残疾人的需求，它也涵盖了在特定场景下的网站可用性，比如移动设备、弱网环境、忘带鼠标、触摸板坏掉了、老年人访问等等。 当然，你也可以把 Accessibility 理解为平等地对待每一个人，无论对方的能力和环境如何，都给他们平等的机会。 所以，我要把文章的题目从《无障碍 Web》改成《有良好访问性的 Web》。 > 标题党？呃...有点，但也不全是。更多的是想方便大家理解的有意为之。 # 有良好访问性的 Web 良好的 Web 可访问性，就是把你的网站建设成让尽可能多的人都觉得好用，可以让每一个人受益。 ## HTML 语义化 之前，我对 HTML 语义化的理解，更多地是局限在代码的良好可读性，以及即使是在 [CSS...
## 渐变 渐变（Gradient）是 CSS3 引入的特性，其定义详见 [CSS Images Module Level 3](https://drafts.csswg.org/css-images-3/#gradients)。它本质上是一个 2D 图像，可以对 background-image、list-style-image 和 border 等进行细微着色。 语法是： ```js = | | | | | ``` 渐变会绘制到一个叫渐变框（gradient box）的矩形框里。渐变框有具体的大小，而渐变本身是没有固有尺寸的。 > 固有尺寸（intrinsic dimensions）是固有宽度、固有高度、固有宽高比的集合。对于特定的对象，这三个尺寸都有可能存在或者不存在。比如：光栅图像（image）同时拥有这三个，SVG...
<audio>
## 事件 | 事件 | 触发时机 -------|-------------|----------- 最常用 | play | Playback 已经开始 | pause | Playback 已经暂停 | ended | Playback 已经 stopped，因为音频播放完了 弱网时 | waiting...
今天和大家分享两个和 CSS 3D 相关的属性/值： - 属性 `perspective` - 声明 `transform-style: preserve-3d;` 为什么要分享它们两个呢？最近在 [100dayscss](https://100dayscss.com/) 上做 CSS 题的时候，被下面这个效果给难住了。  当时鬼使神差地就是不知道如何把图 1.1 变成图 1.2。 图 1.1 | 图 1.2 | :-------------------------:|:-------------------------:|  |...
## CSS Logical Properties and Values Level 1 logical properties and values 让 author 可以通过 logical direction 和 dimension mappings 来控制 layout，而不是通过 physical 的。 > 只提供了 physical -> logical 的...