# Buttons and the Baader-Meinhof phenomenon

DevFeed: [Buttons and the Baader-Meinhof phenomenon](<https://devfeed.tech/articles/buttons-and-the-baader-meinhof-phenomenon-52246.md>)

Original publisher: [Read original article](<https://www.matuzo.at/blog/2022/button-baader>)

Author: Manuel Matuzović

Published: 2022-09-15T00:00:00Z

Content type: tutorial

Language: en

Sources: [Manuel Matuzović](<https://devfeed.tech/sources/manuel-matuzovic-blog.md>)

Topics: [aria](<https://devfeed.tech/topics/aria.md>), [Website](<https://devfeed.tech/topics/website.md>), [browser](<https://devfeed.tech/topics/browser.md>)

Tags: [accessible](<https://devfeed.tech/tags/accessible.md>), [aria](<https://devfeed.tech/tags/aria.md>), [assistive-technology](<https://devfeed.tech/tags/assistive-technology.md>), [browsers](<https://devfeed.tech/tags/browsers.md>), [button](<https://devfeed.tech/tags/button.md>), [class](<https://devfeed.tech/tags/class.md>), [hidden](<https://devfeed.tech/tags/hidden.md>), [screen](<https://devfeed.tech/tags/screen.md>)

## AI overview

A tutorial on labeling HTML buttons accessibly. It explains visible-text, text-and-icon, and icon-only buttons, including the use of aria-label, aria-labelledby, visually hidden text, and suitable SVG or image alternatives.

## Source excerpt

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. Tweet! <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. Tweet! <button type="button"> <svg aria-hidden="true" width="28" height="28"> <use 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 v