Designing Accessible Notes/Domino 6 Applications

Shannon Rapuano Accessibility Consultant CLP Notes Developer IBM Accessibility Center [email protected]

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

Static font and color Requires mouse Graphics only

A P I s Assistive Technology

Screen readers Magnifiers Speech Recognition

Accessible IT & AT together

Font and color settings Screen readers Magnifiers Mouse is optional Speech Recognition Text with graphics Hard to reach controls Special keyboards & switches Easy to reach controls Special keyboards & switches

Worldwide Accessibility Legislation

US:

Section 508 (2001) ADA (1990) State Regulations

EU:

Legislation Pending Web Focus

Japan:

Legislation Pending Web Focus

Australia:

Disability Discrimination Act

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  Hotspots    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    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 Use HTML LABEL attribute for each editable control element for Web applications

New!

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 Use HTML LABEL attribute 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: – To: 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.

…..

The main page content…  Provide a text link displayed at the top of the page Skip navigation links …..

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!