Accessibility Inspection

Sample
http://www.sample.com
 Accessibility Inspection: sample.com 2

Nathan Olmstead

Table of Contents

Table of Contents.................................................................................................................2
Executive Summary.............................................................................................................3
Terminology & Conventions Used......................................................................................4
Priority Levels......................................................................................................................5
Accessibility Guidelines .....................................................................................................6
Simplicity and Clarity .....................................................................................................6
Supporting Visual and Non-Visual Navigation...............................................................8
Proper Text Markup and Phrasing ..................................................................................9
Proper Structural Markup .............................................................................................10
Providing Content and Context......................................................................................11
Device Independence.....................................................................................................12
Graceful Degradation.....................................................................................................13
Allow User Control........................................................................................................14
Respecting the User.......................................................................................................15
 Accessibility Inspection: sample.com 3

Executive Summary
An accessibility inspection was conducted on the sample.com website as a
whole. The inspection focused on identifying any and all issues relating to site
accessibility as well as noting the strengths and current practices the site should
continue.

The most significant accessibility issues identified in this inspection include:

• Overall lack of whitespace. There is a vast amount of imagery contained

within this website. A simple “more info” link could create some necessary
whitespace instead of trying to force every bit of information into one page.
Giving the user visual breaks in the page helps to organize and prioritize
content.

• Consistency in link appearance. In various sections of the Xoxide.com

website, links appear as if they were randomly styled. It is important to
stay consistent with page links as to not confuse the users. Something as
simple as a coloration difference could be the difference between a user
clicking a link or not.

• No “Skip to Content” links. Users that require screen readers to obtain

information from the web will have to listen to every navigation option
before they are able to hear anything contained in the page content. This
user frustration can easily be avoided by simply including a “Skip to
Content” link at the top of every page.

• Not utilizing the “alt” attribute for content images. When this attribute
is omitted, users with screen readers have no way to obtain the
information the image is conveying. This is also true when a user’s
browser does not load an image correctly.

• Very large page size. The extensive use of imagery on this site has made
for a much larger than average page size. This is a major issue for any
users that do not have a fast internet connection. Most users have a very
short tolerance for slow page load time. All images need to be optimized
for the web, allowing pages to have the smallest size possible.

• Rollover navigation menus with no timer. The instant a user moves

their mouse off of a rollover menu, it disappears. There should be a timer
implemented on these menus via JavaScript to increase ease of use.

While these issues are among the most important accessibility concerns for the
sample.com website, a number of additional issues are further detailed in the
inspection with recommended solutions.
 Accessibility Inspection: sample.com 4

Terminology & Conventions Used

Different terms are often used when referring to the same part of the browser
window or web page. To facilitate understanding of this analysis, one term was
used consistently for each browser/web page element. The terms are:

Color Contrast Ratio: Is the color of the text or foreground over the color of the
background. Insufficient ratios are difficult for users read with good and poor
visibility.

CSS: Cascading Style Sheets. Style sheets when attached to documents

describe how the document is to be displayed or printed.

Global navigation: Links/buttons available from every page, leading to major

sections of the website and/or significant pages.

Inverted L: A common website layout where the Global and Local navigation
form the shape of an inverted letter “L”.

JavaScript: A cross platform programming language that is intimately tied to the

World Wide Web.

Link label: The label in this case is the word or words that are linked. These
words can be in graphical form (such as the graphical buttons at the top of the
jimmyjohns.com interface) or HTML text that is linked.

Local navigation: Links/buttons for moving between pages within a section of

the website.

XHTML: Stands for ‘Extensible HyperText Markup Language’ and is a class of

specifications designed to move HTML to conform to XML formatting.
 Accessibility Inspection: sample.com 5

Priority Levels
The issues identified in this evaluation are grouped into three levels of priority:

High priority: These issues are likely to impact a large number of users
significantly. They should be resolved as quickly as resources allow.

Medium priority: Issues at this priority level are also likely to affect a large
number of users but generally are less disruptive to the user experience, relative
to the high priority issues. If resources are available to address these issues,
they should be addressed.

