Tag Archives: pour guidelines

Never Set Links to Open in a New Tab

In our contemporary tab centric browsing experience —where tabs have become all but common place for navigating the web, it might appear helpful to provide your user a new tab for opening external content, thus saving them the task of pressing the back button to return to your site, but this is not always the case.

 POUR Guidelines and Accessibility

The POUR guidelines were defined under the Web Content Accessibility Guidelines 2.0 specification which was drafted by the W3C in 2008. POUR stands for Percieveable, Operable, Understandable, and Robust.  Opening links in new tabs infringes on the second principal of Understandability, which states that websites should operate in easy to understand and predictable ways.

Imagine for a moment that you are a blind user using a screen reader to navigate content when you arrive at a link midway down the page, as soon as you click on the link a new tab appears beside your current window without you knowing and you are left wondering where your content is. As you can imagine this can be a very disorienting experience for blind clients using your site. This particular point is specifically addressed by the W3C Content accessibility guidelines.

UX Considerations

Opening links in news tabs also takes away control from the users by eliminating their ability to choose how links open. In the Smashing Magazine article “Should links open in new windows?” Vitaly Friedman states that:

Users need to be able to rely on consistency of the user interface and know that they won’t be distracted or disrupted during the interaction. Users must know, understand and anticipate what is going on and what will happen once user interface elements are used. Any deviations from this convention result in a more design-oriented and less user-oriented design.

By dictating to users how their browsers ought to behave you rob them of the freedom to decide how they want to navigate the web.

Setting  Link Behavior in WordPress

Now that we’ve discussed why you shouldn’t open links in new tabs, lets discuss how to set link behavior so that we can avoid this problem altogether. In WordPress you set link behavior on a post by post basis and must set the behavior for each link included in your post. To set link behavior we must first create a new link:

1. First highlight the text you would like to link to.

Step one.

2. Then press the link icon on the visual editor.

Step two.

3. In order to set link behavior look for the check-box under the title text field. By default this should be unchecked. Unchecked means that the link will open in the current tab, this is the behavior that we want.

Screenshot of what you should do.

 

4. Make sure that the check-box remains unchecked.

Screen Shot of what not to do.

5. Click update at the bottom of the window when you are done.

Screen Shot 2014-06-06 at 4.59.21 PM

Please note that this tutorial is specific for WordPress, other web publishing platforms will require different steps.

For further discussion on the practice of opening new links in tabs please visit:

Advertisements

How to Code POUR-ly

Web accessibility is huge; especially with such a large percentage of the world’s population being considered “disabled” it is important to make your website as accessible as possible. Lack of patience for a few extra lines of code is quite lazy, when the end result is so critical. Here’s a few tips on how to code POUR-ly and make your website accessible!

Let’s look at few things you can do specifically in the code of your site.

  1. Properly formed HTML links: All links and URLs should be wrapped in anchor tags and have a title.
  2. Proper Image Formatting: All images should have an alternative text for screen readers to describe the image. They should also have width and height parameters in the IMG HTML tag so that the page loads accordingly even if the image cannot be displayed.
  3. Emails are Mail-to Links: Your email addresses listed on your site should be mailto: hyperlinks, not just plain text.
  4. Proper Text Formatting: Bold text should be made so with the “strong” tag and italic text should be made so with the “em” tag. If you want text to be bold or italic but not be read different by screen readers you can use a “span” tag with the “text-decoration: bold” attribute as an example.
    Continue reading How to Code POUR-ly