The Many Bad (and Good!) Patterns for Close Buttons

Manuel Matuzović details 10 bad HTML patterns for a close button. You know, stuff like this:

<a class="close" onclick="close()">×</a>

Why is that bad? There is no href there, so it really isn’t a link (close buttons aren’t links). Not to mention the missing href makes this “placeholder link” unfocusable. Plus, that symbol will be read as “multiplication” or “times”, which is not helpful (an “x” isn’t either).

What do you use instead?

There are plenty of good patterns too. If you prefer the visual look of a ×, then…

<button type="button">
  <span class="sr-only">Close</span>
  <span aria-hidden="true">×</span>
</button>

…making sure you are accessibly hiding that close button.

Direct Link to Article — Permalink

The post The Many Bad (and Good!) Patterns for Close Buttons appeared first on CSS-Tricks.

from CSS-Tricks https://ift.tt/3gqiRAB
via IFTTT