James Edwards, Mar 09

Accessible Drag and Drop with Multiple Items

James Edwards shows you how to extend the capabilities of the HTML5 drag and drop API, so it can handle multiple elements, and support keyboard interaction.
Shaumik Daityari, Feb 28

Understanding Baidu — The Chinese Google

If a large portion of your users are Chinese then you must ensure that you understand the search engine they'll be using — Baidu. Shaumik Daityari explores.
Design & UX
Gian Wild, Feb 23

The Unbearable Inaccessibility of Slideshows

Can you build an accessible slideshow and what are the major challenges? Gian Wild delivers the definitive word on slideshows, carousel or sliders.
Design & UX
Alex Walker, Jan 28

When Bad Software Kills

Writing software can seem cool and abstracted until you realise the impact your code can have. Therac-25 was a tragic example of how bad code hurts people.
Aurelio De Rosa, Dec 16

How to Accessibly Rotate Contents with jQuery

This article looks at the often overlooked aspect of accessibility. This article uses content, rotated using jQuery, as an example.
Design & UX
Alex Walker, Nov 12

The Secret to Underlined Links That Don't Sting Your Eyes?

Hypertext Editing System - Brown University This is the Hypertext Editing System (HES) created at Brown University by the 'father of the hyperlink' - Ted Nelson in 1969. The coolest thing about the system was the built-in lightpen, that allowed the operator to manually underline the text they wanted to link. Gee Willikers, Mr. Peabody! You can almost trace that lightpen directly through to the underlined links we still use on the web today. The underline may be the most widely understood convention on the Web, and isn't going away any time soon. On the other hand, in typography circles, underlining has always been a serious no-no. Butterick's Practical Typography goes as far as saying: "Absolutely not. In a printed doc­u­ment, don’t un­der­line. Ever." So,.. accessibility and UX experts tell us we should use them, but we're told they are typographical poison. Mr. Rock. Can I introduce you to Mr. Hard Place?

The Problem

So, if we can't throw away the underlined link convention, can we make it better? What are its biggest failings? Beside the general cramping that comes with filling in the whitespace between lines, perhaps the biggest single issue is what happens when the underline touches the letterforms. Problems with lowercase 'q' and 'a'. One common example of nastiness is where the descenders on lowercase p, g, y, q and sometimes z often crashing into an underline. Light bauhaus-influenced fonts with short decenders seem to suffer worse than most typefaces. As you can see below with Google Fonts suchs as Rajdhani and Poiret One, it's visually difficult to discern the difference between a lowercase 'q' and an 'a' when an underline is involved. Quattrocentro's capital Q disappears into the underline Likewise, the tail on capital 'Q' is usually fine with an underline, but can present serious problems with certain typefaces. For instance, Quattrocentro has a very low, horizontal tail that almost disappears in an underline. The small tail on the capital 'J' also becomes less clear. Messy, right?

Is there a Solution?

Heydon Pickering, Oct 15

Replacing Radio Buttons Without Replacing Radio Buttons

Heydon Pickering describes how he built beautiful, accessible custom radio buttons with just HTML and CSS and no reliance on complex ARIA or JavaScript.
Design & UX
Amit Diwan, Sep 26

Assistive Technology: That Means Screen Readers, Right?

It's easy to think that Assistive Technology is just another name screenreaders, but Amit shows us there is a wider variety of products in this category.
Design & UX
Annarita Tranfici, Sep 19

3 Old and Outdated UX Patterns (And How to Fix Them)

When you find something that works, it's easy to keep doing it day after day without seriously wondering if it's still the best approach.
Design & UX
Zack Wallace, Sep 04

Danger of the Accidental Click (and other UX issues)

Humans are imprecise creatures by nature. We fumble and mis-click often. But what happens when bad UX decisions amplify our accidental clicks?
Design & UX
Armando Roggio, Sep 02

3 Great Reasons to Make Your Website Accessible

Armando looks at some very good reasons - financial, legal, and moral - to embrace accessibility in today's market.
Design & UX
Gian Wild, Aug 15

8 Steps to Creating Accessible Video

Studies report that and incredible 65% of search results are pages with video. Gian walks us through what you need to know to make accessible video content.
Stephan Max, Jul 21

An Introduction to WAI-ARIA

Stephan Max offers an introduction to using WAI-ARIA roles and properties in your HTML to make your pages and apps more accessible to assistive technology.
Design & UX
Shaumik Daityari, Jun 23

Scrolljacking and Accessibility: Are we Breaking the Web?

Scrolljacking has become something of a design trend of 2014, but is it breaking the web? Shaumik looks at the accessibility implications of scrolljacking.
Ankul Jain, Jun 20

A Comprehensive Look at HTML5's track Element

An introduction to the HTML5 track element, along with a description of the attributes available to use, as well as the potential SEO benefits.
Design & UX
Alex Walker, Jun 04

The Golden Age of Helvetica Ends - But Not at Apple.

Helvetica was the darling of the design world for 50 years but the tide has been turning. Ironically Apple have waited till now to make it the star of OS X.
Aurelio De Rosa, Jun 04

5 Things I've Learned About Accessibility

5 tips to help you improve the accessibility of your web pages.
Design & UX
Jessica Enders, May 14

The Definitive Guide to Form Label Positioning

Labels are central to good form design but there are many views on where to position them. Jessica Enders delivers the final word in form label positioning.
Design & UX
Léonie Watson, May 06

Tips for Creating Accessible SVG

In the past, 'accessible graphics' meant ALT tags. Leonie Watson shows how SVG allows us to make semantic, robust, screen-readable graphics.
Design & UX
Heydon Pickering, Apr 17

Learning to focus()

A look at how you can use JavaScript's focus() method to ensure UX for keyboard and screen reader users isn't affected when using in-page links and modals.
Shaumik Daityari, Apr 09

SEO-Friendly Infinite Scroll

Google has recently discussed a method for implementing infinite scroll in a search engine friendly manner. This post outlines this suggestion and more.
Amit Diwan, Mar 31

How Many of Your Users Need Accessible Websites?

Some stats from various sources drive home the importance of making websites accessible to blind, deaf, low vision, and other disabled people.
Shaumik Daityari, Mar 24

Easy Checks for Website Accessibility

Summarizing some suggestions from the WCAG, this article outlines some easy things to do to ensure a website is accessible to those with assistive technology.
Shaumik Daityari, Mar 12

Using Meta Tags in HTML: Some Basics and Best Practices

A look at how to use meta tags in HTML, with some best practices for making your content more accessible and SEO-friendly.