by Evan HahnIn short: put in your element to refresh your page every second. This is a makeshift "hot reload" for development. It's not perfect, but it can be a quick solution! Hot reloading automatically reloads parts of your page while you're working. Change some HTML and see your work instantly! Tweak some CSS and the results are right...
by Felix HessenbergerIt was on a cold February evening. I had been working on a client project, building an order item list—nothing out of the ordinary. To adjust an item’s quantity, the user would open a popup form with a single input field, type a number, and hit enter. form> label> Quantity input type="number"> label>form> Everything...
by Vadim MakeevIt’s getting dark early in Berlin in the winter. It’s not even close to evening, but my OS and all apps have already switched to dark mode. Well, not all of them, unfortunately. And that’s the thing: dark mode has become a quality-of-life feature for many users, and I often try to avoid using apps or websites that haven’t...
by Jens Oliver MeiertConsider the following HTML document: DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 1996-01//EN">html> head> title>title> head> body> p class="Author"> h1>h1> P> P> H2>H2> P> UL> LI> LI> LI> UL> P> body>html> You will notice a few things: The unusual doctype The inconsistencies in...
by Léonie WatsonCan you give me the HTML for an accessible button please? It was a simple enough question. Or it would have been, had I been asking another person. As it was, I was asking ChatGPT, and so of course there was nothing simple about it. For the briefest of moments, I caught myself thinking even ChatGPT couldn't get this wrong. The ...
by Weston ThayerAn accessible name is how UI components are identified to assistive tech. Having a good accessible name is important. If not, negative effects may include screen reader users missing out on vital information, voice control users struggling to interact, and any number of other issues with the assistive technologies that rely on it....
by Matthias Zöchlingfigure{margin-bottom:2.4rem}figure img{aspect-ratio:4;border: 6px solid #000}figcaption,sup,.highlight,section:has(#resources) span,section:has(#fns) ol{font-size:87.5%}.highlight{margin-left:1.5em;padding:1rem;text-wrap:balance}.highlight::before{content:attr(data-icon);content:attr(data-icon) /...
by Bramus figcaption { font-size: 0.8em; text-align: center; } Viewports units on mobile have been a problem for a long time. Using 100vh is most likely not exactly what you initially expected it to be. To fix this, the CSS Working Group came up with more units over time for you to use. The dynamic viewport units got introduced, which...
by John AllsoppA single line of CSS can enable slick multi-page transitions for web applications (and web sites for those who maintain there's a difference), opening up new possibilities for web app architectures, and website experiences. So let’s take a look at View Transitions, why we might want them, and how to get started with just that...
by Kilian ValkhofFocus is where the user is on your website. It's what makes it possible to navigate your site with the keyboard or other assistive technologies, and it's how a browser knows which form element you're typing in. It's vital to get right if you want to build good websites. Whenever you're dealing with code that can “steal” focus you...
by Rian RietveldIt's a common pattern to use a logo in the header as a link to the homepage. But what should be the alt-text of that image? "the site name" or "homepage" or "logo" or "IMG_123"? Does it even matter? Fun fact: the alt text of the image inside a link, will be added to the link text. The problem with linking a logo is that it serves...
Bad code button type="button" onclick="window.open('https://example.com/other-page')">Link target descriptionbutton> Issues and how to fix them A button opening a link will be unexpected behavior for screen reader users. No matter how it is styled. Links disguised as buttons won’t show up in the link list of a site in assistive technologies. Use...
The good intentions were there but in the HTML and Accessibility world, less is sometimes more. Bad code label for="textinput">First namelabel>input type="text" id="textinput" aria-label="First name" placeholder="First name" title="First name"> Issues and how to fix them The aria-label, placeholder, and title attributes all provide the same...
by Lara Aigmüller“HTML is easy.”, “Frontend development is easier than backend development.”, “Updating the UI should be a simple task once the backend is ready.”—these and other similar statements reached my ears time and again during my career as a web developer. Very often, these made me sad. 🥲 The reason is that I spend most of my working...
by Cristian DiazDisclosure widgets are one of the most common component patterns you can find on the web. It consists of a button that can hide or show information when you click it. It's also one of the straightforward components to make from a technical standpoint. Just a quick note: this article will focus on the most basic form of it to show...
by Andrea de SouzaARIA stands for Accessible Rich Internet Applications. It is a set of roles and attributes that makes web page elements accessible to users who require assistive technology, like screen readers, when native HTML alone is not enough. One of these sets of roles and attributes is aimed at defining live regions. Live regions are...
by Halvor William SandenPeople don’t need call-to-action buttons. Interface elements made to get attention and herd people towards clicks increase cognitive effort because they obscure themselves and reduce interfaces to clickable surfaces. The implied web is based on the idea that people read interfaces through the glasses of their needs...
by Jan HellbuschShould we use tooltips to convey information? Hints and descriptions are often included on web pages through tooltips – but not everyone has access to them. A tooltip is a short text that usually appears as a popup when a user hovers a mouse pointer over an element. Tooltips can be attached to any HTML element using the title...
by Stefania MellaiSemantic and accessible HTML serves as a powerful tool, enhancing not only human interaction but also the efficiency of software systems. For instance, when users fill out forms with clear labels and accessible input fields, this reduces errors and ensures sending accurate data to the backend and databases. You may also have...
by Vadim MakeevHTML semantics is a nice idea, but does it really make a difference? There’s a huge gap between HTML spec’s good intentions and what browsers and screen readers are willing to implement. Writing semantic markup only because the good spec is a spec, and it is good, and it’s a spec is not the worst approach you can take, but it might...
by Winnie BosiboriLists are one of the fundamental semantic HTML configurations that, when implemented appropriately can enhance accessibility. HTML Lists Refresher Whenever I visit any website, I have formed the habit of checking for any accessibility issues and delving deeper into the HTML code structure. One apparent thing is that a large...
by Ida FranceenI don't like how the screen reader pronounces these numbers and I've been experimenting with different kinds of markup to get it to read better, like injecting spans to force it to make proper pauses… Reflecting on my tendency to obsess over small, but maybe not so important details has led me to write this article. I want to share...
by Thomas A. PowellAs a well-seasoned web developer, a clear euphemism for my age, I reminisce about the early days of markup through the haze of strong emotional glasses. I see the past from an extreme nostalgic fondness for the simplicity of the time when a basic text editor and the ability to view source was all you needed. Yet it can just...
by Alistair Shepherd Carefully observing websites in the wild As the murderous tortoises start to converge on Ryūji’s hideout, they pull out their phone. It’s a cheap, older device but it’s survived the toils of the tortoise-ageddon well so far. Thankfully the internet still exists,...
by MayankYou've probably heard statements along the lines of "HTML is already accessible by default" or "You don't need to reinvent this perfectly fine HTML control". I consider these to be more of general claims rather than universal truths. It's extremely important for web developers to recognize gaps in the platform. To that end, I've decided...
by David LuhrWhen I started writing unit tests and following a test-driven development (TDD) workflow, I was stoked with the immediate feedback and confidence I gained in every line of JavaScript I wrote. TDD improved my software design with simpler, more predictable code. It saved me countless hours of manual debugging by reporting errors...
by Ahmad El-AlfyThe hidden attribute allows us to hide HTML elements from the page. When it was introduced, it worked in a very simple way: it set the CSS display property to none. Many people voiced concerns because here we are, mixing styles with markup again. To be fair, this was at a time before the rise of frameworks and the change in...
by Steve FrenzelForeword This template is opinionated and intended as a starting point for those who want to define how accessibility is dealt with in their company. It does not matter whether your title is developer, designer, project manager or something else. I created it based on my experience working with a very small start-up, a digital...
by Egor Kloos (aka dutchcelt)Web Components. The discussion seems to pop up more than it used to. Web Components Will Outlive Your JavaScript Framework HTML Web Components: An Example Material web components 1.0 release HTML Web Components are Just JavaScript? Web Components offer nifty features for creating components using JavaScript, CSS, and...
by Phil NashThe element is the most fascinating element in HTML. Most elements behave the same way regardless of their attributes, the type attribute of the element can take 1 of 22 different values that gives it not only different behaviour, but a different visual appearance too (many of which are hell to style, of course). The element is...
by Saptak SVarious HTTP headers are sent between the user and the server of a website in the request-response cycle. Some of these HTTP response headers sent by the server to the browser help enhance the security and privacy of the website's users. These sets of headers are often commonly known as security headers. These can range anywhere from...
by Chris FerdinandiWeb Components are a collection of technologies that you can use to create reusable custom elements, with built-in interactivity, automatically scoped (or encapsulated) from the rest of your code. They have a wide range of features and functionality (some good, some bad, some ugly), but today, we're going to look at how to...
by Jason Cranford Teague Timeline of HTML from 1990–2024 Note: HTML standards are developed first in browsers, so the version might have already became the de facto standard before the official standard document is released. The story so far: In the beginning Tim Berners-Lee created the World Wide Web. This has made a lot of people very angry and...
by Daniela KubeschIn the fast-paced world of web development, it's easy to get caught up in the latest frameworks, libraries and cutting-edge technologies. But sometimes, the most impactful improvements come from revisiting the fundamentals. In this blog post, I'll guide you through five HTML attributes that not only improve accessibility but...
by Alexander MuzenhardtConsider a scenario where you have a login form containing two input fields with corresponding labels, alongside a submit and a reset button. If you submit the form, the action of the form gets triggered, and you can work with the formData. The layout looks nice as well (let’s imagine we have added some fancy CSS). form...
by Kilian ValkhofHello, my dear friend of RSS! This post contains interactive demos. You may want to read it on the website.Please don't feel antagonised by the title of this article. I don't hate JavaScript, I love it. I write bucketloads of it every single day. But I also love CSS, and I even love JSX HTML. The reason I love all three of these...
by Vasilis van GemertRecently when I gave a coding assignment — an art directed web page about a font — a student asked: does it have to be semantic and shit? The whole class looked up, curious about the answer — please let it be no! I answered that no, it doesn’t have to be semantic and shit, but it does have to be well designed and the user...
Want to trigger an action? Use a button element. They’re great. Want to also prevent form submission when someone clicks that button? Put down the JavaScript, friend. I have a better suggestion: button type="button"> Button action goes herebutton> And that’s it! No preventDefault() or no overwrought dependencies that will stop working without...
While what we mean is usually very clear to us, others may decode our messages differently from what we intended. This is especially true on the web, where there are many ways to consume content. The language, browser type, device model, using a screen reader, navigating with or without a mouse - all of these factors can influence how information...
When it comes to adding images on the web, you need to consider how to make them accessible and understandable to everyone. Which means you need to include text alternatives to describe the image information or function. Three options are: Alternative Text Long description Caption But how do you know which one to use? And when? Here's info to...
The rel attribute has the potential to take the Internet to the next level… and yet, we usually forget about it. Imagine a city where people guided themselves by the landmarks and the stores, where there were no directional signs, and where streets and neighborhoods had no names. It may sound like a U2 song, but it is the current state of the...
HTML is such a lovely language. Browsers will almost always display something for you, no matter what you put in the HTML document. Heck, you could omit all tags, and it will still work. That’s all nice, but as web professionals, we should aim to write valid code. But even professional web developers make mistakes. Here are some examples of...
Do you know of color-scheme yet? If not, I bet you still think you do. It will certainly look familiar, as prefers-color-scheme has been around for longer and is clearly related. You're in good company if it's new to you - the State of CSS 2022 results just came in, and 73% of respondents had never heard of it. You probably use...
Adding an image with HTML is pretty easy, it’s just a simple tag, after all, right? img src="path/to/image.jpg" /> But when you start taking into consideration topics such as performance, screen sizes, accessibility, pixel density, or user preferences, you might ask yourself at some point if plain HTML is enough for the task… And the answer is...
Reading HTMHell, you might be aware that progressive enhancement is a thing. To sum things up, it's a way to make sure anyone gets a viable version of your page whatever is their context — slow bandwitdh, oldish browser, etc. — but also making the said page more resilient (e.g. to JavaScript errors). Progressive enhancement starts from the...
HTML is a beautiful programming language. It comes with many out-of-the-box accessibility benefits—it conveys semantic meaning to assistive technology, enabling people to consume content and complete often important journeys that they may not be able to do outside of the web. So why is all that goodness we can get for free ignored so often? To...
With the current Y2K fashion trend and JLo being back together with Ben Affleck, the 2000s are having a revival this year. Many brands are jumping onto the boat by creating websites with an “old-school” vibe. SEPRONIC WORLD by Thea Wood on Behance The marquee element is an old web dev community favourite, fitting the 2000s aesthetic. However,...
In this article: Hello, Website Builders! A little history What is a table? Who benefits from tables? What does a table look like? What does a table sound and feel like? (Re)learning tables (1994 - 2022) WCAG levels unlocked When tables get complicated Go forth, and make good tables Learn HTML (including tables) for free Testing tools Special...
Today, I want to look at a proposed HTML feature that may end up replacing a lot of s-based custom input components: . CSS is awesome I realise this calendar is about HTML. And I'll get to that. But first, let me start with CSS. CSS is fantastic, because it has allowed us to decide what our websites look like for over 25 years. This wasn't a...
Motivation When thinking of HTML-related security bugs, people often think of script injection attacks, which is also known as Cross-Site Scripting (XSS). If an attacker is able to submit, modify or store content on your web page, they might include evil JavaScript code to modify the page or steal user information like cookies. Most developers...
When it comes to building out forms, it sometimes seems like there are at once both too few field types and too many. This is especially true when it comes to having users choose an option from a pre-defined list, also known as “choose one” fields. This article will take you on a three-stop tour of the most common ways to enable this kind of...
As developers, validation of user input is one of the first things we are taught. What we usually learn a lot later (or sometimes never), is to challenge our own biases and assumptions. So, for example, we may think it would be a good idea to put some restrictions in an input field for a name: label for="name">First name:label>input type="text"...
While browsing Mastodon late one night, I came across this excellent blog post called HTML is all you need to make a website. It describes a few websites which are pure HTML. No CSS and no JS. And I thought… do you even need HTML to make a website? A few hours later, I launched the NO-HT.ML website. Proving, once and for all, that you don't need...
Summary Introduction What is SEO ? Web quality with Opquast SEO-related Opquast rules Conclusion Introduction ↑ Colleagues sometimes ask me: “Hey Alex, I would like to learn a bit about search engine optimisation (SEO) but I don't really know where to start. Do you have tips for me?”. Well, it's not surprising: like accessibility, sustainability...
If I had a dollar for every time I've had to tell someone to remove an aria-label from an interactive control that has actual visible text, I could have bought Twitter! As a former developer and current accessibility consultant, it is my sincere hope that by reading this article, developers unfamiliar with or unsure about this topic will have a...
Getting performance data from real users can transform assumptions about how a user experiences a site into objective, actionable information. In the last two years, there has been increased awareness of web performance thanks to Google's Core Web Vitals (CWV) metrics. These metrics are great and have nearly universal application, but it can also...
The element is a little known and rarely used semantic element. It's a non-interactive form element that renders as a partially filled horizontal bar. Browsers provide user-agent styles, but the element can also be styled. meter min="10" max="200" value="130">meter> The example above in Safari, Chrome and Firefox on MacOS. is sometimes...
Heading elements (h1 through to h6) are used to give structure to the content of your page. They're important for SEO, make your pages more readable and, of course, also help people that use assistive technologies navigate through your page. Somewhat less known are landmark elements. These are elements that are used to define the structure of...
At some point of developing a website, there might come a time where we need to progressively enhance using JavaScript. There are few different options of how you add JavaScript. Firstly, we can write our own script using vanilla JS only, and self host the JavaScript file. However, often we find ourselves needing to use a JavaScript framework or...
In web development, writing semantic HTML is important for accessibility, and also provides some nice side effects such as supporting browser "reader" modes, SEO, graceful degradation, and exporting. Implementing semantic HTML will also greatly reduce the need for ARIA (Accessible Rich Internet Applications). ARIA is a large set of HTML...
Soon enough in your career as a web developer, you encounter the situation where a designer hands over a wonderful web design in all its large-screen glory. Your mission now is to transform it into code to present a prototype as soon as possible, starting with nothing but an empty text file. Facts, questions and the truth This task comes with a...
Bad code button display="flex" role="button"> svg role="img" viewBox="0 0 13 13" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="15px" width="15px" fill="#000" name="close"> title>Close dialogtitle> path d="…"> path> svg>button> Issues and how to fix them Either turn the into a semantic element (role="img") or exclude it...
Bad code a href="/contact" aria-label="If you find that you need additional assistance in navigating or accessing the content of this website, please call our customer service toll free number 1-800-666-8654309" title="Ifyou find that you need additional assistance in navigating or accessing the content of this website, please call our customer...
Bad code p> • HTML br> • CSS br> • JavaScriptp> Issues and how to fix them Use for paragraphs, not lists. The standard way for creating basic lists is (when the order doesn't matter) or (when the order matters), and for each item. The “list” won't be announced as a list when using a screen reader. and provide useful semantic...
Bad code section> aside> div> section> header> a href="/"> img src="logo.svg" alt="Logo"> a> header> main> a href="/services">Servicesa> a href="/products">Productsa> a href="/aboutus">Aboutusa> main> footer>footer> section> div> aside> ...
Bad code h1 aria-busy="true" aria-live="polite" role="alert" class="sr-only"> Doneh1> Issues and how to fix them The element is used for communicating status updates, not to structure the page. A div with a role of status or alert is more suitable than a h1. The heading is semantically not a heading anymore, but an alert container. This can be...
Context: Visually a list of links. Bad code h6>Popular Citiesh6>div> h6 class="footerLinks">Amsterdamh6> h6 class="footerLinks">Rotterdamh6> h6 class="footerLinks">Utrechth6> h6 class="footerLinks">Den Haagh6> h6 class="footerLinks">Eindhovenh6>div> Issues and how to fix them Use headings (-) to structure the page, don’t use heading elements...
The second HTMHell special focuses on another highly controversial pattern in front-end development: 🔥 the burger button. 🔥 The burger button and his tasty friends (kebab, meatball and bento) usually reveal a list of links when activated. According to our studies, these buttons are highly optimized for mouse and touch users, but lack support...
Note: We've removed most classes to improve readability. Bad code a tabindex="0" type="button" href="/signup" role="link"> span class="focus" tabindex="-1">span> span> span> span>Sign upspan> i class="icon icon-external-link" aria-hidden="true" role="img">i> span> span>a> Issues and how to fix them You don’t need the tabindex...
Bad code input type="text" placeholder="First name"> Issues and how to fix them Every form input element needs a label. When screen reader users access a form field, the label is announced with the field type (e.g. first name, edit text). If it’s missing, users might not know what they’re supposed to fill in (e.g. edit text). Some screen readers...
Bad code article> div> div class="sr-only">Imagediv> img src="/feature-teaser.png" alt="Feature teaser" /> div>article>div> span> span>Exciting feature!span> span> div> This text describes what the feature does! div> a href="/blog/feature"> span>Read morespan> svg viewBox="0 0 9 12" xmlns="http://www.w3.org/2000/svg"> ...
Context: A link to another page. Bad code div>About usdiv> div onClick="location.href='about.html'"> About usdiv> div data-page="aboutus" data-url="index.php"> About usdiv> …or any other variation of this pattern where an element other than is used to link to a page. Issues and how to fix them The element is an element of last resort, for...
Context: A button that expands and collapses a section of text. Bad code button class="panel-heading" tabindex="0" href="#collapse0" aria-expanded="true"> legend> Industries Served legend>button> Issues and how to fix them legend is not allowed as a child of any other element than fieldset. (HTML spec for legend) You don’t need the tabindex...
This first HTMHell special inspects one of the most complicated and most controversial patterns in front-end development: 🔥 the close button. 🔥 In modals, ads, and other overlays you often find a button with a close symbol that allows users, or at least some of them, to close the overlay. This functionality is often limited to mouse users,...
Context: A simple page that displays the availability of a product. Bad code h1>Product Statush1>h2>Is the product available?h2>div> h3> div> div> i> h3 class="message is-success"> It‘s a>availablea>. h3> i> div> div> h3>div> Issues and how to fix them h1 – h6 elements must not be used...
Context: The main navigation of a personal website. Bad code div class="nav"> div> div>aboutdiv> div>thoughtsdiv> div>div> Issues and how to fix them The element is an element of last resort, for when no other element is suitable. Use of the element instead of more appropriate elements leads to poor accessibility. Use for the main...
Context: A list of linked cards, each with heading, image, and teaser text. Bad code section> section> h2>Overviewh2> figure class="card" data-url="image1.html" style="background: url(image1.jpg)"> figcaption> h4>My headingh4> article>Teasertext...article> figcaption> figure> figure class="card"...
Context: A list of images that link to detail pages. Bad code a tabindex="0"> div alt="Browser Wars: The Last Engine" aria-label="Browser Wars: The Last Engine"> div> img alt="Browser Wars: The Last Engine" src="thumbnail.jpg"> div> div>a> Issues and how to fix them If the element has no href attribute, then the element represents a...
Bad code Letters are wrapped in divs to animate each letter with JavaScript. h3> div style="display: block; text-align: start; position: relative;" class="title"> div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">Hdiv> div style="position: relative; display:...
Bad code a type="button" class="button" href="/signup" tabindex="-1">Sign upa> Issues and how to fix them The type attribute has no effect on the semantics of an element. An anchor may have the type attribute, but the value should be a valid MIME type. Browsers may consider it, but it’s purely advisory. If the presence of the href attribute...
Bad code input type="checkbox" id="accept" required>label for="accept"> a href="/legal"> I accept the confidentiality policy and data… a>label> Issues and how to fix them It’s bad practice to nest elements with activation behavior (e.g. click). Users don’t expect a new page to open when they click a label. The ability to click a label provides...
Bad code form role="form"> h2>Poll titleh2> div id="pollQuestion">Is this accessible?div> div name="pollGroup" role="radiogroup"> div role="radiogroup" aria-label="Poll title"> input type="radio" name="poll" aria-labelledby="pollQuestion" value="[object Object]"> span>Yesspan> input type="radio" name="poll"...
Bad code span class="nav-toggle"> ☰ Menu span> Issues and how to fix them A screen reader may announce this as trigram for heaven menu, because ☰ is the unicode character for the trigram for heaven. The purpose of the icon is decorative, it should be hidden from screen readers. Consider adding decorative images using background properties in CSS....
Bad code section id="page-top"> section data-section-id="page-top" style="display: none;">section>section>main> section id="main-content"> header id="main-header"> h1>...h1> section class="container-fluid"> section class="row"> article class="content col-sm-12"> section class="content-inner"> ...
Bad code body> header>…header> main>…main> footer>…footer> div class="cookie_consent modal"> p>We use cookies…p> div class="cookie_consent__close"> i class="fa fa-times">i> div> div class="cookie_consent__ok">OKdiv> div>body> Issues and how to fix them The modal is not the first item on the page and focus is not on the modal...
Bad code a href="#" onclick="modal.open()">Logina> Issues and how to fix them If the a element has an href attribute, it represents a link to another resource like a page or a PDF document. The purpose of the element in this example is to trigger an action on the same page with JavaScript. The button element with the type button is more suitable...
Bad code table> tr id="body"> td id="body"> table id="body"> tr id="body_row"> td id="body_left">…td> td id="body_middle">…td> td id="body_right">…td> tr> table> td> tr> table> Issues and how to fix them An id should be unique no matter on which tag it’s added. Also this code...
Bad code a href="javascript:void(1)" onClick='window.location="index.html"'>Linka> Issues and how to fix them Links won't work, if JavaScript fails to load or execute. You don’t need JavaScript to link to other pages, you can use the href attribute for that. Browser support is pretty good (100% of all browsers). The context menu on right click is...
Bad code a href="#form" role="button" aria-haspopup="true"> Register a> Issues and how to fix them It’s a link to a form at the same page that looks like a button. By adding role="button" to a link, you’re telling that it’s a button, though it acts like a link. Do not change native semantics, unless you really have to....
Bad code a href="https://example.com"> button>Examplebutton>a> Issues and how to fix them By nesting a button inside of a link, you’re sending two messages: this is a button, but also this is a link. If you’re not sure when to use or , watch The Links vs. Buttons Showdown by Marcy Sutton. Good code .button { /* use CSS to apply button-like...
Bad code img src="/images/edit.gif" onclick="openEditDialog(123)">img src="/images/delete.gif" onclick="openDeleteDialog(123)"> Issues and how to fix them The purpose of the img element is to display images, not to execute JavaScript. A click event on a img triggers only on click. A click event on a button triggers on click and if the user...
Bad code div tabindex="-1"> div role="button"> svg width="28" height="24"> … svg> div>div> Issues and how to fix them Setting button semantics explicitly using the role attribute isn’t necessary, there’s an element for that (button). You don’t need the tabindex attribute if you use a button. HTML buttons are focusable by default. A click...
Bad code button role="link" title="Name of website" tabindex="0"> img alt="Name of website" src="logo.jpg" title="Name of website">button> Issues and how to fix them Wrong usage of the button element. There’s an element for linking to external sites (). Do not change native semantics, unless you really have to. It’s possible to link to pages...