programming with section 508 in mind department of veterans affairs office of information and...
TRANSCRIPT
Programming withSection 508 in MindProgramming with
Section 508 in MindDepartment of Veterans Affairs
Office of Information and Technology IT Workforce Development (ITWD)
in collaboration with VA Section 508 Program Office
ITWD would like to thank the VA Section 508 Program Office for its collaboration on this course.
For more information regarding the VA Section 508 Program Officeor questions about accessibility, please contact: [email protected]
Live Meeting LogisticsLive Meeting Logistics
• To make the presentation as effective as possible, please do the following:– Close applications– Plan for about an hour and a half of training– Turn off your screen saver or move your mouse
periodically during the presentation– Mute your phone– E-mail [email protected] after this session if you are
viewing this as a group in a training center
3
Live Meeting InstructionsLive Meeting Instructions
• Asking Questions and Communicating with the Course Facilitators– Select the Q&A tab at top left of your Live Meeting to ask
questions or provide comments. You can change the color of the box next to your name at the top right, which will provide us with your feedback, so we can adjust the presentation accordingly.
4
Welcome and IntroductionWelcome and Introduction
• Presenters– Vicki Leon
Instructional Designer/Trainer, VA Section 508 Office– Pete Daly
Webmaster, VA Section 508 Office
• Training Purpose– Understand Web 2.0’s impact on web applications– Demonstrate accessible web applications
5
**Participant Poll****Participant Poll**
• Have you sent any applications to the Section 508 Program Office for testing?– Yes– No– Unsure
6
Course OutlineCourse Outline
• Programming for accessibility
• Accessibility issues with dynamic content
• Specification: Accessible Rich Internet Applications (ARIA)
• Validating web applications with testing tools
7
Learning ObjectivesLearning Objectives
• At the end of this training, you will be prepared to:– Define common accessibility issues – Explain accessibility issues with dynamic
content– Include the new W3C ARIA specification in
developing accessible dynamic content– Identify tools available to validate your
applications
8
COMMON ISSUES WHEN PROGRAMMING FOR ACCESSIBILITY
COMMON ISSUES WHEN PROGRAMMING FOR ACCESSIBILITY
Section 1:
9
Common misconceptions when designing a websiteCommon misconceptions when designing a website• All users have a mouse
• JavaScript is always enabled
• Screen readers don’t support JavaScript
• Accessibility is too difficult
1010
Application Development IssuesApplication Development Issues• Keyboard access
• Images
• Tables
• Forms
• Flash
11
Keyboard AccessKeyboard Access• Assistive Technology
requires keyboardaccessibility– §1194.21(a)
– §1194.22
• Access the checklistshere:– DEMO
http://www.section508.va.gov/Section_508_Checklist_and_CVS.asp
12
Event HandlersEvent Handlers
• Many of the current device dependent Event Handlers are mouse driven. What we want to show you are the Event Handlers that are keyboard driven. You know that the onMouseOver event handler is triggered when the mouse cursor is placed over an item. Mouse dependent event handlers cause accessibility issues.
1313
Keyboard Access (cont.)Keyboard Access (cont.)• Current Mouse
Function Code
1. "onMouseDown"
2. "onMouseUp"
3. "onClick"
4. "onMouseOver"
5. "onMouseOut"
• Replace or Add Keyboard Code1. "onKeyDown“
2. "onKeyUp“
3. "onKeyPress“
4. "onFocus“
5. "onBlur"
14
ImagesImages• Meaningful images
require alternative text– 1194.22(a)
– alt=“Seal of V.A.”
• Unimportant images require Null label– alt = “”
• Buttons as Images – 1194.21(d), 1194.21(e)
– alt = “e-mail contact button”
15
TablesTables• Data Tables
– http://www-03.ibm.com/able/guidelines/web/webtableheaders.html
• Layout Tables
16
Data TablesData Tables <tr>
<th scope="col">Class</th><th scope="col"># of Boys</th><th scope="col"># of Girls</th></tr><tr><th scope="row">1st Grade</th><td>11</td><td>10</td></tr><tr><th scope="row">2nd Grade</th><td>7</td><td>12</td></tr>
17
FormsForms• Tab order and tabindex
– tabindex="1", tabindex="2",
• Form Field labels
– <label for="EditName">Name</label>
• Drop down lists
DEMO
18
FormsForms• Use of scripting
• Error reporting– http://webaim.org/techniq
ues/formvalidation/
• AJAX Open source group– http://www.section508.va.
gov/WebApps.asp
– http://www.openajax.org/member/wiki/Accessibility
19
Flash IssuesFlash Issues• Flash applications do not always honor user settings
for Windows OS keyboard accessibility options
– DEMOhttp://www.ehealth.va.gov/508/flash/examples/UIE-DesAcc-01.html
• Accessible Audio and Video Controls• Captions for audio content• Text exposed for screen reader access• Link text inaccessible• Flickering content
20
**Participant Poll****Participant Poll**
• Where do you find information on the Section 508 checklists mentioned in this training?– www.section508.gov– www.section508.va.gov – www.access-board.gov– www.webaim.org
21
**Participant Poll****Participant Poll**
• Have you taken the General Section 508 training?– Yes– No– Unsure
22
ACCESSIBILITY ISSUES WITH DYNAMIC CONTENTACCESSIBILITY ISSUES WITH DYNAMIC CONTENT
Section 2:
23
HTML 4.0HTML 4.0
• Why HTML 4.0 Does Not Support Accessible Dynamic Content:
– Web Component/Widgets
– Updates of applications, and discovery of the updates are not reported to assistive technology.
24
Accessibility BarriersAccessibility Barriers• More advanced and
complex UI controls
• Users need to be able to interact with all controls
• Information needed by assistive technologies is not currently available with many web technologies
25
ACCESSIBLE RICH INTERNET APPLICATIONS (ARIA)ACCESSIBLE RICH INTERNET APPLICATIONS (ARIA)
Section 3:
26
What is ARIA?What is ARIA?• Accessible Rich Internet
Applications Specification inthe W3C– Defines a way to make web
content and applications more accessible to people with disabilities
– Helps with dynamic content and advanced user interface controls developed with AJAX, HTML, JavaScript and other related technologies
– http://www.section508.va.gov/Aria.asp
27
Why Use ARIA—Technical BenefitsWhy Use ARIA—Technical Benefits
• Provides usability in addition to accessibility
• Provides contextual information to the user– Landmark role
• Provides scalability across a variety of user agents– Including mobile devices
DEMO28
Landmark rolesLandmark roles
29
What ARIA ProvidesWhat ARIA Provides• Since HTML cannot identify an object’s state
or properties, the ARIA Specification is an extension of HTML 4.0 to empower assistive technology to work with dynamic content
• ARIA provides:– Attributes to identify features for user interaction– Navigation techniques by regions– Technologies to map controls with the keyboard
DEMO30
Why Use ARIA—Business BenefitsWhy Use ARIA—Business Benefits
• Establishes a web-standard for keyboard interaction– http://dev.aol.com/dhtml_style_guide#checkbox
• Facilitates test automation
31
Impact on Current 508 PracticesImpact on Current 508 Practices
• Allows the developer to utilize dynamic content options (e.g., drag-and-drop, date pickers, etc.)
• Once you learn ARIA you can employ the functions over and over again
32
**Participant Poll****Participant Poll**
• Have you been testing your applications for usability?– Yes– No– Unsure
33
TESTING ARIA APPLICATIONSTESTING ARIA APPLICATIONSSection 4:
34
Accessibility and Proper SemanticsAccessibility and Proper Semantics
• Links– By far the most common interactive element in web
applications, links provide the user with the ability to navigate from one page to another by clicking on some text and/or an image.
– Links must be specified using the <A HREF element, and not elements such as <SPAN . (Commonly done)
– Accessible Web applications depend at their core on using the correct element for the job.
DEMO
35
Accessibility and Proper Semantics (cont.)Accessibility and Proper Semantics (cont.)• Figure 1: A standard hyper Link and Span are styled
and scripted to look and behave like a link
– I am a link – I am a span
• While the two “links” look and behave the same way for a mouse user, the second is not actually a link, and will not work for a keyboard or screen reader user.– <p><a href="http://www.va.gov" onclick="OnLink()"
“onKeyPress”="OnLink()"> >I am a link</a></p>
– <p><span class="link" tabindex="0" onclick="OnLink()">I am a span</span></p>
36
37
Validation and TestingValidation and Testing• Wave – Free web accessibility evaluation tool
• Illinois Center for Information Technology and Web Accessibility Functional Accessibility Evaluator 1.1 – Free web accessibility evaluation tool
• Juicy Studio Accessibility Toolbar – Inspects color contrast, tables and all ARIA markup, including highlighting live regions
• Firebug Lite 1.4 – Freeware that will edit, debug, and monitor CSS, HTML, and JavaScript live in any web page
• W3C Markup Validation Service – This validator checks the markup validity of web pages in HTML, XHTML, SMIL, MathML, etc.
• CSS Validator – Checks Cascading Style Sheets (CSS) and XHTML pages with style sheets
38
Firebug Live StateFirebug Live State
39
Firebug Live StateFirebug Live State
40
Firebug Live StateFirebug Live State
41
Firebug and FireEyes Plug InsFirebug and FireEyes Plug Ins
42
Testing Your Web Application FocusTesting Your Web Application Focus
43
Active Accessibility Object InspectorActive Accessibility Object Inspector
44
Active Accessibility Object InspectorActive Accessibility Object Inspector
45
Assistive Technology for TestingAssistive Technology for Testing• Screen Reader Tools for blind users
– JAWS
– Window Eyes
– NVDA Windows – Open source
• Screen Magnification Tools for low vision users– Zoom Text
– MAGic
• Tools for mobility impaired users– Dragon NaturallySpeaking – Voice recognition for users
who cannot use a keyboard or a mouse. Input is done via a microphone.
46
FAQFAQ
• Will the presentation be available for us?
• Is Firefox an approved browser in VA?
• How will HTML 5 affect the ARIA specification?
47
Questions?Questions?
48
Contact InformationContact Information
• VA Section 508 Program Office: http://www.section508.va.gov [email protected]
• IT Workforce Development:[email protected]
49
Department of Veterans Affairs
© 2010 W3C (MIT, ERCIM, Keio). All Rights Reserved.
Visit http://www.w3.org/WAI/intro/aria for more information.
Department of Veterans Affairs
© 2010 W3C (MIT, ERCIM, Keio). All Rights Reserved.
Visit http://www.w3.org/WAI/intro/aria for more information.
50
IT Workforce Development Evaluation IT Workforce Development Evaluation• To access the evaluation:
– Download the document and follow directions
– Will only take a few minutes
– All of your answers will be kept confidential and allows VA to continue to improve the way training is delivered
51
ITWD would like to thank the VA Section 508 Program Office for its collaboration on this course.
For more information regarding the VA Section 508 Program Officeor questions about accessibility, please contact: [email protected]
TMS Self Certification InstructionsTMS Self Certification Instructions• Visit the VA Talent Management System (TMS) at: https://www.tms.va.gov
• When you reach the TMS home page, you will be asked to log in.
• Type in your TMS User ID and Password and select the Login button.
(Note: If you do not have a username and password, contact the TMS Help Desk or your TMS regional support
personnel for assistance.)
• Upon TMS login, conduct a search for , or TMS ID #2052317
• Select the link for the appropriate training course.
• Select Go to Content.
• Select the Self Certification link.
• The TMS will ask you if you have attended and understand the training. Select Yes.
• When the TMS has processed your self-registration, select the Close button.
• At this point, the training item will be recorded as complete on your learning history.
• For more information, you may contact VA IT Workforce Development at [email protected].
53
ReferencesReferences• VA Section 508 Checklists ─
http://www.section508.va.gov/Section_508_Checklist_and_CVS.asp• Web Table Header Guidelines ─
http://www-03.ibm.com/able/guidelines/web/webtableheaders.html• Error Reporting in Forms ─ http://webaim.org/techniques/formvalidation/• AJAX Open Source Groups ─ http://www.section508.va.gov/WebApps.asp
http://www.openajax.org/member/wiki/Accessibility• VA ARIA Information ─ http://www.section508.va.gov/Aria.asp• DHTML Style Guide Working Group ─ http://
dev.aol.com/dhtml_style_guide#checkbox• W3C ARIA Resources ─ http://www.w3.org/TR/wai-aria/• ARIA Video Project ─
http://codetalks.org/wiki/index.php/ARIA_Video_Project_Home_Page
54
ReferencesReferences• Deque ‘s 3 Worldspace FireEyes videos http://
www.deque.com/products/worldspace-fireeyes/training-videos
• United States Access Board ─ www.access-board.gov
• Web Standards Project ─ http://www.webstandards.org/learn/tutorials/accessible-forms/beginner/
• Open AJAX Alliance Task Force ─ http://oaa-accessibility.org/examples/
• Wave ─ http://wave.webaim.org
• Illinois Center for Information Technology and Web Accessibility Functional Accessibility Evaluator 1.1 ─ http://fae.cita.uiuc.edu
• Juicy Studio Accessibility Toolbar ─ https://addons.mozilla.org/en-US/firefox/addon/juicy-studio-accessibility-too/
• Firebug Lite 1.4 ─ http://getfirebug.com/firebuglite
• W3C Markup Validation Service ─ http://validator.w3.org/
• CSS Validator ─ http://jigsaw.w3.org/css-validator/ 55
ReferencesReferences• JAWS ─ http://www.freedomscientific.com/products/fs/jaws-product-
page.asp
• Windows Eyes ─ http://www.gwmicro.com/
• NVDA Screen Reader for Windows ─ http://www.nvda-project.org/
• Zoom Text ─ http://www.aisquared.com/products
• MAGic ─ http://www.freedomscientific.com/adwords/MAGic-TOPAZ-RUBY.html?gclid=CM3alrbX1KsCFQhN4AoduFcBRQ
• Dragon Naturally Speaking ─ http://shop.nuance.com/store/nuanceus/html/pbPage.dragon-11/ThemeID.19435600?utm_medium=ps&utm_source=Google&utm_campaign=Dragon&utm_term=dragon_naturally_speaking
56