S.I.F.T. Through Your Content For Accessibility

1. S.I.F.T. Through Your Content for ACCESSIBILITY #heweb16 | @lightjump Image courtesy borealnz, Flickr

2. •Born: 1971 (Monterey, CA) •1st PC: Commodore 64 •1st Online: 1986 •1st Web Job: 1996 •1st Higher Ed Web Job: 2006 •Email: Justin.Gatewood@vvc.edu Image courtesy Wikipedia#heweb16 | @lightjump

3. #heweb16 | @lightjump Image courtesy Academy of Achievement, YouTube -Timothy Berners-Lee (Inventor of the World Wide Web)

4. #heweb16 | @lightjump Image courtesy thecheges, WordPress Why S.I.F.T.?

5. #heweb16 | @lightjump Image courtesy thecheges, WordPress To get the BUGSout.

6. #heweb16 | @lightjump Image courtesy Tellmewhat, Flickr What are the typical barriers to accessibility?

7. #heweb16 | @lightjump Image, © New Line Cinema Heading & Structure

8. #heweb16 | @lightjump Image, © New Line Cinema Visible Focus

9. #heweb16 | @lightjump Image, © New Line Cinema Alternative Text

10. #heweb16 | @lightjump Image, © New Line Cinema Color & Contrast

11. #heweb16 | @lightjump Image, © New Line Cinema Skip Links

12. #heweb16 | @lightjump Image, © New Line Cinema Keyboard Traps

13. #heweb16 | @lightjump Image, © New Line Cinema Carousels & Slideshows

14. #heweb16 | @lightjump Image, © New Line Cinema Forms

15. #heweb16 | @lightjump Image, © New Line Cinema Captcha

16. #heweb16 | @lightjump Image, © New Line Cinema Tables

17. #heweb16 | @lightjump Image, © New Line Cinema 10 Common Barriers to Accessibility • Heading Structure • Visible Focus • Alternative Text (for images) • Color Contrast • Skip Links • Keyboard traps • Carousels & Slideshows (no controls) • Forms • Captcha • Tables

18. #heweb16 | @lightjump Image, © New Line Cinema 12 Principles of Accessible Design • Alternative text • HTML structure • Table headers • Form completion • Sufficient link text • Captions/transcripts • Non-HTML content • ‘skip’ links • Color/Contrast • Well written content • Accessible JS • Standards

19. #heweb16 | @lightjump Image, © New Line Cinema 12 Principles of Accessible Design • Alternative text • HTML structure • Table headers • Form completion • Sufficient link text • Captions/transcripts • Non-HTML content • ‘skip’ links • Color/Contrast • Well written content • Accessible JS • Standards Available at: http://webaim.org/intro/#principles

20. #heweb16 | @lightjump Image, © New Line Cinema 208 Web Accessibility Best Practices

21. #heweb16 | @lightjump Image, © New Line Cinema 208 Web Accessibility Best Practices Available at: https://www.webaccessibility.com/ best_practices.php

22. #heweb16 | @lightjump Image, © New Line Cinema Nearly 57 Million

23. #heweb16 | @lightjump Image, © New Line Cinema

24. #heweb16 | @lightjump Image, © New Line Cinema What can Thorin’s map teach us about Accessibility?

25. #heweb16 | @lightjump Image, © New Line Cinema, & Metro-Goldwyn Mayer Something is missing…

26. #heweb16 | @lightjump Image, © New Line Cinema, & Metro-Goldwyn Mayer “This content doesn’t make any sense…”

27. #heweb16 | @lightjump Image, © New Line Cinema, & Metro-Goldwyn Mayer Developer takes a look at the code… …using Assistive Technology (SCD – Solid Crystal Display)

28. #heweb16 | @lightjump Image, © New Line Cinema, & Metro-Goldwyn Mayer The image was missing alternative text.

29. #heweb16 | @lightjump -- Automated Evaluation Tools

30. #heweb16 | @lightjump -- Automated Evaluation Tools No automated evaluation tool can tell you if your site is accessible, or even compliant. Manual testing is always necessary. http://www.section508.gov/content/automated-evaluation-tools

31. #heweb16 | @lightjump Image courtesy FearlessGuster, iFunny.co Wha…?

