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.

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

feat(datetimepicker): support aria #1559

Open
wants to merge 8 commits into
base: develop
Choose a base branch
from

Conversation

zhangpaopao0609
Copy link
Contributor

@zhangpaopao0609 zhangpaopao0609 commented Feb 7, 2023

🤔 这个 PR 的性质是?

  • 新特性提交

🔗 相关 Issue

fix #1066
fix #1051

💡 需求背景和解决方案

ios 录屏

📝 更新日志

  • feat(DateTimePicker): 支持无障碍访问

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项⚠️

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充
  • Changelog 已提供或无须提供

@syxysszyw
Copy link
Collaborator

预览1

@github-actions
Copy link
Contributor

github-actions bot commented Feb 14, 2023

qrcode

@syxysszyw
Copy link
Collaborator

syxysszyw commented Feb 14, 2023

这需要解决几个问题:

  1. 理解当前选中哪个选项
  2. 如何高效切换选项

TD的picker并非基于原生Picker组件实现,无法实现单指上下轻扫来切换值的交互。因此需要找到另外一种能满足上面2个要求的交互。

目前的效果是一个蛮创新的思路,试过苹果和安卓机,表现都是一致的,目前没发现兼容性问题,效果先看下录屏:

A、iOS录屏:https://user-images.githubusercontent.com/4988284/218742878-100610a8-38cc-43e6-a881-6219a26c3ea8.MP4
B、iOS录屏:https://user-images.githubusercontent.com/4988284/218742942-86ef830f-8cf7-4810-9cea-d14cb91c0fdf.MP4
C、小米CC9Pro-TalkBacl 13.1 录屏:https://user-images.githubusercontent.com/4988284/218743355-0ea674d9-0c82-4c3f-a3f1-13afd48e3b63.mp4
D、nova 5 Pro+屏幕阅读 录屏:https://user-images.githubusercontent.com/4988284/218743486-bf485282-b475-442c-9040-41f58df06b2e.mp4

从录屏可见这种处理方式是每列有3个焦点,依次是:

  • “选择上一项,xxx,按钮”或“没有上一项”(当前选中的已经是第一个选项)
  • “当前选择的是:xxx”
  • “选择下一项,xxx,按钮”或“没有下一项”(当前选中的已经是最后一个选项)

点击按钮可以切换上/下一个选项。

这种做法能满足上面提到的2个要求,并且每一列最多只有3个焦点(之前想过一种兜底的方案是在现有的情况下为选中的选项增加“已选中”的提示),有利于用户提升浏览效率

目前想到可能会让视障用户困惑的问题有这些情况:
1、录屏 A 视频定位 00:16 焦点落在“选择下一项:深圳市,按钮”后,单指双击操作之后选中了深圳市,此时焦点物理位置没有改变,但焦点对应的内容已经自动切到下一个选项并播报“选择下一项:成都市,按钮”,不太确定用户可否理解已经选中了深圳市(一般情况下点击操作之后播报的内容是操作的即时反馈,例如出现Toast播报Toast的内容,切换复选按钮后播报当前是已选中还是未选中的状态。现在的做法不符合以往的播报规律)
2、不太确定视障用户是否能感知到这个大组件里面每3个焦点是子组(不过相比现有的每列的所有选项都会获取一次焦点这种方式,感觉区分度是有提升的,或许文案上还能再优化下)

不过这些只是猜测,感觉是一个还不错的思路,可以尝试找真实的视障用户沟通聊下这种交互是否好理解,再进一步优化

@zhangpaopao0609
Copy link
Contributor Author

zhangpaopao0609 commented Feb 15, 2023

  1. 针对第一个情况。这里其实有点矛盾,合理的情况确实应该是单指双击后立即播报:当前选中项xxx。但与此同时,我们还需要播报 “选择下一项:xxx”,这样用户才只有下一项。

突然想到,是不是可以在“选择上/下一项按钮”时播报一下当前选择项呢,例如:焦点到了下一项按钮,此时播报如下:“当前选择的是xxx,双击选择下一项:xxxx,按钮”,这样做的好处是:

  • 这样能让用户知道当前选择的是什么,同时还告诉用户这个焦点可点击以及它的功能
  • 这样做后就不需要当前选中项焦点区域了,仅保留 上/下一项焦点按钮

当然这样做的劣势就是,效率变低了

  1. 这个确实是,用户怎么感知有两列或者三列呢?不过似乎可以从播报上解决,告诉用户,当前点击的是第几列,不过这样效率就太低了

@syxysszyw
Copy link
Collaborator

  1. 理解你的意思,这种处理方式还让我联想到“InputNumber 数字输入框”这个组件(有些类似),文案可能可以再想一想能不能优化(效率,尽可能精简准确)

  2. 嗯,除了像现在这样不额外处理外,或许可以

  • 用类似“列”或者“组”的概念,即你说的“告诉用户,当前点击的是第几列”,
  • 支持定义列标题,例如“时、分、秒”、“省、市、区”之类(这个方式体验上更好,但对开发者要求比较高,需要自定义)

@LeeJim LeeJim added the a11y 无障碍访问 label Feb 16, 2023
@syxysszyw
Copy link
Collaborator

预览1

@github-actions
Copy link
Contributor

github-actions bot commented Mar 27, 2023

qrcode

@anlyyao
Copy link
Collaborator

anlyyao commented Nov 1, 2023

@zhangpaopao0609 大佬,抽空帮忙处理一下冲突~

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y 无障碍访问
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[DateTimePicker] 无障碍支持 [Picker] 无障碍支持
4 participants