Accessibility Tool Responses

Running head: ACCESSIBILITY TOOLS
Brandy Milson
Assignment 10 Accessibility Tools
University of Houston- Clear Lake
Dr. Rice
November 10, 2010

2
Abstract
Section 508 of the Workforce Rehabilitation Act of 1973 signed into law by President Clinton in
1998 calls for electronic and information technology that is either developed by or purchased by
governmental entities to be accessible by people with disabilities (visual, auditory, mobility,
cognitive). This review covers tools that analyze website accessibility specifically by looking at
what elements on websites are currently preventing individuals covered by law from being able
to make full use of web resources. This review will provide only a basic overview of these
selected tools.First, we will examine traditional tools such as the Cynthia Says Portal, GrayBit,
and AccessColors. Additionally, we examine three additional alternative accessibility tools
called TAW 3 Java web application, aDesigner, andFunctional Accessibility Evaluator 1.0.5
(FAE).
Keywords: Accessibility. Multimedia, visual impairment, auditory impairment, Cynthia Says
Portal, Graybit, Access Key, TAW 3 Java web application, aDesigner, Functional Accessibility
Evaluator 1.0.5 (FAE).

3
Table of Contents
I. Traditional Acessibility Tools
a. HiSoftware® Cynthia Says™ Portal
b. Graybit
c. Access Key
II. Additional Free Online Accessibility Tools
a. TAW3 Java Webstart
b. aDesigner
c. Functional Accessibility Evaluator (FAE)
III. Conclusion
IV. Appendixes
a. Appendix A:Online Tools
b. Appendix B: HiSoftware® Cynthia Says™ - Web Content Accessibility
Report
c. Appendix C AccessColor Report
d. Appendix D: TAW3 Java web application analysis
e. Appendix E: aDesigner Screenshots

4
f. Appendix F: FAE
Section 508 of the Workforce Rehabilitation Act of 1973 signed into law by President Clinton in
1998 calls for electronic and information technology that is either developed by or purchased by
the governmental entities to be accessible by people with disabilities (visual, auditory, mobility,
and cognitive). This review covers tools that analyze website accessibility specifically by
looking at what elements on websites are currently preventing individuals covered by law from
being able to make full use of web resources. This review will provide only a basic overview of
these selected tools. First, we will examine traditional tools such as the Cynthia Says Portal,
Graybit, and Access Key. Additional we examine three additional alternative accessibility tools
called TAW 3 Java web application, aDesigner, and Functional Accessibility Evaluator 1.0.5
(FAE).
The website that I chose to use for my evaluations is educatorstechconnect.blogspot.com or my
blog created using Blogger from Google. This site is primarily generated using a WYSIWYG
type interface created by predesigned templates, layouts, and widgets. Very little thought is
placed into coding for accessibility for students.
Often designers are not resistant to increase site accessibility but they not be aware of the
strategies for doing so. Many modifications are simple and require little time once they are
learned. There are numerous ways that webpages can be modified to meet user needs. Visual
impairments may require an audio file which can introduce topics of interest and explain key
resources. Alternate text can be used describing images so screen readers could explain images
to viewers that cannot see them due to blindness, limited visibility, and color blindness.Another
effective strategy is creating captions for all graphics that accurately describes what is taking
place. It also is necessary to make sure all forms are accessible and labels are applied, ensuring
5
link text makes sense. Finally, headings for data tables are beneficial and take little time to
create.
Multimedia content on websites present a new challenge for those with auditory impairments.
Multimedia resources should be captioned for the deaf when at all possible. Providing captions
for a verbal animation or verbal stimulus will also assist users and prevent frustration. A good
strategy is to always attempt to pair text with auditory and video with text.
Users which face mobility challenges are struggling to maintain independence while using the
computer despite physical limitations. Educatorstechconnect.blogspot.com can be changed to a
site where no scrolling was required by limiting per page entries to three per day. Designing
pages so that they can be accessed using a mouth stick and other devices which enabled limited
mobility individuals the ability to navigate the web with minimal assistance.
The final category of accessibility that it is important to address is users who face cognitive
abilities. These users deal with lots of distracting site features such as flashing text, animations,
or superfluous graphics. One strategy that will really help these users is to decrease distracting
widgets in the side bar. Pay close attention to use of white space and layout as highly structured
pages with limited chunks of information are best for users who face cognitive challenges. Also,
it is a good idea to avoid sharp contrast of bright colors when designing for these users.
The primary responsibility of web accessibility tools is to flag anything in violation of an
accessibility standard as designated mainly by Section 508 of the U.S. Rehabilitation Act or
the W3C's Web Content Accessibility Guidelines. Each of the tools have their own format,
categories, and standards associated. This review will offer a mixture of online and offline
traditional and non-traditional tools which will help designers improve accessibility for their
sites.
Traditional Accessibility Tools

6
Cynthia Says Portal
The Cynthia Says portal by HighSoftware provides a report which highlights text-based errors
listed by line number. It lists both the specific guideline of 508 Section 1194.22 being used to
scan the page as well as instances of this type of accessibility error. It further breaks the analysis
into rules which make revision easier. The report Cynthia says generates is very detailed and
descriptive which helps advanced designers easily identify and correct errors.
Findings
Educatorstechconnect.blogspot.com has a lot of rule violations but many of them are repetitive.
The web page was designed using Blogger from Google and many of the errors are on features
that were auto-generated rather than hand coded. Many of the images on the side are missing an
alternative description which allows visually challenges users to understand what the graphics
might look like otherwise they are simply placeholders with empty meaning.
Cynthia Says Summary Analysis for

educatorstechconnect.blogspot.com
Standard Rule Possible Solution to
increase accessibility
A. 508 Standards, Section Create alternative
Rule: 1.1.1 - All IMG elements are
1194.22, (a) A text equivalent required to contain either the alt or descriptions for the
for every non-text element the longdesc attribute. images found on each of
shall be provided (e.g., via
"alt", "longdesc", or in element ○ Warning - IMG Element these lines
content). found at Line:
825,936,941,990,995, 1044,
1049, 1098, 1103, 1149,
1154, 1200, 1205, 1254,
1259, 1306, 1331, 1356,
1374, 1390, 1404, 1600, and
1662.
○ Column: 1 contains the 'alt'
attribute with an empty
value. Please verify that this
image is only used for
spacing or design and has no
meaning.
Rule: 1.1.2 - All INPUT elements are Create input elements or

required to contain the alt attribute or labels for the alt
7
use a LABEL.No INPUT Elements attributes

found within document
Rule: 1.1.3 - All OBJECT elements are Create object elements

required to contain element
content.No invalid OBJECT elements
found in document body.
Rule: 1.1.4 - All APPLET elements are Create Applets if

required to contain both element necessary for
content and the alt attribute.No functionality
APPLET elements found in document
body.
Rule: 1.1.6 - All IFRAME elements are Create element content

required to contain element content. for all Iframe elements
○ Failure - IFRAME Element at
Line: 675, Column: 1







Rule: 1.1.7 - All Anchor elements Create Map with

found within MAP elements are elements and links.
required to contain the alt attribute.
○ No MAP elements found in
document body.
Rule: 1.1.8 - All AREA elements are Check for area elements
required to contain the alt attribute. and write alternative
No AREA elements found in document descriptions, if any exist.
body.
Rule: 1.1.9 - When EMBED Elements Place the NOEMBED

are used, the NOEMBED element is element in the proper
required in the document. place
Failure - EMBED Element(s) are
found in document and the NOEMBED
8
element is not.
M. 508 Standards, Section Review object elements

Rule: 6.3.5 - All OBJECT elements are
1194.22, (m) When a web required to contain element content. if they are added and
page requires that an applet, No invalid OBJECT elements found in make sure they contain
plug-in or other application be document body.
present on the client system
content and alt
to interpret page content, the descriptions
page must provide a link to a Rule: 6.3.6 - All APPLET elements are Review APPLET's if they
plug-in or applet that complies required to contain both element are added to the page
with §1194.21(a) through (l). content and the alt attribute. No checking for content and
APPLET elements found in document
alt attribute.
body
Rule: 6.3.7 - When EMBED Elements Place the NOEMBED

are used, the NOEMBED element is element in the proper
required in the document. place
Failure - EMBED Element(s) are
found in document and the NOEMBED
element is not.
Rule: 6.3.8 - All pages that have links Review links for plugins
to files that require a special reader or
and compatibility with
plug-in are required to contain the
specified text indicating a link to the
tools when possible.
reader or plug-in.
Alternative Text Quality Report

