The July DevA11y newsletter
img without the alt is a headache
img without the alt is a headache because screen readers voice src. Users will hear: “mediastore/nn-banner, picture”. Don’t you want it? Use the empty alt!
Throw <input type=”tel”> in the trash
Do you expect * or # symbols when typing date of birth? So input type=”tel” is trash for typing numbers except typing a phone number. Laconic keyboards with numbers using inputmode=”numeric” win!
The * symbol for text fields is a visual pattern
The star symbol confuses a lot of screen reader users. They don’t know what is. So it won’t happen we should use aria-hidden to hide the symbol.
a href=”#” is bane
A link with hash in an href attribute looks like a button. But if to open the context menu we’ll see “Open link in new tab”. In the end, it’s a link or button? The button element will end doubts.
aria-label hints in a non-main language are an anti-pattern
aria-label hints should be written in the language that is the main one for the page. Of course, screen readers will try to voice any one. But if the result is crooked, then it’s not their fault!
Note! You can read the all DevA11y posts right away. Just take a paid subscription.
Also, feel free to email me at melnik909@ya.ru if you have any questions.