The 4 Frontend tips for improving 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">×</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>

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>

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>

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.
🖐 I help people fix accessibility mistakes. If you need help chat me on [email protected] or dev.to direct. Please, specify the subject of the email "Stas, I need help"

👀 Friends, I tell stories from my career on Substack. Join my free newsletter, if you're interested in my background or you want to get my updates first

🤑 If you want to be the first who get my tips get my paid monthly subscription