Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

10 Tips for Creating Accessible Web Content with (Updated) WCAG

366 views

Published on

In this webinar Janet Sylvia, Web Accessibility Consultant, will provide 10 Tips for creating accessible web content following the updated Web Content Accessibility Guidelines (WCAG). This presentation is for anyone involved in the design, development or delivery of web-based information. This includes academic and online courses, websites and web-based applications, mobile technologies and procured goods and services.

For an accessible version, please watch the presentation video here: https://www.3playmedia.com/resources/recorded-webinars/wbn-03-21-2019-10-tips/

Published in: Design
  • Be the first to comment

  • Be the first to like this

10 Tips for Creating Accessible Web Content with (Updated) WCAG

  1. 1. 10 Tips for Creating Accessible Web Content with (Updated) WCAG Janet Sylvia Web Accessibility Consultant www.3playmedia.com Twitter: @3playmedia Live tweet: #a11y • Type questions in the window during the presentation • This webinar is being recorded & will be available for replay • To view live captions, please click the CC icon
  2. 2. Janet Sylvia Web Accessibility Consultant andTrainer March 21, 2019
  3. 3. ¡ Web Access for People with Disabilities ¡ 10Tips for Creating Accessible Web Content with (Updated)WCAG
  4. 4. ¡ Cognitive ¡ Hearing ¡ Motor ¡ Visual
  5. 5. ¡ Products, equipment and systems that enhance learning, working and daily living for people with disabilities ¡ Use preferred modality to access web content § Hearing, Sight, Speech,Touch
  6. 6. ¡ Text-to-Speech § (with highlighter) ¡ Mind Map
  7. 7. ¡ Captions ¡ Sign Language Interpreter
  8. 8. ¡ Griffin MouthStick Stylus ¡ Speech Generator with EyeTracker § tobiiDynavox
  9. 9. ¡ Refreshable Braille ¡ Screen Reader ¡ Screen Magnifier § Dolphin SuperNova Magnifier & Speech
  10. 10. ¡ International recommendations for making web content accessible for people with disabilities § For legal requirements, check with your home country, territory, state, municipality, etc. ¡ 78 Success Criteria § 30 (A)* § 22 (AA)* § 26 (AAA)
  11. 11. ¡ Include § Contact Name, Address, Email, Phone Number § Statement of Conformance § ResponseTime § Add to: website, course homepage, syllabus, etc. ¡ Benefits § Cognitive, Hearing, Motor,Visual
  12. 12. ¡ Ensure content is readable and understandable § Language § PageTitles § Semantic Structure § Text Spacing ¡ Benefits § Cognitive, Motor,Visual
  13. 13. ¡ Designate § Primary Language: entire document (HTML, Word, PDF, etc.) § Secondary Language(s): paragraph(s) or blocks of text appearing in different language from Primary
  14. 14. ¡ ProvideTitle that describes topic or purpose § Web page, document, presentation, spreadsheet, etc.
  15. 15. ¡ Headings (H1…H6) § H1 forTitle § H2 SectionTitles § H3 SubsectionTitles ¡ Bulleted List ¡ Ordered List ¡ Strong (not bold) ¡ Emphasis (not Italics)
  16. 16. ¡ No loss of content or functionality occurs by setting all of the following: § Letter spacing (tracking) at least .12 times the font size § Line height (line spacing) at least 1.5 times the font size § Spacing following paragraphs at least 2 times font size § Word spacing at least .16 times the font size
  17. 17. ¡ For websites using responsive design § Content can be presented magnified at 400% ▪ without loss of information or functionality ▪ without requiring scrolling in 2 dimensions ¡ PDF Accessibility Checker>Reflow ¡ Benefits § Cognitive,Visual
  18. 18. Original Reflow Does NOT Reflow
  19. 19. ¡ Content does not restrict its view and operation to a single display orientation ¡ Benefits § Cognitive, Motor,Visual Displays2Go Table Mount
  20. 20. ¡ All functionality is operable using a keyboard § Keyboard-only Access § No KeyboardTrap ¡ Benefits § Cognitive, Motor,Visual Maltron Head/Mouth Stick Adaptive Keyboard
  21. 21. ¡ Help users navigate the page, find specific content, and determine where they are. § Bypass Blocks ofText § Consistent Navigation & Identification § Descriptive Hyperlinks § Focus Order & FocusVisible ¡ Benefits § Cognitive, Motor,Visual
  22. 22. Griffin Mouth Stick Stylus
  23. 23. ¡ Consistent Navigation § Mechanisms repeated on multiple pages occur in same relative order. Ex: Navigation Menu, Skip to Main Content, Search ¡ Consistent Identification § Components with the same functionality are identified consistently.
  24. 24. ¡ Purpose of each link can be determined from the link text alone § Link text is unique for unique destinations § Pass Fail § W3C Homepage URL § CaptioningTip Sheet (PDF) Click Here
  25. 25. ¡ Focus Order § navigation receives focus in order that makes sense ¡ FocusVisible § keyboard focus indicator is visible
  26. 26. ¡ Regarding time limits, provide users enough time to read and use content by providing mechanism to: § Turn Off § Adjust § Extend ¡ Benefits § Cognitive, Hearing, Motor,Visual
  27. 27. ¡ Multi-page Forms First Page: ¡ Allow additional 15 minutes per page. ¡ Pedestal Kiosk (Advanced Kiosks) ¡ Still working? Hit any key. (20 seconds before timeout)
  28. 28. ¡ Use of Color § Color is not the sole means of conveying important information, indicating action, prompting a response, or distinguishing a visual element ¡ Contrast Ratio § Foreground (text) color and background color § Non-text element and surrounding color ¡ Benefits § Cognitive,Visual
  29. 29. ¡ Text: Minimum contrast ratio of 4.5:1 ¡ LargeText (18 or 14pt Bold): Minimum 3:1 ¡ Non-Text: Minimum contrast ratio of 3:1 Pass Fail
  30. 30. ¡ ProvideText Alternatives for Non-Text Content § Animation, Chart, Graph, Form Control, Icon, Org Chart, Photograph,Thumbnail, etc. ¡ Benefits § Cognitive,Visual
  31. 31. ¡ W3C Web AccessibilityTutorials>Images
  32. 32. ¡ Provide Accessible Alternatives to Media, including: § Audio-only § Video-only § Audio/Video § Audio/Video withText ¡ Media Player Accessibility ¡ Benefits § Cognitive, Hearing, Motor,Visual
  33. 33. ¡ Audio Description § Extended Audio Description ¡ Captions ¡ DescriptiveTextTranscript ¡ Media Alternative toText ¡ Sign Language
  34. 34. ¡ Audio Description § Audio added to natural pauses in existing soundtrack § Provides important visual details not described in soundtrack ¡ Extended Audio Description § Extends original soundtrack to include audio descriptions Note: If descriptions of visual details are provided in the audio or the video is a talking head, Audio Description is not needed
  35. 35. ¡ Text alternatives added to synchronized media for both speech and non-speech information conveyed through sound, including: § Dialogue § Meaningful sound effects (applause, laughter, music, etc.) § Speaker Identification
  36. 36. ¡ Text alternative which conveys audio and/or visual content and may include: § Spoken Word § Key audible sounds that contribute to meaning § Key visual information needed for comprehension § Hyperlinks to interactive components
  37. 37. ¡ Media file that presents no more information than presented viaText. Formats include: § Audio-only § Video-only § Audio/Video Note: Since this media is an accessible alternative to text, Captions are not required.
  38. 38. ¡ Sign language interpretation is provided for audio component of synchronized media § American Sign Language (ASL) § British Sign Language (BSL) § Irish Sign Language (ISL) § Etc.
  39. 39. ¡ Audio-only § Live: Captions (AA); Sign Language (AAA) § Pre-recorded: DescriptiveTextTranscript (AA) ¡ Video-only § Pre-recorded: DescriptiveTextTranscript or Media Alternative (AA) ¡ Audio/Video § Live: Captions (AA), Sign Language (AAA) § Pre-Recorded: Audio Description, Captions, DescriptiveText Transcript (AA); Extended Audio Description, Sign Language (AAA)
  40. 40. 1. Accessibility Statement 2. Readability 3. Reflow 4. Orientation 5. Keyboard Accessible 6. Navigation 7. EnoughTime 8. Color and Contrast 9. Text Alternatives 10. Multimedia
  41. 41. Janet Sylvia Accessibility Consultant &Trainer jsaccessibility@gmail.com

×