32. #heweb16 | @lightjump http://webaim.org/articles/pour/ Building a P.O.U.R. website • Perceivable • Operable • Understandable • Robust

33. #heweb16 | @lightjump Image courtesy FearlessGuster, iFunny.co Wha…?

34. #heweb16 | @lightjump Image courtesy borealnz, Flickr S.I.F.T. through your website • Structure • Images • Forms • Tables

35. #heweb16 | @lightjump Image courtesy Wikipedia S.I.F.T. through your website •Use Headings •Use Lists •Set the Language •Test with only a keyboard •Use descriptive link text •Use ‘skip’ links •Test enlarging page content Structure

36. #heweb16 | @lightjump -- S.I.F.T. through your website •One <h1> •Then <h2> •<h3>, and so on… •Use proper nesting – don’t skip levels Structure > Use Headings

37. #heweb16 | @lightjump -- S.I.F.T. through your website •<ul> and/or <ol> (with nested <li>) •<dl> (with nested <dd>) •Not for visual layout •Empty lists are incorrect HTML Structure > Use Lists

38. #heweb16 | @lightjump -- S.I.F.T. through your website •<html lang=“en”> •<html xml:lang=“en”> (if XHTML) Structure > Set the language

39. #heweb16 | @lightjump -- S.I.F.T. through your website •Users must be able to navigate to and select each link using the keyboard alone. Structure > Test w/keyboard

40. #heweb16 | @lightjump -- S.I.F.T. through your website •Links do not need to include “link” in the link text (users already know it’s a link) •Avoid ‘click here’, ‘read more’, in link text Structure > Descriptive link text

41. #heweb16 | @lightjump -- S.I.F.T. through your website •Provide a link at the top of the page which jumps the user down to an anchor or target at the beginning of the main content. Structure > Use skip links

42. #heweb16 | @lightjump Image, © www.Lifetool.at S.I.F.T. through your website Structure > Use skip links

43. #heweb16 | @lightjump -- S.I.F.T. through your website •To see how the page will look for low- vision users. Structure > Test enlarging page content

44. #heweb16 | @lightjump Image courtesy Wikipedia S.I.F.T. through your website Structure Question!

45. • Use ‘alt’ text • Use empty ‘alt’ if image is not content • Limit Animations • Icons • Color / Contrast • Avoid flashing images or media • Captions/transcripts #heweb16 | @lightjump Image courtesy Wikipedia S.I.F.T. through your website Images (including media – video/audio)

46. #heweb16 | @lightjump -- S.I.F.T. through your website • Present the CONTENT and FUNCTION of the images in your web content. Images > Alternative Text

47. #heweb16 | @lightjump -- S.I.F.T. through your website • If image is not content or functional (is decorative only) give an empty or null alt tag • EXAMPLE: alt=“ “ (space between quotes) • RESULT: Screen readers will skip this tag Images > Empty Alt tag for non-content

48. #heweb16 | @lightjump -- S.I.F.T. through your website • Animation should almost always be user controlled or very short in duration. Images > Limit animation

49. #heweb16 | @lightjump -- S.I.F.T. through your website • If used, ensure they are well designed, easy to understand and used consistently. Images > Icons

50. #heweb16 | @lightjump -- S.I.F.T. through your website • Provide alternative methods to identify differences that are not dependent on color. • Text must sufficiently contrast with the background. Images > Color and Contrast

51. #heweb16 | @lightjump -- S.I.F.T. through your website • Bright, strobing images or media can cause photoepileptic seizures if they: • Flash more than 2 times per second • Are sufficiently large or bright. • Additionally, the color red is more likely to cause a seizure. Images > Avoid flashing images/media

52. #heweb16 | @lightjump -- S.I.F.T. through your website • Captions should be: • Synchronized • Equivalent • Accessible • Add text transcript on page Images > Captions/transcripts

53. #heweb16 | @lightjump Image courtesy Wikipedia S.I.F.T. through your website Images Question!

54. #heweb16 | @lightjump Image courtesy Wikipedia S.I.F.T. through your website • Use <label> • Use <fieldset> • Use <legend> • Test with keyboard • Match for and id • No empty buttons • Avoid multi-select menus • Alt text for img buttons • JS jump menu issue Forms

55. #heweb16 | @lightjump -- S.I.F.T. through your website • <label for=“name”>Name:</label> • <input id=“name” type=“text” name=“textfield”> Forms > use <label>

