57 Varieties: Relishing Accessibility

Posted on October 25, 2010 by Jeremy Horn

In creating this series on Quick-UX and Accessibility, I studied over 50 products before carefully selecting the ones that made the articles’ final cut. While the products I chose were semi-random, at best, their resultant distribution…

…was most informative and encouraging regarding the strength of my rapid Accessibility assessment tool of choice, FAE:

Of the products discussed within the articles, I decided to plot some radar charts to see if there was any additional insight that could be gleaned via visual inspection. I hope you too find the patterns, visualized below, useful too.

Comprehensive Accessibility

FAE QUA value = 0.976

RoundHouse QUA value = 0.904

Nearly Comprehensive Accessibility

UseIt.com QUA value = 0.636

Eboy QUA value = 0.668

Moderate Accessibility

Borders QUA value = 0.428

Bloomberg QUA value = 0.596

NY1 QUA value = 0.580

Fair Accessibility

CNet QUA value = 0.376

Drudge Report QUA value = 0.240

NBC NY QUA value = 0.380

Poor Accessibility

GoodReads QUA value = 0.176

Barnes and Noble QUA value = 0.072

Furthermore, I am providing the access to the worksheet where I collected, collated, and crunched the raw numbers for all 57 products.

SPREADSHEET (Google Docs Version) (Excel Version with charts & highlights)

Quick-UX Accessibility is the measure of how many differently skilled/abled types of people (including individuals with disabilities) in varying locations (e.g. mobile web) can make use of a given product. With decreased Accessibility comes limited market opportunities, decreased Usability, and hindered inter-product Interoperability. As a result of the availability of a variety of very usable tools and due to the current state of web technology, addressing and improving Accessibility should no longer be an afterthought. And, through Quick-UX, addressing Accessibility, as well as the larger categories of Usability, Usefulness, and Desirability, can be done quite easily and quickly, providing…

a summarized view of a product’s overall User eXperience,
directional guidance for a product’s future development, and/or
metrics for comparison with other products.

Check out the Quick-UX Worksheet for the broader set of User Experience variables and heuristics.

QUICK-UX WORKSHEET

And until next week, when the exploration and discussion of products, user experience, modular innovation, startups, or perhaps something quite new, enjoy reviewing the products and ensuing discussions of this series, and see you then.

Comprehensive Accessibility	RoundHouse & FAE
Nearly Comprehensive Accessibility	UseIt & Eboy
Moderate Accessibility	Borders, Bloomberg & NY1
Fair Accessibility	CNET & Drudge Report & NBC NY
Poor Accessibility	GoodReads & Barnes and Noble

Enjoy & Subscribe now (click here) to make sure you don’t miss out on future series, interviews, events and product insights from The Product Guy!

Jeremy Horn
The Product Guy

Less than Grand GoodReads

Posted on October 18, 2010 by Jeremy Horn

Accessibility is the measure of how many differently skilled/abled types of people (including individuals with disabilities) in varying locations (e.g. mobile web) can make use of a given product. There exist many, very thorough, guidelines for determining the degree to which a product adheres to accepted accessibility standards. However, many can be very complex and time-consuming, also requiring the study of a good deal of the underlying code — much of which goes against the goals of the ‘quick’ part of Quick-UX.

Quick-UX

Quick-UX provides for the rapid, simple and quantifiable assessment of a product’s User Experience (UX). In answering the question of Usability, "Should I use it?" the sub-category of Accessibility represents one of the more complex components.

Today, we will look at 2 examples of products with Poor Accessibility, with a Quick-UX Accessibility value below 0.2.

Poor Accessibility

Accessibility standards exist to provide people with disabilities a means of using products, from reading and interacting with those on the web, as well as many very positive benefits beyond this group of individuals. For these reasons, for this article, I made the ironic selection of the following 2 products, whose missions are to get and keep people reading and interacting online.

Example: GoodReads

GoodReads is a very cool product that brings all types of book fans together, sharing recommendations, tracking read and wanted books, and doing other fun book club-y things.

GoodReads received the following results from FAE…

…resulting in an Accessibility variable value of 0.176 and Poor Accessibility.

Should Do

Beyond making sure that all images have ALT text specified, this product would do well to address its use and identification of “decorative images.”

Text Equivalents

