WCAG - Mobile a11y

最新推荐文章于 2024-09-16 06:30:00 发布

weixin_45623615

最新推荐文章于 2024-09-16 06:30:00 发布

阅读量292

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_45623615/article/details/124583118

版权

Mobile accessibility

Mobile accessibility

Guideline

主要原则

可感知性
可操作性
可理解性
健壮性

考虑因素

可感知性相关

小屏幕尺寸 – 小屏幕限制了一次可查看的信息量
最佳实践
- 提供专业的移动版本或响应式设计，最大限度减少每个页面的信息量；
- 为内容和触摸空间提供合理的默认大小，尽量减少弱视用户的放大缩小需求；
- 使链接文本长度适应视口宽度；
- 纵向布局（将表单字段放置在标签下方）；
放大/缩小
最佳实践
- 确保浏览器捏合缩放不会被页面的视口元素阻止，以便可以将页面缩放到 200%（AA级）。最佳方案是使用支持文本大小调整而不需要水平平移的技术
- 支持遵循平台级别用户对文本大小的偏好的系统字体；
- 提供页面控件以更改文本大小；
对比度 — 移动设备更可能在如强光源等环境中使用
最佳实践

可操作性相关

触摸屏设备的键盘控制 — 移动设备可通过外接物理键盘
最佳实践
触摸目标大小和间距
最佳实践
- 确保触摸目标至少高 9 毫米、宽 9 毫米；
- 确保接近最小尺寸的触摸目标周围有少量非活动空间；
触屏手势 — 通过在移动设备触摸屏上做出手势进行操作
最佳实践
- 手势应尽可能容易执行，确保依赖头戴式指针或触控笔的用户执行；
- 通过mouseup 或 touchend 事件激活元素，允许用户有机会将光标移动到目标元素外以防止触发事件；
设备操作手势 — 通过物理操作设备（摇晃或倾斜）触发
最佳实践
- 即使提供了设备操作手势，仍应提供可触摸和键盘操作的替代控制选项
按钮位置
最佳实践
- 将按钮放置于易于访问的位置；
- 灵活考虑不同用户的操作习惯（如左右惯用手或单手残障人士等）

可理解性相关

屏幕方向
最佳实践
- 尝试支持两个方向（纵向/横向），如不可同时支持两个方向，应确保所有用户能轻松更改方向以返回到支持其设备方向的点；
- 必须以编程方式公开方向的变化，确保屏幕阅读器等辅助技术进行检测；
布局
最佳实践
- 根据设备大小和屏幕方向排列，视图内的网页在重复组件和导航组件的放置方面应保持一致
滚动页面的重要元素展示
最佳实践
- 将重要的页面信息放置在无需滚动即可看到的位置；
元素分组
最佳实践
- 对执行相同操作的元素进行分组（如带有链接文本的链接图标）
可操作元素
最佳实践
- 清楚的表明元素是可操作的；通过形状、颜色、样式、定位和传统图像等特征区分
提供说明
最佳实践
- 提供设备操作手势等说明，说明本身应易于发现和访问，并且应该在需要的任何时候都可用，而不仅仅是第一次

健壮性相关

虚拟键盘输入
最佳实践
- 将虚拟键盘设置为所需的数据输入类型
数据输入
最佳实践
- 预填充信息；
- 通过语音输入等；
平台特性支持
最佳实践
- 支持平台设备的功能，如缩放和字体；

测试指导

残障类型调查

听觉障碍

解决方案：为多媒体内容提供字幕，并为所有音频内容提供文字记录。还可以提供媒体的手语版本，以获得更具包容性的体验。
运动障碍 - 包括脑瘫、帕金森、脊髓损伤等

用户可能无法很好的控制鼠标和键盘，或无法与硬件设备进行物理交互。
解决方案：确保鼠标、触摸板、键盘都能使用所有功能，确保容错性（如删除询问），确保内容在水平或垂直方向上都有效，不要依赖运动驱动（如摇动或倾斜设备）或指针手势（滑动或拖动）
认知障碍 - 包括记忆、注意力、语言理解、数学理解、视觉理解和解决问题缺陷

解决方案：整体网站上下文的提醒、重点突出显示、补充媒体（插图、图标、视频或音频等）、以多种格式提供信息、错误消息说明等
癫痫或前庭疾病 - 有些人容易因频闪、闪烁或闪光效应引起癫痫发作。前庭疾病发作会导致眩晕等；

解决方案：避免任何图形、动画、电影或其他具有频闪、闪烁或闪烁效果的对象。还应避免使用可能会引起恶心或头晕或分散注意力的图形。
视力障碍者 - 包括低视力、盲人和色盲

视力障碍者如何使用网络？
屏幕阅读器，常见的包括 JAWS NVDA VoiceOver
键盘辅助功能，
屏幕放大镜和页面缩放（低视力人群）
高对比度和定制颜色（低视力人群）
当使用颜色来传达或区分信息时，这些信息也应该以另一种方式提供（色盲）

visual blind
屏幕阅读器用户调查

Mobile testing

由于移动操作系统和移动辅助技术的结构都与台式机不同，因此移动测试必须独立于网站的台式机测试进行

移动站点主要有四种测试：

设备：在移动和平板设备上进行测试
具有辅助技术的设备：通过辅助技术进行测试
响应窗口：在桌面上不同大小的窗口上进行测试
桌面：在桌面上测试

推荐的设备和浏览器组合

iPhone, Safari
iPad, Safari
Android, Chrome

辅助技术和功能

