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: section508@va.gov

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 vaitwd@va.gov 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 Section508@va.gov

• IT Workforce Development:vaitwd@va.gov

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: section508@va.gov

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 vaitwd@va.gov.

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