There is a practice of creating graphics using text. The popular example is a cross icon of close buttons that's created using a multiplication sign.
Yes, visually that's a worked solution but in terms of accessibility, that's the bad practice. Every text symbols have a code that screen readers can voice.
As a result, users will be confused because instead of "close, button" a screen reader will voice "multiplication sign, button".
Thus never don't use text for graphics. Just use SVG for graphics that together with an alternative text. You can do that two ways.
The first way is adding text to the element and hide using the CSS visually-hidden pattern. The second way is using the aria-label attribute.
I'm a fan of the first way because the text will be displayed when CSS isn't loaded. But you can choose what you like.
don't do this
<button type="button">×</button> <!-- or --> <button type="button">×</button>
you can use it instead
<button type="button"> <span class="visually-hidden">close modal</span> <svg height="1rem" width="1rem">...</svg> </button> <!-- or --> <button type="button" aria-label="close modal"> <svg height="1rem" width="1rem">...</svg> </button>
There is a best practice using the aria-label attribute to help screen reader users understand how to interact with an element. But I think there is a problem.
People use nouns. For example, they write "Saved items" for the link that goes to the page with saved items. So users will hear "Saved items, link".
I suggest using verbs in the aria-label to help users understand this element leads to action. For example, I'd write "go to my saved items" instead of "Saved items". In this case, users hear "go to my saved items, link". I think it more clear.
don't do this
<a aria-label="Saved items" href="https://example.com/saved-lists"> <svg height="1rem" width="1rem">...</svg> </a>
you can use it instead
<a aria-label="Go to my saved items" href="https://example.com/saved-lists"> <svg height="1rem" width="1rem">...</svg> </a>
In the last years, the hide/show button pattern became very popular. But a lot of people use it wrong. The mistake is in choosing the right HTML element.
People think users will interact with an element only using a mouse. Just click one time, two, etc. But the value of this pattern is more important.
Firstly, users use the keyboard quickly focusing from the field to the button using the tab key. Then they push the enter key for showing or hiding the password.
Secondly, screen readers have to detect this element is interactive. Then users can use it.
So only one element meets all these requirements — the button element. Use it and your users will be happy to use your interface.
If you want to make UX of forms more simple and user-friendly you should right choose the type attribute. That's important because the attribute helps browsers show the most appropriate virtual keyboard. Thus users can more quickly fill forms. For example, if users fill in a phone number type="tel" shows the keyboard with digits and other special symbols.
But there are cases when existing values can't be applied. For example, when you sign in you want to ask users to enter a numeric code.
In these cases, you can use the special inputmode attribute that helps browsers display a correct keyboard as well. In the cases with a numeric code, you should use the numeric value. Then browsers will display the keyboard with digits only and users will fill the field quickly as well as with the type attribute.
Folks, I love to share my tips with you. I do that with the help of donations from my sponsors since content creating is my full-time job.
❤ Thank you so much, my sponsors: Ben Rinehart, Sergio Kagiema, Jesse Willard, Tanya Ten.
👀 Also I tell stories from my career on Substack. Join my free newsletter, if you're interested in my background