IOS
- VoiceOver
- Zoom
- Invert colors
- GrayScale
- Keyboard
Android
- TalkBack
- Magnification
- Color Inversion
- Grayscale
- Keyboard

关键测试

Exit trap ：
确保始终存在一个可访问的可操作项（例如，一个符合颜色对比度要求且具有可访问名称的关闭按钮），用于关闭覆盖当前页面的任何功能或页面（例如整页广告）。

用户可能会被困在功能中的主要方式有六种：
```
1. 没有可采取行动的事项
2. 关闭功能的唯一方法是点击功能外部，这对于辅助技术用户来说是不可能的，例如屏幕阅读器用户、键盘用户、开关用户和放大镜用户。
3. 用户依赖键盘，而关闭可操作项不能被键盘关闭，或者没有高度可见的键盘焦点指示器。
4. 用户依赖屏幕阅读器，屏幕阅读器无法访问关闭的可操作项（通常是由于缺少可访问的名称或状态更改失败）。
5. 用户视力受损或色盲，且可操作的物品不符合颜色对比度要求或仅依赖颜色。
6. 关闭可操作项不符合触摸目标、非活动空间的要求，因此无法被某些用户看到或操作。
```
定时广告是满足要求的，但前提是所有用户都可以使用定时功能，当添加“关闭可操作项”时，它将向所有用户宣布，并满足可访问性要求

如何测试？
- 非定时功能：
  1. 激活非定时功能。
  2. 是否有一个关闭功能？
  3. 如果有，它是否是可操作的项目（不依赖触摸）？
  4. 如果有，屏幕阅读器是否可以访问该项目？
    - 关闭该功能。
    - 打开屏幕阅读器。
    - 激活非定时功能。
    - 功能中的控件能否接收屏幕阅读器焦点？
    - 是否正确传达了每个控件的名称/角色/值？
    - 是否可以通过屏幕阅读器激活交互元素？
    - 是否可以使用屏幕阅读器通过关闭取消该功能？
  5. 如果有，它能被键盘激活吗？
    - 关闭该功能。
    - 连接外部键盘并（仅在iOS中）打开屏幕阅读器。
    - 激活非定时功能。
    - 通过按tab键或上下箭头键，每个控件是否接收到键盘焦点？
    - 键盘焦点是否有视觉指示？焦点是否符合适当的颜色对比度？
    - 是否可以通过键盘激活交互元素？
    - 是否可以通过键盘关闭该功能吗？
  6. 如果有，它是否有一个可访问的名称？
  7. 如果有，它是否符合颜色对比度要求？
  8. 如果有，它是否满足触摸目标和非活动空间要求？
- 定时功能：
  1. 激活定时功能。
  2. 功能的计时是否可见？
  3. 计时完成后，是否有关闭功能？
  4. 如果有，它是否是可操作的项目（且不依赖触摸）？
  5. 如果有，屏幕阅读器是否可以访问该项目？
    - 关闭该功能
    - 打开屏幕阅读器。
    - 激活定时功能。
    - 是否能通过屏幕阅读器传达时间？
    - 是否能通过屏幕阅读器传达时间的变化？
    - 是否能在计时结束后传达结束或传达关闭？
    - 功能中的控件能否接收屏幕阅读器焦点？
    - 是否正确传达了每个控件的名称/角色/值？
    - 是否可以通过屏幕阅读器激活交互元素？
    - 是否可以使用屏幕阅读器通过关闭取消该功能？
  6. 如果有，它能被键盘激活吗？
    - 关闭该功能
    - 连接外部键盘并（仅在iOS中）打开屏幕阅读器。
    - 激活定时功能。
    - 通过按tab键或上下箭头键，每个控件是否接收到键盘焦点？
    - 键盘焦点是否有视觉指示？焦点是否符合适当的颜色对比度？
    - 是否可以通过键盘激活交互元素？
    - 计时结束时，键盘能否激活关闭可操作项？
  7. 如果有，它是否有一个可访问的名称？
  8. 如果有，它是否符合颜色对比度要求？
  9. 如果有，它是否满足触摸目标和非活动空间要求？

swipe / scroll traps：
除非整个屏幕是一张地图，否则请确保不要覆盖大部分页面上的标准移动触摸功能。一些用户一次只能访问页面的一部分。当屏幕的大面积被另一个功能不同的功能（例如无法滚动页面）占据时，这些用户可能会被困在该功能中。

如何测试?
1. 打开每一页。
2. 从下到上滑动滚动至底部。
3. 从上到下滑动滚动至顶部。

layer trap：
确保用户不会困在不可见的层上。在某些情况下，弹出窗口或图层没有获得适当的焦点。在这种情况下，一些用户，例如屏幕阅读器用户和键盘用户，可能会被困在底层或不可见层中。这意味着他们通常无法关闭弹出窗口或图层，或以任何方式与之交互

如何测试?
- 激活可操作项。
- 如果可操作项触发弹出窗口或类似窗口，当前层上的项是否可以操作？
- 如果可操作项触发弹出窗口或类似窗口，屏幕阅读器能否操作当前层上的项？
  1. 打开屏幕阅读器。
  2. 屏幕阅读器是否可以使用当前层上的可操作项？
  3. 屏幕阅读器是否无法使用上一层的可操作项？
- 如果可操作项触发弹出窗口或类似窗口，当前层上的项可以通过键盘操作吗？
  1. 连接外部键盘并（仅在iOS中）打开屏幕阅读器。
  2. 当前层上的可操作项是否可用于键盘？
  3. 键盘是否无法使用上一层的可操作项？