Posts made by Christie Mason

Tables Accessibility
HTML tables are often chided for being inaccessible layout methods — they're difficult to interpret by non-visual browsers and more often than not are used against their purpose for presentational effects. Along with the HTML 4.01 standard came some new tags and attributes dedicated to creating accessible tables. It takes a bit of work to make a sophisticated table accessible, but is ultimately worth the effort.
WAI HTML Table Linearizer
Online, single page renderer to check table linearization
Creating Accessible Tables
Christie Mason
These are some links that I've collected, I haven't reviewed them in for around a year so I apologize if any are broken links or deprecated info. Christie Mason

ACCESSIBLE HTML/XHTML FORMS

In this first look at forms and accessibility we'll cover the very basics you should consider if you are to help as many users as possible to interact with you and your web site just as you would like them to.

MANY TOOLS

For those developers out there who would like to try and build an accessible site, or would like to just have some neat and useful testing tools, we have collected a few which are provided here as a service.

ACCESSIBLE INFORMATION SOLUTIONS - WEB ACCESSIBILITY TOOLBAR

The Web Accessibility Toolbar is provided by the Accessible Information Solutions (AIS) team at the National Information and Library Service (NILS), Australia. Please read the Terms of Use before downloading and installing the Web Accessibility Toolbar.

The Web Accessibility Toolbar has been developed to aid manual examination of web pages for a variety of aspects of accessibility. It consists of a range of functions that:

  • identify components of a web page
  • facilitate the use of third party online applications
  • simulate user experiences
  • provide links to references and additional resources.

BOBBY

Welcome to the Bobby Online Free Portal. This free service will allow you to test web pages and help expose and repair barriers to accessibility and encourage compliance with existing accessibility guidelines, such as Section - and the W C's WCAG. To learn about products to test websites of all sizes for accessibility issues, please visit the accessibility section on www.watchfire.com.

Please note: This online dialog tests only one page at a time. The server limits the number of pages it checks in order to keep the online service available to all to one web page per minute.

COLOR DEFICIENT VISION

Simulation in the Web Designer's Color Card and Chart

COLOUR (COLOR) CONTRAST ANALYSER

Guideline . of the Web Content Accessibility Guidelines . requires that foreground and background colour combinations provide sufficient contrast when viewed by someone having colour deficits, or when viewed on a black and white screen. Two colours provide good colour visibility if the brightness difference and the colour difference between the two colours are greater than a set range. They suggest a colour contrast algorithm, which is used in this test. The algorithm is under development, and may be likely to change. Any changes to their algorithm will be updated on this page.

DEMONSTRATION OF THE LONGDESC ATTRIBUTE

When images are provided to illustrate complex ideas, the same information MUST also be provided in an accessible form.