Standard Rule Possible Solution
2.1 Validate that Create alternative text
The alternative text failed the
Alternative Text is greater for each of the images
minimum/maximum allowed
than 7 and less than 81
characters check on website.
characters in length Short
alternative text may not be ○ Note - img Element at Line:
valid, warn the report user if 825, 936,941, 990,
alternative text was found that 995,1044, 1049, 1098,1103,
is less than seven characters 1149, 1200, 1205, 1254,
in length. Additionally 1259, 1306, 1331, 1356,
alternative text should not be 1374, 1390, 1404, 1600,
1662.
larger than 80 characters, if
the alt text is greater the long ○ Column: 1 - The alt attribute
description attribute should be is 0 characters.
used. This check validates that
the alt attribute does not
exceed 80 characters in
length.
9
Strengths
Cynthia Says provides a report which allows designersto quickly see what areas of the site
passed the standards and guidelines set forth by the ADA and looks for WCAG conformity.
This is a web portal service which can be accessed from anywhere unlike many programs which
require downloads. This tool emphasizes alternative text and code elements. It breaks down the
standards into rules which aid in clarifying errors especially for users which are new to coding.
Weaknesses
This is not the ideal format for quickly locating the accessibility error in the source code
which can be time consuming to sort through the code to locate or fix errors. This program only
checks sites one page at a time which can be frustrating when constricted for time. Reports are
limited to HTML reports and is primarily used to check HTML and XHTML which is somewhat
limiting. The data using this tool is raw, and does not provide novice users much guidance on
fixing errors.
Possible Solutions to Weaknesses
If a designer learns basic source code they can learn to identify the patterns. Designers can
check pages as they design them. which will decrease the one page at a time concern. Many of
the solutions are easy and relatively quick fixes. If you check pages as they are created the
single page limitation ought not to be restrictive. The raw data produced by this table can be used
in conjunction with other tools to gain a more holistic perspective.
GrayBit v2.0
10
Figure 1 Before GrayBit Figure 2 GraysBit filter

example
GrayBit by Jona Fenocchi and Mike Chericonverts colors on a page to their grayscale equivalent
providing a visual contrast for users. Visual contrast helps make text headings and other
elements standout from other text which helps low visibility users separate information.
Findings
I erroneously believed that educatorstechconnect.blogspot.com already had significant contrast,
but the grayscale does make the contrast deeper. I need to deepen the contrast on some elements
to make my headings standout more. Graybit is a simple but effective tool that also helps
colorblind users, low vision users, and blind users.
Actions to Increase Accessibility
Changing the color scheme of educatorstechconnect.blogspot.com to grey, black, and white,
would produce the same effects as grayscale. However, I feel that I have a significant amount of
contrast as shown above. A few subtle changes ought to improve this site accessibility greatly
without having to redesign the entire site.
Strengths
Contrast makes it easier for those with visual impairments or color blindness to see websites. As
the creators of GraysBit explain, "Currently the tool works best on websites that make use of
11
cascading style sheets and a standardized markup"(Fenocchi& Cherim, 2010, General Info,
para. 2). This means that those designersusing CSS can use the reports to make a few changes
that may potential solve multiple errors. According to Fenocchi and Cherim(2010),
"GrayBit’s Binary Technology, or Bit, is powered with PHP, a server-side scripting language. It
will function regardless of your individual browser settings and/or limitations"(Tech Info, para.
2).This means that you do not have to worry about cross compatibility errors on client-side
computers. Additionally, the server-side option means that the tool is always available and can
be accessed from anywhere.
Weaknesses
Graybit works best on CSS but not all designers have made the switch to using CSS yet.
As the website explains, "GrayBit isn’t without limitations. Sites that use style information
within tables or use frames may not be properly converted" (Fenocchi & Cherim, 2010, General
Info, para. 2) If designers use tables and frames, as many do, this many not be the tool to use
for analysis. It works but the output is not as helpful as what other tools may provide.
JavaScript's may also not function as expected Graybit leaves them untouched. When analyzing
educatorstechconnect.blogspot.com the profile image and other side bar tools did not show up
which suggests that they should be removed or not used to convey important information in case
they cannot be seen by all users. The final weakness that I noticed is that it does not alter default
link colors, which can cause frustration for users and developers.
Some of the weaknesses of Graybit cannot be overcome. Truthfully, it is a simple tool that is
limited in scope and purpose, which is to expose contrast levels. If designers are still not using
CSS it is important to familiarize themselves with the code as HTML is rumored to be scheduled
for phase out. To combat the solution with frames and tables you could linearize your layout
12
tables to ensure accessibility. You can check your layout tables using Lynx Viewer.When
creating data tables make sure that your heading labels are clear and accessible by screen readers.
JavaScript's are primarily designed to add extra and ancillary features to websites such as color
effects, rollovers, and form submission. JavaScript has to be able to be disabled if your site can
be truly deemed accessible. So ensure that all JavaScript elements are not housing important
information that must be seen by all users. If JavaScript is crucial, the script shall be described
with functional text that can be read by assistive technology tools such as screen readers.
Access Key
AccessColor by AccessKey primarily checks websites for brightness and color difference.
Color difference is different that the contrast analyzed by Graybit. It analysis the contrast
between the foreground and background of the website. This tool is relatively simple to interpret
and provides developers with a wealth of information.
Findings
Educatorstechconnec.blogspot.com does not meet the color difference and brightness test for 15
percent of the website. The search box is not visible which can be improved by taking steps to
ensure that the search box is visible to a screen reader or can be accessed using a pen or mouth
mobility device. Developers can also be creative and add audio files which describe to visually
impaired users how they can access the search box. This strategy works for many forms as well.
The table below shows all of the errors for educatorrrstechconnect.blogspot.com in detail and a
full report can be found in Appendix C.
Report summary for educatorstechconnect.blogspot.com
The W3C recommends a standard of 500 or greater for the color difference and a standard
13
of 125 or greater for color brightness.
Based on these considerations, the results for this page are:
1. Both color difference and color brightness do not meet the recommended standard
for 14.46%of the total text.
A Fail message is displayed next to the HTML source line.
2. Either color difference or color brightness does not meet the recommended
standard for72.49% of the total the text.
A Warning message is displayed next to the HTML source line.
Text on background with images is for 0.4% of the total text.
If a visual document uses color to relate important information, insure that no information is
lost, or potentially misunderstood, when the color is not available.
Where either the foreground or background is not defined, then the values for color
difference and color brightness are n/a.
The W3C recommendation is:
If specifying a foreground color, always specify a background color as well (and vice versa).
Text not visible to human eye, when displayed in the web browser, is 0.6% of total text.
A Not Visible message is displayed next to the HTML source line.
Problem identified Actions taken
Line 758 Search this Blog box is not visible Take steps to ensure that the search
box is visible to a screen reader or
can be accessed using a pen or
mouth mobility device or be
creative and add an audio file which
tells visually impaired users that
how they can access the search box.
Do this strategy for forms as well.
Line 911, 1019, 1175, 1229, (TEXT) fails because of lack Change either the foreground or
of difference and brightness (dark grey shading, bright background colors to provide more
14
blue lettering) contrast. The opposite color of

#999999 is #666666 or I could
Foreground =#0000ff Class: h3.post-title a brighten it to #cccccc. The
Background=#999999 Class: .date-outer opposite color of #0000ff is a
fails for brightness and difference beige color #fffff0 and the
brighten color is #7f7f87
Lines 917, 927, 931, 971, 981, 985, 1035, 1039, 1076, The foreground color is a deep
1086, 1090, 1127, 1137, 1141, 1181, 1191, 1195, 1235, blue purple #20124d. The
1245, 1249, 1286 1288, (TEXT) composition is 77 blue, 18 green,
32 red. The HSL is saturation .62,
Foreground=#20124d Element: a lightness .19, and hue .71)
Background=#999999 Class: .date-outer It is not paired with its opposite
fails for brightness and difference color a light sage #dfedb2 or
the brightening color of
#8f88a6 . The web safe
equivalent is #330066
The background #999999 is a

medium gray color and it is not
considered web safe. The
composition is 153 blue, 153
green, 154 red. The HSL is
saturation .00, lightness .60, and
hue .00. The color that is the web
safe equivalent is #3300066.
The foreground or background

color for the blog post box being
changed would increase the
accessibility of the website
Line 965 (TEXT) Foreground=#0000ff The foreground color is #0000ff
which is a bright blue. The
Class: h3.post-title a Background=#999999 composition is 255 blue, 00 green,
Class: .date-outer 00 red. The HSL saturation 1.00,
lightness .50, and hue 0.67. The
opposite color for #0000ff is #ffff00
fails for brightness and difference n(bright yellow). Its brightening
15
color is #7f7fff (pale blue).
The background color #999999 is

a medium gray color and it is not
considered web safe. Its
composition is 153 blue, 153
green, 154 red. The HSL is
hue .00. The color that is the web
safe equivalent is #330006.

Line 1293 (Subscribe to)Green text Foreground color #004e01 is a
foreground=#004e01 deep forest green. The
composition is 1 blue, 78 green, 00
background=#3d85c6 Class: .main-inner .widget red. The HSL is saturation 1.00,
Fails for brightness and difference lightness .15, and hue 0.34. The
opposite color is #ffb1fe (pale
pink) Its brightening color is
#7fa680 (Medium sage). Its
web safe equivalent is
#006600
The background color is #3d85c6

