{"componentChunkName":"component---src-templates-post-js","path":"/blog/2020/06/03/links/","result":{"data":{"post":{"html":"

I see some occasions where web developers who are a bit less familiar with accessibility use links incorrectly in different forms. So I thought let’s write a quick guide on Links in JavaScript apps.

\n\n

Background

\n

It’s safe to assume that anyone who’s used the web have seen them. They take users from one page to another either within the same application or to an external website. There were really hot when they were introduced back in 1966 by a team led by Douglas Engelbart.

\n

In the early 1980s Ben Shneiderman, a computer scientist at the University of Maryland, with his graduate student Dan Ostroff were preparing a videodisk exhibit for a museum. It was then where they used a caption that had all the information and users could click on it to see the photo associated with it.

\n

At first, this discovery was called embedded menu but that term was quickly replaced by hyperlink. Tim Berners-Lee cited Shneiderman’s hyperlink work in his spring 1989 manifesto for what would become the World Wide Web.

\n

Back then, this feature was super hot and it still is. People use it without even thinking about it and it’s become a natural part of the web.

\n

Enough background, tell me what’s this all about

\n

Let’s review what they do:

\n\n

But how do you make a link?

\n

a tag with href

\n

Turns out it’s not as straightforward as one might think. The simplest way to put a link on your site is to use a good old <a> tag with a URL which it points to in the href attribute.

\nA good link, YES ╰(*°▽°*)╯`, `79777914997817570000`)\"\n >\n \n Copy\n \n \n
<a href=\"/elsewhere\">A good link, YES ╰(*°▽°*)╯</a>
\n

a tag with href and event handler

\n

For those with special circumstances, they might sprinkle a little bit of JavaScript on top and use an event handler to navigate the user programmatically:

\nOkay ¯\\_(ツ)_/¯`, `79637347631245260000`)\"\n >\n \n Copy\n \n \n
<a href=\"/elsewhere\" onclick=\"goTo('elsewhere')\">Okay ¯\\_(ツ)_/¯</a>
\n

This is fine as the link stays functional and you can upgrade the functionality using JavaScript.

\n

a tag without href

\n

But some people decide to remove the href attribute. This is not a good idea because you now prevented crawlers to find out where this link goes to:

\nPlease don't ╯︿╰`, `37229267911415120000`)\"\n >\n \n Copy\n \n \n
<a onclick=\"goTo('elsewhere')\">Please don't ╯︿╰</a>
\n

a tag with href but no link

\n

In other occasions, people use the href attribute without a URL or with a pseudo URL:

\nSeriously? (⊙_⊙)？`, `28093931985923314000`)\"\n >\n \n Copy\n \n \n
<a href=\"javascript:goTo('elsewhere')\">Seriously? (⊙_⊙)？</a>
\n

This is even worse than the previous case as it just confuses the hell out of every crawler out there.

\n

using button

\n

You might think it’s a good idea to use a button to navigate the user, but let me tell you, that’s not a good idea either. The rule of thumb is that if the purpose is to do something on the current page, it could be a button. But if it’s takes users to another page or to an external site, it should be a link.

\nBut why? <( _ _ )> `, `51488823975258230000`)\"\n >\n \n Copy\n \n \n
<button onclick=\"goTo('elsewhere')\">But why? <( _ _ )> </button>
\n

any other HTML element

\n

It’s worth noting that you shouldn’t simulate a link using any other HTML element and add a click handler with JavaScript:

\nNOOOOOOOOOOOOOOOO!!!!!!!!!!!! (#\\`O′)`, `76669263857467210000`)\"\n >\n \n Copy\n \n \n
<div onclick=\"goTo('elsewhere')\">NOOOOOOOOOOOOOOOO!!!!!!!!!!!! (#`O′)</div>
\n

This not only wrong for crawlers, but also messes up the screen readers and causes a lot of trouble for people with any vision impairment. So please just use a link with a proper URL.

\n

What is a proper URL? I hear you ask

\n

You saw we ruled out the pseudo URLs like javascript:doSomething(), but let’s take a look at URLs more closely.

\n\n \n Copy\n \n \n
http://example.com/old-school-url\r\n\r\nexample.com/page#section
\n

A URL contains these elements:

\n
    \n
  • A protocol (optional), which defines the protocol to be used for navigation such as http, or https.
    • \n
  • It also has a host, example.com or yashints.dev. A host is a name that one or some computers respond to. Usually it points to an IP address.
    • \n
  • It has a path to specific asset on that computer such as an HTML file, an image, CSS file or a font. But that’s not always the case, sometimes the path is handled via JavaScript and is used to replace part of the content in a page. This technique is called Single Page Application or SPA.
    • \n
  • Some URLs might contain another part such the second example above. That part which comes after the # sign, is called a fragment identifier. By itself a fragment identifier is not a piece of content. It just points to a specific part in the content such as a header.
    • \n
\n
\n

💡 Because fragments are not suppose to point to different content, crawlers ignore them altogether. This means for single page applications where they use fragment like routing, crawlers don’t follow them and that’s why people use techniques such as server side rendering or SSR to allow crawlers become aware of the page’s content.

\n
\n

Summary

\n

To sum it all up:

\n
    \n
  • Use proper link markup, a tag with href attribute.
    • \n
  • Do not use other HTML elements to navigate users.
    • \n
  • Do not omit the href attribute on an anchor tag.
    • \n
  • And last but not least, do not use fragment identifiers to load different content in SPAs if you can.
    • \n
\n

Hope you’ve enjoyed reading this and thanks for drooping by. Until next article, Ta.

","timeToRead":4,"frontmatter":{"unformattedDate":"2020-06-03T00:00:00.000Z","date":"June 03, 2020","title":"Links and JavaScript 🔗","subtitle":null,"id":null,"author":"Yaser Adel Mehraban","gravatar":null,"canonical_url":null,"tags":["showdev","webdev","javascript","links"],"thumbnail":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAIDBf/EABYBAQEBAAAAAAAAAAAAAAAAAAECA//aAAwDAQACEAMQAAAB2kolFjANj//EABsQAAIBBQAAAAAAAAAAAAAAAAECAwAQEiEx/9oACAEBAAEFAgAtRvlYdk1GWZj/AP/EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAEDAQE/AVf/xAAYEQACAwAAAAAAAAAAAAAAAAAAEyExYf/aAAgBAgEBPwG4Eaf/xAAaEAEAAgMBAAAAAAAAAAAAAAABABECEDES/9oACAEBAAY/AnySnu8k7UtWf//EABsQAAICAwEAAAAAAAAAAAAAAAABESEQMXFB/9oACAEBAAE/IUsNN30tohMbB9f9CUE+n//aAAwDAQACAAMAAAAQ/wAf/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxAf/8QAGBEBAQADAAAAAAAAAAAAAAAAAQARITH/2gAIAQIBAT8QNsusOf/EABsQAQEAAgMBAAAAAAAAAAAAAAERACEQMUGR/9oACAEBAAE/EFumQEFNY69vknBmx+40oTQG+scLE9Gf/9k="},"backgroundColor":"transparent","images":{"fallback":{"src":"/static/ded954c9096452afa1ce0e02c9b7791f/84808/link.jpg","srcSet":"/static/ded954c9096452afa1ce0e02c9b7791f/9e0f0/link.jpg 750w,\n/static/ded954c9096452afa1ce0e02c9b7791f/84808/link.jpg 960w","sizes":"(min-width: 960px) 960px, 100vw"},"sources":[{"srcSet":"/static/ded954c9096452afa1ce0e02c9b7791f/cbeef/link.webp 750w,\n/static/ded954c9096452afa1ce0e02c9b7791f/f07e3/link.webp 960w","type":"image/webp","sizes":"(min-width: 960px) 960px, 100vw"}]},"width":960,"height":540}}},"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB7ElEQVR42h2PW2+bMBiG+dnT/sJuJ/Vid/sFk6aqW6Vo3ZrFpJiW5gSEcIo5g22IHQ4miWYmPbJeyX7e77OyComZcTNjVsbckh9xF9Eeke5IuoB0IenjZkhPfUy7iHQJbRFpg+ocy9uiUfSkccjoECE50NGrWhOVbsGcrLbTxkoaM6KH7BTXQ8EvZXtL+TVh16q9yS5lEdVG2ZlVb+NBtrx6+cOzNl85T/ruz9v+CW5ny/fZcrUJK18udbpEpzFqxoxfw6pVQFTDotPzblt0Tjl4dIz4LWI3xK4xv8bnG+JTDprLgQqPirAevVrsyWhmZwXEtZ63MGygXxuI7dLWKTufDvKRnIOaixQ8MmkSl4ignj5oYbFJmQLcUveo5hAp6+FJ8npka8ScsnexkDiVsLGwqbClQ6Zg4UHmdcoVYOVvPjVcDP0G7IuFVSzsUguYFjI4weGRw/gMi17HQi/E/DDApN9hsU6Yorr05S8wHr/BA/6hWveL7YPmwEg6DCI+BTShHZlRto+a+Pjh8vVnv+bDEp0UGDT3M3D3+W7pVi8uXgYE+Fg6OuJ69B8Z5OT4bGTnX+v+05fxu96v6LDwqDLfRHLP32ahHirglMCt1ICq+1y1UtXOVFOeOfAw8GUpWXolRPglJMAlz2b2DzOkEpNPXldzAAAAAElFTkSuQmCC"},"backgroundColor":"transparent","images":{"fallback":{"src":"/static/047a7aafd636674e13164bdd7e58da45/a2195/socialpreview.png","srcSet":"/static/047a7aafd636674e13164bdd7e58da45/cadb4/socialpreview.png 750w,\n/static/047a7aafd636674e13164bdd7e58da45/a2195/socialpreview.png 800w","sizes":"(min-width: 800px) 800px, 100vw"},"sources":[{"srcSet":"/static/047a7aafd636674e13164bdd7e58da45/11ba1/socialpreview.webp 750w,\n/static/047a7aafd636674e13164bdd7e58da45/5f042/socialpreview.webp 800w","type":"image/webp","sizes":"(min-width: 800px) 800px, 100vw"}]},"width":800,"height":400}}},"img":{"publicURL":"/static/ded954c9096452afa1ce0e02c9b7791f/link.jpg"},"socialPreview":{"publicURL":"/static/047a7aafd636674e13164bdd7e58da45/socialpreview.png"}}}},"pageContext":{"title":"Links and JavaScript 🔗","postPath":"/blog/2020/06/03/links","nextPost":"/blog/2020/06/14/scroll-to-text","previousPost":"/blog/2020/05/23/build2020"}},"staticQueryHashes":[],"slicesMap":{}}