In this case, the image (a .PNG file) would be generated on the fly from information stored in a database (or in this case a log file) which is constantly being modified. None-the-less, because the basic information that is being displayed is originating from ASCII text, by using the LONGDESC attribute we can provide the same information as text for users and user agents who cannot extract the information from the image.
Code Sample:
"img src="/images/ctry_usage_ - .png" style="width: - px; height: - px; border: none;" alt="Usage by Country for June in Pie Chart format" longdesc="/longdesc/ctry_usage.html""
"span style="font-size: - pt; color: White;"""a href="/longdesc/ctry_usage.html" title="Link to the usage information represented in the pie chart""d"/a""/span"

DEVELOPER GUIDELINES - GRAPHS AND CHARTS

A chart or graph is essentially an image with detailed information. Some charts or graphs have more information and data in them than others. Text browsers and screen readers cannot convey images to their users, so an equivalent alternative to the essential information that is visually available from the chart or graph must be provided. The amount of alternative information to provide depends on the contextual use of the chart or graph, but generally it should include all the information available to the sighted user.

DIVE INTO ACCESSIBILITY

30 days to a more accessible web site

This book answers two questions. The first question is "Why should I make my web site more accessible?" If you do not have a web site, this book is not for you. The second question is "How can I make my web site more accessible?" If you are not convinced by the first answer, you will not be interested in the second.

(Note: Site is an excellent example of being what they're teaching)

HISOFTWARE LINK VALIDATION UTILITY

Dramatically reduce errors related to site presentation and usability with this comprehensive Link Validation tool. Save dramatically on time, cost, and complexity associated with building, deploying, and maintaining Web sites that function properly. HiSoftware content quality solutions provide "out-of-the-box testing and reporting for Accessibility, Privacy, Searchability and Usability standards, empowering organizations to keep up with ever-changing Web technologies and standards. The value-added Link Validation tool provides structure and organization validation to your site, allowing both content and site structure to be of the highest quality.

HOW-TOS AND DEMOS

How-tos and Demos
Graphics

  • Alt Text for a Functional Graphic
  • Alt Text for a Logo
  • Alt Text for Decorative Images and Spacers
  • AltText for a Link that contains both Graphics and Tex
  • tIncluding a Graph and Its Description on the Same Page
  • A Graph with a Description in a Separate, Linked File
  • Associating a Graph and its Description with the longdesc Attribute

Data Tables

  • Identifying Column and Row Headers
  • Associating Data Cells and Header Cells in a Complex Table
  • A Data Table with a Summary Attribute
  • A Data Table with a Caption element and a Summary Attribute

Forms

  • Labeling Input Fields
  • Grouping Related Items on a Form
  • Radio Buttons with fieldset, legend, and label
  • Buttons Using input elements of type = button and button elements
  • Graphical buttons
  • Labeling Pulldown Menus

Multimedia

  • Video with Closed Captions and Audio DescriptionFlash

LONGDESC LINKER FOR INTERNET EXPLORER 6

On more that a few occasions people have complained that Internet Explorer doesn't have a convenient way to view longdesc attributes. Now it is true that they do expose it programmatically so there is noting to stop AT from making use of longdesc. But there are two reasons why someone using IE - on its own might want to have access to longdesc attributes.They might simply want to see a description of the image (particularly if they couldn't make out what the image is of).They are developers who wish to test their longdesc links.

OBSERVING USERS WHO WORK WITH SCREEN READERS

The Communication Technologies Branch of the United States National Cancer Institute (part of National Institutes of Health and Department of Health and Human Services) has been conducting usability testing with people with disabilities, specifically blind and lowvision users, to

  • understand the relationship between accessibility and usability
  • understand how blind and low-vision users work with Web sites
  • develop research-based guidelines for accessibility and usability
  • assess the usability of specific Web sites for blind and low-vision users

QUICK TIPS TO MAKE ACCESSIBLE WEB SITES

  • Images & animations: Use the alt attribute to describe the function of each visual.
  • Image maps. Use the client-side map and text for hotspots.
  • Multimedia. Provide captioning and transcripts of audio, and descriptions of video.
  • Hypertext links. Use text that makes sense when read out of context. For example, avoid "click here."
  • Page organization. Use headings, lists, and consistent structure. Use CSS for layout and style where possible.
  • Graphs & charts. Summarize or use the longdesc attribute.
  • Scripts, applets, & plug-ins. Provide alternative content in case active features are inaccessible or unsupported.
  • Frames. Use the noframes element and meaningful titles.Tables. Make line-by-line reading sensible.
  • Summarize.Check your work.
  • Validate. Use tools, checklist, and guidelines at http://www.w3.org/TR/WCAG

SAFE WEB COLOURS FOR COLOUR-DEFICIENT VISION

Colour is increasingly used these days to help convey information. When one in twelve men have some measurable degree of colour vision deficiency, the use of certain colours in certain ways can cause difficulty when navigating web pages or software, and even total illegibility in some cases.

SECTION 508

Section - requires that Federal agencies' electronic and information technology is accessible to people with disabilities. The Center for Information Technology Accommodation (CITA), in the U.S. General Services Administration's Office of Governmentwide Policy, has been charged with the task of educating Federal employees and building the infrastructure necessary to support Section - implementation. Using this web site, Federal employees and the public can access resources for understanding and implementing the requirements of Section - .

SECTION 508 SUMMARY TABLE

Use the table below to give you some basic help with the Section Requirements for Web Pages, you can also print it out and use it as a checklist.

TEST YOUR SITE NOW WITH CYNTHIA SAYS TO SEE IF IT IS ACCESSIBLE!

Cynthia is a web content accessibility validation solution, it is designed to identify errors in design related to Section - standards and the WCAG guidelines. The main purpose of this portal is to educate web site developers in the development Web Based content that is accessible to all. This online test only validates one page at a time. Note this demo will test about one page per minute / per site.

Accessibility Report Mode
Do not fail pages for WCAG Priority - and - errors, simply warn me.
Include the Alternative Text Quality Report
Include File source on Accessibility Failures
Emulate this Browser:

Do you want to have the functionality of Cynthia Says on your Desktop?

You can obtain the Same features of the Cynthia Says portal and more for your desktop. This special edition of AccVerify is being made available to help educate web content developers on the development of accessible web sites.

UIACCESS.COM

UIAccess.com is a resource for universal interface design and usable accessibility information. The primary purpose of this web site is to provide free information on web accessibility. See the extensive list of resources, some exclusive to UI Access.

VISCHECK

Vischeck simulates colorblind vision. Daltonize corrects images for colorblind viewers.

W3C WEB ACCESSIBILITY INITIATIVE - WAI

An initial introduction to resources for people new to Web accessibility

WASP LEARN - Accessibility

You really can have the best of both worlds — a site that’s accessible and visually appealing, too. Find out how and everyone will love you.

WEBQA

Watchfire® WebQA, the next generation of Linkbot, is a website quality testing tool for small or departmental websites. WebQA assists with quality assurance and accessibility testing by reporting on web content issues to help developers and quality assurance staff pinpoint and fix quality, interaction and accessibility defects. WebQA supports accessibility testing by integrating the features of Watchfire® Bobby. Using these features, you can test your level of compliance with Section - or the W C's WCAG accessibility standards. In addition to testing content, WebQA can also help you edit your site's metadata to improve search ranking and internal site searchability. Read the WebQA Factsheet (PDF, - KB).

WebQA scans web pages for problems, and generates reports, including:broken linksspelling errorsslow loading pagesaccessibility issues

WebQA scans through the following technologies:JavascriptFlashDynamic contentSecure pages (https)Media filesSession IDs

WEBXACT

WebXACT is a free online service that lets you test single pages of web content for quality, accessibility, and privacy issues.

Tables Accessibility
HTML tables are often chided for being inaccessible layout methods — they're difficult to interpret by non-visual browsers and more often than not are used against their purpose for presentational effects. Along with the HTML 4.01 standard came some new tags and attributes dedicated to creating accessible tables. It takes a bit of work to make a sophisticated table accessible, but is ultimately worth the effort.
WAI HTML Table Linearizer
Online, single page renderer to check table linearization
Creating Accessible Tables
Christie Mason
These are some links that I've collected, I haven't reviewed them in for around a year so I apologize if any are broken links or deprecated info. Christie Mason

ACCESSIBLE HTML/XHTML FORMS

In this first look at forms and accessibility we'll cover the very basics you should consider if you are to help as many users as possible to interact with you and your web site just as you would like them to.

MANY TOOLS

For those developers out there who would like to try and build an accessible site, or would like to just have some neat and useful testing tools, we have collected a few which are provided here as a service.

ACCESSIBLE INFORMATION SOLUTIONS - WEB ACCESSIBILITY TOOLBAR

The Web Accessibility Toolbar is provided by the Accessible Information Solutions (AIS) team at the National Information and Library Service (NILS), Australia. Please read the Terms of Use before downloading and installing the Web Accessibility Toolbar.

The Web Accessibility Toolbar has been developed to aid manual examination of web pages for a variety of aspects of accessibility. It consists of a range of functions that:

  • identify components of a web page
  • facilitate the use of third party online applications
  • simulate user experiences
  • provide links to references and additional resources.

BOBBY

Welcome to the Bobby Online Free Portal. This free service will allow you to test web pages and help expose and repair barriers to accessibility and encourage compliance with existing accessibility guidelines, such as Section - and the W C's WCAG. To learn about products to test websites of all sizes for accessibility issues, please visit the accessibility section on www.watchfire.com.

Please note: This online dialog tests only one page at a time. The server limits the number of pages it checks in order to keep the online service available to all to one web page per minute.

COLOR DEFICIENT VISION

Simulation in the Web Designer's Color Card and Chart

COLOUR (COLOR) CONTRAST ANALYSER

Guideline . of the Web Content Accessibility Guidelines . requires that foreground and background colour combinations provide sufficient contrast when viewed by someone having colour deficits, or when viewed on a black and white screen. Two colours provide good colour visibility if the brightness difference and the colour difference between the two colours are greater than a set range. They suggest a colour contrast algorithm, which is used in this test. The algorithm is under development, and may be likely to change. Any changes to their algorithm will be updated on this page.

DEMONSTRATION OF THE LONGDESC ATTRIBUTE

When images are provided to illustrate complex ideas, the same information MUST also be provided in an accessible form.

In this case, the image (a .PNG file) would be generated on the fly from information stored in a database (or in this case a log file) which is constantly being modified. None-the-less, because the basic information that is being displayed is originating from ASCII text, by using the LONGDESC attribute we can provide the same information as text for users and user agents who cannot extract the information from the image.
Code Sample:
"img src="/images/ctry_usage_ - .png" style="width: - px; height: - px; border: none;" alt="Usage by Country for June in Pie Chart format" longdesc="/longdesc/ctry_usage.html""
"span style="font-size: - pt; color: White;"""a href="/longdesc/ctry_usage.html" title="Link to the usage information represented in the pie chart""d"/a""/span"

