Proper Use of Buttons and Links

After years of arguing for proper use of form elements and link elements, others are finally doing the same. More recently, this includes the articles The Anchor Button: Bad for Accessibility, Bad for Usability by Matt Long and Reinventing the hyperlink (with much humor!) by Heydon Pickering.

The main point is, please do the basics. When designing a website, ensure controls with button-type behavior (interaction, affects the current page) are designed as buttons and regular text links (go to an external page, anchor on page, or external document) are designed like text links (such as blue underlined text).

When developing a website, ensure buttons are coded as buttons (the button or input element) and links are coded as links (the anchor element).

Here are some reasons why it’s so important:

  • accessibility and usability
  • a more robust website (support older user agents, non-JS, etc.)
  • lighter and less complex code
  • more consistent implementation so easier to maintain

Remember that for accessibility, no matter how much ARIA and trickery is done, there will mostly likely still be problems. When blurring the distinction between a button and a link, assistive technology (and/or the user) can be confused as to what’s what. View the beginning of this presentation by Derek Featherstone for a good example of this.

This is a button; this is a text link; don't mix them up.
Button versus text link.

This advice sounds simple, but this elementary guideline is broken quite often; once you start to look, you’ll find it everywhere on the web, especially web apps. There’s no need to create confusion (the design) and to re-invent the wheel (the development). Sticking to the basics will make it easier for everyone, most importantly the user.

For an example of proper implementation, check out Easy Chirp.

Further reading:

Web Accessibility Jobs, July 2014

Wanted (all in U.S.):

To learn of new positions, remember to follow me (@webaxe), @accessible_jobs and @a11yJobs on Twitter!

Open Web Camp 6 – a brief review

Recently I attended Open Web Camp 6 (@OpenWebCamp) at the beautiful PayPal headquarters in sunny San Jose, California. Like every year, the event is coordinated by @JohnFoliot. If you want to review the Twitter feed, the hash tag is #OWC6.

Like last year, the cost of the event was only $10, and attendees get a nice lunch, a t-shirt, and some other swag. The networking was good and the energy was great!

Featherstone standing in front of a projected slide
Derek Featherstone presenting at OWC6

There was a variety of topics but accessibility was the most prominent. Here are the highlights:

  • Derek Featherstone (@feather) presented Accessible Design: Which “everyone” do you mean? where he discussed accessibility challenges for users of assistive technology such as voice recognition and screen magnifiers.
  • Dylan Wilbanks (@dylanw) presented a thought-provoking session Meditations on making fire-proof, failure-proof, future-proof things.
  • Dirk @Ginader presented Teach your Browser new tricks where he discusses longdesc and browser extensions.
  • @KarlGroves spoke about accessibility testing and his app Tenon.
  • The Twitter talk “Connecting to the pulse of the planet” was disappointing. It was much more of a 25-minute sales pitch than a tech talk.

All in all, it was another successful web event. Hoping for an OWC7!

Factoid: I’ve attended every OWC event since its inception at the first Open Web Camp at Stanford, and spoke about the then newly created @EasyChirp (then called Accessible Twitter).

Tweets quoting “Don’t Make Me Think, Revisited”

A short while ago, my author @DennisL read the excellent book Don’t Make Me Think, Revisited by acclaimed usability professional Steve Krug. Dennis was so impressed with the book, he tweeted a series with quotes, mostly relating to accessibility (as well as design and usability). So in case you missed it, here they are:

Web Accessibility Jobs, June 2014

Wow, there’s been quite an influx of great web accessibility-related job listings lately. So here’s the list. All are in USA except the last which is located in Toronto, Canada.

To learn of new positions, remember to follow me (@webaxe), @accessible_jobs and @a11yJobs on Twitter!