1. Accessibility for Webmasters Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 1 No man (or woman) is an island, and I’m indebted to some people who were very helpful to me in producing this document. Thank you! Thank you! Thank you! Any errors, misrepresentations, or omissions are mine, and mine alone. Acknowledgements Peter Paolucci Derek Allard Seneca College Cheryl Dickie York University Donna Noma Seneca College

2. About the Stars Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 2 Slides that with a red star in the bottom right corner are more important than the slides that don’t have the star.

3. A Precautionary Word About The Tools HTML and all it’s related languages and technologies (Javascript, jQuery, CSS, PHP, etc.) are constantly evolving at a rapid rate. Sometimes the tools can’t keep up with the changes, so when you run some kinds of code through validation, don’t be surprised if you occasionally get puzzling errors that don’t make sense. In recent times this has been especially true when validating HTML 5 code, but things are slowly improving as the validation tools catch up with the W3C changes (i.e.: Html 5’s Canvas). Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 3

4. The Main Tools You’ll Use Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 4 The 3 most useful tool for our purposes here. 1.W3C Validator https://validator.w3.org/ https://validator.w3.org/ 2.Access Keys http://www.accesskeys.org/tools/color-contrast.html http://www.accesskeys.org/tools/color-contrast.html 3.Wave /WebAim http://wave.webaim.org/ http://wave.webaim.org/ ---------------------------------------------------------------------------- Plus this tool which cleans up bloated code: https://infohound.net/tidy/ https://infohound.net/tidy/

5. More Tools to Check for Colour 1.1 Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 5 Snook Color Contrast (Uses Sliders to help interpret test results) http://snook.ca/technical/colour_contrast/colour.html http://snook.ca/technical/colour_contrast/colour.html Chris Croyier’s Accessibility Basics: Testing Your Page For Color Blindness https://css-tricks.com/accessibility-basics-testing-your-page- for-color-blindness/ https://css-tricks.com/accessibility-basics-testing-your-page- for-color-blindness/ Color Tools and Simulators (http://www.pepfx.com/articles/web_design/color-tools.php)http://www.pepfx.com/articles/web_design/color-tools.php Check My Colours http://www.checkmycolours.com/ http://www.checkmycolours.com/

