Making Your E-learning System & Content More Accessible 3
Dick Banks Norman Coombs
CORE STANDARDS (review)
(a) images
(b) multimedia
color
(g) tables<br />
Word and Complex Graphs
Complex graphs like all images need a text tag attached to it to identify it
It probably requires a longer description describing it for a user who is blind
If it is complex enough, it may require someone making a hard copy, tactile drawing to be sent separately to the learner
Archive of Extra Content
The link below will remain through February and will have some of the training on styles, images and other items:<br />
http://www.easi.cc/archive/elearn2/
Microsoft Word Review
use Word style feature
Use document structure to support meaning
use crisp font, blank spaces and generous margins
Use reasonably large font size
Avoid long complex sentences and lengthy paragraphs
Use text labels for images
Use headers for tables
Exporting From MS Word
The table headers will not carry over with the export
The other style and image text features will export both to HTML and PDF
How can you easily check the accessibility of your Web content no matter how it was created????
Accessibility Reports
WebXACT - formally Bobby
http://webxact.watchfire.com/
Cynthia Says
http://www.cynthiasays.com/
The WAVE (WebAIM)
http://www.wave.webaim.org/index.jsp
Be sure to register for the FREE Webinar of the New WAVE 4.0 - http://www.easi.cc/clinic.htm
Accessibility Reports
Functional Accessibility Evaluator (WCAG)
University of Illinois at Urbana-Champaign
Web Accessibility Checker (ACCESSIBLE)
http://checker.atrc.utoronto.ca/index.html
AccessValet (WEBMASTERS)
http://valet.webthing.com/access/
WAI Tools List
http://www.w3.org/WAI/ER/tools/complete
Web Accessibility WAT Toolbar Consortium
http://www.wat-c.org/
The AIS Accessibility Toolbar is free and was developed by a group from Australia. It was developed to work with Internet Explorer and it evaluates aspects of webpages for accessibility. This toolbar is very robust and would be an excellent way for any Webmaster to use for in depth reporting on aspects of accessible design.
While this is a complex addition to Internet Explorer, it is also a valuable tool for anyone looking at certain aspects of a webpage accessibility. The options that are discussed in this overview, are those aspects that a faculty person, administrator or department head could use to get an overall sense of areas of concern with regard to users with disabilities.
As it is with most toolbars in IE, it is one of the toolbars that stretches across the top of the browser under the address bar. There are buttons with pulldown menus. They are: AIS Accessibility Toolbar, Validate, Resize, CSS, Images, Colour, Structure, Tools, Doc Info, Refs, IE Options and a pulldown menu with a graphic with a plus sign in it that has more options.
We will look at three of the pulldown menus in this overview. Images, Colour and Structure have all the options you need for basic page checking.
We will look at three options under the Images pulldown menu. Image list will give you a new window with all the code for each image. You will need to look for what, if anything is in the alt="" tag. If it has nothing between the quotes it is not accessible.
Toggle Images/ALT will replace the images on the page with its ALT tag. This will be done on the same page and not in a new window.
Sow Images will show image elements like the ALT tag beside the image. If there is not an ALT tag, the words, no alt, will appear gight next to the image.
Grayscale under the Colour pulldown menu will render any page in black and white. This is often a very good way to visually see how a page might look to someone with color blindness. Often you will see a background color and a text color different shades of the same color. For example, a dark blue background with a light blue text.
The Color Contrast Analyser open a small application that allows you to use the mouse and click on the background color and do the same thing with the text color. Both colors are translated into numbers in a database. If the color is below a certain number you are told that the color contrast is not sufficient for easy reading. You will also be told if the combination passes.
The Structure pulldown menu contains many webpage evaluation options. There are three that are essential to basic accessibility evaluation. The first is Heading Structure. This option will open a new window which will reveal the heading structure of the page including the content. If you look at the original page and there are obvious font size changes to show structure in the document and the new window shows that there are actually no headings, this means that the webpage was designed with the use of FONT SIZE and will not be read by a screen reader properly. The screen reader user will not be able to detect that there is any true heading separation.
The Fieldset/Labels option will show if there are any labels for form objects. The Fieldset element, while important, is not as essential as the label. Without the label element, there is a good chance that users of screen readers will not get the information needed to complete the form.
The Show Table Headers option will look at a data table and open a new window that will show the table and if the table has headers. Header will be shown with a black background with the text of the header cell in Yellow and boldfaced.
There are a number of ways in which the AIS toolbar can inform you of the accessibility of images on a page. Since how images are used, plays a key role on how users with disabilities experience your content, learning how to use this pulldown menu is very important.
It will help you to understand the rest of this presentation if you spend a moment looking at the screenshot of the CBS News page. As you look at the images, try to remember what the images show
The first option in the Images pulldown menu is Image List (new window). This is very helpful to those people who work with web code. It shows the actual code of each image. Even though you may not understand code or even care to, knowing what the image code looks like can tell you a great deal.
In this screenshot, you will notice two arrows. The red arrow, points to a small icon with some text that indicates that there is only one instance of this image and it has no ALT tag. ALT tags are tags that allow the developer to enter a text description of the image. If an image has no ALT tag, a screen reader will say, IMAGE. If the image has an ALT tag, the screen reader will read what is in the tag instead of just saying IMAGE.
The black arrow points to the ALT tag. In this instance the ALT tag has nothing in it. You put the text description of the image between the quotes in the ALT tag.
At the bottom of the screenshot is a banner that contains the graphical text, CBS NEWS. The ALT tag would look like this. alt="cbs news".
The Toggle Image/Alt pulldown menu under Images, will reformat the page and replace images with what is in the ALT tag. If there is nothing in the ALT tag, no alt will be placed next to that image.
At the very top of this screenshot, you will notice that there are two quotes. This shows a type of image that is often used by Webmasters to control the layout of a page. These images are called spacers. They are not visible at all. They have no meaning to the content of the page. They simply allow Webmasters to position thing on a page for cosmetic reasons.
A screen reader has no idea what an image is used for and spacer images will be announced to the user as IMAGE if there is no ALT tag. So how are images like this handled? Speech users don't care about spacer images. As a sighted person you really don't either. Since spacer images are the same color as the background of the page or they are transparent, you don't even know they are there. There is a way of handling this situation so that screen reader users don't know they are there either. All that needs to be done is to put a space in the ALT tag. The technical term for this is a NULL ALT TAG. It looks like this. alt=" ". With the space in the ALT tag, screen readers will pass by the image and treat it like it was not even there.
The Show Images menu option does two things. A small dialog box will appear on the screen that will give you the number of images without alt tags. The technical term is alt attributes. So saying ALT tags and ALT attributes is the same thing.
This may be the best option for faculty and administrators, once they understand what ALT tags are and how they need to be treated. This options shows the images on the screen with the ALT tag or no alt notification.
The Gif Flicker test is important because flickering or moving images like scrolling text can cause seizures in those with such disorders. But it is really more than that. Many users for whom English is a second language or those who are dyslexic have a real problem with scrolling or shimmering text.
This slide shows the legend or meaning of the different colors and icon symbols assigned to images that move. Generally speaking, if the image has a reb background with an x in it, the image fails the test for the image. The yellow background with the caution symbol means that the image is questionable. The thing to remember is that if there is not a good educational reason for using the animated image, it is best to avoid using them at all.
