3 Key tips for improving Accessibility and UX

Are you thinking of updating your kitchen? Well no problem, I'm going to mention 4 simple common kitchen trends to follow, to make your kitchen feel comfortable, and most importantly make it reflect on who you are.

1. Text Symbols don't make the best graphic.

It is common to see a X to represent close. Whether it is to close a popup or a menu. But if someone using a screen reader that doesn't mean a whole lot.

As a result, users will be confused because instead of "close button" a screen reader will voice "multiplication sign button".

Don't do this

<button type="button">&times;</button>

<!-- or -->

<button type="button">×</button>

<!-- or -->

<button type="button"><i class="icon-close"></i></button>

Try this 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">
  <i class="icon-close"></i>
</button>

2. Use 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 consider the verbage that you use.

For example, you might have a link that takes the user to the cart items page. Commonly you might see an aria-label with "Cart items". So users will hear "Cart items, link".

Instead try to use verbs in the aria-label. For example, I'd write "go to cart items" instead of "Cart items". In this case, users hear "go to cart items, link". Little more clear don't you think?

3. Use the button element instead of a div

In the world of functions it is easy to add a function to a div with a specific class or ID. But by using a div instead of a button you limit the interaction to only a mouse, thus limiting accessibility.

Users using a keyboard may try to focus on the button but can't if it is using a div and not a button. An example is having a show/hide password within a form.

Don't do this

<div id="toggle-password">show</div>

Try this

<button type="button" id="toggle-password"> show </button>