eduWeb 2017 - S.I.F.T. Through Your Content For Accessibility
3 likes559 views
The document outlines key barriers to web accessibility and presents the 12 principles of accessible design, including alternative text, proper HTML structure, and sufficient link text. It emphasizes the importance of manual testing alongside automated tools and provides guidelines under the S.I.F.T. (Structure, Images, Forms, Tables) methodology to enhance web content accessibility. Additionally, it lists useful tools and resources for improving web accessibility practices.
eduWeb 2017 - S.I.F.T. Through Your Content For Accessibility
- 1. S.I.F.T. Through Your Content for ACCESSIBILITY #eduweb17 | @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#eduweb17 | @lightjump
- 3. #eduweb17 | @lightjump Image courtesy Academy of Achievement, YouTube -Sir Timothy Berners-Lee (Inventor of the World Wide Web)
- 4. #eduweb17 | @lightjump Image courtesy thecheges, WordPress Why S.I.F.T.?
- 5. #eduweb17 | @lightjump Image courtesy thecheges, WordPress To get the BUGSout.
- 6. #eduweb17 | @lightjump Image courtesy Justin Gatewood What are the typical barriers to accessibility?
- 7. #eduweb17 | @lightjump Image, © New Line Cinema Heading & Structure
- 8. #eduweb17 | @lightjump Image, © New Line Cinema Visible Focus
- 9. #eduweb17 | @lightjump Image, © New Line Cinema Alternative Text
- 10. #eduweb17 | @lightjump Image, © New Line Cinema Color & Contrast
- 11. #eduweb17 | @lightjump Image, © New Line Cinema Skip Links
- 12. #eduweb17 | @lightjump Image, © New Line Cinema Keyboard Traps
- 13. #eduweb17 | @lightjump Image, © New Line Cinema Carousels & Slideshows
- 14. #eduweb17 | @lightjump Image, © New Line Cinema Forms
- 15. #eduweb17 | @lightjump Image, © New Line Cinema Captcha
- 16. #eduweb17 | @lightjump Image, © New Line Cinema Tables
- 17. #eduweb17 | @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. #eduweb17 | @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. #eduweb17 | @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. #eduweb17 | @lightjump Image, © New Line Cinema 208 Web Accessibility Best Practices
- 21. #eduweb17 | @lightjump Image, © New Line Cinema 208 Web Accessibility Best Practices Available at: https://www.webaccessibility.com/ best_practices.php
- 22. #eduweb17 | @lightjump Image, © New Line Cinema Nearly 57 Million
- 23. #eduweb17 | @lightjump Image, © New Line Cinema
- 24. #eduweb17 | @lightjump Image, © New Line Cinema What can Thorin’s map teach us about Accessibility?
- 25. #eduweb17 | @lightjump Image, © New Line Cinema, & Metro-Goldwyn Mayer Something is missing…
- 26. #eduweb17 | @lightjump Image, © New Line Cinema, & Metro-Goldwyn Mayer “This content doesn’t make any sense…”
- 27. #eduweb17 | @lightjump Image, © New Line Cinema, & Metro-Goldwyn Mayer Developer takes a look at the code… …using Assistive Technology (SCD – Solid Crystal Display)
- 28. #eduweb17 | @lightjump Image, © New Line Cinema, & Metro-Goldwyn Mayer The image was missing alternative text.
- 29. #eduweb17 | @lightjump -- Automated Evaluation Tools
- 30. #eduweb17 | @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. #eduweb17 | @lightjump Image courtesy FearlessGuster, iFunny.co Wha…?
- 32. #eduweb17 | @lightjump http://webaim.org/articles/pour/ Building a P.O.U.R. website • Perceivable • Operable • Understandable • Robust
- 33. #eduweb17 | @lightjump Image courtesy FearlessGuster, iFunny.co Wha…?
- 34. #eduweb17 | @lightjump Image courtesy borealnz, Flickr S.I.F.T. through your website • Structure • Images • Forms • Tables
- 35. #eduweb17 | @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. #eduweb17 | @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. #eduweb17 | @lightjump -- S.I.F.T. through your website •<ul> and/or <ol> (with nested <li>) •<dl> (with nested <dt> and <dd>) •Not for visual layout •Empty lists are incorrect HTML Structure > Use Lists
- 38. #eduweb17 | @lightjump -- S.I.F.T. through your website •<html lang=“en”> •<html xml:lang=“en”> (if XHTML) Structure > Set the language
- 39. #eduweb17 | @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. #eduweb17 | @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. #eduweb17 | @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. #eduweb17 | @lightjump Image, © www.Lifetool.at S.I.F.T. through your website Structure > Use skip links
- 43. #eduweb17 | @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. #eduweb17 | @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 #eduweb17 | @lightjump Image courtesy Wikipedia S.I.F.T. through your website Images (including media – video/audio)
- 46. #eduweb17 | @lightjump -- S.I.F.T. through your website • Present the CONTENT and FUNCTION of the images in your web content. Images > Alternative Text
- 47. #eduweb17 | @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=““ (no space between quotes) • RESULT: Screen readers will skip this tag Images > Empty Alt tag for non-content
- 48. #eduweb17 | @lightjump -- S.I.F.T. through your website • Animation should almost always be user controlled or very short in duration. Images > Limit animation
- 49. #eduweb17 | @lightjump -- S.I.F.T. through your website • If used, ensure they are well designed, easy to understand and used consistently. Images > Icons
- 50. #eduweb17 | @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. #eduweb17 | @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. #eduweb17 | @lightjump -- S.I.F.T. through your website • Captions should be: • Synchronized • Equivalent • Accessible • Add text transcript on page Images > Captions/transcripts
- 53. #eduweb17 | @lightjump Image courtesy Wikipedia S.I.F.T. through your website Images Question!
- 54. #eduweb17 | @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. #eduweb17 | @lightjump -- S.I.F.T. through your website • <label for=“name”>Name:</label> • <input id=“name” type=“text” name=“textfield”> Forms > use <label>
- 56. #eduweb17 | @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. #eduweb17 | @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. #eduweb17 | @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. #eduweb17 | @lightjump Image courtesy Wikipedia S.I.F.T. through your website Forms Question!
- 60. #eduweb17 | @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. #eduweb17 | @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. #eduweb17 | @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. #eduweb17 | @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. #eduweb17 | @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. #eduweb17 | @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. #eduweb17 | @lightjump -- S.I.F.T. through your website Tables Question!
- 67. #eduweb17 | @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. #eduweb17 | @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. #eduweb17 | @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. #eduweb17 | @lightjump -- Questions? Justin Gatewood lightjump@gmail.com Slides: slideshare.net/lightjump