(cornflower blue). The composition
is 198 blue, 133 green 61 red. The
HSL is saturation .55, lightness .51,
and hue 0.58. The opposite color
is#c27a39 (burnt sienna). Its
brightening color is #9ec2e2
(baby blue). It web safe
equivalent is #3399cc
16

Warnings- Lines 1294, 1298, 1326, 1338, 1362, 1368, Foreground color is #ffffff
(white). The composition is 255
1380, 1396, 1398, 1410, 1420, 1429, 1430,1431, 1432, blue, 255 green, 255 red. The HSL
is saturation .00, lightness 1.00, and
1433, 1434, 1435, 1436, 1437, 1438, 1439, 1440, 1441,
hue 0.00. The opposite color is
1442, 1457, 1459, 1460, 1461, 1462, 1463, 1464, 1465, #000000 (black). It is color safe
and cannot be any brighter.
1466, 1467, 1468, 1469 , 1470, 1471, 1472,1474, 1476,
1477, 1478, 1479,1480, 1481, 1482, 1483, 1484, 1497,

1500, 1501, 1502,1503, 1504, 1505, 1518, 1521, 1522, (cornflower blue). Its composition
is 198 blue, 133 green 61 red. Its
1523, 1536, 1551, 1562, 1575, 1588 HSL is saturation .55, lightness .51,
and hue 0.58. The opposite color is
Foreground=#ffffff #c27a39 (burnt sienna). Its
brightening color is #9ec2e2
Class: .blog-feeds a (baby blue). It web safe
equivalent is #3399cc
Background=#3d85c6
Class: .main-inner .widget
Fails for difference accessibility of the website.
Links to archived blog posts
Line 1349 Foreground color #2DA274 is a

tealish color. The opposite color is
#d25df8 (pink/purple) Its
Foreground=#2DA274 brightening color is #96d083(light
sage). It web safe equivalent is
Element: inline defined style
#339900.
Background= #3d85c6 (powder blue). ). The opposite
color is #c27af3 (purplish
17
Class: .main-inner .widget pink). The brightening color is

#9ec285 (light sage). The web
safe equivalent is #339900
Fails for difference and brightness
(Kelly green)

color for the widget being changed
would increase the accessibility of
the website.
Line 1383 The foreground color is #676767
(dark gray). Its composition is 103
blue, 103 green 103 red. Its HSL is
Foreground=#676767
Class: .newsbar-status hue 0.00. The opposite color is
#989898 (a lighter gray). Its
brightening color is #b3b3b3
Background=#3d85c6
(pale gray). It web safe
Class: .main-inner .widget equivalent is #666666
The Background color is #3d85c6

Fails for difference and brightness (powder blue). ). The opposite
color is #c27af3 (purplish
pink). The brightening color is
#9ec285 (light sage). The web
(Kelly green)

color for the news widget being
accessibility of the website.
Line 1417, 1420, 1452 , 1457, 1493, 1498, 1514, 1519, The foreground color is # 00004e
(Navy). Its composition is 78 blue,
1532, 1537, 1547, 1552, 1558, 1563, 1571, 1576, 1584, 0 green, 0 red. Its HSL is saturation
1.00, lightness .15, and hue 0.67.
1589(►)
The opposite color is#ffffb1 (a
pale yellow). Its brightening
Foreground= #00004e color is # (blue gray). It web
Class: .widget .zippy
18
Background= #3d85c6 The background color is #3d85c6

(powder blue). ). The opposite
Class: .main-inner .widget color is #c27af3 (purplish
pink). The brightening color is
Fails for difference and brightness #9ec285 (light sage). The web
(Kelly green)

color for the widget being changed
would increase the accessibility of
the website.
Lines 1656 The foreground color is #20124d
(dark navy). Its composition is 77
Foreground= #20124d Element: a blue, 18 green, 32 red. Its HSL is
Background=00004e none repeat scroll 0 0 saturation .62, lightness .19, and
hue 0.71. The opposite color
is#dfedb2 (a pale sage). Its
Class: .footer-fauxborder-left brightening color is #8f88a6
(blue gray). It web safe
equivalent is #330066
The background color is # 00004e

(Navy). Its composition is 78 blue,
0 green, 0 red. Its HSL is saturation
1.00, lightness .15, and hue 0.67.
The opposite color is#ffffb1 (a
pale yellow). Its brightening
color is # (blue gray). It web

color for the bottom border element
being changed would increase the
accessibility of the website.
19
Actions to Increase Accessibility of the File and Website
Most of the warnings and elements which failed the AccessColor test deal with brightness and
contrast. One step in which you can take is to simply change the colors in your template or
layout. You can get a color analysis chart of the web and look up the opposite color, brightening
color, and web safe version of the colors originally used. This is a simple change which can do a
lot to increase the accessibility of www.educatorstechconnect.com. Often it is simple changes to
a web site which take little time but make an immense difference to challenged students.
For search boxes, It is a good idea to make everything searchable. Place the search box at the
top of the page where users do not have to scroll to locate it. Do not overwhelm your search
boxes with advanced options such as case sensitivity. Give your box a proper label and access
key such as "4". Forms are another challenge for students because there are often many fields
which must be completed. The tabindex can come in very handy for mobility challenged users.
Other important features for the mobility challenged user include the accesskey, setfocus,
maxlength, fieldset, and labels.
Strengths
AccessColor tests the color contrast and brightness of websites by examining the foreground and
background. High contrast is important for visually impaired users. It uses the Web Content
Accessibility Guidelines 1.0 standards for analysis. It uses an algorithm designed by AERT to
look at CSS code. When using AccessColor to check websites, many users find that it catches
errors which are not obvious to the naked eye. It generates reports which allow users to go back
and check features using a summary or a line by line breakdown of code.
Weaknesses
20
Access currently only looks at the foreground and background colors and text. Flash and
background images are not analyzed on the page. Advanced features such as roll overs and link
hovers are also not detected. It currently checks single pages and cannot analyze an entire site at
once.
Each accessibility tool is designed for specific reasons and AccessColors does a great job with
analyzing foreground and background contrast. It would be helpful if the creators would code
the program to work with flash and more complicated images and multimedia features. Another
excellent revision which would increase the usability of this tool would be to allow it to check
multiple pages rather than single pages. This is being done by other programs so it is an
achievable goal if the code developers chose to take on the extra functionality revisions.
Free Online Accessibility Tools
Tool #1 TAW 3 JAVA Webstart
http://www.webdevelopmentstuff.com/103/taw-web-accessibility-test.html
http://www.tawdis.net/taw3/cms/en
Developer:CTIC Technology center
Functionality
One feature that automatically sets TAW3 apart from the other sites is that it is offered in many
languages(the original language is Spanish) and the page includes a translator. The TAW3 Java
Webstart application offers similar information to the TAW3 but it is accessed through a JAVA
applet and it breaks down reports according to priority. There are three levels of priority for this
tool.
Standards: Web Content Accessibility Guidelines 1.0
Strengths
21
TAW is available in a few different formats including online and offline. It can be processed
online from the TAW homepage, or downloaded to your local machine. There is also a
javabased software called TAW JAVA webstart (See appendix D) which has a user friendly
layout similar to File Zilla or Dreamweaver. This java applet provides a lot of content
evaluation methods and a variety of reports that can be generated such as the TAW, the EARL,
or a summary report.
Weaknesses
The Java interface is complicated for beginning users. This can be overcome through practice
and experience using the program. Designers using this tool need some coding knowledge in
order to be able to use the data generated in the summary report and interpret the priority levels.
This knowledge can be acquired overtime but it does require a good deal of self-direction.
Recommendation
I will recommend this program to others that possess the necessary technical knowledge to
interpret reports. I would however recommend some other tools to be used in combination with
this program which would help generate a more holistic perspective of the analysis. I would not
be quick to recommend this tools to beginning designers as there are other tools which are more
user friendly and easier to interpret.
Professional Use:
I would use this tool to check my sites when designing sites for school, training, or public access
but not for personal sites. I like the priority break down initiated by this report that seem to
emphasize features other programs miss such as controlling blinking and freezing motions.
aDesigner
Tool #2aDesigner http://www.eclipse.org/actf/downloads/tools/aDesigner/index.php