56. #heweb16 | @lightjump -- S.I.F.T. through your website • <fieldset> surrounds the group of radio buttons • <legend> provides a description for the grouping • <fieldset> <legend>Select your pizza toppings:</legend> <input id="ham" type="checkbox" name="toppings" value="ham"> <label for="ham">Ham</label><br> <input id="pepperoni" type="checkbox" name="toppings" value="pepperoni"> <label for="pepperoni">Pepperoni</label><br> <input id="mushrooms" type="checkbox" name="toppings" value="mushrooms"> <label for="mushrooms">Mushrooms</label><br> <input id="olives" type="checkbox" name="toppings" value="olives"> <label for="olives">Olives</label> </fieldset> Forms > use <fieldset> & <legend>

57. #heweb16 | @lightjump -- S.I.F.T. through your website • Ensure there aren’t any ‘traps’ in the form that would prevent a user from completing the form. Forms > Test with keyboard alone

58. #heweb16 | @lightjump -- S.I.F.T. through your website • Buttons must never be left empty, • Avoid multi-select menus, • Include alt text on img buttons • JS forms – provide a submit button separate from the choices Forms > wrap-up

59. #heweb16 | @lightjump Image courtesy Wikipedia S.I.F.T. through your website Forms Question!

60. #heweb16 | @lightjump -- S.I.F.T. through your website • Use <caption> • Use <th> • Use <scope> • Avoid spanned cells • Avoid multi-level header cells • Use proportional sizing (% over px) • Avoid the summary attribute • <thead> & <tfoot> not really necessary Tables

61. #heweb16 | @lightjump -- S.I.F.T. through your website • Must be the first tag after the opening <table> tag. • Brief, indicates the content of that table. Tables > Use <caption>

62. #heweb16 | @lightjump -- S.I.F.T. through your website • Should never be empty. • Helps screen reader users understand the context of content in each table cell. Tables > Use <th>

63. #heweb16 | @lightjump -- S.I.F.T. through your website • Identifies whether a table header is a column header or row header: • <th scope=“col”>, or • <th scope=“row”> Tables > Use scope

64. #heweb16 | @lightjump -- S.I.F.T. through your website • Helps low vision users when enlarging text content • Defined cell heights should be avoided so the cell can expand downward to accommodate its content when enlarged. Tables > Use proportional sizing (%)

65. #heweb16 | @lightjump -- S.I.F.T. through your website • Spanned cells Multi-level header cells • Summary attribute (not part of HTML5 spec) • <thead> & <tfoot> - not necessary for accessibility Tables > Things to avoid

66. #heweb16 | @lightjump -- S.I.F.T. through your website Tables Question!

67. #heweb16 | @lightjump Image courtesy Wikipedia However difficult life may seem, there is always something you can do and succeed at, it matters that YOU DON’T JUST GIVE UP… - Stephen Hawking

68. #heweb16 | @lightjump -- Useful Free Tools • Vischeck – simulates colorblind vision • http://www.vischeck.com • Accessify – Quick Form, Skipnav, Navigation & jQuery Function Builders • http://www.accessify.com • WebAIM Tools: • Web Accessibility Evaluation Tool (WAVE) • http://wave.webaim.org • Color Contrast Checker • http://webaim.org/resources/contrastchecker/ • Penn State Accessibility Resources • http://accessibility.psu.edu/

69. #heweb16 | @lightjump -- Useful Resources • W3.org/WAI/ - (W3C Web Accessibility Initiative) • WebAIM.org – (Web Accessibility in Mind) • Knowbility.org • Usability.gov • Webaccessibility.com • AccessIQ.org (Australia) • InteractiveAccessibility.com • Ahead.org (Association on Higher Ed & Disability) • NCDAE.org (Nat’l Center on Disability & Access to Ed.)

70. #heweb16 | @lightjump -- Questions? Justin Gatewood lightjump@gmail.com Slides: slideshare.net/lightjump

S.I.F.T. Through Your Content For Accessibility

You are reading a preview.

S.I.F.T. Through Your Content For Accessibility

More Related Content

Viewers also liked

Similar to S.I.F.T. Through Your Content For Accessibility

More from Justin Gatewood

Featured

Related Books

Related Audiobooks