arco-design-vue icon indicating copy to clipboard operation
arco-design-vue copied to clipboard

Published 20 hours ago • verified publisher icon arco-design

Accessibility improvement

Open PengJiyuan opened this issue 4 years ago • 3 comments

The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability.

What kinds of disability are we looking at?

  • People with visual impairments
    • Color
    • Screen Reader
  • People with mobility impairments
    • Tab key
    • Keyboard operation
  • People with cognitive impairments
    • Easy to understand

Keypoint

Perceivable、Operable、Understandable、Robust

Semantic html tag

// Bad
<div>Play video</div>

// Good
<button>Play video</button>

WAI-ARIA

Use WCAG 2.1 specification.

Color Contrast

Focus style

Like Button 、 Menu ...

Keyboard operation

  1. Make full use of tabindex
  2. Make sure the keyboard and mouse have the same experience
  3. Make sure the keyboard can activate the element
  1. Tab switch
  2. Arrow key operation
  3. Enter/ ESC key operation
  4. .focus() / .blur()
  5. scrollIntoView

Web 从根本上来说是为所有人而设计的，无论他们的硬件、软件、语言、文化、地点、身体能力或精神能力如何。

我们需要关注哪些人群?

  • 有视觉障碍的人
    • 色彩
    • 读屏
  • 有行动障碍的人
    • Tab 键切换
    • 键盘操作
  • 有认知障碍的人
    • 简单易懂

要素

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

语义化 html 标签

// Bad
<div>Play video</div>

// Good
<button>Play video</button>

WAI-ARIA

使用 WCAG 2.1 标准.

颜色无障碍对比度

聚焦样式

包括 Button 、 Menu 等组件。

键盘操作

  1. 充分利用 tabindex
  2. 确保键盘和鼠标有相同的体验
  3. 确保键盘可以激活元素
  1. Tab 切换
  2. 方向键操作
  3. Enter / ESC 键操作
  4. .focus() / .blur()
  5. scrollIntoView

PengJiyuan avatar Nov 19 '21 03:11 PengJiyuan

@PengJiyuan 建个Project更好些，可以跟踪多个PR

flsion avatar Nov 19 '21 09:11 flsion

请问这块内容有进度或计划吗？希望能在表单里实现 tab 切换、focus 样式

xuxucode avatar Mar 07 '22 06:03 xuxucode

ARIA Checklist

  • [ ] Icon
  • [x] Divider
  • #1104
  • [x] Collapse
  • #1100
  • [x] List
  • #1105
  • [x] Tag
  • #1196
  • [x] Tabs
  • #1264
  • [x] Timeline
  • #1165
  • [x] Tooltip
  • #1169
  • [x] Carousel
  • #1102
  • [ ] Tree
  • [x] Image
  • #1196
  • [x] Input
  • #1106
  • [x] InputNumber
  • #1168
  • [x] Checkbox
  • #1167
  • [x] Rate
  • #1163
  • [x] Switch
  • #1164
  • [ ] Select
  • [ ] TreeSelect
  • [x] Cascader
  • #1196
  • [x] Slider
  • #1196
  • [x] Form
  • #1196
  • [x] Transfer
  • #1196
  • [x] Alert
  • #1169
  • [x] Message / Notification
  • #1169
  • [x] Progress
  • #1170
  • [x] Modal
  • #1196
  • [x] Breadcrumb
  • #1166
  • [x] Dropdown
  • #1196
  • [ ] Menu
  • [ ] Pagination

flsion avatar May 10 '22 09:05 flsion