22
Developer:IBM® Tokyo Research Laboratory
Function
aDesigner is a Rich Client Platform (RCP) applicationfor designers to check visual elements and
improve accessibility of their sites. It tries to maintain and ensure compatibility with screen
readers and voice browsers. It offers unique features such as being able to simulate blind and low
vision views such as seen above and in the appendix E
Standards : aDesigner checks page compliance using the following four accessibility
guidelines; Web Content Accessibility Guidelines (WCAG), Web Content Accessibility
Guidelines 2.0 (WCAG 2.0), Section 508 of the Rehabilitation Act §1194.22 (Section 508), and
IBM Web Accessibility Checklist:
Strengths
This tool increases usability for visually challenged users.When you first log in to aDesigner you
can choose from 4 modes which includes HTML accessibility, Open Document Accessibility,
Flash accessibility, and GUI accessibility. Many screening programs only check for HTML
accessibility. aDesigner has a simulation mode for preview which can help designers experience
their pages as users would. You can check content through blind or low visibility options and
you can look at the simulated pages side by side with the original which highlights the revisions
23
made for accessibility. This program takes into account color blindness which is a different
visual challenge all together. aDesigner makes sure that design ensures compliance with law. It
also includes a sitewide analyzer rather than a page by page analyzer. The simulator can help
designers catch problems early on and this can save a lot of time. This tool has an analysis mode
which presents findings in a table format which makes data analysis easier to manage. The
algorithm used with aDesigner also calculates page load times which can also be frustrating to
users having to use special tools such as screen readers.
Weaknesses
It may require some technical knowledge to figure out how to use the program unless users are
comfortable learning by trial by error. Additionally, a working knowledge of HTML coding it
crucial to be able to read many of the error reports. I spent quite a few hours with this program
and still do not know how to use all of the available features. I have a limited knowledge of
HTML coding practices.
Recommendation
I would recommend this to others for use if they have some technical experience. It is a good
tool but you would have to show less technically incline users the benefits and basic
requirements like program installation.The table format for findings can help novice developers
quickly discover errors that may remain overlooked otherwise. I also really like the simulator
which allows you to experience the site as users will and hopefully catch inaccessible code and
transform it.
Professional Use
I will use this when designing my webpages for school or for workshops. I will also use it like I
did today to ensure that my blog and Google site are as accessible as possible. Some of the
widget attributes I do not know how to fix.

24
Functional Accessibility Evaluator
Tool #3Functional Accessibility Evaluator (FAE)
Developer: Illinois Center for Instructional Technology Accessibility (iCITA)
Function
FAE analyzes web resources for HTML or XHTML by checking them against best practice
guidelines established by the W3C.The FAE provides two reports including a summary report
and a Sitewide report. The summary report is broken into five categories; navigation and
orientation, text equivalents, scripting, styling, and HTML standards. It provides a status for
each of the categories such as; complete, partially implemented, or almost complete (each comes
with a pass/fail percentage). Then the summary report breaks each main category into
subcategories (see Appendix F). The Sitewidereport further breaks down each subcategory
showing where individual errors are and includes links to the best practices and the iCITA
website.
Standards: W3C and Section 508 of Workplace Rehabilitation Act
Strengths
FAE checks HTML, CSS, and XHTML code which gives developers more of a range of users
than some tools that limit the code to html or CSS. Fae checks in page groups as well as
checking single pages which speeds up the process. You can create a free account which will
allow you to check multiple pages by initiating web crawls. It is an online checker which does
not require download. You can save reports in an archived reports list. You can also generate
Sitewide reports which specify problem pages for easy revisions (see appendix).Automated
testing makes it easier for beginning level users. I really like that it breaks down reports into
categories because it allows designers to really focus in on accessibility. My report for
educatorstechconnnect.blogspot.com suggests that I have only partially implemented by

25
orientation and navigation (83% pass) which tells me where to specifically revise content. It
also breaks down categories into subcategories which allow me to see that my errors are in my
titles and subheadings(h1 and h6). The Sitewide content report breaks down the analysis even
further (see appendix)
Weaknesses
Not all accessible options can be analyzed through automated screenings. Several questions still
must be asked such as; Does the alternative text really describe the image it is meant to describe?
Are headings used for all sections and in tables? Does the alternative text for a linkdescribe what
the link connects accurately? Are meaningful labels used strategically? Are there textual
alternatives for video and audio if needed for auditory impairments?
Recommendation
I would definitely recommend FAE to other designers. This is one of my favorite tools from the
ones that I examined. It seems more user friendly for novice designers and experienced
designers can benefit from the summary and Sitewide report as well.
Professional Use
I would use this tool first when checking accessibility issues because it seems to be a more
holistic tool than others that I reviewed. It would be good in combination with a TAW3 analysis
and a Graybit review. I would use it when designing sites for school or commercial use.
Conclusion
This review presents only a small sample of both traditional and alternative accessibility tools. I
encourage readers to continue to explore accessibility tools because many of them do things
differently and what works for some may not be as useful for others. As the web continues to
progress through to the stages on its way to web 4.0, accessibility tools will change as codes
change.Section 508 of the Workforce Rehabilitation Act of 1973 mandates modification for
26
electronic and information technology that is either developed by or purchased by the
governmental entities to be accessible by people with disabilities (visual, auditory, mobility,
cognitive). The tools reviewed in this report analyze website accessibility specifically by
looking at what elements on websites are currently preventing individuals covered by law from
being able to make full use of web resources. First, examined traditional tools such as the
Cynthia Says Portal, Graybit, and Access Key. Finally, we examined three additional alternative
accessibility tools called TAW 3 Java web application, aDesigner, and Functional Accessibility
Evaluator 1.0.5 (FAE). Keep in mind when designing websites in the future that accessibility is
not only a legal requirement, it makes content available to users who are limited but can still
benefit from online instruction and it is important to give them the access they deserve.
27
APPENDIXES
28
Appendix AOnline Tools

Tools Developer Website
Cynthia Says HiSoftware http://www.cynthiasays.com/
Graybit Jona Fenocchi & Mike Cherim http://graybit.com/main.php
AccessColor AccessKey http://www.accesskeys.org/tools/color-

contrast.html
TAW 3 JAVA CTIC Technology center http://www.tawdis.net/index.html?lang=es

Webstart
aDesigner IBM Tokyo http://www.alphaworks.ibm.com/tech/adesigner
Functional University of Illinois at Urbana- http://fae.cita.uiuc.edu/

Accessibility Champaign
Evaluator (FAE)
29
Appendix B:
HiSoftware® Cynthia Says™ - Web

Content Accessibility Report
Powered by HiSoftware Content
Quality Technology. If you have a question about
this output please email support@hisoftware.com
Verified File
Name: http://educatorstechconnect.blogspot.co
m
Date and Time: 11/13/2010 9:49:53 PM
Failed Automated Verification
The level of detail setting for the report is to show all detail.
Verification Checklist
Checkpoints Passed
508 Standards, Section 1194.22 Yes No Other
A. 508 Standards, Section 1194.22, (a) A text equivalent for every non-text No
element shall be provided (e.g., via "alt", "longdesc", or in element content).
○ Rule: 1.1.1 - All IMG elements are required to contain either the alt or the
longdesc attribute.
○ Warning - IMG Element found at Line: 825, Column: 1 contains the
'alt' attribute with an empty value. Please verify that this image is
only used for spacing or design and has no meaning.
30
Checkpoints Passed
○ Rule: 1.1.2 - All INPUT elements are required to contain the alt attribute or
use a LABEL.
○ No INPUT Elements found within document
○ Rule: 1.1.3 - All OBJECT elements are required to contain element content.
31
Checkpoints Passed
○ No invalid OBJECT elements found in document body.
○ Rule: 1.1.4 - All APPLET elements are required to contain both element
content and the alt attribute.
○ No APPLET elements found in document body.
○ Rule: 1.1.6 - All IFRAME elements are required to contain element content.
○ Failure - IFRAME Element at Line: 675, Column: 1

