When you add a link to a page, you can control where the link’s content appears. By default, it replaces the content in the current tab/window that contains the link. In other words, you stay in the same place. However, the HTML <a>, or anchor tag, includes an attribute: target. This attribute allows you to open the new content in a different tab or a different window. It could even be a parent tab to the one in which the link appears. For most of us with no vision disabilities, that distinction may be obvious. However, for the vision impaired, especially the blind relying on a screen reader, jumping to another location could be a total mystery. The problem is this. If a vision-impaired person wants to return to the previous content after reading the new content, what do they do? Do they press the go-back arrow? That only works when the new content replaced the prior content. Do they click the close box in the upper right corner? That only works if you display the new content in a new window. What if the new content replaced a parent window/tab? Getting back to where they were can be frustrating.
Let us begin by looking at the target options available for a link. There are four possible targets. However, the first two targets are the most common.
|_self||The current browser content is replaced with the linked content. This is the default if the target attribute is not used.|
|_blank||The linked content opens in a new tab or window (depending on the browser setting)|
|_parent||The linked content opens in the parent tab or window of the one with the link. If there is no parent context, the content is opened in the current context just like _self.|
|_top||The linked content opens in the topmost tab or window of the one with the link. If there is no top context, the content is opened in the current context just like _self.|
Examine the following two HTML statements.
<a href="https://mysite/myblogs" title="Open my blog site in the current window" target="_self">My blog</a> <a href="https://mysite/docs/myresume.pdf" title="View my resume in a new window." target="_blank">My resume</a>
Can you tell what each statement does simply from the HTML? The first statement opens my blog page in the current window. To get back to the previous page, the user can click the go-back button in the upper left of the menu bar. The second statement displays a PDF version of my resume in a new window. After looking at the resume, the user can simply close that window to return to the content page they were on. Note that while the target attribute controls where the new content appears, the title attribute informs the user what is going to happen. This is how the visually impaired keep track of where they are.
You may also want to help visitors to your site keep track of where they are by being consistent in where you open links. Of course, you could always open links by default in the same tab/window context. However, consider if the link goes to another website. Do you really want it to replace your site context? Perhaps you should open all third-party sites in a new tab/window so that the site visitor knows they can simply close that tab/window to return to your content. This is much cleaner especially if the person navigates through multiple pages on the third-party site before returning to your site.
Alternatively, you could always open links in a new tab/window. However, if the site visitor goes to several pages on your site, they may soon have so many tabs/windows open that they do not know how to get back to where they started.
So, can you strike a compromise between sending link content to the same tab/window or always sending it to a new tab/window? Perhaps a set of rules might help. While it may not be perfect, I have used the following set of rules for where to open links:
- Open other pages from your website in the same context tab/window using target=”_self” or just do not include the target attribute at all.
- Open links to other websites in a new tab/window using target=”_blank”.
- Open PDF files, videos, podcasts, etc. in a new tab/window using target=”_blank”.
- Use target=”_parent” or target=”_self” only if you have a series of parallel topics that can be navigated to from a single page.
While this may not be a perfect solution for all situations, it at least provides a consistent context that visitors to your site can rely on when navigating through your links. It is certainly better than having some links on a page arbitrarily replace the current page content while others open in a new tab/window.
(Note: Strictly speaking, this topic does not fall into any of the recognized accessibility guideline rules which I will cover in a future post. However, I believe it makes as much sense as many of the other link rules in this section, especially for the visually impaired.)