Advertisement
Advertisement

More Related Content

Viewers also liked(20)

Advertisement

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

More from Justin Gatewood(20)

Advertisement

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
Advertisement