{"id":19339417,"url":"https://github.com/appfolio/a11y-academy","last_synced_at":"2025-10-24T16:51:46.100Z","repository":{"id":46149066,"uuid":"206890231","full_name":"appfolio/a11y-academy","owner":"appfolio","description":null,"archived":false,"fork":false,"pushed_at":"2024-12-10T08:33:02.000Z","size":3252,"stargazers_count":0,"open_issues_count":11,"forks_count":2,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-26T15:42:44.693Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/appfolio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-09-06T23:50:54.000Z","updated_at":"2021-12-27T22:40:09.000Z","dependencies_parsed_at":"2025-01-07T12:03:31.213Z","dependency_job_id":null,"html_url":"https://github.com/appfolio/a11y-academy","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appfolio%2Fa11y-academy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appfolio%2Fa11y-academy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appfolio%2Fa11y-academy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appfolio%2Fa11y-academy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/appfolio","download_url":"https://codeload.github.com/appfolio/a11y-academy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248633499,"owners_count":21136880,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-10T03:22:02.751Z","updated_at":"2025-10-24T16:51:46.038Z","avatar_url":"https://github.com/appfolio.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Developing for Accessibility\n\nThis repository covers the content for the Developing for Accessibility academy session.\n\nThis app is built on top of [Create React App](https://create-react-app.dev) and [Reactstrap](http://reactstrap.github.io/)\n\n## 🏅 #Goals/Learning Outcomes\n\n- Learn guiding principles for developing for accessiblity\n  - Use accessible HTML\n  - Use a pattern/component library so it's easy to be consistently accessible\n  - Use automated tools to test the accessibility of your app\n  - Manually audit your site because automated tools can't catch everything 😅\n- Learn how to use automated tools for developing accessible apps\n  - Static code analysis\n  - Automated tests\n  - Browser extensions\n- Learn to fix common accessibility mistakes\n\n## 🚀 Starting the project\n\nThe `fixme` branch has a bunch of accessibility violations to fix.\n\n```\ngit checkout fixme\n```\n\n### Install dependencies\n\n```\nnpm install\n```\n\n### Start the app\n\n```\nnpm start\n```\n\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\nThe page will reload if you make edits. You will also see any lint errors in the console.\n\nNote that if there are Typescript errors, the app won't compile. To bypass this set the environment variable `TSC_COMPILE_ONERROR=true`, e.g.\n\n```\nTSC_COMPILE_ONERROR=true npm start\n```\n\n### Run the linter\n\n```\nnpm run lint\n```\n\n### Run tests\n\nThis project uses [axe-core](https://github.com/dequelabs/axe-core) to automate accessibility testing.\n\n```\nnpm test\n```\n\n## ⚠️ Fixing Violations\n\n- [Page Title](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html)\n- [Cards](https://inclusive-components.design/cards/)\n- [Skip navigation links](https://webaim.org/techniques/skipnav/)\n  - [Bootstrap screeen reader utilities (v4)](https://getbootstrap.com/docs/4.6/utilities/screen-readers/)\n  - [Bootstrap visually hidden utilities (v5)](https://getbootstrap.com/docs/5.0/helpers/visually-hidden/)\n- [Button](http://w3c.github.io/aria-practices/#button) - don't add click handlers to `\u003cdiv\u003e`s - just use a button 🙂\n- [Link](http://w3c.github.io/aria-practices/#link) - great for navigating to another page or to a section of the current page. Links != buttons\n- [Main landmark](http://w3c.github.io/aria-practices/#aria_lh_main)\n- [Forms](http://w3c.github.io/aria-practices/#aria_lh_form)\n  - `\u003clabel\u003e`\n    - Placeholders are not labels\n    - `\u003clabel\u003e` and `\u003cinput\u003e` need to be siblings because of [Bootstrap](https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios)\n  - [Grouping items in select elements](https://www.w3.org/WAI/tutorials/forms/grouping/#grouping-items-in-select-elements)\n- [Disclosure](http://w3c.github.io/aria-practices/#disclosure) - an element for showing and hiding text\n- [Tooltips](http://w3c.github.io/aria-practices/#tooltip)\n- [Tables](http://w3c.github.io/aria-practices/#table)\n  - main focus is using semantic HTML\n- [Images](https://www.w3.org/WAI/tutorials/images/)\n- [Page Language](https://www.w3.org/TR/WCAG20-TECHS/H57.html)\n- [aria-hidden](https://www.w3.org/TR/wai-aria-1.1/#aria-hidden)\n\n## 🎓 Resources\n\n### Learn More\n\n- [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices-1.1/)\n- [Web Content Accessibility (WCAG) Guidelines 2.1](https://www.w3.org/TR/WCAG21/)\n- [Web Accessibility Tutorials](https://www.w3.org/WAI/tutorials/)\n- [a11y project](https://a11yproject.com)\n\n### Browser Tools/Extensions\n\n- [axe](https://www.deque.com/axe/) (Chrome, Firefox)\n- [WAVE Browser Extensions](https://wave.webaim.org/extension/) (Chrome, Firefox)\n- [Accessibility Insights](https://accessibilityinsights.io) (Chrome)\n- [Lighthouse](https://developers.google.com/web/tools/lighthouse/) (built into Chrome)\n- [Web Inspector Audits](https://webkit.org/blog/8935/audits-in-web-inspector/) (built into Safari Technology Preview)\n\n### Development Tools\n\n- [eslint-plulgin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) - ESLint plugin for accessibility rules on JSX elements\n- [axe-core](https://github.com/dequelabs/axe-core) - an accessibility testing engine\n- [axe Linter (VSCode)](https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter) - an editor plugin that checks for accessibility issues\n- [axe Linter (GitHub app)](https://github.com/marketplace/axe-linter) - automatically finds and fixes issues on GitHub pull requests\n\n### Core Library Accessibility Docs\n\n- Bootstrap Accessibility\n  - [v4 docs](https://getbootstrap.com/docs/4.6/getting-started/accessibility/)\n  - [v5 docs](https://getbootstrap.com/docs/4.6/getting-started/accessibility/)\n- [React Accessibility](https://reactjs.org/docs/accessibility.html)\n\n### Other Libraries\n\n- [React Testing Libary](https://testing-library.com/docs/react-testing-library/intro) - a general purpose testing library for React (replacement for Enzyme) with accessibility as a first class concern\n\n### Other Stuff\n\n- [VoiceOver Keyboard Shortcuts on a Mac](https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts)\n\nThis project was inspired by Marcy Sutton's [Empathy Driven Development](https://github.com/marcysutton/empathy-driven-development) project and her [talk at JSConf EU 2018](https://www.youtube.com/watch?v=l95VFLj3e2w).\n\nSpecial thanks to Brianna Koch and Nic Bertino for their help in developing this course.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappfolio%2Fa11y-academy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fappfolio%2Fa11y-academy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappfolio%2Fa11y-academy/lists"}