Designing Accessible Notes/Domino 6 Applications

Shannon RapuanoAccessibility ConsultantCLP Notes DeveloperIBM Accessibility Centershannont@us.ibm.com

Agenda

Accessibility and worldwide legislation

Notes 6 accessibility enhancements

Techniques for designing accessible applications

Testing accessibility using assistive technology

Resources and References

Q&A

What is Accessibility?Accessibility is an attribute of information technology that allows it

to be used by people with varying abilities

Inaccessible IT Assistive Technology Accessible IT & AT together

Static font and color

Requires mouse

Graphics only

Hard to reach controls

Screen readers

Magnifiers

Speech Recognition

Special keyboards & switches

Screen readers

Magnifiers

Speech Recognition

Special keyboards & switches

Font and color settings

Mouse is optional

Text with graphics

Easy to reach controls

APIs

US:Section 508 (2001)

ADA (1990)State Regulations

EU:Legislation Pending

Web Focus

Australia:

Disability Discrimination

Act

Worldwide Accessibility Legislation

Japan:

Legislation Pending

Web Focus

Section 508

When Federal agencies develop, procure, maintain or use Electronic Information Technology (EIT), the EIT must allow Federal employees or members of the public with disabilities to have access and use of information comparable to someone who does not have a disability

Effective June 21, 2001

Accessibility guidelines provided for:– Software and Web– Desktop/Portable Computers and Self-Contained Devices– Telecommunications and Multimedia– Functional Performance Criteria

Notes 6 Accessibility Enhancements Demo Low vision support

– Inherit system display settings if “Use System Colors” set– Increase text size

Enhanced keyboard support– Extended accelerator keys– Tab to navigate read only documents– Navigate tabbed tables– Windows menu

Views– Sort and customize views without using Designer– Alternate text for view icons

Techniques for accessible applications

Subset of Section 508 software and Web guidelines– New techniques for Notes 6– Most common accessibility issues– More information on our site at www.ibm.com/able

Techniques– Images– Forms and views– Keyboard access– Tables– Web navigation

Accessible Images

Section 508 guideline – 1194.22 (a) A text equivalent for every non-text element

shall be provided.

Techniques– Provide text equivalents for view icons New!

– Provide alternate text for important images– Provide alternate text for image hotspots– Provide alternate text for images or image resources

referenced in pass-thru HTML

Accessible Images – View Icons (New!)

View icons– Alt text defined for standard view icons in Notes 6– The image filename is read for custom view icons in Notes 6– Standard view icons are not read in R5

Defining text equivalents for view icons– Provide meaningful filename for custom icons (no abbreviations )

View icon: “12/18/2002. red check icon. test shannon rapuano”

Custom icon: “12/18/2002. abc.gif. test shannon rapuano”

Accessible Images – Alternate Text Images

Add descriptive text for image If no alt text specified, treated

as null in Notes 6 (alt=“”) If not alt text specified in R5,

reads URL or filename

Hotspots

If the hotspot is an image, only define alt text for hotspot

Add descriptive text for image Most hotspots are links, so alt

text is required

Accessible Forms and Views Section 508 guidelines

– 1194.21(l) Electronic forms shall allow people using assistive technology to access the information required for completion and submission of the form including directions and cues.

– 1194.21(a) Product functions shall be executable from a keyboard where the function itself or the result of performing a function that can be discerned textually.

Techniques– Provide an HTML TITLE attribute for each editable control New!

– Use HTML LABEL element for Web applications New!– Provide field level help for editable controls (Notes Client)– Set “No focus on F6” on forms and pages New! – Use “on click” to display text pop-ups New!– “Pressing tab key moves to next field” for rich text fields

Accessible Forms – HTML TITLE for Labels (New!)

HTML TITLE attribute programmatically associates field labels so they can be read by screen readers

Web applications– Assistive technology may not support TITLE attribute– Use HTML LABEL element to meet Section 508 guidelines

Client applications– Assistive technology reads TITLE attribute (Access Name)– Provide field level help for more information or R5 applications

Defining labels using HTML TITLE attribute– Open Field Properties box and select HTML tab– Under Title, enter label for the field that matches visual label– Add “savefieldtitleguesses=1” in notes.ini

Accessible Forms – HTML LABEL for Labels (New!)

Assistive technology reads the LABEL element to associate form controls and labels on the Web

Web applications– Screen readers use proximity to identify labels if not defined

explicitly, but not accurate– Explicitly associate labels and controls using the LABEL element

Defining labels using HTML LABEL element– Add pass-thru HTML for field:

– <label for=“sendto”>To:</label>– In Field Properties box, go to HTML tab– Set ID to the “sendto” as defined above

