DEV Community

Stas Melnikov
Stas Melnikov

Posted on • Updated on

The 4 September Frontend tips about a11y and UX

Text symbols aren't the best way to create graphic

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">&times;</button>

<!-- or -->

<button type="button">×</button>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Verbs in aria-label tell users this element leads to action

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

The button element is the best choice for the show/hide password pattern

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.

Showing the correct virtual keyboard when you ask to enter a code

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.

P.S.
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.

For this reason I ask you to join my sponsors if you like what I do

Go to Patreon

❤ 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

Discussion (10)

Collapse
a_sandrina_p profile image
Sandrina Pereira

Cool article! An extra thought about Verbs that lead to actions:

Although adding "Go to my saved items" is more explicit than "Saved items", in my opion, none of them is necessarily wrong. Let me explain why:

Visually, it's highly common to see links with "Save items" kind of text and people understand that the link will lead them to that destination. Writing "Go to my saved items" seems unnecessary.

Semantically, I think that's true too because the screen readers also announces the role of the element (in this case <a> is a "link") in addition to the text. So, "Saved items, link" indirectly means that it's an action that will lead to anoter destination, hence the unnecessary "Go to my..." prefix.

I don't have any resource/study to support this perspective, though. If someone has, please do let me know :)

Collapse
hellonehha profile image
Neha Sharma

Apart from the code, content plays crucial role to support the accessibility. Unfortunately, devs doesn't focus at content eg: aria-label (as you have mentioned), alt tags, and other places such as helper text to link with the input fields.

Loved the content. Thank you for sharing 👍

Collapse
mellunar profile image
mellunar

It's also possible to use a div as a button, but one must define it with the attribute role="button"
developer.mozilla.org/en-US/docs/W...

Collapse
melnik909 profile image
Stas Melnikov Author

No, that will not be a button because users can't focused on div element. The button role just tells screen readers this element is a button. But it doesn't get all functionality

Collapse
meo3w profile image
Phil Hasenkamp

Thank you 🙏🏼

Collapse
prakh_r profile image
Prakhar Yadav

gem 💎

Some comments have been hidden by the post's author - find out more