○ Rule: 1.1.7 - All Anchor elements found within MAP elements are required to
contain the alt attribute.
○ No MAP elements found in document body.
○ Rule: 1.1.8 - All AREA elements are required to contain the alt attribute.
○ No AREA elements found in document body.
○ Rule: 1.1.9 - When EMBED Elements are used, the NOEMBED element is
required in the document.
○ Failure - EMBED Element(s) are found in document and the
NOEMBED element is not.
B. 508 Standards, Section 1194.22, (b) Equivalent alternatives for any Yes
multimedia presentation shall be synchronized with the presentation.
○ Rule: 1.4.1 - Identify all OBJECT Elements that have a multimedia MIME type
as the type attribute value.
○ No OBJECT elements found in document body that have multimedia
MIME type as the 'type' attribute value.
○ Rule: 1.4.2 - Identify all OBJECT Elements that have a 'data' attribute value
with a multimedia file extension.
○ No OBJECT elements found in document body that have a 'data'
attribute value with a multimedia file extension.
○ Rule: 1.4.3 - Identify all EMBED Elements that have a 'src' attribute value
with a multimedia file extension.
○ Note: EMBED Element found at Line: 1130, Column: 609 appears to
have '.swf' as a file extension in the 'src' attribute.
○ Note: EMBED Element found at Line: 1181, Column: 609 appears to
have '.swf' as a file extension in the 'src' attribute.
C. 508 Standards, Section 1194.22, (c) Web pages shall be designed so that all
information conveyed with color is also available without color, for example from
context or markup.
D. 508 Standards, Section 1194.22, (d) Documents shall be organized so they
32
Checkpoints Passed
are readable without requiring an associated style sheet.
○ Note: Document uses external stylesheets, inline style information, or
header style information.
E. 508 Standards, Section 1194.22, (e) Redundant text links shall be provided N/A
for each active region of a server-side image map.
○ Rule: 1.2.1 - Locate any IMG element that contains the 'ismap' attribute.
○ No IMG elements found in document body that contain the 'ismap'
attribute.
○ Rule: 1.2.2 - Locate any INPUT element that contains the 'ismap' attribute.
○ No INPUT elements found in document body.
F. 508 Standards, Section 1194.22, (f) Client-side image maps shall be provided N/A
instead of server-side image maps except where the regions cannot be defined
with an available geometric shape.
○ Rule: 9.1.1 - No IMG element should contain the 'ismap' attribute.
○ No server-side image map IMG elements found in document body.
○ Rule: 9.1.2 - No INPUT element should contain the 'ismap' attribute.
○ No INPUT elements found in document body.
G. 508 Standards, Section 1194.22, (g) Row and column headers shall be N/A
identified for data tables.
○ Rule: 5.1.1 - Identify all Data TABLE elements.
○ No Data TABLE elements found in document body.
H. 508 Standards, Section 1194.22, (h) Markup shall be used to associate data N/A
cells and header cells for data tables that have two or more logical levels of row
or column headers.
○ Rule: 5.2.1 - Identify all Data TABLE elements.
○ No Data TABLE elements found in document body.
I. 508 Standards, Section 1194.22, (i) Frames shall be titled with text that N/A
facilitates frame identification and navigation.
○ Document is not a FRAMESET Page.
J. 508 Standards, Section 1194.22, (j) Pages shall be designed to avoid causing
the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.
○ Rule: 7.1.1 - Documents are required not to contain the BLINK element.
○ No BLINK elements found in document body.
○ Rule: 7.1.2 - Documents are required not to contain the MARQUEE element.
○ No MARQUEE elements found in document body.
○ Note: SCRIPT element(s) found in document body, a visual verification must
be done to ensure the script does not cause the screen to flicker.
K. 508 Standards, Section 1194.22, (k) A text-only page, with equivalent

information or functionality, shall be provided to make a web site comply with
the provisions of this part, when compliance cannot be accomplished in any
other way. The content of the text-only page shall be updated whenever the
primary page changes.
33
Checkpoints Passed
(k) Option A - Check for the string 'Text Version' within the document. N/V
(k) Option B - Check for a Global Text Version Link within the document. N/V
(k) Option C - Check for an Accessibility Policy Link within the document. N/V
L. 508 Standards, Section 1194.22, (l) When pages utilize scripting languages to Yes
display content, or to create interface elements, the information provided by the
script shall be identified with functional text that can be read by assistive
technology.
○ Rule: 6.3.1 - Anchor elements are required not to use javascript for the link
target when the NOSCRIPT element is not present in the document. These
elements will not cause a failure of the checkpoint if the NOSCRIPT element
is found, however, they will be identified.
○ Note: Anchor Element found at Line: 1416, Column: 1 contains
'javascript:' in the 'href' attribute.
○ Rule: 6.3.2 - AREA elements are required not to use javascript for the link
target when the NOSCRIPT element is not present in the document. These
elements will not cause a failure of the checkpoint if the NOSCRIPT element
is found, however, they will be identified.
○ No AREA Elements found in document body.
○ Rule: 6.3.3 - Locate elements that use HTML event handlers.
○ Note: This rule has not been selected to be verified for this
checkpoint.
○ Rule: 6.3.4 - When SCRIPT Elements are used, the NOSCRIPT element is
○ The SCRIPT element is used and the NOSCRIPT element was found
in document.
Rule: 6.3.5 - All OBJECT elements are requirM. 508 Standards, Section 1194.22, No
(m) When a web page requires that an applet, plug-in or other application be
present on the client system to interpret page content, the page must provide a
link to a plug-in or applet that complies with §1194.21(a) through (l).
34
Checkpoints Passed
○ ed to contain element content.
○ No invalid OBJECT elements found in document body.
○ Rule: 6.3.6 - All APPLET elements are required to contain both element
content and the alt attribute.
○ No APPLET elements found in document body.
○ Rule: 6.3.7 - When EMBED Elements are used, the NOEMBED element is
○ Failure - EMBED Element(s) are found in document and the
NOEMBED element is not.
○ Rule: 6.3.8 - All pages that have links to files that require a special reader or
plug-in are required to contain the specified text indicating a link to the
reader or plug-in.
checkpoint.
N. 508 Standards, Section 1194.22, (n) When electronic forms are designed to N/A
be completed on-line, the form shall allow people using assistive technology to
access the information, field elements, and functionality required for completion
and submission of the form, including all directions and cues.
O. 508 Standards, Section 1194.22, (o) A method shall be provided that permits
users to skip repetitive navigation links.
○ Rule: (o).1 - All pages are required to contain a bookmark link to skip
navigation that has the specified text in either the link text or the 'title'
attribute value.
Skip Navigation Text:
checkpoint.
P. 508 Standards, Section 1194.22, (p) When a timed response is required, the
user shall be alerted and given sufficient time to indicate more time is required.
Checkpoint Result Legend: Yes = Passed Automated Verification, No = Failed Automated Verification, Warning = Failed
Automated Verification, however, configured not to cause page to fail (Priority 2 or 3 only), N/V = Not selected for
verification, N/A = No related elements were found in document (Visual only), No Value = Visual Checkpoint
HiSoftware Alt Text Quality Report
Verified File Name: http://educatorstechconnect.blogspot.com

Date and Time: 11/13/2010 9:49:54 PM
Passed Automated Verification
Checkpoints Passed
Yes No Other
1.1 Validate that the alt text does not use the word image When users Yes
add alternative text to an image they tend to add the word "Image" when it
really says nothing about the image, but describes the object versus the
meaning of the object. This check will fail a page for the use of the word image
in the alternative text.
35
Checkpoints Passed
Image alternative text does not contain the word "Image"
1.2 Validate that the alt text does not contain the text: .jpg, .gif, Yes
.bmp, .jpeg Many content creation tools will automatically add alternative text
when you add an image to your content. The text is generally the image
name. Validate that: .jpg, .gif, .bmp, .jpeg, are not found in the alt text.
Image Alternative Text does not contain: .jpg, .gif, .bmp, .jpeg
1.6 Validate that the alt text does not contain the text "image" Many Yes
content creation tools will automatically add alternative text when you add an
image to your content. The text is generally the image name or the word
image with a number associated, like image001. This checkpoint will fail a
page if the string image is found in the alternative text.
Image Alternative Text does not contain the text "image"
2.1 Validate that Alternative Text is greater than 7 and less than 81 Warning
characters in length Short alternative text may not be valid, warn the report
user if alternative text was found that is less than seven characters in length.
Additionally alternative text should not be larger than 80 characters, if the alt
text is greater the long description attribute should be used. This check
validates that the alt attribute does not exceed 80 characters in length.
The alternative text failed the minimum/maximum allowed characters check
○ Note - img Element at Line: 825, Column: 1 - The alt attribute is 0
characters.
characters.
characters.
characters.
characters.
characters.
characters.
characters.
characters.
characters.
characters.
characters.
characters.
36
Checkpoints Passed
characters.
characters.
characters.
characters.
characters.
characters.
characters.
characters.
characters.
characters.
2.2 Validate that Alternative Text is not used to repeat Yes

words Alternative text should not be used to simply hide words with the hope
of increasing your ranking on search engines. If you repeat a word more than
5 times your page may not be indexed.
The alternative text passed the maximum allowed repeated words check
Checkpoint Result Legend: Yes = Passed Automated Verification, No = Failed Automated Verification, Warning =
Automated Verification Warning, N/V = Not Verified, N/A = No related elements were found in document, No Value =
Visual Checkpoint
Report generated by the HiSoftware Company Cynthia Agent. Powered by the
AccMonitor Compliance Server HiSoftware, Cynthia Says, AccMonitor Compliance
Server, Cynthia Agent are all trademarks of HiSoftware Inc.

37
Appendix C: AccessColor Report

Top of Form
http://educatorstechconnect.blogspot.com
Check URLWeb Address *

Check
ShowOnly Errors Full report Show Source

Bottom of Form
Report summary
The W3C recommends a standard of 500 or greater for the color difference and a standard
of 125 or greater for color brightness.
Based on these considerations, the results for this page are:
1. Both color difference and color brightness do not meet the recommended standard
for 14.46%of the total text.
A Fail message is displayed next to the HTML source line.
2. Either color difference or color brightness does not meet the recommended
standard for72.49% of the total the text.
A Warning message is displayed next to the HTML source line.
Text on background with images is for 0.4% of the total text.
If a visual document uses color to relate important information, insure that no information is
lost, or potentially misunderstood, when the color is not available.
Where either the foreground or background is not defined, then the values for color
difference and color brightness are n/a.
The W3C recommendation is:
If specifying a foreground color, always specify a background color as well (and vice versa).
Text not visible to human eye, when displayed in the web browser, is 0.6% of total text.
A Not Visible message is displayed next to the HTML source line.
Report details
Foregrou Backgrou
Line HTML text Color
nd nd
38
733 The Educators Tech 1. Brightness:n/a

