For this demo, I've created quite simple example elements. The more complex your elements are, the more often I've seen people fail this criterion. Compare these examples with a screen reader to see what the issue is.
This next input has a visually hidden label.
The next link has an aria-label that doesn't contain all the visual text.
This next input has a visually hidden label.
The next link has an aria-label that contains the visual text and adds more content in the aria-label. This is a good way to add extra information for the screen reader users. Just remember to always test and pay attention to how you use this feature.
This issue is probably the worst for voice command users. If they want to click the button, they will say, for example, "click search". But because the name of the element is not search, nothing will happen. I really recommend that you watch Web Accessibility Initiative's perspective video about voice recognition to get a better understanding about using voice.
Remember that you can give more information about an element to the screen reader user, but you must have all the visual text also inside a link's accessible name. Don't try to be too clever about these.
If you test this page with a tool like HTML Code Sniffer, you will see that both the examples in the bad examples field give you a warning about this criterion. Whenever you create any components where you add ARIA, always make sure to test them also with a screen reader.