Skip to main content

Should I Use a Button or a Link?

One of the most seemingly contentious questions in web accessibility is whether or a button or link should be used when creating certain kinds of interactive elements. Why is it so contentious? The question has been answered countless times over the years by accessibility experts. There is also a wealth of reference documentation that answers the question.The answer is straightforward, and I think it’s only contentious when there is lack of consideration of why links and buttons both look different and behave in completely different ways.Existing resourcesBefore reading the rest of this article, I highly recommend reading the wealth of knowledge that’s already out there. Here’s a list a small list to get you started:Links vs. Buttons in Modern Web Applications – Marcy SuttonOn Link Underlines – Adrian RoselliWhy are hyperlinks blue? – Elise BlanchardRevisiting why hyperlinks are blue – Elise BlanchardGuidelines for Visualizing Links – Jakob NielsenFormatting Links for Usability – Baymard InstituteInteraction Cost – Raluca BudiuLong-Term Exposure to Flat Design: How the Trend Slowly Decreases User Efficiency – Kate MoranBeyond Blue Links: Making Clickable Elements Recognizable – Hoa LorangerImproving text readability for dyslexic users with skip-ink underlines – Damien SengerAccessible Links Re:visited – Maggie WachsHow To Use Underlined Text To Improve User Experience – Nick BabichHTML5 Accessibility Chops: Just use a (native HTML) button – Steve FaulknerHow do buttons and links behave differently?First, it’s important to understand how buttons and links differ. I’ve seen them mistakenly conflated and oversimplified as elements that “perform an action”. And while they both enable a user to perform different actions, that doesn’t make them the same element.We’ll answer the question of differing behavior by reading some bits of the HTML Living Standard and WAI-ARIA 1.2.The HTML Living Standard also talks about the , , and elements in the context of links, but we won’t discuss those here since they have different purposes than the element.About LinksThe HTML Living Standard has an entire section dedicated to links. Here’s the paraphrased definition provided by that document:Links are a conceptual construct that represent a connection between two resources.It goes on to say there are two types of links: links to external resources and hyperlinks. Let’s look at some examples of each.Links to external resourcesLinks to external resources are resources outside of the current site. These can be denoted by setting the rel property to “external”, and then they can also have unique styling applied to them using a CSS attribute selector like a[rel=”external”]. As an example, you might choose to append the text “(external link)” to every link with rel=”external”. This can be done with CSS like this:1a[rel=”external”]::after { 2 content: ” (external link)”; 3} 4You can also apply special styles to to links with target=”_blank”. In the following example, the text “(opens in new tab)” is appended to the link to give users a warning that multiple context changes will happen when the link is activated.1a[target=”_blank”]::after { 2 content: ” (opens in new tab)”;  » Read More

Like to keep reading?

This article first appeared on ashleemboyer.com. If you'd like to continue this story, follow the white rabbit.

View Full Article
Laravel Vs Symfony: Answering All The Questions To Make a Better Choice

Laravel Vs Symfony: Answering All The Questions To Make a Better Choice

#Dev
How to Channel a Daily Vision into a 20-Year Photography Career

How to Channel a Daily Vision into a 20-Year Photography Career

#Silicon Valley
WordPress Punts Locally Hosted Fonts for Legacy Default Themes to 6.2 Release

WordPress Punts Locally Hosted Fonts for Legacy Default Themes to 6.2 Release

#Web Design
Fresh For Designers

Is the Dynamic Island plain stupid or the next revolutionary UX pattern?

#All

Let's talk about Web Design

The term "web design" describes the layout of websites that are seen online. Instead of software development, it typically refers to the user experience components of website development. The primary focus of web design used to be creating websites for desktop browsers, but from the middle of the 2010s, designing for mobile and tablet browsers has gained significance.

What is a webdesigner?

A web designer is responsible for a website's look, feel, and occasionally even content. For instance, appearance refers to the colors, text, and images utilized. Information's organization and categorization are referred to as its layout. An effective web design is user-friendly, aesthetically pleasing, and appropriate for the target audience and brand of the website. Many websites focus on keeping things simple so that viewers won't be distracted or confused by additional information and functionality. Removing as many potential sources of user annoyance as possible is a crucial factor to take into account because the foundation of a web designer's output is a site that gains and nurtures the trust of the target audience.

Responsive and adaptive design are two of the most popular techniques for creating websites that function well on both desktop and mobile devices. In adaptive design, the website content is fixed in layout sizes that correspond to typical screen sizes, while in responsive design, information moves dynamically based on screen size. A layout that is as consistent as possible across devices is essential to preserving user engagement and trust. Designers must be cautious when giving up control of how their work will appear because responsive design can be challenging in this area. While they might need to diversify their skill set if they are also in charge of the content, they will benefit from having complete control over the final output.

What does a web design worker do?

A web designer is a member of the IT industry who is in charge of planning a website's structure, aesthetic appeal, and usability.

A skilled site designer must possess both technical know-how and creative graphic design abilities. They must be able to envision how a website will seem (its graphical design) and how it will operate (conversion of a design into a working website).

The terms web developer and designer are frequently used interchangeably but erroneously. In order to construct more complex interactions on a website, such as the integration with a database system, a web developer is frequently more likely to be a software developer who works with programming languages.