Improve site accessibility by adding role and aria-* attributes - Githubissues

php-coder / mystamps

The site about post stamps where you can create a virtual collection

https://my-stamps.ru

GNU General Public License v2.0

20 stars 33 forks source link

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

Open php-coder opened 3 years ago

php-coder commented 3 years ago

Read:

[ ] https://www.marcozehe.de/the-web-accessibility-basics/
[ ] https://dev.to/addyosmani/accessibility-tips-for-web-developers-4cn0
[ ] https://www.sitepoint.com/how-to-use-aria-effectively-with-html5/
[ ] https://webaim.org/blog/aria-cause-solution/
[ ] https://html5accessibility.com/stuff/2020/11/07/not-so-short-note-on-aria-label-usage-big-table-edition/
[ ] https://dev.to/telerik/web-accessibility-guidebook-for-developers-2ep8
[ ] https://w3c.github.io/using-aria/
[ ] https://habr.com/ru/post/341810/ (🇷🇺 )
[ ] https://habr.com/ru/company/linka/blog/346238/ (🇷🇺 )
[x] area-label: https://stackoverflow.com/questions/22039910/what-is-aria-label-and-how-should-i-use-it
[ ] aria-describedby: https://stackoverflow.com/questions/4582694/what-is-the-meaning-of-the-aria-describedby-property (see the example with Logout especially)
[ ] https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute
[ ] https://www.w3.org/WAI/tutorials/forms/
[ ] https://www.w3.org/WAI/tutorials/forms/labels/
[ ] https://www.w3.org/WAI/tutorials/forms/notifications/
[ ] https://www.w3.org/WAI/tutorials/forms/validation/
[ ] https://webaim.org/techniques/forms/
[ ] https://webaim.org/techniques/forms/advanced
[ ] https://www.w3.org/TR/core-aam-1.1/
[ ] https://weblind.ru

php-coder commented 3 years ago

Tools that might be helpful:

php-coder commented 3 years ago

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

php-coder commented 3 years ago

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

php-coder commented 3 years ago

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

php-coder commented 3 years ago

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

php-coder commented 3 years ago

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

php-coder commented 12 months ago

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