Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

What the WCAG? A Student Journey in Web Accessibility


Published on

Aiann Oishi shares her learning outcomes and development behind her capstone project at the 10th Annual Accessibility Conference at the University of Guelph. Her capstone, The Web ABC Toolkit focuses on building a better business case for web accessibility and can be visited at

Published in: Design
  • Be the first to comment

  • Be the first to like this

What the WCAG? A Student Journey in Web Accessibility

  1. 1. What the WCAG? A Student Journey in Web Accessibility Aiann Oishi | May 29, 2018
  2. 2. This presentation is available as a Word document: Accessible Format Available
  3. 3. About Aiann Graduate Certificate, Accessible Media Production Mohawk College (2018) Bachelor of Design York University & Sheridan College (2011) Internships • Henderson Bas Kohn • Chatelaine Magazine • Pearson Canada Employment • Alzheimer Society of Toronto • MMM Group Limited • Women’s College Hospital
  4. 4. Putting Theory into Practice Capstone Development
  5. 5. Capstone Idea #1: Toolkit to help the disability community resolve accommodation issues with businesses and services.
  6. 6. Idea #1 Fails • Made the mistake many designers make – jumping to solutions without thinking of its impact and effectiveness • Assumptions: • I would be a disability messiah with the masses using my toolkit • Barriers are easily resolved with a one-size-fits-all solution Made assumptions and leaped to conclusions
  7. 7. As Boromir in Lord of the Rings would tell us… “One does not simply enforce the AODA”
  8. 8. Capstone Idea #2: Toolkit to help organizations build a better business case for web accessibility.
  9. 9. Getting Familiar with Toolkits Learning Outcome #1
  10. 10. What is a toolkit? • A "toolkit" is a collection of related information, resources, or tools that together can guide users to implement evidence-based practices Sources: Section 6: Toolkit Guidance. Agency for Healthcare Research and Quality. Implementation Toolkits. UC Berkley. California Social Work Education Center.
  11. 11. What goes in a toolkit? • Resources such as: • Articles • Checklists • Guides • Multimedia such as: • Audio recordings • Infographics • Slides • Videos and webinars • Presented online or as a document
  12. 12. Designing & Presenting an Accessible Infographic Learning Outcome #2
  13. 13. Infographic Barriers • Distracting visual elements • Little or no supporting text to describe the actual image • Resolution becomes blurry for users who zoom in • Not always search engine friendly • Larger files affect users with slower internet connection
  14. 14. Designing an Accessible Infographic
  15. 15. Option 1: Not enough contrast, too many elements
  16. 16. Option 2: Too much contrast, illegible font, lots of text
  17. 17. Option 3: Final • Good colour contrast • Legible font choice • Larger font size • Plain language • Clear layout
  18. 18. Presenting an Accessible Infographic 1. Provide long alternative text or a transcript with the image AND/OR 2. Build the infographic using semantic HTML and CSS so that screen readers can access the content Option #2 is the preferred approach
  19. 19. Building an Accessible Website Learning Outcome #3
  20. 20. Requirements – What did I want to build? • Single webpage: keep the scale of the project manageable • Prototype: get started quickly and meet project deadlines • Responsive design: maximize access across multiple devices/users • Customizable: design control • Lightweight: avoid extra hosting costs
  21. 21. The Approach – WordPress or Static HTML? WordPress • 30% of websites are built using WordPress • SEO friendly with trackbacks, pingbacks and plugins • Quick initial setup Static HTML • Highly customizable with unlimited design control • Loads fast • Requires minimal hosting requirements
  22. 22. Web ABC Toolkit – Desktop & Mobile
  23. 23. Accessibility Testing • WAVE Evaluation Tool (WebAIM) • A-Checker (Inclusive Design Institute) • Colour Contrast Analyser (Paciello Group) • Screen reader testing • NVDA on Windows PC with Firefox • VoiceOver on iPhone with Safari • Microsoft’s built-in testing tool for linked Word document
  24. 24. Further Learning – What’s next? • UX & Web Development • Learning CSS Grid • Testing with end-users • Awareness • Promoting the toolkit • Feedback & Analytics • Measure toolkit visits with Google Analytics • Setting up a survey to collect user feedback
  25. 25. Check out the Web ABC Toolkit Scan the QR code or access the toolkit at:
  26. 26. Thank you. If you’re interested in getting in touch, please email