Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Accessibility improvement #191

Open
PengJiyuan opened this issue Nov 19, 2021 · 3 comments
Open

Accessibility improvement #191

PengJiyuan opened this issue Nov 19, 2021 · 3 comments
Assignees
@kirazxyun @sHow8e @flsion
Labels
💪🏻 Enhancement feature enhancement 💤 Inactive Inactive issues

Comments

@PengJiyuan
Copy link
Member

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 PengJiyuan added 💪🏻 Enhancement feature enhancement ✨ Feature Request New feature or request labels Nov 19, 2021
@PengJiyuan PengJiyuan pinned this issue Nov 19, 2021
@flsion
Copy link
Member

flsion commented Nov 19, 2021

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

@flsion flsion added 🏃🏻 In progress This will be added in the future and removed ✨ Feature Request New feature or request labels Nov 26, 2021
@xuxucode
Copy link
Contributor

xuxucode commented Mar 7, 2022

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

@flsion flsion mentioned this issue May 10, 2022
Merged
15 tasks
@flsion
Copy link
Member

flsion commented May 10, 2022 •
edited
Loading

ARIA Checklist

This was referenced May 10, 2022
Merged
Merged
Merged
Merged
@flsion flsion removed the 🏃🏻 In progress This will be added in the future label Jul 17, 2022
@github-actions github-actions bot added the 💤 Inactive Inactive issues label Sep 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kirazxyun kirazxyun

@sHow8e sHow8e

@flsion flsion

Labels
💪🏻 Enhancement feature enhancement 💤 Inactive Inactive issues
Projects
No open projects
Arco Design Vue Rodamap
Status: Q2 2022 – Apr-Jun
Milestone
No milestone
Development

No branches or pull requests
5 participants
@xuxucode @kirazxyun @sHow8e @PengJiyuan @flsion