Category: design

Categories
color design links

Keep the Underline

Being a web accessibility advocate and practitioner is certainly frustrating at times. Especially when important, foundational best practices get ignored because “the cool kids are doing it”. This was the muse for writing this tweet (for which I was happily surprised to see numerous retweets!):

Just because some big, popular companies make poor design decisions regarding accessibility, doesn’t mean you/your company has to.

You want an accessible, usable website? Then please don’t remove the underline on text links, particularly in the main content (in blocks of text). Unfortunately this design trend continues on the web (and the same could be said about those awful form input labels that act like placeholders, ugh).

Why? For accessibility, users with color blindness or low vision may have trouble distinguishing links from regular text when the underline is missing. Also remember situational disability; links with no underline are usually more difficult to determine when using a poor monitor or when using a computer in a brightly lit environment (since they usually use color alone).

And for usability, it’s just easier to see the links and easier to scan them when they have underlines. It’s also an issue for new users, and people with cognitive or literacy issues (such as dyslexia).

Personally, I’m getting a little older now and my sight’s color recognition is fading a bit. I really don’t like squinting and fighting to find the dark blue links within black text. Don’t make me think!

Some designs have bolded text links instead of underlining in order to differentiate the links from regular text. Bold text can get confused with headings and text that’s bolded for emphasis. And in my opinion, this give a less professional appearance, and still ignores the core convention of underlined text links.

It’s acceptable to remove underlines on text links when other visual cues replaces the underline, such as:

  • Text links in visually explicit navigation bars, dropdown menus, etc.
  • Text links designed to look like buttons (with button functionality and role=button of course!)

Resources

Here are several resources about this issue:

Examples

The following websites have underlined text links in the main content:

Summary

Please don’t remove underlines on text links in main content. Leaving them as intended is better for accessibility, usability, and maintains the core conventions of the web.

Addendum

Check out this follow-up news article on dot net which adds an important point:

the motivation for retaining underlines is “just as much for people with cognitive or literacy issues”

This article was last modified Dec. 2017.

Categories
design interview mobile podcast

Podcast #97: Responsive Design and Accessibility

Dennis speaks with George Zamfir on his background, his activity in Toronto, and how Responsive Web Design (RWD) can benefit web accessibility. The conversation stems from George’s talk Responsive Web Design & Accessibility from the Accessibility Camp Toronto last fall. A notable quote from the 50-minute conversation:

Let go of fixed widths

George is a web accessibility consultant for Good W-ALLY (@good_wally) in Toronto, Canada. He and @Jennison co-host the Toronto Accessibility & Inclusive Design meetup.

As techniques for usability and accessibility have some cross-over, so do RWD and accessibility. Case in point, this recent article on Mashable, 6 Easy Ways to Make Your Website Tablet-Friendly. The main points of George’s presentation are that responsive web design:

  • is like a user’s custom stylesheet
  • adheres to web standards
  • thinks mobile first & uses progressive enhancement (PE)
  • caters to users’ needs

Download Web Axe Episode 97 (Responsive Design and Accessibility)

[transcript of podcast 97]

More reading

Sponsor

Elegant Insights Braille Creations offers custom jewelry, accessories, and promotional items, all embossed in crisp, readable Braille. Our distinctive, made-in-the-USA collection is crafted using contemporary metals such as brass, copper, and stainless steel. Call Laura Legendary at 509-264-2588 or stop by facebook.com/Elegant.Insights or follow on Twitter @ElegantInsights.

Categories
design forms html5 label

Placeholder Attribute Is Not A Label!

Just so we’re all clear on this, the HTML5 placeholder attribute in a text input is not a replacement for the label element. Period. The placeholder should only be used as a brief example of the text to be entered.

Besides inconsistent support for screen readers, using a placeholder as an input label can create usability problems and issues for those with cognitive impairments. For example, how does one review the information entered if the placeholder is now gone?

The placeholder should be used like a title attribute (tooltip); it provides only supplementary information. If the information is required for the user (such as a strict text format) then this should be conveyed in the main content of the page, not in an attribute.

The W3C HTML5 placeholder specification specifically states it should be a “short hint…intended to aid the user with data entry” and also states:

The placeholder attribute should not be used as a replacement for a label.

Supporting articles:

Bonus!
On @a11yMemes, check out this humorous take on placeholder.

Addendum (more references):

Also see Web Axe follow-up post: Floated Labels Still Suck.

Related Tweet Jan 2016:

Categories
design review

Comment on Effective Web Design to Enhance Accessibility

Several days ago, I submitted a comment to the article Effective Web Design to Enhance Accessibility, which was recently going around Twitter. The comment wasn’t published, so here it is:

Proper use of headings is another very important issue.
Comments on points above:

  1. Adequate font size by default is best; 16px ideal, 10 or 12 is unacceptable.
  2. Alternative text is a basic requirement that many folks still miss. Especially important on infographics (and comics!). If too long for alt attribute, just put text on page.
  3. Great point, but “link text” or “link content” may be better use of words. The “title” attribute (a.k.a. tooltip) should only be used for supplemental (and not duplicate) information.
  4. Symbols in addition to color is a good practice. In W3C words, “don’t rely on color alone to convey meaning”.
  5. Be sure to have a label for each form component (and associate correctly). Use Fieldset/Legend for long forms to break in sections.
Categories
design html5 podcast twitter

Podcasts from Tweeps: Universal Design, SitePoint, Heretech

Some great recent podcasts from some great Tweeps (if you’ve been on Mars, that means users of Twitter).