Add accessibility/WCAG2/ARIA support

NG-ZORRO / ng-zorro-antd

Angular UI Component Library based on Ant Design

https://ng.ant.design

MIT License

8.87k stars 3.94k forks source link

Add accessibility/WCAG2/ARIA support #4707

Open ttaranov opened 4 years ago

ttaranov commented 4 years ago

Reproduction link

https://escvxj.run.stackblitz.io/

Steps to reproduce

almost all components documented on https://ng.ant.design/components/form/en have web accessibility issues, according to WCAG and ARIA standards: https://www.w3.org/TR/WCAG21/ https://www.w3.org/TR/wai-aria-1.1/

What is expected?

add appropriate aria-* roles defined and managed appropriately on actions (e.g. on drop down expand/collapse),
input items should should have labels (or aria labels)
keyboard navigation support
WCAG 2.0 color schemes

What is actually happening?

all required ARIA roles and labels are missing, keyboard and navigation support could be improved

Environment	Info
ng-zorro-antd	8.5.2
Browser	any

wzhudev commented 4 years ago

Support of a11y is listed in our milestone #3667. We would like any help from the community. :heart:

zorro-bot[bot] commented 4 years ago

Hello @ttaranov. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please fill the Pull Request Template here, provide documentation/test cases if needed and make sure CI passed, we will review it soon. Appreciate it advance and we are looking forward to your contribution!

你好 @ttaranov, 我们完全同意你的提议/反馈，欢迎直接在此仓库创建一个 Pull Request 来解决这个问题。请务必填写 Pull Request 内的预设模板，提供改动所需相应的测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献！ giphy

krokofant commented 4 years ago

@ttaranov @wendellhu95 How much of this should be handled by Ng-Zorro and how much should be handle by the consumer?

Is it an issue specific to the docs? Consumers can add aria labels to their inputs and adjust their themes. I imagine some aria attributes are harder for the consumer to specify.

wzhudev commented 4 years ago

@krokofant The React version could be a good reference. They already have aria-* supported.

estellechvl commented 3 years ago

would really love this to be implemented. Also focus trap on submenus.

krokofant commented 3 years ago

The above PR is stale and probably won't get any updates. If someone want's to pick it up it's encouraged.

lsn-tomaszp commented 1 year ago

It should be a priority nowadays to ensure a11y support in such a popular UI lib. The "accessible website" became standard and choosing between e.g. Angular Material or AntD is so much harder (with a huge advantage of Material) in case of lack of basic A11Y support in very good and complex components you've created. Please add support (or enhance/fix) for nzSelect, nzDropdown and other components to become THE BEST in Angular UI Lib World :) It's really tough to fix each component in ANTD lib with directive, working as "overlay" to deliver aria-attributes and required keyboard support.

wojtek1150 commented 1 year ago

ButterflyCoder commented 11 months ago

lppedd commented 8 months ago

@wzhudev last time I worked with NG-ZORRO was back in early 2020, when it seemed like major contributors were from Alibaba.

Looking at the commits/PRs it seems the organization structure has changed a bit, is it correct? Or do you still maintain the role you had back then? I'm asking so that I can figure out how to approach the library, and if I have to allocate time for contributions - in case there isn't a lot of activity.