DEVELOPER GUIDELINES - GRAPHS AND CHARTS

A chart or graph is essentially an image with detailed information. Some charts or graphs have more information and data in them than others. Text browsers and screen readers cannot convey images to their users, so an equivalent alternative to the essential information that is visually available from the chart or graph must be provided. The amount of alternative information to provide depends on the contextual use of the chart or graph, but generally it should include all the information available to the sighted user.

DIVE INTO ACCESSIBILITY

30 days to a more accessible web site

This book answers two questions. The first question is "Why should I make my web site more accessible?" If you do not have a web site, this book is not for you. The second question is "How can I make my web site more accessible?" If you are not convinced by the first answer, you will not be interested in the second.

(Note: Site is an excellent example of being what they're teaching)

HISOFTWARE LINK VALIDATION UTILITY

Dramatically reduce errors related to site presentation and usability with this comprehensive Link Validation tool. Save dramatically on time, cost, and complexity associated with building, deploying, and maintaining Web sites that function properly. HiSoftware content quality solutions provide "out-of-the-box testing and reporting for Accessibility, Privacy, Searchability and Usability standards, empowering organizations to keep up with ever-changing Web technologies and standards. The value-added Link Validation tool provides structure and organization validation to your site, allowing both content and site structure to be of the highest quality.

HOW-TOS AND DEMOS

How-tos and Demos
Graphics

  • Alt Text for a Functional Graphic
  • Alt Text for a Logo
  • Alt Text for Decorative Images and Spacers
  • AltText for a Link that contains both Graphics and Tex
  • tIncluding a Graph and Its Description on the Same Page
  • A Graph with a Description in a Separate, Linked File
  • Associating a Graph and its Description with the longdesc Attribute

Data Tables

  • Identifying Column and Row Headers
  • Associating Data Cells and Header Cells in a Complex Table
  • A Data Table with a Summary Attribute
  • A Data Table with a Caption element and a Summary Attribute

Forms

  • Labeling Input Fields
  • Grouping Related Items on a Form
  • Radio Buttons with fieldset, legend, and label
  • Buttons Using input elements of type = button and button elements
  • Graphical buttons
  • Labeling Pulldown Menus

Multimedia

  • Video with Closed Captions and Audio DescriptionFlash

LONGDESC LINKER FOR INTERNET EXPLORER 6

On more that a few occasions people have complained that Internet Explorer doesn't have a convenient way to view longdesc attributes. Now it is true that they do expose it programmatically so there is noting to stop AT from making use of longdesc. But there are two reasons why someone using IE - on its own might want to have access to longdesc attributes.They might simply want to see a description of the image (particularly if they couldn't make out what the image is of).They are developers who wish to test their longdesc links.

