Successfully reported this slideshow.

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

4

Share

1 of 70
1 of 70

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

4

Share

Download to read offline

Discussion / proposal for an alternative to P.O.U.R. from the W3C for reviewing web content for accessibility purposes.

Discussion / proposal for an alternative to P.O.U.R. from the W3C for reviewing web content for accessibility purposes.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

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

  1. 1. S.I.F.T. Through Your Content for ACCESSIBILITY #heweb16 | @lightjump Image courtesy borealnz, Flickr
  2. 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. 3. #heweb16 | @lightjump Image courtesy Academy of Achievement, YouTube -Timothy Berners-Lee (Inventor of the World Wide Web)
  4. 4. #heweb16 | @lightjump Image courtesy thecheges, WordPress Why S.I.F.T.?
  5. 5. #heweb16 | @lightjump Image courtesy thecheges, WordPress To get the BUGSout.
  6. 6. #heweb16 | @lightjump Image courtesy Tellmewhat, Flickr What are the typical barriers to accessibility?
  7. 7. #heweb16 | @lightjump Image, © New Line Cinema Heading & Structure
  8. 8. #heweb16 | @lightjump Image, © New Line Cinema Visible Focus
  9. 9. #heweb16 | @lightjump Image, © New Line Cinema Alternative Text
  10. 10. #heweb16 | @lightjump Image, © New Line Cinema Color & Contrast
  11. 11. #heweb16 | @lightjump Image, © New Line Cinema Skip Links
  12. 12. #heweb16 | @lightjump Image, © New Line Cinema Keyboard Traps
  13. 13. #heweb16 | @lightjump Image, © New Line Cinema Carousels & Slideshows
  14. 14. #heweb16 | @lightjump Image, © New Line Cinema Forms
  15. 15. #heweb16 | @lightjump Image, © New Line Cinema Captcha
  16. 16. #heweb16 | @lightjump Image, © New Line Cinema Tables
  17. 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. 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. 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. 20. #heweb16 | @lightjump Image, © New Line Cinema 208 Web Accessibility Best Practices
  21. 21. #heweb16 | @lightjump Image, © New Line Cinema 208 Web Accessibility Best Practices Available at: https://www.webaccessibility.com/ best_practices.php
  22. 22. #heweb16 | @lightjump Image, © New Line Cinema Nearly 57 Million
  23. 23. #heweb16 | @lightjump Image, © New Line Cinema
  24. 24. #heweb16 | @lightjump Image, © New Line Cinema What can Thorin’s map teach us about Accessibility?
  25. 25. #heweb16 | @lightjump Image, © New Line Cinema, & Metro-Goldwyn Mayer Something is missing…
  26. 26. #heweb16 | @lightjump Image, © New Line Cinema, & Metro-Goldwyn Mayer “This content doesn’t make any sense…”
  27. 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. 28. #heweb16 | @lightjump Image, © New Line Cinema, & Metro-Goldwyn Mayer The image was missing alternative text.
  29. 29. #heweb16 | @lightjump -- Automated Evaluation Tools
  30. 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. 31. #heweb16 | @lightjump Image courtesy FearlessGuster, iFunny.co Wha…?
  32. 32. #heweb16 | @lightjump http://webaim.org/articles/pour/ Building a P.O.U.R. website • Perceivable • Operable • Understandable • Robust
  33. 33. #heweb16 | @lightjump Image courtesy FearlessGuster, iFunny.co Wha…?
  34. 34. #heweb16 | @lightjump Image courtesy borealnz, Flickr S.I.F.T. through your website • Structure • Images • Forms • Tables
  35. 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. 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. 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. 38. #heweb16 | @lightjump -- S.I.F.T. through your website •<html lang=“en”> •<html xml:lang=“en”> (if XHTML) Structure > Set the language
  39. 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. 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. 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. 42. #heweb16 | @lightjump Image, © www.Lifetool.at S.I.F.T. through your website Structure > Use skip links
  43. 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. 44. #heweb16 | @lightjump Image courtesy Wikipedia S.I.F.T. through your website Structure Question!
  45. 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. 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. 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. 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. 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. 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. 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. 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. 53. #heweb16 | @lightjump Image courtesy Wikipedia S.I.F.T. through your website Images Question!
  54. 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. 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. 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. 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. 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. 59. #heweb16 | @lightjump Image courtesy Wikipedia S.I.F.T. through your website Forms Question!
  60. 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. 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. 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. 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. 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. 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. 66. #heweb16 | @lightjump -- S.I.F.T. through your website Tables Question!
  67. 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. 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. 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. 70. #heweb16 | @lightjump -- Questions? Justin Gatewood lightjump@gmail.com Slides: slideshare.net/lightjump

×