What the WCAG? A Student Journey in Web Accessibility
•Download as PPTX, PDF•
0 likes•162 views
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 http://aianndesign.com/web-abc.
Recommended
Recommended
More Related Content
Recently uploaded
Recently uploaded (20)
Featured
Featured (20)
What the WCAG? A Student Journey in Web Accessibility
- 1. What the WCAG? A Student Journey in Web Accessibility Aiann Oishi | May 29, 2018
- 2. This presentation is available as a Word document: https://bit.ly/2JfI9E8 Accessible Format Available
- 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. Putting Theory into Practice Capstone Development
- 5. Capstone Idea #1: Toolkit to help the disability community resolve accommodation issues with businesses and services.
- 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. As Boromir in Lord of the Rings would tell us… “One does not simply enforce the AODA”
- 8. Capstone Idea #2: Toolkit to help organizations build a better business case for web accessibility.
- 9. Getting Familiar with Toolkits Learning Outcome #1
- 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. http://www.ahrq.gov/research/publications/pubcomguide/pcguide6.html Implementation Toolkits. UC Berkley. California Social Work Education Center. https://calswec.berkeley.edu/toolkits/implementation-toolkits
- 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. Designing & Presenting an Accessible Infographic Learning Outcome #2
- 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. Designing an Accessible Infographic
- 15. Option 1: Not enough contrast, too many elements
- 16. Option 2: Too much contrast, illegible font, lots of text
- 17. Option 3: Final • Good colour contrast • Legible font choice • Larger font size • Plain language • Clear layout
- 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. Building an Accessible Website Learning Outcome #3
- 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. 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. Web ABC Toolkit – Desktop & Mobile
- 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. 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. Check out the Web ABC Toolkit Scan the QR code or access the toolkit at: http://aianndesign.com/web-abc
- 26. Thank you. If you’re interested in getting in touch, please email aiann.design@yahoo.ca
Editor's Notes
- Who am I? Graphic designer with 6+ years of experience Currently freelancing, completed a Graduate Certificate in the Accessible Media Production program at Mohawk College Why Accessibility Working as an in-house designer in the public sector has exposed me to many challenges Fear of change – ex: We’ve always done [blank] this way Fear of not knowing – ex: We want to be accessible, but we don’t know how Design has the power to change perspectives, make a positive impact!
- Define capstone: Demonstrates understanding of what we’ve learned in the Accessible Media Production program Current legislation, attitudes and barriers Is in an accessible format (i.e. document, website, video) to showcase skills gained
- Learning about the AODA legislation not having teeth led me my first idea…
- Why did it fail? Made assumptions and leaped to conclusions – same mistake many designers make. Jumping to solutions without thinking of its impact and effectiveness ’Disability Messiah’ Reality Check I’m not a lawyer. I have limited knowledge and training in the Canadian legal system Compared to the United States, there hasn’t been enough lawsuits challenging accessibility barriers to provide me context AODA is only provincial, no federal legislation yet… The idea was too broad and large to take on as a student project!
- Having worked in in-house marketing teams, I remembered some past challenges in getting people on board with accessibility. I asked myself… How do you make a case for someone to sign off on a new initiative? How do you persuade someone to be on your side? How do you justify spending resources to support your project? Answer: You build a business case…
- W3C (World Wide Web Consortium) lists four main factors in making a business case: financial, social, legal and technical. Examples Financial – reduce potential retrofitting costs Legal – meeting standards like the AODA Social – promoting inclusion Technical – opportunity to invest in assistive technology and increase access to services Every organization is unique. You get asked – which factor is most relevant to me? If I need to make a case, what factors should I focus on and which benefits should I highlight? NOTE: all of these factors are important!
- First learning outcome - figure out what a toolkit is.
- The official definition: A "toolkit" is a collection of related information, resources, or tools that together can guide users to implement evidence-based practices. Simply put: they provide a blueprint for what to do, when to do it, and how to do it
- Being a graphic designer, decided to focus on producing an infographic to map the four factors in making a business case
- Infographics have benefits: Information is concise and in smaller chunks Visually shows the relationships between data and information Popular on social media
- Infographics have barriers: Distracting visual element Little or no supporting text to describe the actual image Becomes blurry for users who zoom in Not always search engine friendly Larger files affect users with slow, internet connection speeds
- I believe the best work comes from starting on paper, I drew…icons, lines, mapped out the information I wanted to convey
- Now that I had an infographic, I realized it wasn’t fully accessible. It was still presented as a flat JPG or printed piece. For example, if you had vision loss or couldn’t understand the flow of information presented.
- That’s how I came to my third and final learning outcome.
- In terms of approach, I could go with either WordPress or a static HTML site. With WordPress, I would learn… how to apply WCAG 2.0 to edit an existing WordPress theme to be accessible as possible With a static HTML site, I would learn… how to apply WCAG 2.0 to build an accessible HTML webpage using semantic markup
- Clean, simple layout Appropriate use of contrast and colours Semantic HTML Keyboard operable – expand/collapse sections with TAB, UP/DOWN arrows, navigate by headings with a screen reader Responsive design Content is available in alternate formats – Word document, text-only version Creating a website = I could have additional resources online. Toolkit can be downloaded as a: Postcard* Poster* Word Document Text-only HTML *Both the postcard and poster come with a text transcript
- Understand that meeting a checklist doesn’t = accessibility. To follow a QA (quality assurance) process, I tested the website’s structure and colour contrast with tools like WAVE, A-Checker, Colour Contrast Analyser. Screen reader testing Microsoft testing for Word document
- More user testing! Connected the toolkit to Analytics – can see where and how it’s being accessed Learned about CSS Grid from both Sandi, professor and developer colleagues at Pearson I welcome feedback from all of you (and anyone I present the toolkit to). When I presented to
- Visit the toolkit online – I have postcards with the QR code if you prefer accessing it on your mobile device.
- Get in touch with me. Business cards on the table.