Search for a command to run...
I am a Sr. Frontend Engineer, Team Lead, with 10+ years of experience. I have experience building scalable, accessible, and responsive web applications. I enjoy writing about frontend development and hope to help you on your dev journey.
No comments yet. Be the first to comment.
In this week's article, I want to jump right into building a simple navbar using HTML and CSS. Let's take a look at the design we will be building and review the requirements. Table of contents: What we are building Requirements Implementation Concl...
When starting to learn HTML you will hear the term semantic markup. What does this mean and why is it important? Let's break it down and take a look at some examples. What is semantic HTML? Why is this important? Examples of semantic elements Conclu...
In this article, we are going to continue our Basic HTML series. Over the last couple of weeks, I have discussed basic HTML structure (Basic HTML Structure Explained) and explained what the head tag is (HTML Head Tag Explained). This week let's take ...
In last week's blog post Basic HTML structure explained I covered the basics of HTML structure. In this article let's go more in-depth on the purpose of the head tag. Table of contents What is the head tag? Title Tag Meta Tag Link Tag Style Tag Scri...
HTML is one of the first building blocks to learn how to build websites. There are a set of rules that must be followed in order to build HTML documents. Let's break down the basic structure of an HTML document to help us start building websites. Tab...
When building your website you often will be faced with a choice between using a button or link (a). In some cases a link is the clear choice when you need to link to another page, but what about in page features like ajax request, expand/collapse, and so on. Let's take a look at the uses for each and see the benefits of choosing one over the other.
The HTML
<button>element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality. By default, HTML buttons are presented in a style resembling the platform the user agent runs on, but you can change buttons’ appearance with CSS. - Mozilla
In other words a button is used for in page actions. Some example may include:
<button type="button">Add Comic</button>
The HTML
<a>element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address. Content within each<a>should indicate the link's destination. If the href attribute is present, pressing the enter key while focused on the<a>element will activate it. - Mozilla
<a href="https://google.com">Google</a>
Screen readers and keyboard navigation have slightly different handling of buttons and links. If we deviate from those rules and guidelines we can be causing frustrations for our users that rely on those tools. Below are some examples of the differences:
Users who are familiar with screen readers, keyboard navigation and other tools are relying on us to follow a set of rules and guidelines so they are able to navigate our site as a visual user or mouse user would.
For example: Let's say you use a link instead of a button the user might be inclined to the spacebar to perform the action, but it won't work. This could cause frustration and could lead to them leaving your site.
It's important to use semantic markup so we can provide the best possible experience for all users. If for some reason you can't use a button you can use the aria-role of button so screen readers with treat the element as a button. However, it will be up you to implement the functionality to ensure the behavior acts as a button.
Thanks for reading. Be on the lookout for more accessibility tips.