Low priority: Low priority issues typically impact a small subset of the overall
user base, although they may impact a larger group. Regardless of the number
of users affected, these issues carry only a minor negative impact. Low priority
issues are generally easy to resolve. There is less time pressure to fix low priority
issues, compared to medium priority issues and especially high priority issues.
 Accessibility Inspection: sample.com 6

Accessibility Guidelines

Simplicity and Clarity

The layout of the website should be easy to understand and follow without
extraneous or distracting elements. Important elements of the website should be
clearly labeled as well as the main focus.

Practices to Continue

• The “Inverted L” layout benefits access to navigation as well as

visually separating content. The inverted L is the most familiar layout on
the web making the appearance of the site easy for users to identify with.

• Concise product imagery. The images are large enough for the majority
of visual users to see and the images are within close proximity of the
product title and description increasing association between the two.

Suggested Changes

High Priority:

• Change color to dark blue on page headings. The color contrast ratio
for the orange font over the white background is 3.17: 1. The minimum
ratio for users with poor visibility is 4.5: 1. Source: Juicy Studios
(http://juicystudio.com/services/luminositycontrastratio.php).

• The lack of white space could be very distracting for users with
mental disabilities such as attention deficit disorder. Adding another
layer of navigation is sometimes necessary to keep users focused and not
overwhelmed by the amount of information available on one page.

Medium Priority:

• Increase the size of headings for content and current pages to

benefit visually impaired users. The current headings are slightly larger
than the content sections they precede, however still not large enough that
all users will easily be able to read.
 Accessibility Inspection: sample.com 7

• Decrease the size or relocate the banner advertisements. For users

with lower resolutions, the banner ads on the home page can easily be
confused as being the content of the site instead of just advertisements.
As currently displayed, the banner advertisements appear to be the top
level of information hierarchy.

• Make all links consistent in color and styling. On the site map majority
of the links are blue and underlined while others are orange and
underlined. This confuses the user in thinking that there is something
different about links based on their color. In this case, all links are simply
leading users to product pages or categories within the site with no
consistency in link coloring.

• The orange links over the white background have poor contrast that
would be difficult to read for visually impaired users. Not only will
visually impaired users be affected, but also users viewing the page with
older or low contrast monitors.
 Accessibility Inspection: sample.com 8

Supporting Visual and Non-Visual Navigation

Navigation should be clear and efficient for users with visual disabilities as well
as for users with out visual disabilities. The design and opportunistic within page
links are essential for accessibility.

Practices to Continue

• Black content over white background. This color combination provides

the highest color contrast ratio at 21: 1. Having such a high contrast ratio
ensures the greatest possibility that all users will easily be able to read
page content.

Suggested Changes

High Priority:

• Deactivate current page link. Having an active current page link can
cause users to become frustrated while clicking the link expecting to see
new content appear, but not realizing what page they're currently on.

• Visually separate active page link from other navigation. The most
simple approach would be to change the color of the current page link
thus eliminating any confusion

• Provide a "skip to main content" for blind users to skip past the
navigation and jump directly to the content. Screen readers will read
through all of the navigation for every new page that is displayed. This can
be frustrating for users that have no link to skip ahead to the page content,
which is what they ultimately are looking for.

Low Priority:

• Visually separate visited links. Letting users know what pages they
have already visited on the site is beneficial especially on a website of this
volume. Using the CSS pseudo selector a:visited is preferred approach to
accomplish this.
 Accessibility Inspection: sample.com 9

Proper Text Markup and Phrasing

A lot of what makes content accessible is how things are worded as well the
XHTML markup applied to the structure of the content. Descriptive links, short
sentences, and concise wording improve legibility and meaning.

Practices to Continue

• Providing <title> tags for graphic text. This is important for users that
either cannot see the image because of disabilities and for users that the
image just simply didn’t load for. Without the title information, these users
will have no idea what information the image is trying to convey.

Suggested Changes

High Priority:

• Implement the use of the "alt" attribute for images. If an image does
not load, the user will not have any means of determining what information
the image was supposed to convey. The "alt" attribute is especially
necessary on navigation links utilizing imagery.

Medium Priority:

• Provide titles for acronyms. Without a proper title included for

acronyms, there is a very good chance the user will have no idea what the
acronym means. This is especially important when the understanding of
this information is essential to the page content.
 Accessibility Inspection: sample.com 10

Proper Structural Markup

Logical document structure assists adaptive technology in interpreting a

document and conveying that to the user. Screen readers for blind users strongly
benefit from proper document and content markup. Important information should
always be properly marked up for meaningful access to all users.

Practices to Continue

• Use of a proper DOCTYPE declaration and structure. Without

declaring a DOCTYPE, most browsers will display the page in quirks
mode. A browser in quirks mode will generally display a page much
differently than expected.

• Use of appropriate titles and metadata for each page. Every page
should contain useful information unique to that page. This not only helps
users but also can help with search engine optimization.

Suggested Changes

High Priority:

• Proper markup when using tables. Tabular data used for product
overviews should implement the “scope” attribute as well as table
headings and table body. Without using “scope” and table headings, users
with adaptive technology may easily get lost when searching through
tabular data.

• Label tags <label> for form elements should be implemented for

users with poor motor skills as well as blind users. Providing a label
tag increases the clickable areas of form as well as associate the labeled
term with the input field.

• Use appropriate markup when necessary. Content on pages should be

marked up with <p> tags instead of <div> tags for semantics and screen
readers. Not only is this change appropriate for semantic markup, but also
may help optimized the site for search engines.
 Accessibility Inspection: sample.com 11

Providing Content and Context

Since many disabled users experience content in a non-visual way, it is important

that they have a proper context for interpreting the information as well as access
to the content. Summaries, captions, and transcripts for certain media and
information provide necessary access to all information pertaining to the website.

Practices to Continue

• Providing a title for images with graphical text. Most screen readers
can still effectively read content displayed with an image if there is a title
included.

• Maintaining consistency among products being displayed. Since all

of the products Xoxide.com sells are displayed consistently, a user can
intuitively distinguish between products for sale and other elements on the
site.

Suggested Changes

High Priority:

• All tables should include a summary explaining the tabular data

contained. This is extremely beneficial for blind users who can quickly
decide if they want gain access to the tabular data or proceed to other
areas of the website.

Medium Priority:

• Decrease the width of long paragraphs to 500px maximum.

Sentences that stretch the entire width of the website are difficult to read
for all visual users.
 Accessibility Inspection: sample.com 12

Device Independence

Requiring users to have a given input device such as a mouse ignores the fact
that not all users will be able to use or even possess all input devices.

Practices to Continue

• Navigation menus and links are all accessible by both mouse and
tabbing with the keyboard. Not all users have the option or are even
capable of using both a mouse and a keyboard.

Suggested Changes

High Priority:

• No use of the attribute "tab index". This is important so that users can
access links quickly and in an organized manner. When this attribute is
neglected the user is forced to tab through every link in order of source
code, which is usually not the desired order.

• Users without a mouse are forced to tab through the extensive list of
navigation before they can reach page content. A simple skip to
content link could solve this issue. It can be especially frustrating for users
attempting to complete the checkout process.
 Accessibility Inspection: sample.com 13

Graceful Degradation

The user experience must be maintained even when certain technologies are not
used or upgraded on every users browsing device. Adaptive technologies should
still function properly.

Practices to Continue

• When JavaScript is turned off the CSS drop down menus maintain
usability of the navigation. Many users either by knowingly or
unknowingly have JavaScript disabled in their browsers.

• CSS is being utilized to hide rotating menus, but when CSS is

disabled the menus are all visible and accessible. It’s important to
keep navigation accessible no matter what each user’s specific
circumstances are. Not all users have CSS enabled, either knowingly or
not. Also, some users have implemented their own custom CSS.

Suggested Changes

High Priority:

• The rotating banner ads utilize the CSS property "display:none;".

This technique works great for a visual effect, but screen readers will
completely ignore content with this property applied to it. The more
appropriate CSS property would be to absolutely position the content off
the top of the browser view port. This gives the desired visual effect and
also allows for screen readers to read the hidden content.

• When images are disabled Global Navigation disappears. Some users

browse the web with images disabled to speed things up. Keeping the
global navigation accessible to all users at all times is especially important
to e-commerce sites. Since the Xoxide.com site pages tend to have a very
large page load size, this could easily encourage users to disable images
in order to receive site content faster.
 Accessibility Inspection: sample.com 14

Allow User Control

Control over the interface is essential for disabled users; any aspects out of their
control could be detrimental to their experience.

Practices to Continue

• Use of navigation controls for advertising banners. Both of the

JavaScript advertising banners on the homepage allow for users to
navigate forward and backward through the pages of information they are
displaying.

Suggested Changes

High Priority:

• When text size is increased some content overlaps or completely

disappears. Browsers such as IE 6 and older versions of Safari increase
text size instead of zooming in on the screen. Visually impaired users with
these browsers would be negatively impacted by this affect.

• Provide a pause or stop button for JavaScript animations the

homepage. Although the animations are slow enough to avoid causing
seizures, users with attention deficit problems will have a hard time
focusing on site content with continual image flashing.

Medium Priority:

• Provide a custom 404 error page with a link back to the homepage.
Let the user know they are trying to access a page that isn’t on your
website and guide them back. Default error pages are confusing to users
with cognitive issues.

Low Priority:

• Provide a custom error pages with a link back to the homepage.

Create custom 400, 401, 403, and 500 error pages for any mishaps they
may encounter on the website.
 Accessibility Inspection: sample.com 15

Respecting the User

Many practices convey to users a sense of disrespect; those users will the
website and not return. Color contrast and timed processes are the most
common ways to disrespect users with disabilities.

Practices to Continue

• Use of “Bread-Crumbs”. Although the site architecture is centered more

on breadth than depth, the use of "bread-crumbs" is still useful by visually
giving the user a sense of where they are in the site.

• Use of transparency on CSS sub-navigation. In some cases, content

can be blocked by sub-navigation for users with low resolutions or large
text size settings. Using a slight transparency allows for users to not
become too overwhelmed by large sub-navigation.

• Expanded images are still viewable with JavaScript disabled. Some

users may not know how to or be able to enable JavaScript in their
browsers. Having the image viewer script reference images rather than
generating images allows for greater accessibility to all users.

Suggested Changes

High Priority:

• The total page load size for the current index page is 1504764 bytes.
An index page of this size would take a user with a 56k connection
approximately 325 seconds for a complete page load. Largely contributing
to the page size is the 104 images and 18 scripts that load. This far
exceeds the average attention span of web users, and more specifically,
even exceeds the time that users with slow connections can tolerate.
Optimizing images is a must for e-commerce sites since slow load times
can be the difference between a sale or not.

• Some sub-navigation menus drop down past the bottom of the

browser window. Even fully capable users get very frustrated by not
being able to access all of the options available on these menus. These
menus should be further broken down into categories or implemented via
JavaScript to allow for sensitivity of the size of the users browser window.
 Accessibility Inspection: sample.com 16

Medium Priority:

• The CSS drop down menus for local navigation is twitchy and
unforgiving for users with poor motor skills. A JavaScript timer should
be implemented thus delaying the menus closing time when “moused off”
to better support this group of users.

• Replace image map navigation with CSS rollovers. By implementing

CSS sprite rollovers the page weight will decrease dramatically. HTML
text will also appear if images are disabled. Fewer HTTP requests will also
speed up the site on all connections.

• Expanded image view does not show current image displayed. Since
the image viewer is created via JavaScript, a simple highlight on current
item could help prevent any confusion and random clicking through
thumbnails a user might incur.