CMS User Group: Web Accessibility

Talk given by Tariku Tessema

Transcript

1. Web Accessibility March 6, 2014
2. What is Web Accessibility? Being able to access a product or system using assistive technologies
3. What is Web Accessibility?
4. What is Web Accessibility?
5. What is Web Accessibility?
6. What is Web Accessibility?
7. Web Accessibility @UC San Diego UC San Diego Web Accessibility Policy Established on Aug, 27 2013 Defined implementation and procedures for web accessibility. Standards adopted/supported: • Section 508 • WCAG – Level AA
8. Section 508 What standards are used in UC San Diego web accessibility policy Section 508 • Alternate text for images • Keyboard input • Navigable structure • Input assistance • Predictability • Compatibility
9. Sec. 508 Add Alternate Text for images
10. Sec. 508 Using headings appropriately to convey hierarchy
11. Sec. 508 Making sure the site is readable with CSS is disabled.
12. Sec. 508 Labeling all form elements
13. Sec. 508 Adding title to <iframe>
14. Web Content Accessibility Guidelines What standards are used in UC San Diego web accessibility policy Web Content Accessibility Guidelines (WCAG) 2.0 • AA levels • Page Structure • Links • Navigability • Predictability • Presentation
15. (WCAG) 2.0 - AA Having short and descriptive page title
16. (WCAG) 2.0 - AA Having descriptive links • Links should be short enough to digest but long enough to give a synopsis of the linked page
17. (WCAG) 2.0 - AA Making sure menus are navigable
18. (WCAG) 2.0 - AA Making sure there is proper (4.5:1 ratio) color contrast for text
19. The Good News The CMS templates are rigorously tested for the accessibility guidelines
20. The Good News CWO in collaboration with UC wide departments run accessibility reports on campus wide sites
21. Reports: cwo@ucsd.edu To keep the CMS accessible we need your help • Follow best practices • Avoid adding customized items on your website • Reach out to our team for accessibility testing and reports
22. Refresh: Roosevelt College Before
23. Refresh: Roosevelt College After
24. Refresh: Warren College Before
25. Refresh: Warren College After
26. Additional Accessibility Tools Websites • http://webaim.org/ • Wave • Color contrast checker • http://www.ucop.edu/electronic -accessibility/ Browser extensions • Chrome VOX • Firefox Wave Toolbar
27. Additional Accessibility Tools Thank You