usability

Opening a link in a new window or tab

by

I tend to like opening links to external websites in a new window with target=_blank. Below is an example of the code I use to make a link like that more accessible. WCAG guidelines say we should warn a screen reader user when a link is going to open in a new window, so I do that with an aria-label attribute in the a tag. Using an aria-label attribute is a way to override the standard accessible name of the link and provide more context for screen reader users.

Example of a link with an aria-label attribute in the a tag


Videos can be hosted in MediaSite

Videos can be hosted in MediaSite

Actually, the best practice for links that open in a new window is to provide both visual and verbal indication. For sighted users an external link icon appended at the end of the link could be used. See this article about opening links in new windows article from the University of California Berkeley for more information about best practices. WCAG guidelines only recommend opening links in new windows in a few special situations.

Underlining and the Web

by

It’s generally not a good typographic practice to use the default underline function in most applications including the <u> tag in HTML. Many designers believe that underling is not an appropriate method for adding emphasis to text. It’s a holdover from the days of typewriters when other forms of emphasis, like bold text or different colors, were not available. On the web there is a convention that underling denotes a hyperlink so many web designers feel that underling should only be used to represent hyperlinks. Website users may get confused if they click on underlined text that is not a link. Bold ( <strong> in html) or italics (<em> in html) are more valid ways of emphasizing text. In HTML the <u> element, used for underlining,  was deprecated in HTML 4.01. It returned in HTML 5 but has a different semantic meaning.