2B An Introduction to Web Accessibility: From Alt Tags to AJAX

Speaker: Jan Richards- Adaptive Technology Resource Centre (ATRC) University of Toronto
Location: Room 218A CNIB conference centre 1:30

Jan Richards, M.Sc. is a UI Design Specialist at the ATRC, University of Toronto. His email is Jan.richards (at) utoronto.ca

Olita Vice President Petter Ellinger introduces Jan Richards
Jan has designed the web based teaching tool that helps identify children with special needs and sign link studio.

Majority of the room has seen the use of alt Tags. Approx 30% of the room has heard of the term AJAX. 50% of the audience is involved in the development of web content.

Alt tags are the most commonly identified web accessibility method.

AJAX: stands for asynchronous Javascript and XML. It allows webpages to update themselves at any time without having to refresh the page (thus asynchronous). AJAX is often used with DHTML together. DHTML allows custom non-HTML controls to be created. This causes a variety of issues. A description of a custom made window side bar (slider) is given. When there is a DHTML slider drawn by the author to work like a slider. The browser has difficulty interpreting the function of a slider.

AGENDA

Basic Problem
Components of Accessibilty
*Goal of User Agents
*Special purpose interfaces
*Universal Design
*Accessibilty Guidelines
*WCAG 2.0
*Authoring Help
*AJAX HTML ARIA
*Accessible DHTML Example
*Conclusion

Basic Problem
Authors seek to convey information and control the end-user experience. In diong so they lock the content ( Images of text, and rigid presentation) Example of logo branding by corporations is given. Fonts/images controlled and strictly laid out. Bringing the text print mindset of stationary letterhead, to the web.

Unlike text there are different uses for web and users with disabilities have different needs, or users in different environments. All of this has impact on the user experience. The user should have a degree of control over their web experience to allow for these extraneous factors.

For instance the ability to use a voice synthesizer to be able to access web while on the move, without having to look at a screen, or have electronic text converted into braille.

Components of Web Accessibility
The end to end prcocess is described. From Developers using authoring and evaluation tools to create content on the web.
Users use assistive technologies to to access browsers and media players in order to experience the web content.

Components of Web Accessibility
Content (Via HTML,CSS, JavaScript),
Browser (Semantic processing, Visual Processing),
Mapped to Platform (Platform accessibiilty service- MSAA, GNOME accessibility toolkit API) and from there to the
Assistive technology display.

User Agents
Peripheral devices hardware, software used by those with disabilities to access mainstream software. Browsers are viewed through assistive technology lense.
e.g. Screen readers, voice recognition, alternative keyboards, word prediction, alternative mice, refreshable braille display.

User agents: Browser settings
Now Browser functionality is picking up tasks that used to be available only by assistive technology. For example IE Accessibility settings -the magnifyer setting under IE accessibility. Always expanding alt text for images. Reset text size to medium while zooming, Reset zoom level to 100% for new windows and tabs.

Special Purpose Interfaces
An accessible version creating a seperate interface but!
seperate interfaces are not a good idea because
* they are additional work to deveop
*additional work to maintain
*attempting to re-invest assistive technologies without sufficient experience and user input falls short.
* users want consistent experiences.
*The best approach is “Universal Design” – build a flexible model for all users.
Special purpose interface example is explored -to set the temperature for an application. The thought was there would be a temperature option temperature with a text box with number input. What was actually produced was a list of numbers in 6 columns with sliders in order to choose each digit not thinking that the blind can actually type in the number of the temperature.

Lesson learned
*Standards exist to support interoperability
* These should be followed since you do not always know swhat form teh client woudl like
* User interface design standards help people transfer knowledge

Universal Design Principles Link Given www.design.ncsu.edu/cud/about_ud/udprincipleshtmlformat.html
* Equitable use
*Flexibility in Use
* Simple and intuitive
* Perceptible INformation
*Tolerance for error
* Low physical Effort
* Size and space for approach and use
www.design.ncsu.edu/cud/about_ud/udprincipleshtmlformat.html

Key Benefit is recognizing “curb cut” opportunities. Changes made that actually help everyone. The advantage of curb cutting was that the adaptation was in use for
* delivery carts, baby strollers, bikes.
* people accessing visual inforamtion o n very small devices or screens have similar needs to those that have low vision.
* people accesssing audio information have similar needs as people that are deaf
* automated processes act “deaf” and “blind” “google search engine is a blind user with a billion friends and a trillion dollars.”

