search

arco-design / arco-design-vue

A Vue.js 3 UI Library based on Arco Design
https://arco.design/vue
MIT License
2.69k stars 525 forks source link

Accessibility improvement #191

Open PengJiyuan opened 2 years ago

PengJiyuan commented 2 years ago

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?

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

我们需要关注哪些人群?

要素

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

语义化 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
flsion commented 2 years ago

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

xuxucode commented 2 years ago

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

flsion commented 2 years ago

ARIA Checklist