NBC NY Bringing Fair Accessibility

clip_image001Accessibility 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 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.

00_nbcny_homepage

FAE’s evaluation of this product resulted in …

01_nbcny_results

…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

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]

Quick-UX Accessibility Summary, Charts & Data

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

CNET & Drudge: On the Cutting Edge of Fair

clip_image001Accessibility 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 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…

“CNET shows you the exciting possibilities of how technology can enhance and enrich your life.”

00_cnet_homepage

FAE evaluated CNET, returning the following results…

01_cnet_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.

00_drudge_homepage

Drudge Report achieved the FAE results displayed below…

01_drudge_results

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.

02_drudge_html_standards

  • 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

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]

Quick-UX Accessibility Summary, Charts & Data

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

Most Moderate of News: Bloomberg & NY1

clip_image001Accessibility 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 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.

00_bloomberg_homepage

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

01_bloomberg_results

… 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.

00_ny1_homepage

NY1 revealed the following results from FAE…

01_ny1_results

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…

02_ny1_inline_style

… should be moved to the product’s CSS.

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

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]

Quick-UX Accessibility Summary, Charts & Data

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

Bordering on Mediocrity

clip_image001Accessibility 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 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.

00_borders_homepage

Borders’ received the following results from FAE…

01_borders_results

…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.

02_borders_title

  • 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.

03_borders_list

  • 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

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]

Quick-UX Accessibility Summary, Charts & Data

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