OBSERVING USERS WHO WORK WITH SCREEN READERS

The Communication Technologies Branch of the United States National Cancer Institute (part of National Institutes of Health and Department of Health and Human Services) has been conducting usability testing with people with disabilities, specifically blind and lowvision users, to

  • understand the relationship between accessibility and usability
  • understand how blind and low-vision users work with Web sites
  • develop research-based guidelines for accessibility and usability
  • assess the usability of specific Web sites for blind and low-vision users

QUICK TIPS TO MAKE ACCESSIBLE WEB SITES

  • Images & animations: Use the alt attribute to describe the function of each visual.
  • Image maps. Use the client-side map and text for hotspots.
  • Multimedia. Provide captioning and transcripts of audio, and descriptions of video.
  • Hypertext links. Use text that makes sense when read out of context. For example, avoid "click here."
  • Page organization. Use headings, lists, and consistent structure. Use CSS for layout and style where possible.
  • Graphs & charts. Summarize or use the longdesc attribute.
  • Scripts, applets, & plug-ins. Provide alternative content in case active features are inaccessible or unsupported.
  • Frames. Use the noframes element and meaningful titles.Tables. Make line-by-line reading sensible.
  • Summarize.Check your work.
  • Validate. Use tools, checklist, and guidelines at http://www.w3.org/TR/WCAG

SAFE WEB COLOURS FOR COLOUR-DEFICIENT VISION

Colour is increasingly used these days to help convey information. When one in twelve men have some measurable degree of colour vision deficiency, the use of certain colours in certain ways can cause difficulty when navigating web pages or software, and even total illegibility in some cases.

SECTION 508