Images with empty ALT text are assumed to either be informational, whereby the ALT attribute should have been populated with contextually relevant information, or was left empty – a decorative image. Such decorative images should typically be removed and implemented via CSS.
In this product, the NULL specification for the ALT text is generally accepted – informing assistive tools to skip the images with alt=””.

Example: Barnes and Noble

Barnes and Noble, famous brick-and-mortar bookstore chain, provides a web product that goes beyond just selling of books.

The tattered results delivered by FAE for this product were…

…resulting in an Accessibility variable value of 0.072 and Poor Accessibility.

Should Do

Throughout this series many examples of areas for improvement have been stated and explored for other products. And, for this product, these ‘should do’ items, for the most part, apply here, too. Most significant amongst these areas for improvement for Barnes and Noble are…

Text Equivalents

Always provide Alternate text for images.
Remove images with no Alternate text specified.
Make sure Area elements also have Alternate text specified.

HTML Standards

Include a valid DOCTYPE declaration at the top of each page to facilitate rendering and validation.
Make the pages’ character encoding clear. For example, by including…

Quick & Usable

Over the next few weeks I will be exploring the ins-and-outs of a variety of products, and walking through real-world examples of the Quick-UX evaluation of Accessibility…

Subscribe now (click here) to make sure you don’t miss any part of this series exploring the Usefulness and Credibility components of Quick-UX, the quick and easy method of generating quantifiable and comparable metrics representing the understanding of the overall User Experience of a product, as well as other insightful posts from The Product Guy.

Enjoy!

Jeremy Horn
The Product Guy

NBC NY Bringing Fair Accessibility

Posted on October 4, 2010 by Jeremy Horn

Quick-UX

Today, we will look at the last of 3 examples of products with Fair Accessibility, with a Quick-UX Accessibility value between 0.2 (inclusive) and 0.4.

Fair Accessibility

Example: NBC New York

NBC New York’s online news product presents a visually pleasing and minimalistic user experience.

FAE’s evaluation of this product resulted in …

…with an Accessibility variable value of 0.38 and Fair Accessibility.

Should Do

While demonstrating strength in HTML Standards and Styling that went beyond the basic visual, there still remains room for improvement in the areas of …

Navigation & Orientation

