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

optimize accessibility #26

Open
3 of 10 tasks
alessandromenini opened this issue Feb 5, 2019 · 0 comments
Open
3 of 10 tasks

optimize accessibility #26

alessandromenini opened this issue Feb 5, 2019 · 0 comments
Assignees
@alessandromenini
Labels
Priority: Medium Status: Available Type: Enhancement
Milestone
v1.3

Comments

@alessandromenini
Copy link
Contributor

General

https://developers.google.com/web/fundamentals/accessibility/

Forms

https://www.nngroup.com/articles/errors-forms-design-guidelines/

Tabs

  • Add tablist role to the <ul> to indicate it contains tabs.
  • Add presentation role to each <li> to bypass its list item state.
  • Add tab role to each <a> to incidate it is an actual tab.
  • Add href and aria-controls to each <a> to reference its tab panel.
  • Add id to each <a> as a reference for its tab panel.
  • Add aria-selected="true" to the active <a> tab.
  • Add tabpanel role to each <section> to indicate it is a tab panel.
  • Add id to each <section> as a reference for its tab.
  • Add aria-labelledby to each <section> to reference its label.
  • Add hidden to each inactive <section> to indicate it is hidden.

https://gist.github.com/jonathantneal/435478e415bfe4f54d06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@alessandromenini alessandromenini

Labels
Priority: Medium Status: Available Type: Enhancement
Projects
None yet
Milestone
v1.3
Development

No branches or pull requests
2 participants
@moebiusmania @alessandromenini