Buttons and Links

Understand the difference between buttons and links and why this matters for accessible websites and applications.

Buttons and links are two deceptively simple elements. After all, these are two of the most commonly used and integral components that exist on the web, right? Try to think of a website or application that doesn’t include a single button or link. Not an easy task!

Like so many things, <button> elements and <a> elements are inherently accessible as long as we, the developer, don’t get in the way! That means learning when we should use buttons vs. links, as well as how to use them correctly, how to write descriptive text, and how to style them properly.

Predictable layouts

As part of the POUR approach to accessibility, websites and applications need to be understandable, which also means they need to be predictable. Sometimes, this is also referred to as being intuitive. When we can correctly predict what will happen in a system, we no longer require the rules to be spelled out for us. We can intuit, using context clues and established UX patterns, what will happen when we interact with various elements on the page.

This is possible because there are some patterns on the web that we, as users, have become trained and accustomed to. For example, if there’s a clickable logo in the top left corner of a website, what do we expect will happen when we click it? We will assume that we’d be taken to the home page, right? This has become such a standardized behavior that most users would be confused and frustrated if they clicked on that logo and were taken to a different page!

Get hands-on with 1200+ tech skills courses.