Beyond the importance of always specifying at least one <H1> element, it is equally important that every one of these elements contains text (as well as the subsequent <H#> elements).

Button, Submit, and Reset form elements must have either a value or a title attribute set.

Text Equivalents

While a common problem in many products with a heavy dose of images, especially news content with a constant stream of news and images, it remains no less important that every image should always be associated with a descriptive ALT text attribute.

“Decorative Images” used to such effects as positioning, typically images with either a height or width less than 8 pixels, should either be rethought and redesigned or resolved using CSS techniques.

Quick & Usable

Over the next few weeks I will be exploring the ins-and-outs of a variety of products, and walking through real-world examples of the Quick-UX evaluation of Accessibility…

Enjoy!

Jeremy Horn
The Product Guy

CNET & Drudge: On the Cutting Edge of Fair

Posted on September 21, 2010 by Jeremy Horn

Quick-UX

Today, we will look at the first 2 of 3 examples of products with Fair Accessibility, with a Quick-UX Accessibility value between 0.2 (inclusive) and 0.4.

Fair Accessibility

Example: CNET

CNET is a news technology product. In CNET’s own words…

FAE evaluated CNET, returning the following results…

…resulting in an Accessibility variable value of 0.376 and Fair Accessibility.

Should Do

It is good news that it is much less a technology problem than it is an education and implementation problem to achieve Comprehensive Accessibility. However, there is still a good deal of room for improvement for the product that “shows you the exciting possibilities of how technology can enhance and enrich your life.” Some of the problems not yet explored within other products of this series are…

Navigation & Orientation

Regardless of the page content, each page should have at least one <H1> element; and it should contain text.

Styling

Very common to products at all levels of Accessibility is the misuse of font styles. Separating the presentation from the functional layers is also important, not just to the development process, but also to Accessibility. The use of <font>, <center>, and other inline styling should be moved to the product’s CSS.

Example: Drudge Report

The Drudge Report is another news product. In this case, this product’s focus is in the aggregation of conservative news.

Drudge Report achieved the FAE results displayed below…

Should Do

To conform to the more traditional standards of Accessibility, this product should start by focusing on HTML Standards.

HTML Standards

DOCTYPE should be specified at the top of every page to facilitate validation and rendering of the content within.

The default language for the content of the webpage should be specified. In this example, English…

<HTML lang=”en-us” …. >

Quick & Usable

Over the next few weeks I will be exploring the ins-and-outs of a variety of products, and walking through real-world examples of the Quick-UX evaluation of Accessibility…

Enjoy!

Jeremy Horn
The Product Guy

Most Moderate of News: Bloomberg & NY1

Posted on August 22, 2010 by Jeremy Horn

Quick-UX

Today, we will look at the remaining 2 of the 3 examples of products with Moderate Accessibility: a Quick-UX Accessibility value between 0.4 (inclusive) and 0.6.

Moderate Accessibility

For this set of products, I chose ones that either encouraged or required reading as the primary function of the product. A category that begs for a clear attention to the Accessibility needs of their varied user bases.

Example: Bloomberg

Bloomberg’s web product is geared towards the presenting of top headlines and news within a variety of categories.

The Bloomberg product is the highest scoring product within the set of products of Moderate Accessibility…

… receiving an Accessibility variable value of 0.596.

Should Do

Text Equivalents

As is common to many products, here too, it is equally important to provide ALT text in association with the image it is describing.

Replace all “Decorative Images” containing empty ALT attributes (e.g. ALT=””) with CSS-based solutions. Images that exist to contribute content to the page should contain a descriptive, non-empty, ALT attribute.

Example: NY1

Like Bloomberg, the NY1 product exists to present and make news convenient for its visitors.

NY1 revealed the following results from FAE…

And, with Accessibility variable value of 0.58, also earned its place within the level of Moderate Accessibility.

Should Do

Styling

As is common to many products, here too, it is equally important to provide ALT text in association with the image it is describing.

NY1 would be well served to use neither the <b> nor <i> elements. They are an indication of font-type and provide no contextual meaning. In these cases, the use of stylized header tags (<H#>) or <strong> or <em> would be better suited.

Separating the presentation from the functional layers is also important, not just to the development process, but also to Accessibility. The use of <font>, <center>, and other inline styling, like…

Quick & Usable

Over the next few weeks I will continue exploring the ins-and-outs of a variety of products, and walking through real-world examples of the Quick-UX evaluation of Accessibility…

Enjoy!

Jeremy Horn
The Product Guy

Bordering on Mediocrity

Posted on August 15, 2010 by Jeremy Horn

Quick-UX

Today, we will look at the first of 3 examples of products with Moderate Accessibility – a Quick-UX Accessibility value between 0.4 (inclusive) and 0.6.

Moderate Accessibility

For this set of products, I chose ones that either encouraged or required reading as the primary function of the product. This is a category that begs for a clear attention to the Accessibility needs of their varied user bases.

Example: Borders

Here we look at Borders’ online product, a marketplace for the selling of books, music, movies, etc.

Borders’ received the following results from FAE…

…resulting in an Accessibility variable value of 0.428, Moderate Accessibility.

Should Do

Navigation & Orientation

Web pages should have only 1 title element, unlike that found, for example on some of the Borders’ pages.

Make sure that when using <H#> tags on a page, there is always at least one <H1>. Since the <H1> tag is generally the page title, it is strongly discouraged to exceed the use of more than two (and penalized by FAE).

Insert text content, not merely an image with an ALT attribute, into the page headings like this one…

<h2><img src="/wcsstore/ConsumerDirectStorefrontAssetStore/images/content/logo_print.gif" alt="Borders logo" border="0" /></h2>

List elements should be clearly incorporated into that of the overall page hierarchy for clarity and navigation. Each list element that is part of the navigation region of the page should be preceded with an <H#> element.

Each area element should have a redundant text link with matching href.

When it comes to images, it is always important to provide the image ALT or TITLE text – especially for those who cannot see it/them.

Quick & Usable

Over the next few weeks I will continue exploring the ins-and-outs of a variety of products, and walking through real-world examples of the Quick-UX evaluation of Accessibility…

Enjoy!

Jeremy Horn
The Product Guy

Nearly, Like an Eboy

Posted on August 9, 2010 by Jeremy Horn

Quick-UX

Today, we will look at the second of 2 examples of products with Nearly Comprehensive Accessibility, with a Quick-UX Accessibility value between 0.6 (inclusive) and 0.8.

Nearly Comprehensive Accessibility

Example: Eboy

The Eboy product is a presentation of design firm, Eboy Arts. Often, when it comes to web design, everything beyond the visual and interact is, well, beyond.

Here Eboy bucks the trend and provides impressive results, with an Accessibility variable value of 0.668, Nearly Comprehensive Accessibility.

Should Do

While the UseIt product’s areas of improvement lay in the realms of Navigation & Orientation and HTML Standards, Eboy’s efforts are best spent in their implementation of Scripting…

The onfocus event should be used in conjunction with the onmouseover event.
When using the onmouseout event, the onblur event should also be defined.
The product’s user is best served by using CSS on elements that can be interacted with via keyboard, instead of attaching onmouseover and onmouseout events.

Quick & Usable

Over the next few weeks I will continue exploring the ins-and-outs of a variety of products, and walking through real-world examples of the Quick-UX evaluation of Accessibility…

Enjoy!

Jeremy Horn
The Product Guy

Accessibly UseIt

Posted on August 2, 2010 by Jeremy Horn

uAccessibility is the measure of how many differently skilled/abled types of people (including individuals with disabilities) in varying locations (e.g. mobile web) can make use of a given product. There exist many, very thorough, guidelines for determining the degree to which a product adheres to accepted accessibility standards. However, many can be very complex and time-consuming, also requiring the study of a good deal of the underlying code — much of which goes against the goals of the ‘quick’ part of Quick-UX.

Quick-UX

Today, we will look at the first of 2 examples of products with Nearly Comprehensive Accessibility, with a Quick-UX Accessibility value between 0.6 (inclusive) and 0.8.

Nearly Comprehensive Accessibility

Example: UseIt.com

Another product I could not resist evaluating is that of the Usability guru himself, Jakob Nielsen. UseIt is a comprehensive source for all aspects of Usability, across all media. Let’s see just how comprehensively it is applied.

UseIt received the following results from FAE…

…producing an Accessibility variable value of 0.636, Nearly Comprehensive Accessibility.

Should Do

Navigation & Orientation

When using input elements…

type=text, password, checkbox, radio, file, select, textarea

HTML Standards

The doctype declaration should be the very first thing in an HTML document. And when it is used, it is important to remember that DOCTYPE is case-sensitive…

Quick & Usable

Over the next few weeks I will continue exploring the ins-and-outs of a variety of products, and walking through real-world examples of the Quick-UX evaluation of Accessibility…

Enjoy!

Jeremy Horn
The Product Guy

Well-Rounded Accessibility

Posted on July 26, 2010 by Jeremy Horn

Quick-UX

Today, we will look at 2 examples of products with Comprehensive Accessibility, with Quick-UX Accessibility values above 0.8.

Comprehensive Accessibility

Example: RoundHouse

RoundHouse is a product focused on providing system administration support to other businesses. And it’s clear that their support goes beyond the server…

RoundHouse received the following results from FAE…

…resulting in an Accessibility variable value of 0.904, Comprehensive Accessibility.

Should Do

The two products highlighted within this article for Comprehensive Accessibility have both done a great job with their Accessibility implementations. But, even within the RoundHouse product there is room for improvement.

Navigation & Orientation

When using <H#> tags on a page, they should go in-order, and not skip heading delineations for visually stylistic convenience.
This was found to occur on numerous pages. In each of these cases, the content of the page goes from H1 directly to a series of H3’s – when a styled H2 would have been better, and clearer.
Be sure to always indicate the default language for the content of the webpage. For example,

<HTML lang=”en-us” …. >

Text Equivalents

Always specify informative ALT text for your images.

Styling

The <b> element is an indication of font-type, as opposed contextual meaning. Use <H#> tags or <strong> or <em> to better convey the underlying meaning of the content.

Example: Functional Accessibility Evaluator (FAE)

It’s always fun to point out how the tool, itself responsible for the quick evaluation of all the products within the Quick-UX discussion of Accessibility, should be improved to also achieve a higher value.

…resulting in an Accessibility variable value of 0.976, Comprehensive Accessibility.

Should Do

The portion of the product that could be improved, while minor, as it achieved the highest score, that would have the greatest impact upon the score’s improvement, would be to focus on HTML Standards.

HTML Standards

Specify every page’s content type. While typically implemented, there is a noticeable occasional absence of…

<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

Quick & Usable

Over the next few weeks I will be exploring the ins-and-outs of a variety of products, and walking through real-world examples of the Quick-UX evaluation of Accessibility…

Enjoy!

Jeremy Horn
The Product Guy

Evaluating Accessibility: The Quick-UX Way

Posted on July 12, 2010 by Jeremy Horn

Quick-UX

In Parts

Greater Accessibility provides greater benefits to people both with and without disabilities, from equal opportunity to facilitating perception and navigation.

There are many factors that go into achieving Comprehensive Flexibility.

As there are many factors, there are also many techniques and frameworks for evaluating them:

Quantified

I use a robust (and free) proxy for quickly assessing a product’s Accessibility through the use of the Functional Accessibility Evaluator (FAE) link. The FAE’s resultant scores are averages which, in turn, are normalized to a range from zero to one to represent the value for Quick-UX‘s Accessibility variable.

For a long time I used a simple normalizing of a product’s Passes, as determined by FAE, to a 0 – 1.0 scale. Over time websites have been improving due to the increased usage of templated languages, development libraries, and the improving skillsets of web developers. As a result, I found the need to shift my scale to more readily capture the increased quality and more clearly highlight the differences between the calculated Accessibility values.

The new equation I have been using to raise this bar on website Accessibility follows:

Take the average of all 5 categories of FAE determined Passes. The result is X, the normalized Pass score, and falls between 0.0 and 1.0.
Shift and expand the scale. The result is Y.
- Y = 2X -1
Finally, the Quick-UX Accessibility value, QUA, is bounded:
- QUA = Y for Y ≥ 0
- QUA = 0 for Y < 0

See the Quick-UX Worksheet for easy, automatic calculating of the QUA (and other Quick-UX variables).

Levels

Once quantified, a product falls into 1 of 5 levels that we will be exploring and discussing in the remainder of this series on Quick-UX Accessibility. They are:

	Comprehensive Accessibility	QUA > 0.8
	Nearly Comprehensive Accessibility	QUA > 0.6
	Moderate Accessibility	QUA > 0.4
	Fair Accessibility	QUA > 0.2
	Poor Accessibility	QUA ≤ 0.2

Scope

For this discussion of Quick-UX Accessibility, I evaluated over 50 products and will be exploring a select subset in greater detail in the coming articles. The distribution of the evaluated products for this series can be seen in the following chart.

Quick & Usable

Over the next few weeks I will be exploring the ins-and-outs of a variety of products, and walking through real-world examples of the Quick-UX evaluation of Accessibility…

Enjoy!

Jeremy Horn
The Product Guy

SPREADSHEET (Google Docs Version) (Excel Version with charts & highlights)

QUICK-UX WORKSHEET

Share this:

Like this:

Quick-UX

Poor Accessibility

Example: GoodReads

Should Do

Example: Barnes and Noble

Should Do

Quick & Usable

Share this:

Like this:

Quick-UX

Fair Accessibility

Example: NBC New York

Should Do

Quick & Usable

Share this:

Like this:

Quick-UX

Fair Accessibility

Example: CNET

Should Do

Example: Drudge Report

Should Do

Quick & Usable

Share this:

Like this:

Quick-UX

Moderate Accessibility

Example: Bloomberg

Should Do

Example: NY1

Should Do

Quick & Usable

Share this:

Like this:

Quick-UX

Moderate Accessibility

Example: Borders

Should Do

Quick & Usable

Share this:

Like this:

Quick-UX

Nearly Comprehensive Accessibility

Example: Eboy

Should Do

Quick & Usable

Share this:

Like this:

Quick-UX

Nearly Comprehensive Accessibility

Example: UseIt.com

Should Do

Quick & Usable

Share this:

Like this:

Quick-UX

Comprehensive Accessibility

Example: RoundHouse

Should Do

Example: Functional Accessibility Evaluator (FAE)

Should Do

Quick & Usable

Share this:

Like this:

Quick-UX

In Parts

Quantified

Levels

Scope

Quick & Usable

Share this:

Like this: