Skip to content

Improve site accessibility by adding role and aria-* attributes #1493

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
Open
1 of 20 tasks
php-coder opened this issue Jan 8, 2021 · 7 comments
Open
1 of 20 tasks

Improve site accessibility by adding role and aria-* attributes #1493

php-coder opened this issue Jan 8, 2021 · 7 comments
Assignees
@php-coder
Labels
area/markup
Milestone
next

Comments

@php-coder
Copy link
Owner

php-coder commented Jan 8, 2021 •
edited
Loading

Read:
@php-coder php-coder added this to the next milestone Jan 8, 2021
@php-coder php-coder self-assigned this Jan 8, 2021
@php-coder
Copy link
Owner Author

php-coder commented Jan 8, 2021 •
edited
Loading

Tools that might be helpful:

@php-coder
Copy link
Owner Author

All <div class="alert"> should also have role="alert" attribute.

@php-coder
Copy link
Owner Author

We also can try ChromeVox (https://support.google.com/chromebook/answer/7031755) or VoiceOver (https://webaim.org/articles/voiceover/).

@php-coder
Copy link
Owner Author

Add aria-invalid="true" (https://getbootstrap.com/docs/3.3/css/#forms-control-validation)

@php-coder
Copy link
Owner Author

Use <header> tag (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header).

@php-coder
Copy link
Owner Author

Use <main> tag (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main).

php-coder added a commit that referenced this issue Jan 11, 2021
@php-coder
chore: add "aria-label" and "role" attributes to AddCommentFormView c…
dc5ed88 
…omponent

This change is also needed by #1484:
- the "role" attribute makes the alert "searchable" by screen.getByRole()
- the "aria-label" attribute makes the form "searchable" by screen.getByRole()
  (testing-library/dom-testing-library#474 (comment))

Part of #1493
@php-coder
Copy link
Owner Author

Takeaways from https://youtu.be/gHb2bAwuwHM

  • добавлять всем полям формы aria-describedBy=<id элемента с сообщением об ошибке>
  • добавить всем полям с ошибками aria-live="descriptive" чтобы ошибка была прочитана при появлении на экране
  • добавить autocomplete="current-password" в форму логина
  • добавить autocomplete="new-password" в форму активации

См. также: https://evilmartians.com/chronicles/html-best-practices-for-login-and-signup-forms

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@php-coder php-coder

Labels
area/markup
Projects
None yet
Milestone
next
Development

No branches or pull requests
1 participant
@php-coder