From 5be7aeb6ca19776c0013182746fad46e8aa2eb38 Mon Sep 17 00:00:00 2001 From: Jordan Wood <104526584+thejordanwood@users.noreply.github.com> Date: Wed, 15 Jan 2025 09:48:14 -0600 Subject: [PATCH] Update onboarding-staff.md Updating the content on this page --- _guide/onboarding-staff.md | 266 ++++++++++++++----------------------- 1 file changed, 98 insertions(+), 168 deletions(-) diff --git a/_guide/onboarding-staff.md b/_guide/onboarding-staff.md index d8ebfc6c..59bc423e 100644 --- a/_guide/onboarding-staff.md +++ b/_guide/onboarding-staff.md @@ -1,185 +1,115 @@ --- layout: guide title: Onboarding staff -description: +description: How to set up accessibility onboarding for new staff members. excerpt: sidenav: docs categories: - Accessibility --- -## Effective Onboarding for an Accessibility Positive Workplace - -When hiring new staff, we cannot assume that they are knowledgeable about accessibility. To ensure that there is a \ -commitment to digital inclusion, we need to ensure that team members understand the basics. As a digital agency, \ -our focus is on web accessibility. Making our content accessible is a key part of customer centered design. A common \ -understanding allows our team to work better together. One in five people have a disability, so there is a good \ -chance someone on your team will have a disability. - -## Pre-workshop Tasks - -### Trello card - Watch these short videos from this list: - -* [Deque Systems - What is Digital Accessibility?](https://www.youtube.com/watch?v=grrx2Lva7T0) (<3 minutes) -* [W3C WAI, Shadi Abou-Zahra - Introduction to Web Accessibility and W3C Standards](https://www.youtube.com/watch?v=20SHvU2PKsM) (<5 minutes) -* [Washington, DC Government - Disability Sensitivity Training Video](https://www.youtube.com/watch?v=Gv1aDEFlXq8) (<4 minutes) - -Bonus videos: - -* [W3C WAI, Léonie Watson - "Design like you give a damn: Practical accessibility for web pros"](https://www.youtube.com/watch?v=vK1tlLOavvM) (39 minutes) -* [Google Chrome, Rob Dodson - Accessibility Fundamentals](https://www.youtube.com/watch?v=z8xUCzToff8&ab_channel=SFHTML5) (28 minutes) -* [Apple - Introducing Voice Control on Mac and iOS](https://www.youtube.com/watch?v=aqoXFCCTfm4) (<2 minutes) -* [Apple - Accessibility - Sady](https://www.youtube.com/watch?v=su0djsYaDYI) (<2 minutes) -* [Educause - Presentation Best Practices: Diversity, Equity, and Inclusion](https://www.youtube.com/watch?v=LPYkatM-0dk) (<8 minutes) -* [DC Government: Disability Sensitivity Training Video](https://www.youtube.com/watch?v=Gv1aDEFlXq8&t=4s) - Quite funny - -Curious how some other people engage with the web? - -* [Apple's VoiceOver screen reader](https://www.youtube.com/watch?v=5R-6WvAihms) -* [NVDA screen reader](https://www.youtube.com/watch?v=Jao3s_CwdRU) -* [JAWS screen reader & Braille Keyboard](https://www.youtube.com/watch?v=dEbl5jvLKGQ) -* [Apple's Voice Control](https://www.youtube.com/watch?v=6y6MQq-Jtz0) -* [Cerebral palsy User (Sam)](https://www.youtube.com/watch?v=jYmfrrY4Hfk) - -### Trello card - Investigate CivicActions existing resources - -Our team has been working to extend the [CivicActions Accessibility](https://accessibility.civicactions.com/) site and integrate key elements into the [CivicActions Handbook](https://handbook.civicactions.com/). CivicActions believes in working in the open, so we also are leveraging tools on GitHub like the [Projects board](https://github.com/CivicActions/accessibility/projects/1) and [Discussions pages](https://github.com/CivicActions/accessibility/discussions). - -### Trello card - Install a web accessibility browser extension - -Install an accessibility browser extension. Take the time to learn the basics of whichever one you choose because everyone has a role in producing accessible websites. - -* [Deque's axe DevTool for Chrome](https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd) - [Youtube: Intro to axe DevTools](https://www.youtube.com/watch?v=iRGB40c_YJc) -* [WebAim's WAVE](https://wave.webaim.org/) - [Youtube: Intro to WAVE](https://www.youtube.com/watch?v=ITUDiTgAZY0&t=270s) -* [Microsoft's Accessibility Insights](https://accessibilityinsights.io/) - [Youtube: Intro to Accessibility Insights](https://www.youtube.com/watch?v=U6NY8Cxym5g) - -### Trello card - Install a color contrast checker - -Install a color contrast checker browser extension, such as [ColorZilla for Chrome](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp), [ColorZilla for Firefox](https://addons.mozilla.org/en-US/firefox/addon/colorzilla/) or use a free site like [Coolors Color Contrast Checker](https://coolors.co/contrast-checker/112a46-acc8e5) - -### Trello card - Developers, install an accessibility linter in your text editor or Integrated Development Environment (IDE) - -Install an accessibility linter in your text editor, such as [axe Accessibility Linter for VS Code - recommended](https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter). Please note, an accessibility linter is required for front end dev work. - -### Trello card for Design - Designers, install a color contrast checker in Figma - -Make sure all Figma projects include a color contrast checker, such as [Contrast](https://www.figma.com/community/plugin/748533339900865323/Contrast), or [A11y - Color Contrast Checker](https://www.figma.com/community/plugin/733159460536249875). Make sure all Sketch/Invison projects include a color checker such as [Stark](https://www.getstark.co/). A color contrast checker that shows WCAG levels is required for design work. - -### Trello card for copywriting, press releases, blog/social posts presentation writing, etc - use a readability checker - -Make sure all copy is checked for readability levels. The recommended level is grade 7-8 for the general public in the US. We recommend using the [Flesch Grade Level Readability Scale](https://readabilityformulas.com/free-readability-formula-tests.php), or [Hemingway](https://hemingwayapp.com/). Microsoft's Office 365 also [includes a checker based on Flesch-Kinkaid](https://support.microsoft.com/en-us/office/get-your-document-s-readability-and-level-statistics-85b4969e-e80a-4777-8dd3-f7fc3c8b3fd2). - -### Trello card - Investigate and possibly configure accessibility settings in your operating system - -Apple, Windows, Chromebook, Linux desktop OS all have built-in accessibility features. So do mobile systems like Android & iOS. - -**Mac users** - enable [Full Keyboard Access](https://iainbean.com/posts/2020/an-opinionated-guide-to-accessibility-testing/#1.-The-Tab-key) to be able to test keyboard only navigation. - -### Trello card - Take this quiz with multiple-choice questions (include links to Google Forms): - -Onboarding Quiz (Internal) - [Edit view](https://docs.google.com/forms/d/1O7VV0YRrkDMPPucrrBPHOQIGm8yZ1y6dzuJZe2mHQwA/edit) and [Participant view](https://docs.google.com/forms/d/e/1FAIpQLSdpyp-NLXUzzmbc4zNQqikrgx0V2n1IbmZRYlWSIBstTFbI-Q/viewform) - -* Why is accessibility important? - * It is a legal requirement - * It is the right thing to do - * It could benefit me now or in the future - * All of the above -* The Section 508 Refresh, is equivalent to what W3C Web Accessibility Initiative guideline? - * WCAG 2.0 - * WCAG 2.1 - * WCAG 3.0 - * ATAG 2.0 -* Improving on accessibility can support people: - * with low vision - * who are hard of hearing - * People using their laptop outside on a sunny day - * All of the above -* Which is not a tool that can be used to identify accessibility problems? - * SSA.gov's ANDI Bookmarklet - * Microsoft's Accessibility Insights - * Firefox's Inclusive Widget - * NVDA Screen Reader -* There are many forms of disabilities that are not initially clear to an observer. - * True - * False -* What are the 6 checks displayed in the summary when you run the WAVE Web Accessibility Evaluation Tool on a site? - * Errors, Contrast Errors, Alerts, Features, Structural Elements, ARIA - * Errors, Navigation Elements, Alerts, Features, Headings, ARIA - * Errors, Contrast Errors, Alerts, ALT Elements, Headings, ARIA - * Errors, Contrast Errors, Alerts, Features, Structural Elements, Accessibility Score -* Currently 50% of websites are accessible. - * True - * False -* What are essential elements of writing in plain language? - * Write for your audience - * Put general information first, with specialized information or exceptions to the general information later - * Write short paragraphs and include only one topic in each paragraph - * All of the above -* Attach a screenshot of a WAVE or Accessibility Insights report of a government website. -* What is a best practice to engage with clients and team members that have disabilities? - * Always speak loudly and make sure to overemphasize with your lips - * With deaf people, look at the interpreter, not the person who you are talking with - * Ask the person if there is anything you can do to communicate with them more effectively - * All of the above - -### Trello card - Join the #accessibility Slack channel & report your score - -We want everyone at CivicActions to get an 80% or higher in this quiz. If you don't score high enough, feel free to engage with the Accessibility Team or retake the exam. - -## Trello card - Participate in our Basic workshop (1hr) - -[Onboarding Deck (Internal)](https://docs.google.com/presentation/d/1cSfwSOsBZV95eIiv-DPe5bOLV6_7NSYv_O9AOlDbyvw/edit?usp=sharing) - -5 - Introduction - -10 - Why accessibility matters to our organization - -10 - Atoms/bits and lived experience - -10 - How we work, and impact on people with disability - -10 - Digital accessibility & automated tools (catching the low-hanging fruit) - -10 - Basic accessibility testing of sites with WAVE - -5 - Questions - -## Role specific workshops (Optional) - -Each role in a company may need additional support in how they can best do their job. Our team has built on role based documentation provided by The [UK's DWP Guidance for your job role](https://accessibility-manual.dwp.gov.uk/guidance-for-your-job-role) and [Digital.gov's Accessibility for Teams](https://accessibility.digital.gov/) in the [CivicActions Accessibility site](https://accessibility.civicactions.com/playbook/roles). Additional training materials for roles like: - -* Business Analyst -* Content Designer -* Delivery Manager -* Digital Performance Analyst -* Interaction Designer -* Product Manager -* QA Tester -* Software Engineer or Front-end Developer - * Drupal Developer - * Drupal Site Builder - * Front-end Engineer (headless) - * DevOps/CI Engineer -* User Researcher +A common understanding of accessibility allows teams to work together toward building accessible products and services. When hiring new team members, it’s important to not assume they’re knowledgeable about accessibility. Instead, it’s best to ensure that all team members understand the basics by creating an accessibility onboarding program that every new member participates in. + +As part of [our Accessibility Pledge](https://accessibility.civicactions.com/posts/CivicActions-Accessibility-Pledge) at CivicActions, we’ve added an introduction to accessibility in our onboarding process. This has helped to advance our accessibility maturity and build a robust culture that has internalized accessibility. We’d like to share our onboarding process here in the hopes that other companies can take inspiration when building their own accessibility onboarding processes. + +## Prepare for an accessibility workshop +All new team members attend a one hour workshop that talks about the basics of accessibility. Before the workshop takes place, we ask them to prepare by watching videos, reviewing internal company materials, and installing accessibility tools that are relevant to their area of practice. + +### Watch accessibility videos + +These short videos introduce accessibility and are a great way to get started. Each video is less than five minutes. + +* [What is Digital Accessibility?](https://www.youtube.com/watch?v=grrx2Lva7T0) +* [Introduction to Web Accessibility and W3C Standards](https://www.youtube.com/watch?v=20SHvU2PKsM) +* [Disability Sensitivity Training](https://www.youtube.com/watch?v=Gv1aDEFlXq8) + +### Review internal materials +We ask that new team members review the [CivicActions Accessibility site](https://accessibility.civicactions.com/) and the accessibility page in the [CivicActions Handbook](https://guidebook.civicactions.com/en/latest/practice-areas/accessibility/). These are some examples of materials that you could create that would be company specific. + +### Install accessibility tools +These are some tools we recommend that could help test accessibility on your products. + +#### Tools for everyone + +1. Web accessibility testers + * These browser extensions evaluate web content and identify any potential accessibility issues. + * [Deque's axe Browser extension](https://www.deque.com/axe/browser-extensions/) + * [WebAim's WAVE](https://wave.webaim.org/) + * [Microsoft's Accessibility Insights](https://accessibilityinsights.io/) +2. Color contrast checker + * This tool can check if colors meet the contrast ratio defined in the Web Content Accessibility Guidelines (WCAG). + * [ColorZilla for Chrome](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp) + * [ColorZilla for Firefox](https://addons.mozilla.org/en-US/firefox/addon/colorzilla/) + * [Coolors Color Contrast Checker](https://coolors.co/contrast-checker/112a46-acc8e5) + * [WebAIM contrast checker](https://webaim.org/resources/contrastchecker/) +3. Operating system accessibility settings + * Investigate and configure accessibility settings in your operating system. Apple, Windows, Chromebook, Linux desktop OS all have built-in accessibility features. These can also be found on mobile systems like Android and iOS. +4. Browser accessibility settings + * Browsers may need to be configured to enable tabbing on links. + * Enabling these features makes it easy to do regular keyboard testing. + * Search for these settings: + * Chrome: “Pressing Tab on a webpage highlights links, as well as form fields.” + * Firefox: “Use the tab key to move focus between form controls and links.” + * Safari (Advanced tab): “Press Tab to highlight each item on a web page.” + +#### Tools for each practice area + +1. Developers + * Install an accessibility linter in your text editor to check your code files for accessibility defects. + * [axe Accessibility Linter for VS Code](https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter) +2. Visual designers + * Install a color contrast checker into Figma, Sketch, or Invision to ensure that the colors you choose meet WCAG contrast ratios. + * [Contrast](https://www.figma.com/community/plugin/748533339900865323/Contrast) (For Figma) + * [A11y - Color Contrast Checker](https://www.figma.com/community/plugin/733159460536249875) (For Figma) + * [Stark](https://www.getstark.co/) (For Figma, Sketch, Invision, and more) + * Better yet, install an annotation plugin to perform checks and overlay accessibility notes of all kinds on wireframes and prototypes: + * [Include—Accessibility Annotations](https://www.figma.com/community/plugin/1208180794570801545/includeaccessibility-annotations) (For Figma) +3. Content writers + * Install a readability checker to ensure your content follows [plain language guidelines](https://accessibility.civicactions.com/guide/plain-language). + * [Hemingway App](https://www.hemingwayapp.com/) + * [Readable](https://readable.io/) + * [Microsoft's Flesch-Kincaid](https://support.microsoft.com/en-us/office/get-your-document-s-readability-and-level-statistics-85b4969e-e80a-4777-8dd3-f7fc3c8b3fd2) (For Microsoft Word) + +## Attend an accessibility workshop + +Our accessibility workshop is one hour long and covers the basics of accessibility. We encourage participants to engage with us during this time and answer any questions they may have. Our workshop covers these topics: + +* What is accessibility? + * We discuss the different types of disabilities (hearing, motor, cognitive, and visual) and how they can be permanent, temporary, or situational. + * We describe different assistive technologies people use, such as auto-captioning, text-to-speech, screen readers, and more. +* Accessibility in our organization + * We emphasize how CivicActions promotes accessibility with [our Accessibility Pledge](https://accessibility.civicactions.com/posts/CivicActions-Accessibility-Pledge) and how we’re continuously working toward developing products built with a wide range of diversity in mind from the beginning. + * We talk about our accessibility practice area and give information about internal meetings and professional development. + * We review [our Champions program](https://accessibility.civicactions.com/guide/champions-program) and promote other next steps to learn more about accessibility. +* Introduction to accessibility tools + * We give a demo on at least one of the browser extensions mentioned above; how to use the tools on different websites, what the results look like and what they mean. + +### Role-specific workshops (Optional) +Each role in a company may need additional support in how they can best do their job. Our team has built role based documentation that can be viewed on [our Roles page](https://accessibility.civicactions.com/roles/). For more inspiration, we recommend these websites: + +* [UK's DWP Guidance for your job role](https://accessibility-manual.dwp.gov.uk/guidance-for-your-job-role) +* [Digital.gov's Accessibility for Teams](https://accessibility.digital.gov/) + +## Take a quiz +After watching videos, reviewing company materials, and attending the accessibility workshop, we encourage new team members to take an accessibility quiz to help gauge their understanding of our training. Our goal is for them to score 80% or higher on this quiz or to reach out to the accessibility team with any questions they may have. To see an example of an accessibility quiz, view the quiz that we’ve created for new team members. + +[CivicActions accessibility quiz](https://docs.google.com/forms/d/e/1FAIpQLSdpyp-NLXUzzmbc4zNQqikrgx0V2n1IbmZRYlWSIBstTFbI-Q/viewform) ## Conclusion -Having accessibility in the orientation is key to ensuring that given some basic parameters on how the organization approaches accessibility. To fully integrate accessibility into the culture of an organization it is key that these initial messages are built on and enhanced. Building a champion network within an organization is one of the best ways of ensuring that an organization continues to learn, enhance and extend digital inclusion. Some of the leaders in this space include: +Accessibility onboarding is key to ensuring that all team members have a basic understanding of best accessibility practices. This understanding can help integrate accessibility into the culture of an organization and ensure that everyone on the team can help build accessible products. + +## Resources -* [BBC](https://abilitynet.org.uk/webinars/learn-how-bbc-makes-accessibility-improvements) -* [AbilityNet](https://abilitynet.org.uk/news-blogs/how-build-and-grow-your-accessibility-champions-network) -* [Leeds City Council](https://digitalinclusionkit.org/creating-a-digital-champions-network/) -* [Intuit (Quickbooks)](https://web.archive.org/web/20220216065658/https://www.last-child.com/intuits-accessibility-champion-program/) +* [Microsoft's Accessibility Fundamentals Workshop](https://docs.microsoft.com/en-us/learn/paths/accessibility-fundamentals/) +* [Disability:In's Disability Fundamentals Training for Managers](https://disabilityin.org/resource/disability-fundamentals-training-for-managers/) -## Additional resources/examples +## Next Steps -* [Accessibility Fundamentals Workshop - Microsoft](https://docs.microsoft.com/en-us/learn/paths/accessibility-fundamentals/) -* [Disability Fundamentals Training for Managers - Disability:In](https://disabilityin.org/resource/disability-fundamentals-training-for-managers/) -* [Accessible virtual meetings - Ontario Digital](https://medium.com/ontariodigital/accessible-virtual-meetings-d9b947eff592) -* [Inclusive Design For Accessible Presentations - Smashing Magazine](https://www.smashingmagazine.com/2018/11/inclusive-design-accessible-presentations/) -* [Presentations - Content Design London - Readability Guidelines](https://readabilityguidelines.co.uk/audiences-devices-channels/presentations/) -* [Giving a damn about accessibility - UX Collective](https://uxdesign.cc/giving-a-damn-about-accessibility-6caf90be5a40) (PDF) +When you are ready to learn more, here are some further guides and resources that may help: -## Supporting people with disabilities in virtual meetings +* [Build up your accessibility toolbox](https://accessibility.civicactions.com/guide/tools) +* [Invest in accessibility training](https://accessibility.civicactions.com/playbook/training) +* [Join the global accessibility community](https://accessibility.civicactions.com/playbook/community) +* [Build a community of practice](https://accessibility.civicactions.com/playbook/practice) -* [Accessibility Strategies for Deaf / Hard of Hearing People in Remote Meetings](https://medium.com/cmcnally/accessibility-strategies-for-deaf-hard-of-hearing-people-in-remote-meetings-e19781b3bc4)