Section - requires that Federal agencies' electronic and information technology is accessible to people with disabilities. The Center for Information Technology Accommodation (CITA), in the U.S. General Services Administration's Office of Governmentwide Policy, has been charged with the task of educating Federal employees and building the infrastructure necessary to support Section - implementation. Using this web site, Federal employees and the public can access resources for understanding and implementing the requirements of Section - .

SECTION 508 SUMMARY TABLE

Use the table below to give you some basic help with the Section Requirements for Web Pages, you can also print it out and use it as a checklist.

TEST YOUR SITE NOW WITH CYNTHIA SAYS TO SEE IF IT IS ACCESSIBLE!

Cynthia is a web content accessibility validation solution, it is designed to identify errors in design related to Section - standards and the WCAG guidelines. The main purpose of this portal is to educate web site developers in the development Web Based content that is accessible to all. This online test only validates one page at a time. Note this demo will test about one page per minute / per site.

Accessibility Report Mode
Do not fail pages for WCAG Priority - and - errors, simply warn me.
Include the Alternative Text Quality Report
Include File source on Accessibility Failures
Emulate this Browser:

Do you want to have the functionality of Cynthia Says on your Desktop?

You can obtain the Same features of the Cynthia Says portal and more for your desktop. This special edition of AccVerify is being made available to help educate web content developers on the development of accessible web sites.

UIACCESS.COM

UIAccess.com is a resource for universal interface design and usable accessibility information. The primary purpose of this web site is to provide free information on web accessibility. See the extensive list of resources, some exclusive to UI Access.

VISCHECK

Vischeck simulates colorblind vision. Daltonize corrects images for colorblind viewers.

W3C WEB ACCESSIBILITY INITIATIVE - WAI

An initial introduction to resources for people new to Web accessibility

WASP LEARN - Accessibility

You really can have the best of both worlds — a site that’s accessible and visually appealing, too. Find out how and everyone will love you.

WEBQA

Watchfire® WebQA, the next generation of Linkbot, is a website quality testing tool for small or departmental websites. WebQA assists with quality assurance and accessibility testing by reporting on web content issues to help developers and quality assurance staff pinpoint and fix quality, interaction and accessibility defects. WebQA supports accessibility testing by integrating the features of Watchfire® Bobby. Using these features, you can test your level of compliance with Section - or the W C's WCAG accessibility standards. In addition to testing content, WebQA can also help you edit your site's metadata to improve search ranking and internal site searchability. Read the WebQA Factsheet (PDF, - KB).

WebQA scans web pages for problems, and generates reports, including:broken linksspelling errorsslow loading pagesaccessibility issues

WebQA scans through the following technologies:JavascriptFlashDynamic contentSecure pages (https)Media filesSession IDs

WEBXACT

WebXACT is a free online service that lets you test single pages of web content for quality, accessibility, and privacy issues.

I find it odd that the same people who would recoil in horror at using static, px, font sizes have no hesitation in recommending static, px, sizes for screen/div widths. As long as *some* have different preferences and needs, then the best idea is to not assume something as *all*.  Less is better.  Less format control means more people will be able to access and use the content.

I really hesitated to post the link to the line width article because
  1. It's old - 2002 is old in eTime.
  2. It's stating CPL which is a print unit of measurement.(So is em but at least em is used as an online measurement and it resizes well).
  3. It doesn't say what monitor sizes were used at what resolution.
  4. It doesn't say what colors where used or even if it was white text on black background or black on white (many people "assume" that dark text is best but several informal tests by web designers have shown that preferences are almost evenly split.  Does anyone remember using a CRT? They were all light text on dark backgrounds. DOS/Command Prompt still presents white text on a black background)
  5. It doesn't say what font was used
  6. It doesn't say what font size is being used
  7. It doesn't say how many characters were in a paragraph - short or  bulleted is best online, not long wordy paragraphs
  8. It doesn't say what line spacing was used
  9. It doesn't say what level of language is being used (did they use the same text for young and old? 18 - 61 is too wide of a range to determine *all* preferences.  Different decades have different exposure rates to different media.)
  10. It doesn't say if the study used people who read text on monitors often, or never before. (*I* have never liked print materials with 1 - 1.5" white space on each side but that's been a common format that most generations of people have learned to EXPECT in printed material.  Expectations create preferences.  I have an impression those types of margins were originally set to make it easy to bind pages together and allow wear from page turning to occur outside the text area.  Those aren't issues with online presentations.)
Compare the readability of Device Independent Authoring Language (DIAL) vs Patent for Accessible Blackberry (which uses NO CSS and only has an embedded body background color) I admit that to even scan the patent article I reduced my browser width because of the presentation's density and lack of visual clues.  Online, people scan - they don't read unless the content or need is compelling.

Christie Mason