Designing Accessible Notes/Domino 6 Applications
Shannon RapuanoAccessibility ConsultantCLP Notes DeveloperIBM Accessibility [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 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!
Top Related