Accessibility Guidelines
* Best web accessibility is W3C Web Content Accessibility guidelines
www.w3.org/TR/WCAG20

WCAG 2.0 Percievable

Text alternatives to non text content depends on p urpose of content
- control or accepts user input (describe its purpose)
Time Based Media (provide descriptive ID)
Test or exercise ( provide descriptive ID)
Sensory Experience (provide descriptive ID
CAPTCHA (Completely automated public turing test to tell computers and humans apart) – Note purpose and provide alternatives forms of CAPTCHA in another mode
q: who uses audio captcha-Hotmail, MS passport uses CAPTCHA audio
q: what do you think of flash: J -good video format over the web in a way that is reliable. The audience member notes it interferes with working with screens. J-Info in accessible flash is available. “Webaim”
Decoration Formating Invisible: Help Assistive technology ignore it (i.e. alt=”")
q: is there any current analyzers for web2.0, Bobby Software is used for 1.0. J- Webaim actually has one. ATRC has one that is called Achecker. Aprompt used to repair static html. q: Are there Developer plugins for firefox available? J- yes
Example is given of website display with Alt text ON vs not available. It is apparent that text alternatives on, the webpage is much more understandable.

The parts of time based media can be made accessible by
Audio
-captions (prerecorded)
-captions ( live)
-sign language translation
Video
-Audio descriptions
-extended audio descriptions
Interaction
- text

Text graphics to be made more distinguishable
- contrast
-resizeability
-ability to control audio
-low or no background audio

WCAG 2.0 Operable
* Every funciton must be accessible from the keyboard
* No Keyboard Traps
* Provide enough time
* avoid flashign content that could cause seizures
* provide structure to help the user navigate ( headers, bypass, links, tab order, etc)

WCAG 2.0 Understandable
* Language of the page and language shifts shouldb e marked up
* Reading level should be considered
* Abbreviations and words are used in unusual restricted ways, this can be marked up
* Pronounciation aids can be provided
* Don’t shift the users context just because they move the focus or chagne teh setting of a control
*Keep navigation and control labelling consistent
* Help the user identify input errors
* Help prevent mistaken user submissions

W3AG 2.0 Robust

Authoring Help
* An important tool for helping to ensure accessible web are automated accessibility checkers
wave.webaim.org
checker.atrc.utoronto.ca
*some are integrated into authoring tools
*some repair tools available
Accessibility awareness is being added to web authoring tools
* Ask for authoring tools that meet the W3C authoring Tool Accessibility Guidelines ATAG 2.0
One day accessibility may be handled as routinely as spell checking is now

AJAX DHTML ARIA
Web applications using AJAX make use of DHTML to create custom non HTML controls (As mentioned previously)

This is a major challenge for accesibility because it stops semantic processing which means there isn othing going to accessibility service and thus nothing showing in the accessible technology display

*Without the slider, semantics, the browser doesn’t know what the slider is. It is the sighted users eye that is composing the elements

The old Solution
Described using elemenet to provide alternative which means 2 versions to maintain. a fncy one to use new technology and a special purpose one that is seldom updated as a result

A better solution
ARIA- Accessible rich internet applications, emergiang standard that defines semantic roles states and properties of user interface controls
allows the browser to use these and communicate them to assistive technologies
-roles (alert button )
-states (checked, disabled)
-properties (discribedby)

ARIA reconnects the semantics and is supported by firefox 3 and IE 8 will have this technology.

Keyboard Access
-in HTML4 tabindex lets authors control the way tab moves teh focus between form controls and hyperlinks
-HtmL5 and ARIA all elements cn receive focus as follows
no tabindex- same as html4
tabindex =-1 not in tab order- you can get focus programmatically from the mouse

Accessible DHTML example given of an ordered list.

Tab container is focused by teh tab button but the individual tabs are not. keyboard navigation to them will be done with javascript instead.

the Aria “role and “labled” connect the elements. eg: Role=”tablist”

Prebuilt Widgets
* Many developers don’t design their own DHTML controls
Instead they use pre-built controls from widget sets
The dojo widget set is being updated with Aria.

CONCLUSIONWeb access is readily attainable when the author:
-Gives access to the underliying information to control the user experience

Queston and Answer

Q: software to software testing- we do not have the characteristics of those we design for – A: Human testers are very valuable

Q: is there a list of words to avoid so taht the screen reader does not mangle the words with respect to alt tags. A: probably HTML tags should be avoided in text and screenreaders can insert by themselves

Debbie Pantazis