Presentation is loading. Please wait.

Presentation is loading. Please wait.

Web Accessibility: Laws, Coding Practices, and Testing Tools Greg Kraus (Temporarily Able-Bodied)

Similar presentations

Presentation on theme: "Web Accessibility: Laws, Coding Practices, and Testing Tools Greg Kraus (Temporarily Able-Bodied)"— Presentation transcript:

1 Web Accessibility: Laws, Coding Practices, and Testing Tools Greg Kraus (Temporarily Able-Bodied)

2 EDUCAUSE Live! Webinar Free Accessibility for CIOs and Campus Leaders Wednesday, 12:45PM (1:00-2:00) UNC-W, Teaching Laboratory Building, Room 1053 Visitor parking lot next to the building

3 What do you think of when you hear “accessible web site?”

4 Types of Disabilities Physical Auditory Visual Cognitive (Age-Related)

5 What Percentage of People in the US have a disability? 5% 10% 20% 30%

6 Speech Recognition Software

7 Mouth Stick

8 Braille Display

9 Sip and Puff Switch

10 Types of Assistive Technologies Screen Reader Screen Magnifier High Contrast Mode Speech Recognition Software Keyboard Only Access Sticky Keys Literacy Software

11 What is accessibility? All people, regardless of any impairment, can interact with your content Can your Web page be translated to work with these technologies?

12 Universal Design "… the design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design.” –Ron Mace, Center for Universal Design, NC State University

13 Curb Cuts

14 Automatically Opening Doors

15 Closed Captioning

16 Anticipating the User’s Need

17 Accessibility Requirements In general, which Web accessibility laws and standards do Universities have to follow? A.Section 504 B.Section 508 C.Americans with Disabilities Act D.WCAG 2

18 Accessibility and the Law Section 504 Americans with Disabilities Act (ADA)

19 Section 504 No otherwise qualified individual with a disability in the United States…shall, solely by reason of her or his disability, be excluded from the participation in, be denied the benefits of, or be subjected to discrimination under any program or activity receiving Federal financial assistance…

20 Definition of “accessibility” in regards to communication An individual can access and acquire the same information, engage in the same interactions and enjoy the same services that the device/technology offers non-disabled individuals with substantially the equivalent ease of use

21 Universities Must Provide… environment for all participants that is – Timely – Equally effective – Equally integrated reasonable accommodations to qualified students with disabilities

22 Americans with Disabilities Act ADA builds off of Section 504 Title I – Employment Title II – Public Entities Title III – Public Accommodations (and Commercial Facilities) Title IV – Telecommunications Title V – Miscellaneous Provisions

23 504 and ADA Define what “accessible” means in broad terms They do not define a technical standard for what is accessible

24 Accessibility and Standards Section 508 Web Content Accessibility Guidelines 2.0

25 Section 508 You don’t have to follow Section 508 unless you have to follow Section 508 – Procurement and development requirement for Federal agencies Released in 1998 16 criteria 381 words long Does not tell you how to technically do any of it

26 Web Content Accessibility Guidelines 2.0 (WCAG 2) Standard published by the Web Accessibility Initiative (WAI) within the W3C Released in 2008 14,000 words in the standard 300,000 words of support documentation

27 Future of the Laws and Standards Section 508 Refresh – Most likely will mirror WCAG 2.0 Level AA Conformance – Release, imminent? ADA – May define a technical standard, either The refreshed Section 508, or WCAG 2.0, Level AA Conformance – Release, at least 1-2 years away

28 Recent OCR Settlements South Carolina Technical College System – “Shall follow” Section 508 They had already opted to follow Section 508 but had not adhered to it – “Recommended” to follow WCAG 2 for issues not addressed in Section 508

29 State of North Carolina North Carolina State Technical Architecture – Minimum accessibility … full compliance with WCAG 1.0, Priority 1 or WCAG 2, “Level 1” – (They probably mean “Level A Conformance”) Not clear that these requirements apply to higher education

30 Web Standards The meeting point between your Web page and the assistive technology vendor

31 The Future Standard (Looks like) WCAG 2.0 Level AA

32 WCAG 2 – Structure Principles Guidelines Success Criteria Guide to Understanding the Success Criteria Techniques for Meeting Success Criteria

33 WCAG 2 – Principles (POUR) Can I “see” it? Can I “touch” it? Can I understand it? Can I break it? Perceivable Operable Understandable Robust

34 Rank of Most Accessible Formats (The Easiest to Make Accessible) 1.HTML 2.Video/Audio 3.Office Documents 4.PDF 5.Rich Multimedia (i.e. Flash)