6. More Tools to Check for Colour 1.2 You might find the colour blindness simulator useful (http://www.etre.com/tools/colourblindsimulator/)http://www.etre.com/tools/colourblindsimulator/ Color Oracle for Windows or Mac is software that simulates what your design will look like for people with various kinds of colour deficiencies. (http://colororacle.org/)http://colororacle.org/ Although it’s not a pretty interface, Color Blind Web Page Filter is also pretty good (http://colorfilter.wickline.org/)http://colorfilter.wickline.org/ See Design Shack’s Tips for Designing for Colorblind Users (http://designshack.net/articles/accessibility/tips-for-designing-for-colorblind-users/)http://designshack.net/articles/accessibility/tips-for-designing-for-colorblind-users/ Also useful is “Designing For, and As a Color-Blind Person” (http://webdesign.tutsplus.com/articles/designing-for-and-as-a-color-blind-person-- webdesign-3408 )http://webdesign.tutsplus.com/articles/designing-for-and-as-a-color-blind-person-- webdesign-3408 Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 6

7. Why Comply with Accessibility Standards ? Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 7 Designing to accommodate various disabilities is not just about recognizing the full potential in every human being. Accessible compliant interfaces also end up being easier to use for everyone— regardless of whether or not you have a disability. Everybody wins!

8. About Disabilities Generally 1.1 Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 8

9. About Disabilities Generally 1.2 Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 9 Read about the 8 myths about disabilities : 1.Inferiority 2.Pity 3.Hero Worship 4.Ignorance (writing people off) 5.The Spread Effect (the disabled part = the whole person) 6.Stereotypes (+/-) 7.Backlash (resentment over privileging disabilities) 8.Denial (responding to invisible disabilities) Source: Carleton University https://carleton.ca/accessibility/common-myths-about-disabilities/https://carleton.ca/accessibility/common-myths-about-disabilities/

10. 5 Kinds of Disabilities 1.Visual impairments including blindness, various types of low vision and poor eyesight, various types of color blindness 2.Motor/mobility: e.g. difficulty or inability to use the hands, including tremors, muscle slowness, loss of fine muscle control, etc., due to conditions such as Parkinson's Disease, muscular dystrophy, cerebral palsy, stroke 3.Auditory: Deafness or hearing impairments 4.Seizures: Epileptic seizures caused by strobe or flashing effects 5.Cognitive/Intellectual: Developmental disabilities, learning disabilities (dyslexia, dyscalculia, etc.), and cognitive disabilities of various origins, affecting memory, attention, developmental "maturity," problem-solving and logic skills, etc.. Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 10 Source: https://en.wikipedia.org/wiki/Web_accessibilityhttps://en.wikipedia.org/wiki/Web_accessibility

11. A Few Facts About Colour Blindness 99% of all colorblind people are not really color blind, but color deficient. Color blindness is more prevalent among males than females, because color vision is encoded on the X chromosome. (Sorry dudes!) About 8% of all men have color blindness. Severity of color blindness can be: slight, moderate, strong, and absolute. Dogs are not colorblind. (Who knew?) If a woman is red-green colorblind, all her sons will also be colorblind. A father can’t pass his red-green color blindness on to his sons. Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 11 Source: http://www.color-blindness.com/2009/01/06/50-facts-about-color-blindness/http://www.color-blindness.com/2009/01/06/50-facts-about-color-blindness/

12. 3 Kinds of Colour Deficiency Red-Green (Mostly affects males) Protanomaly: The red cone photopigment is abnormal. Red, orange, and yellow appear greener; colors are not as bright. Affects 1% of males. Protanopia: No working red cone cells. Red appears black. Certain shades of orange, yellow, and green all appear yellow. Affects 1% of males. Deuteranomaly: Green cone photopigment is abnormal. Yellow and green appear redder and it is difficult to tell violet from blue. Is the most common form of color blindness. Affects 5% of males. Deuteranopia: No working green cone cells. Reds appear as brownish-yellow and greens appear as beige. Affects 1% of males. Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 12 Source: https://nei.nih.gov/health/color_blindness/facts_abouthttps://nei.nih.gov/health/color_blindness/facts_about

13. 3 Kinds of Colour Deficiency Blue-Yellow Color Blindness Blue-yellow color blindness is rarer than red-green color blindness. Blue-cone (tritan) photopigments are either missing or have limited function. Tritanomaly: Indicative of functionally limited blue cone cells. Blue appears greener; it’s difficult to tell yellow and red from pink. Extremely rare. Affects males and females equally. Tritanopia: Also known as blue-yellow color blindness; lacking blue cone cells. Blue appears green and yellow appears violet or light grey. Extremely rare. Affects males and females equally. Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 13 Source: https://nei.nih.gov/health/color_blindness/facts_abouthttps://nei.nih.gov/health/color_blindness/facts_about

14. 3 Kinds of Colour Deficiency Complete color blindness People with complete color blindness (monochromacy) don’t experience color at all. The clearness of their vision (visual acuity) may also be affected. Cone monochromacy: Rare. Results from a failure of 2/3 of cone cell photopigments: red cone, green cone and blue cone monochromacy. The brain compares signals from different cones to see color. When only one cone works, comparison isn’t possible. Associated with reduced visual acuity, near-sightedness, and uncontrollable eye movements (nystagmus). Rod monochromacy or achromatopsia: Rare and is the most severe form of color blindness. Present at birth. None of the cone cells have functional photopigments. Lacking all cone vision, people with rod monochromacy see the world in black, white, and gray. Associated with photophobia – very uncomfortable in bright environments. They also experience nystagmus. Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 14 Source: https://nei.nih.gov/health/color_blindness/facts_abouthttps://nei.nih.gov/health/color_blindness/facts_about

15. Understanding Colour Ratios 1.1 The contrast ratios apply not only to text, but to images of text. 18pt text or 14pt bold are considered adequate for low vision readers who are not using any assistive technology (this is what the guideline is based on anyway) –except for AA. The minimum contrast level A success is 3:1. For AA (1.4.3). For AAA it’s 7:1. You can use the contrast ratio calculator. Enter bg and fg colours, press “Calculate” and the tool gives you the ration and tells you which conformance level(s) you’ve met. http://www.msfw.com/Services/ContrastRatioCalculator or this one: http://www.msfw.com/Services/ContrastRatioCalculator http://leaverou.github.io/contrast-ratio/ Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 15 Source: https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrasthttps://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast

16. Understanding Colour Ratios 1.2 Decorative text that does not convey key information is exempt. In most cases, corporate logos are also exempt too. http://webaim.org/resources/contrastchecker/ https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio- contrast-contrast https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast- contrast.html#visual-audio-contrast-contrast-resources-head This one uses PhP and Javascript to calculate color contrast: https://24ways.org/2010/calculating-color-contrast/ Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 16

17. 6 Kinds of Assistive Devices 1. Screen readers (text to synthesized speech), read selected elements of what’s on the monitor (for reading or learning difficulties), or whatever is happening on the computer (used by blind and vision- impaired users). 2. Braille terminals: a refreshable braille display which renders text as braille characters (usually by means of raising pegs through holes in a flat surface) and either a mainstream keyboard or a braille keyboard. 3. Screen magnification software: enlarges what is displayed on the computer monitor, making it easier to read for vision-impaired users. (Consequently, WAI requirement that images zoomed up to 200% should not disintegrate.) Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 17 Source: https://en.wikipedia.org/wiki/Web_accessibilityhttps://en.wikipedia.org/wiki/Web_accessibility

18. 4. Speech recognition software: accepts spoken commands to the computer, or turns dictation into grammatically correct text - useful for those who have difficulty using a mouse or a keyboard. 5. Keyboard overlays: make typing easier and more accurate for those who have motor control difficulties. 6. Access to subtitled or sign language videos on the Internet for all deaf people. Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 18 Source: https://en.wikipedia.org/wiki/Web_accessibilityhttps://en.wikipedia.org/wiki/Web_accessibility 6 Kinds of Assistive Devices

19. TTS (Text-to-Speech) Software Arguably, the most popular screen reader used by visually impaired people is JAWS (Job Access With Speech) and is available at (http://www.freedomscientific.com/Products/Blindness/JAWS). You can download a free trial. (Thanks Cheryl Dickie!)http://www.freedomscientific.com/Products/Blindness/JAWS Here’s a short Youtube demo of JAWS (https://www.youtube.com/watch?v=IK97XMibEws).https://www.youtube.com/watch?v=IK97XMibEws Here’s a longer Youtube demo of JAWS (https://www.youtube.com/watch?v=qiKWTTtGq7U).https://www.youtube.com/watch?v=qiKWTTtGq7U This official promotional video about JAWS also has captions to make the resource more accessible. (https://www.youtube.com/watch?v=0DYjkF59jeo)https://www.youtube.com/watch?v=0DYjkF59jeo NVDA (Non Visual Desktop Access) or NV Access (http://www.nvaccess.org/) is a competitor to JAWS. See it on Youtube (https://www.youtube.com/watch?v=qOQ7zELFmLE).http://www.nvaccess.org/https://www.youtube.com/watch?v=qOQ7zELFmLE Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 19

20. These other screen readers may not “read” images or tables well. Firefox has a Text-To-Voice add-on (https://addons.mozilla.org/en-US/firefox/addon/text-to-voice/) but you can use the Google TTS as well (https://addons.mozilla.org/en-US/firefox/addon/google-text-to-speech/).https://addons.mozilla.org/en-US/firefox/addon/text-to-voice/https://addons.mozilla.org/en-US/firefox/addon/google-text-to-speech/ So does Mozilla Dev (http://accessibar.mozdev.org/installation.html)http://accessibar.mozdev.org/installation.html Natural Reader (http://www.naturalreaders.com/index.html) is excellent.http://www.naturalreaders.com/index.html You can try Google’s Text to Voice for the Opera Browser (https://addons.opera.com/en/extensions/details/googletm-text-to-speech/?display=en)https://addons.opera.com/en/extensions/details/googletm-text-to-speech/?display=en Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 20 Other TTS Software

21. These other screen readers may not “read” images or tables well. Here are some more links for text-to-speech installation instructions: (http://www.accessibleinfo.co.uk/sound-help/)http://www.accessibleinfo.co.uk/sound-help/ See this YouTube explanation of how to activate Narrator in Windows 10. (See: https://youtu.be/U25vhhE50kI)https://youtu.be/U25vhhE50kI Mac users could do a Command F5 on their mac to access Voiceover if they wanted to try out a screen reader. (Thanks Donna Noma!) This Youtube video shows you how to use text-to-speech in Safari. (https://www.youtube.com/watch?v=w2aUGs3Bmpw)https://www.youtube.com/watch?v=w2aUGs3Bmpw Remember: Not all text-to-voice software will read full webpages, including the images. It’s important that the reader be able to interpret the web page text and it’s code, so that, for example, it reads the values of the alt attributes on an image, or the direction of a table. Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 21 Other TTS Software

22. Validation Validation ensures your code meets W3 standards and that it works well (ie consistently) on all platforms (desktops like Windows, Mac and Unix; tablets, iPhones, iMacs, Blackberry and other PDAs, etc.) as well as on all mobile apps and browsers (Firefox, Safarai, Opera, Chrome, MSIE). In so doing, you will also go a long way toward accommodating a variety of cognitive and physical disabilities. The W3C or World Wide Web Consortium (http://www.w3.org/) is an international collaborative effort to ensure (among other things) that all browsers and devices interpret the same code, the same way, every time, regardless of context.http://www.w3.org/ Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 22

23. Interpreting Test Results Most validation tools look for 2 kinds of errors, which I’m going to call “hard” and “soft.” Hard errors are a slam-dunk, no-doubt-about-it kind of error. This is always a case of a quantifiable errors in the code and can include things like using deprecated tags, ignoring CSS coding options, using tables for layout, and so on. Soft errors can only be suggested by the validation tools and always require a human to look at the suggested error and make a judgement. For example, if you create a navigation feature as an image with green words on a red background and if you use an alt attribute, the software can’t tell that the contents of that image are an infraction. Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 23

24. Test Result Examples Lets use Achecker (http://achecker.ca/checker/index.php).http://achecker.ca/checker/index.php I exploded the “Options” menu. Lots of choices here. Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 24

25. Test Result Examples Go to AChecker and test www.learncanada.org. It comes back with “No Known Problems,” “No Likely problems,” and “44 Potential Problems” !! Those potential problems are all soft errors.www.learncanada.org Now go to AChecker and test http://www.thecoyotes.ca and you’ll see it comes back with “3 Known Problems” – those are hard code problems (sorry!! My bad!!), 1 “Likely Problem” and 83 “Potential Problems.”http://www.thecoyotes.ca AChecker is a great tool because it makes suggestions for the fix and offers extra help if you don’t understand the nature of the error. Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 25

26. Class Exercise #1 Experiment with installing and/or testing some text-to-voice software on some webpages of your choice. You may also want to install the TTS in the Opera browser and try to get it to work. Determine whether these TTS’s are reading just the surface or whether they are also reading the HTML code underneath the page. Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 26

27. Class Exercise #2 Go to http://www.yorku.ca/paolucci/Seneca_WWW107/accessibility/practice.html http://www.yorku.ca/paolucci/Seneca_WWW107/accessibility/practice.html and get this file to pass validation and accessibility Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 27

28. There are 3 Main Standards Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 28 WAI (ARIA) WAI (ARIA) International: under the umbrella of W3C. Recommendations only AODA AODA (“Accessibility for Ontarians with Disabilities Act”) Ontario only Guidelines PLUS punitive monetary legislation for non-compliance.508 (USA only) Guidelines PLUS punitive monetary legislation for non-compliance.

29. Relationship of the 3 Main Standards Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 29 WAI-ARIA via W3C AODA 508

30. Roadmap of Topics Let’s explore these 3 important accessibility standards in the following order. 1.WAI (International) [https://www.w3.org/WAI/WCAG20/quickref/] 2.AODA (Ontario) [http://accessontario.com/aoda/] 3.508 (USA) [http://www.508checker.com/what-is- 508-compliance] and [https://viget.com/inspire/a- designers-guide-to-accessibility-and-508- compliance] Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 30

31. WAI Web Accessibility Initiative Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 31 https://www.w3.org/WAI/

32. History of the WAI Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 32 Source: https://www.w3.org/WAI/historyhttps://www.w3.org/WAI/history Tim Berners-Lee saw WAI “[a]s part of its [the W3C’s] commitment to realize the full potential of the Web.”

33. History of WAI Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 33 Source: https://www.w3.org/WAI/historyhttps://www.w3.org/WAI/history Fall of 1996 was the unofficial start up. By 1997 it was fully launched. It started, like so many W3C projects, as a volunteer, cooperative effort from individuals (Mike Paciello, Dave Raggett), and from organizations like: Yuri Rubinsky Insight Foundation (https://www.w3.org/WAI/References/WAIyrif.html) Trace (http://www.tracecenter.org/) OCAD University (http://idrc.ocadu.ca/)https://www.w3.org/WAI/References/WAIyrif.htmlhttp://www.tracecenter.org/http://idrc.ocadu.ca/ ICADD (https://www.w3.org/WAI/min22)https://www.w3.org/WAI/min22

34. Some Sponsors of the WAI Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 34 Source: https://www.w3.org/WAI/https://www.w3.org/WAI/ 1.Adobe 2.Hewlett Packard Inc. 3.IBM 4.European Commission Information Society Technologies Programme, project IST 611612 (WAI-DEV) 5.US Department of Education, National Institute for Disability and Rehabilitation Research, contract ED-OSE-10-C-0067 6.Microsoft Corporation 7.Assistive Devices Industry Office, Industry Canada, Government of Canada 8.Verizon 9.Lotus Development Corporation 10.Wells Fargo

35. WAI is under the umbrella of the W3C or World Wide Web Consortium (http://w3.org) All about standardization.http://w3.org W3 founded October, 1994 by Tim Berners-Lee at MIT Purpose: “ The W3C mission is to lead the World Wide Web to its full potential by developing protocols and guidelines that ensure the long-term growth of the Web. ” Works internationally through cooperation, consultation, consideration of individuals, countries and large corporations and other kinds of organizations like governments, universities, health organizations, etc.. Many jobs are volunteer. Others are paid. Source: https://www.w3.org/Consortium/facts.htmlhttps://www.w3.org/Consortium/facts.html History of W3C & WAI Pt. 1 Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 35

36. History of W3C & WAI Pt. 2 Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 36 The best articulation of the historical moment that gave birth to the W3 is treated in the W3’s own “History of the Web” resource. See below. In particular, the section called “The browser wars” is key. The trigger that set everything off was the way that each browser began creating its own tags. For example, Netscape created which only worked in their browser and MSIE created (a scrolling text), which only worked in their browser. Even the amount of real estate available to display content is non- standardized. See https://en.wikipedia.org/wiki/Browser_wars for more detail https://en.wikipedia.org/wiki/Browser_wars Source: See: https://www.w3.org/wiki/The_history_of_the_Webhttps://www.w3.org/wiki/The_history_of_the_Web

37. History of W3 & WAI Pt. 3 Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 37 3 Key Focus Areas of the W3 Are: 1.Web Accessibility Initiative (https://www.w3.org/WAI/)https://www.w3.org/WAI/ 2.Internationalization (https://www.w3.org/International/)https://www.w3.org/International/ 3.Mobile Web for Social Development (https://www.w3.org/2008/MW4D/)https://www.w3.org/2008/MW4D/ IF YOU CODE TO HTML/CSS STANDARDS, MOST OF THESE STANDARDS ARE ALSO MET! Source: https://www.w3.org/Consortium/facts.htmlhttps://www.w3.org/Consortium/facts.html

38. History of W3C & WAI Pt. 4a Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 38 The other big piece of W3 is Semantic Web (https://www.w3.org/standards/semanticweb/)https://www.w3.org/standards/semanticweb/ Semantic web has 5 components: 1.Linked Data (Rules for publication & Linking of Disparate Data) 2.Vocabularies (Creates natural i.e.: human vocabulary for queries) 3.Query (Universal query language—currently it’s SPARQL) 4.Inference (mediation between different “rule” languages) 5.Vertical Applications (Standards for working across diverse industries) Source: https://www.w3.org/Consortium/facts.htmlhttps://www.w3.org/Consortium/facts.html

39. History of W3C & WAI Pt. 4b Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 39 YouTube has some great videos that explain Semantic web. Peter Webexplorations (https://www.youtube.com/watch?v=rhgUDGtT2EM)https://www.youtube.com/watch?v=rhgUDGtT2EM The Future Internet: Service Web 3.0 (and its Relation to Semantic Web) (https://www.youtube.com/watch?v=off08As3siM)https://www.youtube.com/watch?v=off08As3siM Semantic Search Explained (https://www.youtube.com/watch?v=-R87nJi9YyQ&list=PLomfv-50N6NYHD-VX31I-TwxIVpSS513x)https://www.youtube.com/watch?v=-R87nJi9YyQ&list=PLomfv-50N6NYHD-VX31I-TwxIVpSS513x Semantic Web And Accessibility (Excellent resource!) (https://www.youtube.com/watch?v=9bdHbANEZgM)https://www.youtube.com/watch?v=9bdHbANEZgM

40. Areas of Specialization Within WAI Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 40 There are 3 main areas of guidelines 1.Authoring Tool Accessibility Guidelines (ATAG). Currently in 1.0 2.User Agent Accessibility Guidelines (UAAG). Currently in 1.0 3.Web Content Accessibility Guidelines (WCAG). Currently in 2.0 We are #3! See https://www.w3.org/WAI/guid-tech.html for other smaller areas such as WAI-ARIA (Rich Applications), Indie UI, EARL, XAG (XML Guidelines).https://www.w3.org/WAI/guid-tech.html

41. WA I Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 41 Source: https://www.w3.org/WAI/guid-tech.htmlhttps://www.w3.org/WAI/guid-tech.html

42. WAI: Meeting the Beast WAI: Meeting the Beast Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 42 In ancient Greek mythology, the Minotaur lived in an intricate labyrinth from which no one had ever escaped. Theseus was the only one who could find his way around, and when he did, he slew the Minotaur. This is a metaphor for how convoluted, complicated and dangerous the W3C/WAI websites are! It’s worth taking some time to find your way around these complicated, but very important websites. You must master this beast, the WAI website!

43. WAI’s 4 Principles of Accessibility Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 43 Source: https://www.w3.org/TR/2008/WD-UNDERSTANDING-WCAG20-20081103/intro.html#introduction- fourprincs-head and https://en.wikipedia.org/wiki/Web_Content_Accessibility_Guidelines#Principleshttps://www.w3.org/TR/2008/WD-UNDERSTANDING-WCAG20-20081103/intro.html#introduction- fourprincs-headhttps://en.wikipedia.org/wiki/Web_Content_Accessibility_Guidelines#Principles 1. Perceivable: Information and user interface components must be presentable to users in ways they can perceive; it can't be invisible to all of their senses 2. Operable: User interface components and navigation must be operable. The interface cannot require interaction that a user is unable to perform. 3. Understandable: Information and the operation of user interface must be understandable. The content or operation cannot be beyond the user’s understanding. 4. Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. As technologies and user agents evolve, the content should remain accessible.

44. Levels of Conformity Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 44

45. The 3 Levels of Conformity Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 45 Conformance Level "A" - all Priority 1 checkpoints are satisfied Conformance Level "Double-A" (AA) - all Priority 1 and 2 checkpoints are satisfied Conformance Level "Triple-A" (AAA) - all Priority 1, 2, and 3 checkpoints are satisfied Source: https://www.w3.org/TR/WAI-WEBCONTENT/#Conformancehttps://www.w3.org/TR/WAI-WEBCONTENT/#Conformance

46. Prioritie s Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 46 Priority 1 must Web content developers must satisfy this checkpoint. Satisfying this checkpoint is a basic requirement for some groups to be able to use Web documents. Priority 2 should A Web content developers should satisfy this checkpoint. Otherwise, one or more groups will find it difficult to access information in the document. Satisfying this checkpoint removes significant barriers to accessing Web documents. Priority 3 may Web content developers may address this checkpoint. Otherwise, one or more groups will find it somewhat difficult to access information in the document. Satisfying this checkpoint improves access to Web documents. Source: https://www.w3.org/TR/WAI-WEBCONTENT/#prioritieshttps://www.w3.org/TR/WAI-WEBCONTENT/#priorities

47. ATAG 2.0 ATAG 2.0 (Authoring Tool Accessibility Guidelines) Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 47 The ATAG guidelines are for developers of any kind of authoring tool for Web content: HTML editorsHTML editors, tools that export content for use on the Web (word processors that save as HTML), multimedia tools, content management systems, (WYSIWYG) HTML editors, courseware tools, content aggregators that convert to web content (word processors and other office document applications with "Save as HTML“), multimedia authoring tools, websites that let users add content (blogs, wikis, photo sharing sites, online forums, and social networking sites, etc.)content management systems The goal is for developers to create tools that.. 1.are accessible to authors regardless of disability, 2.produce accessible content by default, 3.support and encourage authors to create accessible content Source: https://en.wikipedia.org/wiki/Web_Accessibility_Initiative#Authoring_Tools_Accessibility_Guidelines_.28ATAG.29 and https://www.w3.org/WAI/intro/atag.phphttps://en.wikipedia.org/wiki/Web_Accessibility_Initiative#Authoring_Tools_Accessibility_Guidelines_.28ATAG.29 https://www.w3.org/WAI/intro/atag.php

48. UAAG 2.0 UAAG 2.0 (User Agent Accessibility Guidelines) Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 48 The UAAG is a set of guidelines for user agent developers, such as web browsers, media players, assistive technologies and other user agents aimed at making the user agent accessible to users with disabilities. UAAG and supporting resources are also intended to meet the needs of many different audiences, including policy makers, managers, and others. For example, 1.people who want to choose user agents that are more accessible can use UAAG to evaluate user agents 2. People who want to encourage their existing user agent developer to improve accessibility in future versions can refer the user agent vendor to UAAG. Source: https://en.wikipedia.org/wiki/Web_Accessibility_Initiative#User_Agent_Accessibility_Guidelines_.28UAAG.29 and https://www.w3.org/WAI/intro/uaag.php https://en.wikipedia.org/wiki/Web_Accessibility_Initiative#User_Agent_Accessibility_Guidelines_.28UAAG.29https://www.w3.org/WAI/intro/uaag.php For a fuller list of user agents see http://www.useragentstring.com/pages/useragentstring.phphttp://www.useragentstring.com/pages/useragentstring.php

49. WCAG 2.0 WCAG 2.0 (Web Content Accessibility Guidelines ) Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 49 WCAG is primarily intended for 1.Web content developers (page authors, site designers, etc.) 2.Web authoring tool developers 3.Web accessibility evaluation tool developers The Web Content Accessibility Guidelines Working Group produces guidelines, techniques and other supporting documents relating to the accessibility of Web content, ie. any information on a website: text, images, forms, sound, video, etcetera, regardless whether these were produced on the server side or on the client side (with a client-side scripting language such as JavaScript).client-side scripting languageJavaScript That’s us!! Source: https://www.w3.org/WAI/intro/wcag.php and https://en.wikipedia.org/wiki/Web_Accessibility_Initiative#Web_Content_Accessibility_ Guidelines_Working_Group_.28WCAG_WG.29 https://www.w3.org/WAI/intro/wcag.phphttps://en.wikipedia.org/wiki/Web_Accessibility_Initiative#Web_Content_Accessibility_ Guidelines_Working_Group_.28WCAG_WG.29

50. Guidelines, Checkpoints, Techniques There are 14 guidelines. Each guideline contains the rationale behind the guideline and some groups of users who benefit from it. Each guideline has its own checkpoints. Checkpoints explain how each guideline applies in typical content development scenarios. Each checkpoint has its own techniques. Techniques are where implementations and examples of the checkpoints are discussed. Guidelines Checkpoints Techniques Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 50 Source: https://www.w3.org/TR/WAI-WEBCONTENT/#Guidelineshttps://www.w3.org/TR/WAI-WEBCONTENT/#Guidelines

51. The 14 Guidelines of WCAG 2.0 Guideline 1: Provide equivalent alternatives to auditory, visual content and any non-text content so that it can be changed into other forms, such as large print, braille, speech, symbols or simpler language Guideline 2: Don’t rely on colour alone. Ensure that text and graphics are understandable when viewed without color Guideline 3: Use markup and style sheets and do so properly. Create content that can be presented in different ways (for example simpler layout) without losing information or structure. Guideline 4: Clarify natural language usage. Guideline 5: Create tables that transform gracefully. Don’t use tables for layout. Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 51 Source: https://www.w3.org/TR/WAI-WEBCONTENT/#Guidelines and https://en.wikipedia.org/wiki/Web_Content_Accessibility_Guidelineshttps://www.w3.org/TR/WAI-WEBCONTENT/#Guidelines https://en.wikipedia.org/wiki/Web_Content_Accessibility_Guidelines

52. The 14 Guidelines of WCAG 2.0 Guideline 6: Ensure that pages featuring new technologies transform gracefully. Pages need to be accessible even when newer technologies are not supported or are turned off. Guideline 7: Ensure user control of time-sensitive content changes. Users need to be able to pause or stop any moving, blinking, scrolling, or auto- updating objects or pages. Guideline 8: Ensure direct accessibility of embedded user interfaces. The user interface must follow principles of accessible design: device- independent access to functionality, keyboard operability, self-voicing, etc.. Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 52 Source: https://en.wikipedia.org/wiki/Web_Content_Accessibility_Guidelineshttps://en.wikipedia.org/wiki/Web_Content_Accessibility_Guidelines

53. The 14 Guidelines of WCAG 2.0 Guideline 9: Design for device-independence. Use features that enable activation of page elements via a variety of input devices. Guideline 10: Use interim accessibility solutions so that assistive technologies and older browsers will operate correctly. In other words, retrofit for legacy software and technologies. Guideline 11: Use W3C technologies and guidelines. Provide context and orientation information to help users understand complex pages or elements. Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 53 Source: https://en.wikipedia.org/wiki/Web_Content_Accessibility_Guidelineshttps://en.wikipedia.org/wiki/Web_Content_Accessibility_Guidelines

54. The Guidelines of WCAG 2.0 Guideline 12: Provide context and orientation information to help users understand complex pages or elements. Guideline 13: Provide clear and consistent navigation mechanisms -- orientation information, navigation bars, a site map, etc. -- to increase the likelihood that a person will find what they are looking for at a site. Guideline 14: Ensure that documents are clear and simple so they may be more easily understood. Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 54 Source: https://en.wikipedia.org/wiki/Web_Content_Accessibility_Guidelineshttps://en.wikipedia.org/wiki/Web_Content_Accessibility_Guidelines

55. Checkpoints and Techniques If the purpose of the Guidelines is to help understand the concepts, the purpose of the Checkpoints and Techniques is help you move to the practical side of coding. To get help with the practicalities there are at least two places in the WAI where you can go. Be careful, the resource itself is a Byzantine labyrinth (Translation: a hot mess!). Web Content Accessibility Guidelines (WCAG) 2.0 shows you how to meet the Guidelines and offers practical help explain it. It does not map fully to the other Guidelines pages and I’m at a loss to explain it (sorry!). https://www.w3.org/TR/2008/REC-WCAG20-20081211/ https://www.w3.org/TR/2008/REC-WCAG20-20081211/ How to Meet WCAG 2.0: A customizable quick reference to Web Content Accessibility … is enormously helpful. https://www.w3.org/WAI/WCAG20/quickref/Overview.php https://www.w3.org/WAI/WCAG20/quickref/Overview.php This new Quick reference guide is FANTASTIC: https://www.w3.org/WAI/WCAG20/quickref/ Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 55

56. Tools For WAI Compliance Always start with the W3C validators for HTML (https://validator.w3.org/) and CSS (https://jigsaw.w3.org/css-validator/)https://validator.w3.org/https://jigsaw.w3.org/css-validator/ Be sure also to use Web Accessibility Checker (http://achecker.ca/checker/index.php) and Check My Colours (http://www.checkmycolours.com/)http://achecker.ca/checker/index.phphttp://www.checkmycolours.com/ The W3’s Web Accessibility Evaluation Tools List is an excellent resource and lists some 69 different tools to help you code to standards. https://www.w3.org/WAI/ER/tools/ https://www.w3.org/WAI/ER/tools/ There’s also the NU HTML checker (https://validator.w3.org/nu/)https://validator.w3.org/nu/ And then there’s Webaim (http://wave.webaim.org/) which is another industry standard.http://wave.webaim.org/ Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 56

57. Tools For Checking WAI Compliance Complete List of Web Accessibility Tools https://www.w3.org/WAI/ER/tools/ Here Are Some HTML 5 validators to try http://html5.validator.nu/ https://addons.mozilla.org/en-us/firefox/addon/html-5-validator/ http://validator.whatwg.org/ http://accesslint.com/ http://w3c.github.io/developers/tools/#tools Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 57

58. AODA “The Accessibility for Ontarians with Disabilities Act” “Designated public sector organizations and large organizations shall make their internet websites and web content conform with the Web Content Accessibility Guidelines (WCAG) 2.0, initially at Level A and increasing to Level AA.” AODA is both a set of guidelines and the law! Must comply with the W3C/WAI 4 principles: Perceivable, Operable, Understandable and Robust The main site (http://www.aoda.ca/wcag/category/all-guidelines/) [see below], allows you to browse Guidelines by any one of these principles or by A, AA or AAAhttp://www.aoda.ca/wcag/category/all-guidelines/ Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 58 Source: https://carleton.ca/webservices/2013/aoda-web-accessibility-requirements/https://carleton.ca/webservices/2013/aoda-web-accessibility-requirements/

59. AODA “AODA applies to all levels of government, nonprofits, and private sector businesses across Ontario who have one or more staff.” A person and unincorporated organizations that are guilty of a major offence under this Act can be fined up to $50,000 dollars for each day the violation continues A corporation that is guilty can be fined up to $100,000 per day. Directors and officers of a corporation with fiduciary responsibility who are guilty are liable to a fine of up to $50,000 a day. Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 59 Source: http://accessontario.com/aoda/http://accessontario.com/aoda/

60. AODA’s Schedule of Compliance January 1, 2012, new internet/intranet websites and their content must conform with WCAG 2.0 Level AA (2 exceptions)Level AA January 1, 2016, all internet websites and their content must conform with WCAG 2.0 Level AA (2 exceptions)Level AA January 1, 2020, all internet and intranet websites and their content must conform with WCAG 2.0 Level AA.Level AA Designated public sector organizations and large organizations for their internet websites shall meet the requirements of this section in accordance with the following schedule: January 1, 2014, new internet websites and web content on those sites must conform with WCAG 2.0 Level A.Level A By January 1, 2021, all internet websites and web content must conform with WCAG 2.0 Level AA (2 exceptions)Level AA Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 60 Source: http://www.aoda.ca/wcag/http://www.aoda.ca/wcag/

61. AODA Guidelines “From a template perspective” Presentation: does not rely on a single sensory characteristic (ie: no flash). Text: content is organized using tags and a tag that describes the topic/purpose. Colours: colours are easily distinguished as is contrast ratio. Zooming: quality is not lost when resized to 200%. Keystroke functionality: the users needs to be able to easily navigate the site using keyboard strokes Navigation menus and Functional components: repeating functions (ie: navigation, search) that are on multiple pages appear in the same order. Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 61 Source: https://carleton.ca/webservices/2013/aoda-web-accessibility-requirements/https://carleton.ca/webservices/2013/aoda-web-accessibility-requirements/

62. AODA Guidelines “From a content perspective” Non text: All non-text content has a text alternative. Lists: Lists, groups of links, or other listable items are listed using,, or. Paste from plain text: Web content can be perceived easily when reading top to bottom in the source code. Images: Text is used to convey information rather than images of text if it’s possible at all. Links: All links describe its purpose accurately by itself or within the context of the links. Headings: Headings are used properly in a hierchical [sic] fashion, and describe the topic accurate. Plain language: Paragraphs and sentences are short and written in plain, concise language. Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 62 Source: http://accessontario.com/aoda/http://accessontario.com/aoda/ Source: https://carleton.ca/webservices/2013/aoda-web-accessibility-requirements/https://carleton.ca/webservices/2013/aoda-web-accessibility-requirements/

63. AODA’s Own Guidelines LOTS of Guidelines on this page. Divided into Level A Level AA Level AAA as well as WAI’s principles of Perceivable Operable Understandable Robust or if you want, by “All Guidelines” and it’s searchable! Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 63 Source: http://www.aoda.ca/wcag/category/all-guidelines/http://www.aoda.ca/wcag/category/all-guidelines/

64. AODA TOOLS Ontario Gov’t: How to make websites accessible (http://www.ontario.ca/page/how-make-websites-accessible(http://www.ontario.ca/page/how-make-websites-accessible) AODA itself recommends W3C Markup Validation Service (https://validator.w3.org/)https://validator.w3.org/ Total Validator Desktop Tool (https://www.totalvalidator.com/home/eol.html)https://www.totalvalidator.com/home/eol.html Tenon.io (http://tenon.io/)http://tenon.io/ Colour Contrast Analyzer (http://juicystudio.com/services/luminositycontrastratio.php)http://juicystudio.com/services/luminositycontrastratio.php With the caveat that “These Tools are not to be relied on solely for assessing a websites compliance.” Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 64 Source: http://www.aoda.ca/wcag/resources/http://www.aoda.ca/wcag/resources/

65. (Section) 508 An American Standard Section 508 of the Rehabilitation Act of 1973, as amended (29 U.S.C. § 794 (d)) In 1998, Congress amended the Rehabilitation Act of 1973 to require Federal agencies to make their electronic and information technology (EIT) accessible to people with disabilities. The law (29 U.S.C. § 794 (d)) applies to all Federal agencies when they develop, procure, maintain, or use electronic and information technology. Under Section 508, agencies must give disabled employees and members of the public access to information that is comparable to access available to others. The United States Access Board discusses the Section 508 law and its responsibility for developing accessibility standards for EIT to incorporate into regulations that govern Federal procurement practices. Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 65 Source: http://www.section508.gov/#main-content and http://www.section508.gov/content/learn/laws-and-policieshttp://www.section508.gov/#main-contenthttp://www.section508.gov/content/learn/laws-and-policies

66. (Section) 508 508 applies specifically to “electronic information” 1. Software Applications and Operating Systems (1194.21) 2.Web-based Intranet and Internet Information and Applications (1194.22) 3.Telecommunications Products (1194.23) 4.Video and Multimedia Products (1194.24) 5.Self Contained, Closed Products (1194.25) 6.Desktop and Portable Computers (1194.26) 7.Telecommunications Product Design 8.Accessible Software 508 is linked to 504 which is more general and not electronic based: it requires agencies to provide individuals with disabilities an equal opportunity to participate in their programs and benefit from their services Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 66 Source: https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-section-508- standards/guide-to-the-section-508-standards and http://www.hhs.gov/web/section-508/what-is-section- 504/index.htmlhttps://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-section-508- standards/guide-to-the-section-508-standardshttp://www.hhs.gov/web/section-508/what-is-section- 504/index.html

67. 508 508 has 16 guidelines (a) through (p) that map (more or less) to WAI, however, there are considerably fewer of them in 508 than there are in WAI. Not always embraced by private sector due to $$ costs (startup and ongoing) and usage of HR resources. However, there are lots of good reasons to comply. http://www.hhs.gov/web/section-508/why-comply/index.html# http://www.hhs.gov/web/section-508/why-comply/index.html# The Guidelines are very well presented and include a description of the Guideline, along with a rationale and excellent examples. (See next few slides). (https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the- section-508-standards/guide-to-the-section-508-standards/web-based-intranet-and-internet- information-and-applications-1194-22)https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the- section-508-standards/guide-to-the-section-508-standards/web-based-intranet-and-internet- information-and-applications-1194-22 Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 67 Source: https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-section-508- standards/guide-to-the-section-508-standards/web-based-intranet-and-internet-information-and-applications-1194-22https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-section-508- standards/guide-to-the-section-508-standards/web-based-intranet-and-internet-information-and-applications-1194-22

68. 508 The 16 guidelines are (a) A text equivalent for every non-text element (b) Equivalent alternatives for any multimedia presentation all information conveyed with color is also available without color, for example from context or markup. (c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. (d) Documents shall be organized so they are readable without requiring an associated style sheet. (e) Redundant text links shall be provided for each active region of a server-side image map. Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 68 Source: https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-section-508- standards/guide-to-the-section-508-standards/web-based-intranet-and-internet-information-and-applications-1194-22https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-section-508- standards/guide-to-the-section-508-standards/web-based-intranet-and-internet-information-and-applications-1194-22

69. 508 The 16 guidelines are (f) Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape. (g) Row and column headers shall be identified for data tables. (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. (i) Frames shall be titled with text that facilitates frame identification and navigation. (j) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz. Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 69 Source: https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-section-508- standards/guide-to-the-section-508-standards/web-based-intranet-and-internet-information-and-applications-1194-22https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-section-508- standards/guide-to-the-section-508-standards/web-based-intranet-and-internet-information-and-applications-1194-22

70. 508 The 16 guidelines are (k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of these standards, when compliance cannot be accomplished in any other way. (l) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology. (m) When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l). Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 70 Source: https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-section-508- standards/guide-to-the-section-508-standards/web-based-intranet-and-internet-information-and-applications-1194-22https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-section-508- standards/guide-to-the-section-508-standards/web-based-intranet-and-internet-information-and-applications-1194-22

71. 508 The 16 guidelines are (n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. (o) A method shall be provided that permits users to skip repetitive navigation links. (p) When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required. Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 71 Source: https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-section-508- standards/guide-to-the-section-508-standards/web-based-intranet-and-internet-information-and-applications-1194-22https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-section-508- standards/guide-to-the-section-508-standards/web-based-intranet-and-internet-information-and-applications-1194-22

72. Tools for 508 Compliance Testing 1.Best accessibility testing tools, for public and private environments: https://www.inqbation.com/508-compliance- testing-tools-for-password-protected-vpn-sites/https://www.inqbation.com/508-compliance- testing-tools-for-password-protected-vpn-sites/ 2.508 checker: http://www.508checker.com/http://www.508checker.com/ 3.SortSite - Accessibility Checker and Validator http://www.powermapper.com/products/sortsite/checks/acce ssibility-checks/ http://www.powermapper.com/products/sortsite/checks/acce ssibility-checks/ 4.Criterion’s Section 508 & WCAG Testing http://www.criterion508.com/Compliance?gclid=CMPC- 93ix8oCFYVFaQodCpwHag http://www.criterion508.com/Compliance?gclid=CMPC- 93ix8oCFYVFaQodCpwHag Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 72 Source: http://www.section508.gov/#main-content and http://www.section508.gov/content/learn/laws-and-policieshttp://www.section508.gov/#main-contenthttp://www.section508.gov/content/learn/laws-and-policies

73. ARIA 1.0 Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 73 Accessible Rich Internet Applications (ARIA) helps make Web content and Web applications in Ajax and JavaScript become more accessible. ARIA enables accessible navigation landmarks, JavaScript widgets, form hints and error messages, live content updates, and more. ARIA is a set of special accessibility attributes which can be added to any markup, but is especially suited to HTML. The role attribute defines what the general type of object is (such as an article, alert, or slider). Additional ARIA attributes provide other useful properties, such as a description for a form or the current value of a progress bar. ARIA is implemented in most popular browsers and screen readers. However, implementations vary and older technologies don't support it well (if at all). Use either "safe" ARIA that degrades gracefully, or ask users to upgrade to newer technology. Source: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIAhttps://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

74. ARIA 1.0 Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 74 See the W3C’s “Notes on Using ARIA in HTML.” This is a relatively new (2014) standard. ARIA adds accessibility information to HTML elements using the Accessible Rich Internet Applications specification [WAI-ARIA-1.1], which defines a way to make Web content and Web applications more accessible to people with disabilities. This document demonstrates how to use WAI-ARIA in HTML5, it especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. See the W3C’s article, “WAI-ARIA Expands Web Accessibility” at (https://www.w3.org/blog/2014/03/wai-aria-expands-web-accessibility/).https://www.w3.org/blog/2014/03/wai-aria-expands-web-accessibility/ Finally, for an overview of the W3C Guidelines for ARIA see: (https://www.w3.org/WAI/intro/aria )https://www.w3.org/WAI/intro/aria

75. ARIA 1.0 Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 75 ARIA is also defined as a spec from the W3C and created to improve accessibility of applications by providing extra information to screen readers via HTML attributes. Out of the box, screen readers work with regular HTML, but adding ARIA can provide screen reader users with more context and greater interactivity with content. ARIA has no effect on how elements are displayed or behave in browsers. It does not add new functionality and is meant to act only as an extra descriptive layer for screen readers. See Marco's Accessibility Blog for more. (https://www.marcozehe.de/2014/03/27/what-is-wai-aria-what-does-it-do-for-me-and-what-not/)https://www.marcozehe.de/2014/03/27/what-is-wai-aria-what-does-it-do-for-me-and-what-not/ Source: http://a11yproject.com/posts/getting-started-aria/http://a11yproject.com/posts/getting-started-aria/

76. ARIA 1.0 Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 76 ARIA Guidelines are written up here: (https://www.w3.org/TR/wai-aria/)https://www.w3.org/TR/wai-aria/ Here’s the problem ARIA addresses: “… web application developers create collapsible tree widgets in HTML using CSS and JavaScript even though HTML has no semantic tree element. To a non- disabled user, it may look and act like a collapsible tree widget, but without appropriate semantics, the tree widget may not be perceivable to, or operable by, a person with a disability because assistive technologies may not recognize the role.” Thus, the whole standard is based primarily on the “Roles Model.” (https://www.w3.org/TR/wai-aria/roles).https://www.w3.org/TR/wai-aria/roles The current status of ARIA is here (https://www.w3.org/WAI/ARIA/faq#status).https://www.w3.org/WAI/ARIA/faq#status Source: http://a11yproject.com/posts/getting-started-aria/http://a11yproject.com/posts/getting-started-aria/

77. ARIA 1.0 Here’s the advice that the W3C gives web designers about ARIA … “Web developers can implement WAI-ARIA in two ways” “Use existing toolkits that incorporate WAI-ARIA techniques. In this case, you don't need to understand much about WAI-ARIA since it's already built in.” “Include WAI-ARIA techniques in your custom widgets. When developing custom widgets, add WAI-ARIA properties to provide basic type (role), state and change information. Documentation and examples are available in the WAI-ARIA Best Practices (http://www.w3.org/TR/wai-aria-practices/). You should test the results using screen readers, other assistive technologies, and testing tools, some of which are available for free”http://www.w3.org/TR/wai-aria-practices/ Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 77 Source: https://www.w3.org/WAI/ARIA/faq#statushttps://www.w3.org/WAI/ARIA/faq#status

78. ARIA 1.0 Further notes (thanks Derek Allard!!). (http://derekallard.com/)http://derekallard.com/ Some tools currently in use (i.e.: Bootstrap) already have ARIA rolled in. While not required (to work with Bootstrap), their code samples are littered with ARIA code. For example here's a snippet code sample they use for their modal windows (https://getbootstrap.com/javascript/#modals).https://getbootstrap.com/javascript/#modals × Modal title [snip].... There's role="dialog", aria-label="Close", aria-hidden, etc.. They also follow good practices, with notes like this (https://getbootstrap.com/css/#tables-contextual- classes). Bootstrap also implements a custom class called sr-only.https://getbootstrap.com/css/#tables-contextual- classes Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 78

79. ARIA 1.0 Conveying meaning to assistive technologies Using color to add meaning to a table row or individual cell only provides a visual indication, and will not be conveyed to users of assistive technologies (such as screen readers). Ensure that information denoted by the color is either obvious from the content itself (the visible text in the relevant table row/cell), or is included through alternative means, such as additional text hidden with the.sr-only class. And always add labels. Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the.sr-only class. There are further alternative methods of providing a label for assistive technologies, such as the aria-label, aria-labelledby or title attribute. If none of these is present, screen readers may resort to using the placeholder attribute, if present, but note that use of placeholder as a replacement for other labelling methods is not advised. Thanks Derek Allard (http://derekallard.com/).http://derekallard.com/ Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 79

80. Tools For ARIA Compliance See Rick Brown’s ARIA validator for use in the Chrome Browser https://chrome.google.com/webstore/detail/aria- validator/oigghlanfjgnkcndchmnlnmaojahnjoc https://chrome.google.com/webstore/detail/aria- validator/oigghlanfjgnkcndchmnlnmaojahnjoc See also http://ariatemplates.com/usermanual/latest/validatorshttp://ariatemplates.com/usermanual/latest/validators http://juicystudio.com/article/validating-aria-markup.php And Total Validator https://www.totalvalidator.com/ https://www.totalvalidator.com/ Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 80

81. Making MS Word Docs Accessible Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 81 ADOD (Accessible Digital Office Document) is the most important resource to include for all Office documents as well as for products other than MS Office (Excel, Power Point, etc.) (http://adod.idrc.ocad.ca/).http://adod.idrc.ocad.ca/ WebAIM is also very helpful. They stress the importance of using stylesheets in MS Word (http://webaim.org/techniques/word/).http://webaim.org/techniques/word/ Microsoft’s own tips for creating accessible documents flow logically from the WAI. See “Creating accessible Word documents” at https://support.office.com/en-us/article/Creating- accessible-Word-documents-d9bf3683-87ac-47ea-b91a-78dcacb3c66dhttps://support.office.com/en-us/article/Creating- accessible-Word-documents-d9bf3683-87ac-47ea-b91a-78dcacb3c66d Michigan State University has an interesting tutorial on the subject as well. See http://webaccess.msu.edu/Tutorials/word-windows.htmlhttp://webaccess.msu.edu/Tutorials/word-windows.html

82. Oh! The Problems with Power Point! 82 Power Point is a very challenging environment to make accessible. Here are 3 of the main sources of difficulty. 1. When you build slides you can add elements in any order you want and you can drag and drop them into different locations. TTS software needs to tell the user the order in which these elements have to be read. 2. Microsoft added a “Title” field and an “Description” field in Office 10. It’s under the umbrella of a larger field called, “Alt Text.” These fields are automatically generated every time you create a new slide (and sometimes they are even automatically populated), but they do not operate in any consistent way. 3. Importing elements into a slide, or exporting the whole presentation into another medium, i.e.: PDF or HTML creates all kinds of inconsistencies, ambiguities, confusions and problems. Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016

83. What’s the Reading Order? 83 Here’s a screen capture of the previous slide. The PPt logo was pasted in. Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 I went to the Home tab and on the far right under “Editing,” I chose “Selection Pane.” This is where you control the order in which the elements are read by a TTS. You can drag and drop to change the order. Decide the order that you want the TTS software to read the slide. The trick is, however, is that the TTS reads from the bottom up!!! It’s up to you to establish a logical reading order.

84. What’s Up with Alt, Description and Title 84 The second problem has to do with how elements are imported into Power Point and what that does to the Title and Description fields. If I go to Google, right-click on a image and copy and paste it into Power Point, the Description field is automatically populated with the source URL of the image. You can see it by right-clicking on the image, choosing Format Picture, going to Size and Properties and exploding Alt Text. There, you’ll see Title and Description. Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 However, if you use a tool like Snagit (https://www.techsmith.com/snagit.h tml), Power Point records the file name (not the URL) in one of the Alt fields (Description).https://www.techsmith.com/snagit.h tml

85. Export Problems 85 The third problem has to do what happens when you try to export the whole presentation into another format like PFD or HTML. When you export a Power Point to HTML it merges everything under the Alt filed (i.e.: Title and Description) into a single alt attribute. There’s no way to de-automate the process, so you may have to go into the HTML and edit manually. When you export to PDF the Title field does not get exported—only the description. The recommended (safest) approach is to leave Title blank and fill in the Description field. Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016

86. More on Power Point Accessibility 86 Microsoft has their own tutorial called “Creating accessible PowerPoint presentations.” See https://support.office.com/en- us/article/Creating-accessible-PowerPoint-presentations-6f7772b2- 2f33-4bd2-8ca7-dae3b2b3ef25https://support.office.com/en- us/article/Creating-accessible-PowerPoint-presentations-6f7772b2- 2f33-4bd2-8ca7-dae3b2b3ef25 WebAIM has their own tutorial as well. It’s very good. See http://webaim.org/techniques/powerpoint/ http://webaim.org/techniques/powerpoint/ Have a look at the Accessible Digital Office Document (ADOD) Project. This resource is very good. See http://adod.idrc.ocad.ca/powerpoint2010 http://adod.idrc.ocad.ca/powerpoint2010 There’s even a 508 standard for Power Point. See PowerPoint Document 508 Checklist at http://www.hhs.gov/web/section- 508/making-files-accessible/checklist/ppt/index.htmlhttp://www.hhs.gov/web/section- 508/making-files-accessible/checklist/ppt/index.html Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016

87. Making PDF Docs Accessible Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 87 WebAIM has a great tutorial on this topic. See PDF Accessibility at http://webaim.org/techniques/acrobat/http://webaim.org/techniques/acrobat/ And Adobe has been very active in offering guidelines for making PDF files accessible. See http://www.adobe.com/accessibility/products/acrobat/training.html http://www.adobe.com/accessibility/products/acrobat/training.html Recall ALSO that Adobe is a major supporter / sponsor of the WAI and the W3C

88. Paolucci. Seneca College Webmaster Ver. 4.1 on May 24, 2016 88 This is the end ( Omega) of this presentation but the beginning ( Alpha) of your journey to make your designs compliant with accessibility standards. Good luck!