Transcript Document

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
Assistive Technology
Static font
and color
Requires
mouse
Graphics
only
Hard to reach
controls
Screen
readers
A
P
I
s
Accessible IT & AT together
Font and color
settings
Screen readers
Magnifiers
Magnifiers
Speech
Recognition
Special
keyboards &
switches
Mouse is
optional
Speech
Recognition
Text with
graphics
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
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
Provide
Provide
Provide
useful names for all frames
useful names for all pages used in frames
an image link to the main content of the page
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!