35 HTML It is viewable on a multitude of devices It provides an easy way to create rich semantics to describe Web pages It can be transformed into other formats to meet people's individual needs Content can readily be made accessible Even though HTML offers the highest level of accessibility support, there are certain technologies that must be implemented with care to ensure accessibility Some technologies such as JavaScript can be made quite accessible, but additional planning is needed

36 Video/Audio You need – A synchronized transcript (captions) for video – A transcript for audio – A media player that people with disabilities can interact with

37 Office Documents Microsoft Office has many accessibility features built-in

38 PDF Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools. The second PDF you have to make accessible is a real pain.

39 Rich Multimedia Flash, Silverlight, and Java – Can be made accessible, but it takes extra intentional work HTML Canvas – New technology without great accessibility options yet

40 Accessible Coding Practices Accessibility Handbook –

41 Language HTML5 XHTML

42 Multiple Languages … Welcome! Lots of text in English... Une petite quantité de texte en français...

43 Language of the DOCTYPE Does not set the language of the document

44 Language Demonstration KkQ KkQ

45 Valid Code Browsers are very forgiving Not all assistive technologies are Some errors are false positives – ARIA

46 Headings - Make an “Outline” Our News Site World News National News Hot Topics Politics Science Health Environment Technology Entertainment

47 Heading Styles h1 {font-size:1.4em; font- weight:bold; color:#000;} h2 {font-size:1.2em; font- weight:bold; color:#222;} h3 {font-size:1em; font- weight:bold; color:#444;}

48 General Rules for Headings Your should be where the unique main content of your page begins, which usually means it will come after your navigation system. It is fine if your first heading on the page is not an, such as a having an come before your first You should have only 1 per page. If you feel you must, you can use a second for the title of your page. Don’t obsess over making the first heading on your page an. Don’t pick a heading level simply for font sizing purposes. Pick a level that corresponds roughly to the outline of the page. It is not usually necessary to skip heading levels, going from an directly to an. There are always exceptions to rules. Just make sure you are breaking the rules for a good reason.

49 Traditional Navigation Home Products Support

50 ARIA Collection of techniques which adds additional accessibility functionality to Web pages, beyond what standard HTML elements can do No single way to apply ARIA techniques – ARIA Landmarks – ARIA States and Properties – ARIA Live Regions

51 ARIA Landmark Home Products Support

52 aria-label Home … Product Description …

53 aria-labelledby Learn About This Product Product Description Technical Specifications Customer Reviews

54 ARIA Landmarks – DO NOT TRY THIS Home Products Support The will no longer be recognized as a list by the assistive technology

55 ARIA Role The ARIA attribute “role” fundamentally changes what an element is … – Assistive technologies now threat this as an … – Assistive technologies now also treat this as an

56 ARIA Landmarks banner complementary contentinfo form main navigation search Application

57 Alternative Text

58 Example 1 Because of his role as the Commander in Chief of American forces in the Revolutionary War, and, later, the first President of the United States, George Washington is often called the "Father of his Country". A. "Image of George Washington" B. "George Washington, the first president of the United States" C. An empty alt attribute (alt="") will suffice. D. "George Washington"

59 Example 2 Because of his role as the Commander in Chief of American forces in the Revolutionary War, and, later, the first President of the United States, George Washington is often called the "Father of his Country". A. "Image of George Washington" B. "George Washington, the first president of the United States” C. An empty alt attribute (alt="") will suffice. D. "George Washington" George Washington

60 Example 3 A. An empty alt attribute (alt="") will suffice. B. "Wikipedia entry for George Washington" C. "Read More" D. "George Washington" George Washington NOTE: This image is a clickable link to the Wikipedia page for George Washington

61 Example 4 In this painting, the artist Emanuel Leutze used light, color, form, perspective, proportion, and motion to create the composition. A. "George Washington" B. "Painting of George Washington" C. "Painting of George Washington crossing the Delaware River" D. A classic painting demonstrating the use of light and color to create composition. E. "Painting of George Washington crossing the Delaware River. Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle."

62 Example 5 What would be the most appropriate alt attribute for the “TV & AUDIO" navigation image? A. “TV and Video" B. "Link to TV and Video" C. The image doesn't convey content, so (alt="") will suffice.

63 Example 6 A. "decorative line" B. "Beginning of next section" C. "separator" D. alt="" will suffice

64 Lists – Don’t Do This * milk * bread * butter * flour

65 Lists – Do This milk bread butter flour

66 Tables Data tables Layout tables

67 Caption and Summary caption = identifies the table (title or a heading) summary = describes the layout of the table and/or describes the data in the table

68 Schedule for the week of March 6 State & First State & Sixth State & Fifteenth Fifteenth & Morrison 4:00 4:05 4:11 4:19 …

69 Table Headers – Simple Table SmallMedumLarge Cheese$8$10$12 Veggie$10$12$14 Pepperoni$10$12$14

70 Small Medum Large Cheese $8 $10 $12

71 Table Headers – Complex Table Meat ToppingsVegetable Toppings PepperoniSausageBaconOnionOlivesTomato Small$0.80 $1.00$0.60$0.80$0.60 Medium$1.00 $1.20$0.80$1.00$0.80 Large$1.20 $1.40$1.00$1.20$1.00

72 Meat Toppings Vegetable Toppings Pepperoni Sausage Bacon... Small $0.80 $1.00...

73 Mouse and Keyboard Equivalent Events Mouse EventKeyboard Event mousedownkeydown mouseupkeyup clickkeypress mouseoverfocus mouseoutblur

74 tabindex Can Receive Programmatic Focus User Can Tab To It Position in the Tab Order YesNon/a 0Yes Follows DOM order 1+Yes Follows the explicit tab order

75 Visual Focus Problem :focus {outline:none;} Solution :focus {outline:2px solid #f00;}

76 Visual Focus - Links a:focus {outline:none;}

77 Menus Make sure the menus, including submenus, can be accessed using only the keyboard. Make sure the visual focus can always be seen when navigating the menu with a keyboard.

78 Types of Accessible Menus Non-Managed Focus – – menu/option-6/ menu/option-6/ Managed Focus – #goto_menubar #goto_menubar –

79 Skip to Main Content Skip to main content Sample Page Nav Item 1 Nav Item 2 Nav Item 3 Nav Item 4 This is the main content.

80 Skip to Main Content - CSS a.skip-main { position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:scroll; } a.skip-main:focus, a.skip-main:active { color: #fff; background-color:#000; left: 0; top: 0; width: auto; height: auto; overflow:auto; }

81 Skip to Main Content Example uJk uJk

82 Forms First Name

83 Forms – Required Fields First Name *

84 Forms – Required Fields, ARIA First Name *

85 Forms – Jump Menus

86 Color Contrast Button

87 Links Opening in new windows Alt text for linked images Descriptive link text Length of link text URL link text Underline styles for links Link vs. button

88 Link Text Don’t use – “Click here” – Long URLs as the hypertext Use cautiously – “Read more”

89 “Click Here” Good: Find out more information at the NC State IT Accessibility home page. Bad: Click here to find out more information at the NC State IT Accessibility home page.

90 “Read more” – Child Element (Good) How should you display the parts of a form that are read-only? There are three main implementations that I have seen, and unfortunately the accessible version is the one I’ve seen used the least. [Read more...]

91 “Read More” – Sibling Element (Bad) How should you display the parts of a form that are read-only? There are three main implementations that I have seen, and unfortunately the accessible version is the one I’ve seen used the least. [Read more...]

92 Non-Unique Link Text – Unique Heading (Good) Annual Report 2007-2008 (HTML) (PDF) (RTF) Annual Report 2006-2007 (HTML) (PDF) (RTF)

93 Non-Unique Link Text – Unique List Item Parent(Good) Annual Report 2005-2006 (HTML) (PDF) (RTF) Annual Report 2006-2007 (HTML) (PDF) (RTF)

94 Links in Opening New Windows sibility-handbook/link-new-window.html sibility-handbook/link-new-window.html

95 When should a link not be a link? When it should be a button A link represents a connection between two resources Buttons have no default behavior and can have client-side scripts associated with them sibility-handbook/link-behavior.html sibility-handbook/link-behavior.html

96 My Testing Tools W3C Validator WAVE Toolbar WAVE Web Accessibility Tool Keyboard only test Web Evaluation Tools Bookmarklet Accessible Color Palette Evaluator Color Contrast Analyzer Chrome SortSite Screen Reader

97 Screen Readers JAWS – market leader, Windows, works best with IE NVDA – free and open source, Windows, works best with Firefox VoiceOver – free, OS X ChromeVox – free, Chrome

98 Other Testing Tools AChecker Functional Accessibility Evaluator Firefox Accessibility Extension Color Contrast Analyser Web Accessibility Toolbar for IE Jim Thatcher Favelets Juicy Studio Accessibility Toolbar

99 A Workflow for Testing Accessibility 1.Run the WAVE Accessibility Toolbar to check for numerous errors (or Wave Accessibility Evaluation Tool) 2.Try to complete all of the functions on a page using only the keyboard. Make sure you can see the visual focus and also select all items you can with a mouse 3.Run the Web Evaluation Tools to check for heading structure and ARIA landmarks 4.Check for color contrast 5.View a text-only version of the page with the WAVE Toolbar and confirm the contents are still in the right order 6.Run the W3C Validator 7.(optional) Run a tool like SortSite

100 Why do we need ARIA?

101 Accessibility on the Desktop push button name is "Cancel" focusable default action unpressed Application Operating System

102 Accessibility on the Web push button name is "Cancel" focusable default action unpressed Application (Browser) Operating System Web Page

103 Browser Translates Objects into Items the OS Understands Lorem ipsum dolor sit amet, consectetur adipiscing elit. Checkbox Radio Button Button Image Text Text Input Drop Down List

104 ARIA Fills in the Gaps for Items Lost in Translation

105 What is ARIA? Roles, States, and Properties Roles = defining what an object is – Widgets – Document Structure – Landmark Attributes = describing an object – States – Properties

106 Putting our toes in the water… First Name *

107 aria-required First Name *

108 ARIA Gone Wild What you can do, but shouldn't do...and don't let anyone catch you doing it

109 A Simple Checkbox Sign me up!

110 The Starting Point Sign me up!

111 Introducing the "role" Sign me up!

112 AT-AT = All Terrain Armored Transport, first introduced in The Empire Strikes Back

113 Adding the checkbox Sign me up!

114 Responding to clicks Sign me up!

115 Make it so you can tab to it Sign me up!

116 Make it so you can use the keyboard to activate it Sign me up!

117 Make it so screen readers can know its current state Sign me up!

118 ...and all of this code function trapSpaceKey(t,e){ if ( e.which == 32 ) { toggleCheckBox(t); } function toggleCheckBox(t) { if($(t).attr("aria-checked")=="false") { $(t).css("background-image","url('checkbox-checked.gif')"); $(t).attr("aria-checked","true"); } else { $(t).css("background-image","url('checkbox-unchecked.gif')"); $(t).attr("aria-checked","false"); } $(t).focus(); }


120 When all you needed was this Sign me up!

121 Don't be tempted to do this Sign me up!

122 Superfluous Labelling is Not Needed

123 ARIA Live Regions aria-live – polite = read when the user is idle – assertive = read immediately – off = not read aria-atomic – true = everything is read – false = only the text that changes is read aria-relevant – additions = nodes are added – removals = nodes are removed – text = text is added – all = everything

124 Types of Live Regions alert = notification where the alert message is delivered through a modal window. timer = such as a clock or a countdown timer. status = indicator for a Web application, indicating the general status of an application. marquee = scrolling information, such as a scrolling news ticker. log = running log of information, such as a chat room. live region = generic live updating region

125 Generic Live Region Access U 0 Western State 0

126 ARIA Modal Dialog

127 Step 1: Basic Page Structure...


129 Step 2: Adding role="dialog"...


131 Step 3: Adding the Overlay...

132 Step 3: Adding the Description and Heading Beginning of dialog window. It begins with a heading 1 called "Registration Form". Registration Form


134 Step 4: Trapping the focus jQuery('#modalWindow').keydown(function(event){ trapTabKey($(this),event);}) function trapTabKey(obj,evt) { if tab pressed cycle through the tabbable elements, looping from first to last, or last to first when needed else do nothing }

135 Step 4: Setting and restoring the focus var focusedElementBeforeModal; function showModal() {... focusedElementBeforeModal = jQuery(':focus'); …} function hideModal() {... focusedElementBeforeModal.focus(); …}


137 Step 5: Adding aria-hidden...


139 Step 6: Trapping the escape key jQuery('#modalWindow').keydown( function(event){trapEscapeKey($(this),event);}) function trapEscapeKey(obj,evt){ if escape key is pressed $('#cancelButton').click(); else do nothing }

140 Step 6: Trapping the enter key jQuery('#modalWindow').keydown( function(event){trapEnterKey($(this),event);}) function trapEnterKey(obj,evt){ if enter key is pressed $('#enter').click(); else do nothing } FAIL

141 Step 6: Trapping the enter key jQuery('#modalInputForm').keydown( function(event){trapEnterKey($(this),event);}) function trapEnterKey(obj,evt){ if enter key is pressed $('#enter').click(); else do nothing }



144 Step 7: Adding the shims... if(usingWebKit()){ focus on the modal window itself } else { focus on the first object }


146 aria-required +1 Required First Name

Download ppt "Web Accessibility: Laws, Coding Practices, and Testing Tools Greg Kraus (Temporarily Able-Bodied)"

Similar presentations

Ads by Google