Connect
2. Difference:n/a
737 A blog for educators #eeffee 1. Brightness:n/a

that are interested
in Instru
2. Difference:n/a
Search This Blog 1. Brightness:n/a
758
2. Difference:n/a
761 Loading... #676767 1. Brightness:n/a

Class: .cse-
status 2. Difference:n/a
903 Saturday, October #ffffff Image 1. Brightness:n/a

30, 2010 Class:
.main- 2. Difference:n/a
inner
.widget
h2.date-
header
Comic Master #0000ff #999999
Class: Class: .date-
1. Brightness:
911 124
h3.post- outer
title a
2. Difference:
408
Comic Master #20124d #999999

Element: a Class: .date-
1. Brightness:
917
39
outer 124
2. Difference:
332
917 What an awesome #999999 1. Brightness:n/a

animation tool Class: .date-
outer 2. Difference:n/a
922 Posted by #999999 1. Brightness:n/a

Class: .date-
923 Brandy Milson #999999 1. Brightness:n/a

Class: .date-
926 at #999999 1. Brightness:n/a

Class: .date-
6:27 PM #20124d #999999

1. Brightness:
927 124
outer
2. Difference:
332
comments #20124d #999999

Class: .date-
1. Brightness:
931
outer
40
124
2. Difference:
332
953 Reactions: #999999 1. Brightness:n/a

Class: .date-
953 #999999 1. Brightness:n/a

Class: .date-
Universities commit #0000ff #999999

to open-access Class: Class: .date-
1. Brightness:
965 journal movemen 124
h3.post- outer
title a
2. Difference:
408
Universities commit #20124d #999999

to open-access Element: a Class: .date-
1. Brightness:
outer
2. Difference:
332

Class: .date-
outer
41
2. Difference:n/a

Class: .date-

Class: .date-
5:53 PM #20124d #999999

1. Brightness:
981 124
outer
2. Difference:
332
comments #20124d #999999

Class: .date-
1. Brightness:
985 124
outer
2. Difference:
332

Class: .date-

Class: .date-
outer
42
2. Difference:n/a
New and Improved #0000ff #999999

Google Docs Charts Class: Class: .date-
1. Brightness:
1019 124
h3.post- outer
title a
2. Difference:
408
1030 Posted by #999999

1. Brightness:n/a
Class: .date-

Class: .date-

Class: .date-
5:28 PM #20124d #999999

1. Brightness:
1035 124
outer
2. Difference:
332
comments #20124d #999999

Class: .date-
1. Brightness:
1039
outer
43
124
2. Difference:
332

Class: .date-

Class: .date-
Power of storytelling #20124d #999999

1. Brightness:
1076 124
outer
2. Difference:
332
1076 on #999999 1. Brightness:n/a

Class: .date-
Prezi #20124d #999999

1. Brightness:
1076 124
outer
2. Difference:
44
332

Class: .date-

Class: .date-

Class: .date-
5:25 PM #20124d #999999

1. Brightness:
1086 124
outer
2. Difference:
332
comments #20124d #999999

Class: .date-
1. Brightness:
1090 124
outer
2. Difference:
332

Class: .date-
outer
45
2. Difference:n/a

Class: .date-
Playing to Learn? #20124d #999999

1. Brightness:
1127 124
outer
2. Difference:
332
1127 on #999999 1. Brightness:n/a

Class: .date-
Prezi #20124d #999999

1. Brightness:
1127 124
outer
2. Difference:
332

Class: .date-

Class: .date-
outer
46
2. Difference:n/a

Class: .date-
5:23 PM #20124d #999999

1. Brightness:
1137 124
outer
2. Difference:
332
comments #20124d #999999

Class: .date-
1. Brightness:
1141 124
outer
2. Difference:
332

Class: .date-

Class: .date-
Enter The Group: #0000ff #999999

Projects Central Class: Class: .date-
1. Brightness:
1175
h3.post- outer
47
title a 124
2. Difference:
408
Enter The Group: L12 #999999

Projects Central Element: a Class: .date-
1. Brightness:
1181 124
outer
2. Difference:
332
1181 This is a great #999999 1. Brightness:n/a

project collaboration Class: .date-
site!

Class: .date-

Class: .date-

Class: .date-
5:17 PM #20124d #999999

1. Brightness:
1191
outer
48
124
2. Difference:
332
comments #20124d #999999

Class: .date-
1. Brightness:
1195 124
outer
2. Difference:
332

Class: .date-

Class: .date-
Top100 Tools for #0000ff #999999

Learning 2010 Class: Class: .date-
1. Brightness:
1229 124
h3.post- outer
title a
2. Difference:
408
1235 Check out this #999999 1. Brightness:n/a

SlideShare Class: .date-
Presentation:
outer
49
2. Difference:n/a
Top100 Tools for #20124d #999999

Learning 2010 Element: a Class: .date-
1. Brightness:
1235 124
outer
2. Difference:
332
1235 View more #999999

1. Brightness:n/a
Class: .date-
presentations #20124d #999999

1. Brightness:
1235 124
outer
2. Difference:
332
1235 from #999999 1. Brightness:n/a

Class: .date-
Jane Hart #20124d #999999

1. Brightness:
1235 124
outer
2. Difference:
332
50
1235 . #999999 1. Brightness:n/a

Class: .date-

Class: .date-

Class: .date-

Class: .date-
5:09 PM #20124d #999999

1. Brightness:
1245 124
outer
2. Difference:
332
comments #20124d #999999

Class: .date-
1. Brightness:
1249 124
outer
2. Difference:
332
1271 Reactions: #999999

1. Brightness:n/a
51
Class: .date-
outer
2. Difference:n/a

Class: .date-
Older Posts #20124d #999999

Element: a ID: #blog-
1. Brightness:
1286 124
pager
2. Difference:
332
Home #20124d #999999

Element: a ID: #blog-
1. Brightness:
1288 124
pager
2. Difference:
332
Subscribe to: #004e01 #3d85c6

Class: 1. Brightness: 73
1293
.main-
inner
.widget2. Difference:
313
Posts (Atom) #ffffff #3d85c6

Class: Class: 1. Brightness:
1294
.blog-feeds .main-
52
a inner 136
.widget
2. Difference:
373
1298 ShareThis #3d85c6 1. Brightness:n/a

Class:
.main- 2. Difference:n/a
inner
.widget
About Me #ffffff #3d85c6
Class: 1. Brightness:
1318 136
.main-
inner
.widget
2. Difference:
373
Brandy Milson #ffffff #3d85c6

1322 136
.main-
inner
.widget
2. Difference:
373
Houston, Texas, #ffffff #3d85c6

United States Class: 1. Brightness:
1323 136
.main-
inner
.widget
2. Difference:
373
53
I am a graduate #ffffff #3d85c6

student in Class: 1. Brightness:
1324 Instructional 136
.main-
Technology
inner
.widget
2. Difference:
373
View my complete #ffffff #3d85c6

profile Class: Class: 1. Brightness:
1326 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
Subscribe Now: The #ffffff #3d85c6

EducatorsTechConn Class: 1. Brightness:
1338 ect podcast 136
.main-
inner
.widget
2. Difference:
373
Powered by #2DA274 #3d85c6

Podbean.com Element: Class: 1. Brightness: 3
1349
inline .main-
defined inner
style .widget2. Difference:
127
Hierarchy of Cyber #ffffff #3d85c6

Needs Class: 1. Brightness:
1362 136
.main-
inner
54
.widget
2. Difference:
373
Chart comes from #ffffff #3d85c6

Simply Speaking Class: 1. Brightness:
1368 Blog by Geetha Kr 136
.main-
inner
.widget
2. Difference:
373
NEWS you can USE #ffffff #3d85c6

1380 136
.main-
inner
.widget
2. Difference:
373
Loading... #676767 #3d85c6

Class: Class: 1. Brightness: 16
1383
.newsbar- .main-
status inner
.widget2. Difference:
167
Books about #ffffff #3d85c6

Educational Class: 1. Brightness:
1396 Technology 136
.main-
inner
.widget
2. Difference:
373
55
Shelfari: Book #ffffff #3d85c6

reviews on your Class: Class: 1. Brightness:
1398 book blog 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
Blog Archive #ffffff #3d85c6

1410 136
.main-
inner
.widget
2. Difference:
373
▼ #00004e #3d85c6
1417 110
.widget .main-
.zippy inner
.widget
2. Difference:
314
2010 #ffffff #3d85c6

1419 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
(51) #00004e #3d85c6

