Basic Accessible Web Design Presentation
- 1. Accessible Web Design: basic tips Audrey Homan audrey.homan@uvm.edu go.uvm.edu/accessibility
- 2. Contents: • Accessibility: • The Basic Bits • The Legal Bits • The CDCI Bits • 7 basic tips for avoiding the most common web accessibility issues
- 3. THE BASIC BITS Everything that makes for good graphic design makes for good web design.
- 4. • slides • video THE BASIC BITS
- 5. Inaccessible design = bad design. Always. THE BASIC BITS
- 6. of accessibility failures come down to design choices. Reference THE BASIC BITS
- 7. Accessible web design is everyone’s job. • UVM Drupal managers • Drupal updaters • WordPress site creators • Noogle Site creators • Training module creators • meme creators • fan art creators • Reddit commenters • YouTube influencers • TikTok weasels THE BASIC BITS
- 8. But who decides what’s “accessible”? Enter: the WCAG. THE LEGAL BITS
- 9. What’s WCAG? • Web Content Accessibility Guidelines • International standards • Currently, in the U.S., accessibility is enforced by lawsuit • In the U.S., public & government entities are required to meet WCAG’s AA level THE LEGAL BITS
- 10. WCAG 2.1 Guidelines • A-level: basic website functionality • AA-level: reasonable website functionality • AAA-level: gold-standard website functionality THE LEGAL BITS
- 11. Web Accessibility @ CDCI • Per UVM, CDCI must maintain AA-level compliance • Required for Drupal, WordPress, and any site that has CDCI branding • Every year, CDCI runs two website audits and a satisfaction survey THE CDCI BITS
- 12. Images • Don’t assume everyone can see images • Don’t include text in an image unless it’s available elsewhere on the page as plain text • Always use alt-text, or mark your image as “decorative” 1: IMAGES
- 13. Images: alt-text • 1-3 sentences • Focus on the most important elements of the image 1: IMAGES • Don’t start with “a photo of” or “an image of” — screen reader software has you covered.
- 14. The Alt-Text Exercise • If you’re sighted, how would you describe this image to someone on a phone call? 1: IMAGES
- 15. The Answer to the Alt-Text Exercise • “A group of people in their mid-twenties sit around a picnic blanket in a forest, grinning, while their small white dog wanders off.” 1: IMAGES
- 16. Color & Contrast • Don’t assume everyone can see all colors. • Don’t use color to indicate meaning. 2: COLOR & CONTRAST
- 17. Don’t use color to define meaning. • To sign up for trainings, click the purple button. • For general questions, click the red button. 2: COLOR & CONTRAST
- 18. Color: Contrast Small text Large text Icons & Graphics WCAG LEVEL AA 4.5:1 4.5:1 3:1 AAA 7:1 4.5:1 3:1 2: COLOR
- 19. How do you measure contrast? WebAIM Contrast Checker 2: COLOR
- 20. Audio & Video • If you have content available as audio or video, you also need a text version. You cannot have audio or video be the only way for visitors to access that information. 3: AUDIO & VIDEO
- 21. Audio & Video accessibility needs • Audio: needs a transcript • Video: needs non-automated captions • Audio description for videos: recommended but not required (AAA-level) 3: AUDIO & VIDEO
- 22. Links: Format • Links should be underlined • They should be a different color from non- link text • Do not underline any text that is not a link • Links should be 3-4 words, not just one. • Shortlinks are friendly to screen readers. 4: LINKS
- 23. Links: Destination • Indicate in parentheses when a link goes to something other than a webpage, such as a video, or starts a download. • Download the slides from this presentation (.pptx) • This is a really useful Sensory Preference Assessment (.docx) • And now a brief word from our sponsor (video). 4: LINKS
- 24. Links: Do not click here. • Destination: it must be clear from the link where clicking that link will take you. • Do not use “click here”. 4: LINKS
- 25. Meaningful text links • To find out more about the conference, click here. • To find out more about the conference, check out the schedule of programming. 4: LINKS
- 26. Meaningful short urls • To find out more about the conference, click here. • To find out more about the conference, click this link: go.uvm.edu/schedule 4: LINKS
- 27. Use headings to structure your content. 5: HEADINGS • Helps make your page accessible to keyboard navigation and screen readers.
- 28. Headings are an outline for your content. 5: HEADINGS • 2022 Spring Conference • Programming • Track 1: Badger-Poking • Track 2: Weasel- Wrangling • Track 3: First Aid • Registration
- 29. Heading 1: • 2022 Spring Conference HEADING 2: • PROGRAMMING Heading 3: • Track 1: Badger-Poking • Track 2: Weasel-Wrangling • Track 3: First Aid HEADING 2: • REGISTRATION 5: HEADINGS
- 31. Moving, flashing and blinking • Don’t have anything blinking at 3 times per second or faster • Don’t set things up to autoplay • Users should always have a way to make it all stop and start. 6: FLASHING & BLINKING
- 32. Write for accessibility 7: WRITE FOR ACCESSIBILITY • Use plain language: active voice, short sentences, and defining jargon. • Page titles: Give each page a clear and distinct title • Provide clear, concise instructions
- 33. ATTACK W H E N W E B S I T E S
- 34. • Ravelry: An Accessibility Case Study • Old design: problematic • New design: problematic • Ravelry Response: run away WHEN WEBSITES ATTACK
- 35. Again, an accessible web is everyone’s job. • UVM Drupal managers • Drupal updaters • WordPress site creators • Noogle Site creators • Training module creators • meme creators • fan art creators • Reddit commenters • YouTube influencers • TikTok weasels THE BASIC BITS
- 36. THE BIG TAKEAWAYS Accessibility = a process 1.Try your best 2.Ask for help 3.Incorporate user feedback from people with disabilities
- 37. Finally, realize two things: BACK TO THE BASIC BITS 1. No one should have to disclose their disability to you in order to access your website effectively. 2. Use human data to supplement general guidelines.
- 38. Thank you for your time. This presentation is licensed under CC- BY-NC-SA. Feel free to share it, and remix it for non- commercial use, with attribution. go.uvm.edu/accessibility