This content originally appeared on Web development blog - Manuel Matuzović and was authored by Manuel Matuzović
Shortly after we got our new car, a Volkswagen T5, I noticed many people seemed to have the same car. Actually, it was everywhere.
It felt like everyone had the same car. While sales of camping vans and cars that can be used for camping in fact have increased during the pandemic, there’s another reason I saw so many of them, the Frequency illusion or Baader–Meinhof phenomenon.
The Frequency illusion, also known as the Baader–Meinhof phenomenon or frequency bias, is a cognitive bias in which, after noticing something for the first time, there is a tendency to notice it more often, leading someone to believe that it has an increased frequency of occurrence.
Shortly after I started HTMHell a similar thing happened. Every other website seemed to have inaccessible buttons. While this can be explained by the Baader–Meinhof phenomenon, there’s actually data that confirms my feeling. According to the WebAim 1 Million report, 50.1% of 1 million tested websites contained empty links and 27.2% empty buttons.
So, it was more than a feeling. We are terrible at labelling buttons. I understand that this can be confusing, because there are many different ways of getting the job done.
To help with that issue, I've collected different correct and wrong ways of labelling buttons:
How to label buttons
Text only
The all-time classic “just using visible text” works for everyone.
<button type="button">Tweet!</button>Text and Icon
It’s absolutely fine if you want to add an image or icon to the button. Just make sure to hide it from assistive technology using aria-hidden="true". The text label of the button should be sufficient, we don’t need extra information.
<button type="button">
<svg aria-hidden="true" width="28" height="28">
<use xlink:href="#twitter"></use>
</svg>
Tweet!
</button>Sometimes you want to use an icon only. First, you should be really sure that people understand the purpose of the button without text, and second, label it properly. Just because there’s no text visible on screen doesn’t mean that there doesn’t have to be text in the document.
There are different ways of creating icon-only buttons.
Icon-only using a sr-only class
You can put text inside the button and hide it visually using a custom class.
<button type="button">
<span class="sr-only">Tweet!</span>
<svg aria-hidden="true" width="28" height="28">
<use xlink:href="#twitter"></use>
</svg>
</button>.sr-only {
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
left: 0;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
top: 0;
white-space: nowrap;
width: 1px;
}Icon-only using aria-label on the button
You can add a text alternative for the icon using aria-label on the button.
<button aria-label="Tweet!" type="button">
<svg aria-hidden="true" width="28" height="28">
<use xlink:href="#twitter"></use>
</svg>
</button>Icon-only using aria-labelledby on the button
If the label you want to use already exists somewhere on the page, you can reference it using aria-labelledby.
Tweet!
<h2 id="heading">Tweet!</h2>
<button aria-labelledby="heading" type="button">
<svg aria-hidden="true" width="28" height="28">
<use xlink:href="#twitter"></use>
</svg>
</button>Icon-only using title inside the svg
The <title> element inside the <svg> can serve as the accessible name for the button. Unfortunately, in order for this to work properly with all screen readers and browsers, you have to label the <svg> using aria-labelledby explicitly.
<button type="button">
<svg aria-labelledby="title_twitter_h72d" width="28" height="28">
<title id="title_twitter_h72d">Tweet!</title>
<use xlink:href="#twitter"></use>
</svg>
</button>Icon-only using alt attribute
If you’re using an <img> element instead of <svg>, then the alt attribute serves as the accessible name of the button.
<button type="button">
<img src="/images/twitter.png" alt="Tweet!" width="28">
</button> Icon-only using background-image
If you’re using a background image, the best option is to add visually hidden text to the button. aria-label or aria-labelledby would work, too.
<button type="button">
<span class="sr-only">Tweet!</span>
</button> button {
background: url(/images/twitter.png) no-repeat center;
}How not to label buttons
Here are some of the wrong solutions I see often. Don’t do this!
No Text
Don’t do this!
<button type="button"></button>button {
background: url(/images/twitter.png) no-repeat center;
}No text alternative for svg
Don’t do this!
<button type="button">
<svg width="28" height="28">
<use xlink:href="#twitter"></use>
</svg>
</button>No text alternative for img
Don’t do this!
<button type="button">
<img src="/images/twitter.png" alt="" width="28">
</button>or
<button type="button">
<img src="/images/twitter.png" width="28">
</button>
This content originally appeared on Web development blog - Manuel Matuzović and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2022-09-15T09:38:54+00:00) Buttons and the Baader–Meinhof phenomenon. Retrieved from https://www.scien.cx/2022/09/15/buttons-and-the-baader-meinhof-phenomenon/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.