1420
.main-
56
inner 110
.widget
2. Difference:
314
▼ #00004e #3d85c6
1424 110
.widget .main-
.zippy inner
.widget
2. Difference:
314
October #ffffff #3d85c6

1426 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
(15) #00004e #3d85c6

1427 110
.main-
inner
.widget
2. Difference:
314
Comic Master #ffffff #3d85c6

1429 136
.sidebar .main-
.widget a inner
.widget
57
2. Difference:
373
Universities commit #ffffff #3d85c6

to open-access Class: Class: 1. Brightness:
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
New and Improved #ffffff #3d85c6

Google Docs Charts Class: Class: 1. Brightness:
1431 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
.prezi-player #ffffff #3d85c6

{ width: 550px; } Class: Class: 1. Brightness:
1432 .prezi-player-link 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
.prezi-player #ffffff #3d85c6

{ width: 550px; } Class: Class: 1. Brightness:
1433 .prezi-player-link 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
58
373
Enter The Group: #ffffff #3d85c6

Projects Central Class: Class: 1. Brightness:
1434 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
Top100 Tools for #ffffff #3d85c6

Learning 2010 Class: Class: 1. Brightness:
1435 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
The Rise of Apps #ffffff #3d85c6

Culture | Pew Class: Class: 1. Brightness:
1436 Research Center' 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
Using Mobile #ffffff #3d85c6

Technologies in the Class: Class: 1. Brightness:
1437 Classroom: 10 Eas 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
59
Top 5 Free Online #ffffff #3d85c6

Video Editing Tools | Class: Class: 1. Brightness:
1438 Levoltz | 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
Ten Excellent Online #ffffff #3d85c6

Apps For the Class: Class: 1. Brightness:
1439 Innovative Teach 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
Mobile, Mobile, #ffffff #3d85c6

Mobile Class: Class: 1. Brightness:
1440 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
How to use higher #ffffff #3d85c6

education’s ‘new toy Class: Class: 1. Brightness:
1441 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
Online learning #ffffff #3d85c6

official: Lecture Class: Class: 1. Brightness:
1442 capture helps st
.sidebar .main-
60
.widget a inner 136

.widget
2. Difference:
373
How to Use Second #ffffff #3d85c6

Life - a Quick Guide Class: Class: 1. Brightness:
1443 to Getting 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
► #00004e #3d85c6
1452 110
.main-
inner
.widget
2. Difference:
314
September #ffffff #3d85c6

1456 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
(26) #00004e #3d85c6

1457 110
.main-
inner
.widget
61
2. Difference:
314
Survey: Children like #ffffff #3d85c6

eBooks, parents not Class: Class: 1. Brightness:
1459 so much 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
Schools still #ffffff #3d85c6

conflicted over Web Class: Class: 1. Brightness:
1460 2.0 tools 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
How to Share a #ffffff #3d85c6

Google Doc With Class: Class: 1. Brightness:
1461 Students 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
15 Back to School #ffffff #3d85c6

Apps for Teachers Class: Class: 1. Brightness:
1462 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
62
373
The Case Against #ffffff #3d85c6

Assistive Technology Class: Class: 1. Brightness:
1463 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
Groups urge updates #ffffff #3d85c6

to teacher Class: Class: 1. Brightness:
1464 preparation program 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
Top 10 sites for #ffffff #3d85c6

Creating Digital Class: Class: 1. Brightness:
1465 Magazines and Ne 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
10 ways to assess #ffffff #3d85c6

learning without Class: Class: 1. Brightness:
1466 tests... 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
63
Building an Online #ffffff #3d85c6

Presence More Class: Class: 1. Brightness:
1467 Important Than Ev 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
Curriki - Learning #ffffff #3d85c6

Theories and Class: Class: 1. Brightness:
1468 Gaming 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
Educational Videos - #ffffff #3d85c6

The Best Educational Class: Class: 1. Brightness:
1469 Videos O 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
The Google #ffffff #3d85c6

Classroom | Diigo Class: Class: 1. Brightness:
1470 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
Im in LOVE with this #ffffff #3d85c6

program Character Class: Class: 1. Brightness:
1471 Builder
.sidebar .main-
64
.widget a inner 136

.widget
2. Difference:
373
MUVE's in education #ffffff #3d85c6

1472 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
Educational Gaming #ffffff #3d85c6

1473 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
Avatar Pedagogy: #ffffff #3d85c6

Are we plugging in Class: Class: 1. Brightness:
1474 to the Matrix? 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
Avatars and virtual #ffffff #3d85c6

reality Class: Class: 1. Brightness:
1475 136
.sidebar .main-
.widget a inner
.widget
65
2. Difference:
373
Moodle Storyboard #ffffff #3d85c6

1476 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
Moodle in Education #ffffff #3d85c6

1477 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
Google Applications #ffffff #3d85c6

in the Classroom Class: Class: 1. Brightness:
1478 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
Waiting for #ffffff #3d85c6

'Superman' Class: Class: 1. Brightness:
1479 Animation -The Dail 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
66
373
TakePart: Participant #ffffff #3d85c6

Media - Waiting For Class: Class: 1. Brightness:
1480 'Sup 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
What Moodle can do #ffffff #3d85c6

for a School Class: Class: 1. Brightness:
1481 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
Coolest web 2.0 #ffffff #3d85c6

Video Around Class: Class: 1. Brightness:
1482 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
States given millions #ffffff #3d85c6

for new assessments Class: Class: 1. Brightness:
1483 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
67
Social media site an #ffffff #3d85c6

‘academic Class: Class: 1. Brightness:
1484 supplement 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
► #00004e #3d85c6
1493 110
.main-
inner
.widget
2. Difference:
314
May #ffffff #3d85c6

1497 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
(6) #00004e #3d85c6

1498 110
.main-
inner
.widget
2. Difference:
314
Stakeholders fight #ffffff #3d85c6

for ed-tech funds Class: Class: 1. Brightness:
1500
.sidebar .main-
68
.widget a inner 136

.widget
2. Difference:
373
A Vision of Students #ffffff #3d85c6

Today Class: Class: 1. Brightness:
1501 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
Education in Second #ffffff #3d85c6

Life Class: Class: 1. Brightness:
1502 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
Education in Second #ffffff #3d85c6

Life: Explore the Class: Class: 1. Brightness:
1503 Possibilitie 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
Photoshop video #ffffff #3d85c6

tutorials Class: Class: 1. Brightness:
1504 136
.sidebar .main-
.widget a inner
.widget
69
2. Difference:
373
Awesome webinar #ffffff #3d85c6

on photoshop Class: Class: 1. Brightness:
1505 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
► #00004e #3d85c6
1514 110
.main-
inner
.widget
2. Difference:
314
April #ffffff #3d85c6

1518 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
(3) #00004e #3d85c6

1519 110
.main-
inner
.widget
2. Difference:
70
314
Social Learning #ffffff #3d85c6

1521 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
The ADDIE #ffffff #3d85c6

Instructional Design Class: Class: 1. Brightness:
1522 Model 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
New Skills for #ffffff #3d85c6

Instructional Class: Class: 1. Brightness:
1523 Designers 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
► #00004e #3d85c6
1532 110
.main-
inner
.widget
2. Difference:
314
71
February #ffffff #3d85c6

1536 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
(1) #00004e #3d85c6

1537 110
.main-
inner
.widget
2. Difference:
314
► #00004e #3d85c6
1547 110
.main-
inner
.widget
2. Difference:
314
2009 #ffffff #3d85c6

1551 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
(25) #00004e #3d85c6

1552
.main-
72
inner 110
.widget
2. Difference:
314
► #00004e #3d85c6
1558 110
.main-
inner
.widget
2. Difference:
314
November #ffffff #3d85c6

1562 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
(7) #00004e #3d85c6

1563 110
.main-
inner
.widget
2. Difference:
314
► #00004e #3d85c6
1571 110
.main-
inner
.widget
73
2. Difference:
314
October #ffffff #3d85c6

1575 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
373
(13) #00004e #3d85c6

1576 110
.main-
inner
.widget
2. Difference:
314
► #00004e #3d85c6
1584 110
.main-
inner
.widget
2. Difference:
314
September #ffffff #3d85c6

1588 136
.sidebar .main-
.widget a inner
.widget
2. Difference:
74
373
(5) #00004e #3d85c6

1589 110
.main-
inner
.widget
2. Difference:
314
1656 Brandy Milson @ 00004e1. Brightness:n/a

BMDesign 2010. none repeat
Awesome Inc. scroll 0 0
templa 2. Difference:n/a
Class:
.footer-
fauxborder-
left
enot-poloskun #20124d 00004e
Element: a none repeat
1. Brightness: 29
1656 scroll 0 0
Class:
.footer-
2. Difference:
fauxborder- 127
left
1656 . Powered by 00004e1. Brightness:n/a

none repeat
scroll 0 0
2. Difference:n/a
Class:
.footer-
fauxborder-
left
Blogger #20124d 00004e
Element: a none repeat
1. Brightness: 29
1656 scroll 0 0
Class:
.footer-
75
fauxborder-
left 2. Difference:
127
1656 . 00004e1. Brightness:n/a