Keyboard Focus on Forms/Pages (New!)

Framesets can make keyboard navigation slow. If a frame is only used for visual effects, skip keyboard focus on the frame.

Web and Client Applications– F6 moves keyboard focus to next frame– If “no focus” is set, the frame is skipped– Notes 6 Discussion uses this technique– Feature only available in Notes 6

Defining F6 access– Open the Form or Page Properties box– Under Options, check “No focus on F6”

Keyboard Access for Text Pop-ups (New!)

Text pop-ups are accessible in Notes 6 when displayed using the option “on click”

Client Applications– Pop-ups activated using “on click” are keyboard accessible– Pop-ups are not accessible in R5, so provide an alternative

Defining keyboard access for pop-ups– Open the Hotspot Pop-up Properties box– Select the Hotspot Info tab– Under Show pop-up , select “On Click”

Accessible Navigation of Web Sites

Section 508 guidelines – 1194.22(i) Frames shall be titled with text that facilitates frame

identification and navigation.– 1194.22(o) A method shall be provided that permits users to skip

repetitive navigation links

Techniques– Provide useful names for all frames– Provide useful names for all pages used in frames– Provide an image link to the main content of the page– Provide a text link to the main content of the page

Accessible Web Navigation – Skip to main

AT reads Web pages sequentially unless there is a “skip” link

Provide a link at the top of the page attached to an unimportant image. The target of the link is the main page content. No impact to visual look.

<a href=“#navskip”> <img src=“blank.gif” alt=“skip to main”></a>…..<a name=“navskip”></a> The main page content…

Provide a text link displayed at the top of the page<a href=“#navskip”>Skip navigation links</a>…..<a name=“navskip”></a>The main page content…

Accessible Web Navigation – Frames and Pages

Screen reader users must read Web pages sequentially unless meaningful frame names are provided to navigate the site

Web applications– If frame name is undefined - listed as “Unlisted” in frame list– If the frame includes a page – use add a meaningful page name

Defining frame and page names– Open Frame or Page Properties box– In Name field, enter useful description– In the example, “Left” is not useful– Do not use abbreviations

Accessible Data Tables (Web only)

Section 508 guidelines– 1194.22(g) Row and column headers shall be identified for data

tables.– 1194.22(h) Markup shall be used to associate data cells and

header cells for data tables that have two or more logical levels of row or column headers

Techniques– Use the TH element to markup table heading cells on data tables– Use the headers attribute on cells of complex data tables

Accessible Data Tables (Web only)

Add table markup so assistive technology can identify row/column headers in data tables

Web applications– Table markup only required for data tables, not layout tables– Use pass-thru HTML to meet the 508 standard

Defining table headers– Create the data table using Designer– Select the table.– Select Edit-Convert to HTML– Choose View-HTML Pane to preview the rendered page– Modify the HTML to add TH element and table headers as needed

Create data table in Domino Designer

Select Edit-Convert to HTML

Use HTML Editor to modify HTML to add TH element (New!)

Testing Notes Client Applications

Test without the mouse

Run an accessibility checker like Teamstudio Analyzer– Sample accessibility filters shipped with latest Teamstudio– Test subset of 508 guidelines (e.g. alt text, frame names)

Test with assistive technology (AT)– Test items checkers cannot validate (e.g. alt text, JavaScript)– Screen readers (e.g. JAWS, Window-Eyes)– Screen magnifiers (e.g. ZoomText Xtra, MAGic)

Test with validation tools like Microsoft Inspect Objects when function isn’t supported by assistive technology

Testing Domino Web Applications

Test without the mouse

Run an accessibility checker like Bobby or Crunchy– Check accessibility of URL (cannot test .NSF file)– Test subset of 508 guidelines (e.g. alt text, frame names, labels)

Test with assistive technology (AT)– Test items checkers cannot validate (e.g. skip, tables, Java)– IBM Home Page Reader (HPR) provides visual tracking, graphics

and text view, ability to save test results– Screen readers (e.g. JAWS, Window-Eyes)– Screen magnifiers (e.g. ZoomText Xtra, MAGic)

References and Resources

Detailed techniques: www.ibm.com/able/accessr5.html Section 508 guidance: www.access-board.gov/sec508/guide Assistive Technology:

– IBM Home Page Reader (www.ibm.com/able)– JAWS and MAGic (www.freedomscientific.com)– Window-Eyes (www.gwmicro.com)– ZoomText Xtra (www.aisquared.com)

Tools– Bobby (bobby.watchfire.com)– Teamstudio Analyzer (www.teamstudio.com)

aNotes/Domino Accessibility Enhancements– On-line help (Accessibility and Keyboard Shortcuts)

Q & A

Please complete your evaluation form!