none repeat
scroll 0 0
2. Difference:n/a
Class:
.footer-
fauxborder-
left
76
Appendix D: TAW3 Java Webstart
Online analysis
77
Java report
78
79
80
Appendix E: Screenshots from

aDesigner
81
82
Appendix F: FAE
Summary Report
Untitled Report 2010-11-14
17:27
Pages: 2Depth: Top-levelRuleset: 1004-1 (current)
URL: http://educatorstechconnect.blogspot.com/
Evaluation Results by Best

Practices Main Category
Category Status 1
%Pa %War % F
ss n ail
Navigation & Partially 83 5 11

Orientation Implemen
ted
Text Almost 87 12 0
Equivalents Complete
Scripting Complete 100 0 0
Styling Complete 100 0 0
HTML Almost 75 25 0
Standards Complete
Note: % Pass includes N/A results.
Evaluation Results by Best

Practices Subcategory
Category/Subcat %Pa %Wa %F
egory ss rn ail
Navigation & Orientation

83
Titles (title & 57 21 21

h1)
Subheadings 83 0 16
(h2..h6)
Navigation Bars 100 0 0
Form Control 100 0 0

Labels
Default 0 0 100
Language
Data Tables 100 0 0
Access Keys 100 0 0
Frames 100 0 0
Text Equivalents
Informative 100 0 0
Images
Decorative 75 25 0
Images
Image Maps 100 0 0
Scripting
onclick 100 0 0
onmouseover & 100 0 0

onmouseout
Styling
84
Text Styling 100 0 0
Layout Tables 100 0 0
HTML Standards
W3C 75 25 0
Specifications
Note: % Pass includes N/A results.
1
Status Value Definitions
Status values are based on aggregated evaluation results of Pass, N/A (not applicable)
and Warn, as defined in the following table.
Perce
Value Result
nt
Complete 100 Pass + N/A
Almost 95– Pass + N/A +

Complete 100 Warn
Partially Pass + N/A +

40–94
Implemented Warn
Not Pass + N/A +

0–39
Implemented Warn
85
Sitewide Report
Untitled Report 2010-11-14 17:27
Pages: 2Depth: Top-levelRuleset: 1004-1 (current)
URL: http://educatorstechconnect.blogspot.com/
Navigation & Orientation

Titles (title & h1)Best Practices(opens in a new window)
 The page must contain exactly one title element.
 Fail: 1 page
 Pass: 1 page

 The title element must have text content.
 Pass: 1 page
 N/A: 1 page

 The page must contain at least one h1 element.
 Fail: 1 page
 Pass: 1 page

 The page should contain no more than two h1 elements.
 Warn: 1 page
 Pass: 1 page

 The text content of each h1 element should match all or part of the title content.
 Warn: 1 page
 Pass: 1 page

 Each h1 element must have text content.
 Fail: 1 page
 Pass: 1 page

 Each h1 element should have text content exclusive of the alttext of
any img elements it contains.
 Warn: 1 page
 Pass: 1 page

86
Subheadings (h2..h6)Best Practices(opens in a new window)

 Subheading elements that follow the last h1 should be properly nested.
 Fail: 1 page
 Pass: 1 page

 Each subheading element (h2..h6) must have text content.
 Pass: 1 page
 N/A: 1 page

 Each subheading element (h2..h6) should have text content exclusive of the alt text of
any img elements it contains.
 Pass: 1 page
 N/A: 1 page

Navigation BarsBest Practices(opens in a new window)

 Each ul or ol element that precedes the last h1 element and appears to be a
navigation bar should be immediately preceded by a heading element, preferably
an h2.
 N/A: 2 pages

 Each map element that precedes the last h1 element and appears to be a navigation
bar should be immediately preceded by a heading element, preferably an h2
 N/A: 2 pages

 Each area element should have a redundant text link (aelement) with
matching href value.
 N/A: 2 pages

Form Control LabelsBest Practices(opens in a new window)

 Each input element with type=text | password |checkbox | radio | file and
each select andtextarea element must either be referenced by the forattribute of
a label element via its id attribute, or have atitle attribute.
 N/A: 2 pages

 Each input element with type=button | submit |reset must have either
a value attribute or a titleattribute.
 N/A: 2 pages

 Each input element with type=image must have either analt attribute or
a title attribute.
87
 N/A: 2 pages

 Each label and legend element must have text content.
 N/A: 2 pages

 If an input, select, textarea or button element has an id attribute, its value
must be unique relative to all ids on the page.
 N/A: 2 pages

Default LanguageBest Practices(opens in a new window)

 Each page must have a lang attribute on its html element whose value or initial
subtag is a valid two-character language code.
 Fail: 2 pages

Data TablesBest Practices(opens in a new window)

 For each data table, the first cell in each column must be a thelement, and each row
must contain at least one th element.
 N/A: 2 pages

 Each data table must have a nonempty summary attribute.
 N/A: 2 pages

 The summary attribute value for each data table on a page should be unique.
 N/A: 2 pages

 Each th element in a complex data table must have an idattribute whose value is
unique relative to all ids on the page.
 N/A: 2 pages

 Each td element in a complex data table must have aheaders attribute that
references the id attributes of associated th elements.
 N/A: 2 pages

Access KeysBest Practices(opens in a new window)

 Each accesskey attribute value on a page should be unique.
 N/A: 2 pages

FramesBest Practices(opens in a new window)

 Each frame element must have a nonempty title attribute.
88
 N/A: 2 pages

 The title attribute value for each frame element within aframeset must be unique.
 N/A: 2 pages
89
References
Fenocchi, J., Cherim, M. (2010). Graybitv.2.0: Learn More. Retrieved from
http://graybit.com/info/info.php#info

Accessibility Tool Responses

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Accessibility Tool Responses

Uploaded by

Copyright:

Available Formats

Running head: ACCESSIBILITY TOOLS

Assignment 10 Accessibility Tools

University of Houston- Clear Lake

November 10, 2010

governmental entities to be accessible by people with disabilities (visual, auditory, mobility,

and AccessColors. Additionally, we examine three additional alternative accessibility tools

Keywords: Accessibility. Multimedia, visual impairment, auditory impairment, Cynthia Says

Evaluator 1.0.5 (FAE).

I. Traditional Acessibility Tools

a. HiSoftware® Cynthia Says™ Portal

II. Additional Free Online Accessibility Tools

a. TAW3 Java Webstart

c. Functional Accessibility Evaluator (FAE)

a. Appendix A:Online Tools

b. Appendix B: HiSoftware® Cynthia Says™ - Web Content Accessibility

c. Appendix C AccessColor Report

d. Appendix D: TAW3 Java web application analysis

e. Appendix E: aDesigner Screenshots

The website that I chose to use for my evaluations is educatorstechconnect.blogspot.com or my

placed into coding for accessibility for students.

computer despite physical limitations. Educatorstechconnect.blogspot.com can be changed to a

The primary responsibility of web accessibility tools is to flag anything in violation of an

Traditional Accessibility Tools

Cynthia Says Portal

Cynthia Says Summary Analysis for

Rule: 1.1.2 - All INPUT elements are Create input elements or

use a LABEL.No INPUT Elements attributes

Rule: 1.1.3 - All OBJECT elements are Create object elements

Rule: 1.1.4 - All APPLET elements are Create Applets if

Rule: 1.1.6 - All IFRAME elements are Create element content

○ Failure - IFRAME Element at

○ Failure - IFRAME Element at

○ Failure - IFRAME Element at

○ Failure - IFRAME Element at

○ Failure - IFRAME Element at

○ Failure - IFRAME Element at

○ Failure - IFRAME Element at

Rule: 1.1.7 - All Anchor elements Create Map with

Rule: 1.1.9 - When EMBED Elements Place the NOEMBED

M. 508 Standards, Section Review object elements

Rule: 6.3.7 - When EMBED Elements Place the NOEMBED

Alternative Text Quality Report

Possible Solutions to Weaknesses

in conjunction with other tools to gain a more holistic perspective.

Figure 1 Before GrayBit Figure 2 GraysBit filter

I erroneously believed that educatorstechconnect.blogspot.com already had significant contrast,

colorblind users, low vision users, and blind users.

Actions to Increase Accessibility

Changing the color scheme of educatorstechconnect.blogspot.com to grey, black, and white,

without having to redesign the entire site.

be accessed from anywhere.

Possible Solutions to Weaknesses

and provides developers with a wealth of information.

full report can be found in Appendix C.

Report summary for educatorstechconnect.blogspot.com

of 125 or greater for color brightness.

Based on these considerations, the results for this page are:

A Fail message is displayed next to the HTML source line.

A Warning message is displayed next to the HTML source line.

Text on background with images is for 0.4% of the total text.

The W3C recommendation is:

A Not Visible message is displayed next to the HTML source line.

Problem identified Actions taken