{"id":16798348,"url":"https://github.com/alexnm/a11y-checklist","last_synced_at":"2026-02-04T06:03:16.539Z","repository":{"id":90942715,"uuid":"189754295","full_name":"alexnm/a11y-checklist","owner":"alexnm","description":"A quick checklist for accessibility based on materials I gathered for my last talk","archived":false,"fork":false,"pushed_at":"2019-06-02T17:44:41.000Z","size":3,"stargazers_count":11,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-07-10T15:20:01.101Z","etag":null,"topics":["a11y","checklist","practices","tools"],"latest_commit_sha":null,"homepage":null,"language":null,"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/alexnm.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-06-01T16:24:58.000Z","updated_at":"2025-04-13T14:53:46.000Z","dependencies_parsed_at":null,"dependency_job_id":"8c59d65e-3057-435a-ba50-f720559f19f1","html_url":"https://github.com/alexnm/a11y-checklist","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/alexnm/a11y-checklist","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexnm%2Fa11y-checklist","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexnm%2Fa11y-checklist/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexnm%2Fa11y-checklist/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexnm%2Fa11y-checklist/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexnm","download_url":"https://codeload.github.com/alexnm/a11y-checklist/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexnm%2Fa11y-checklist/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29072470,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-04T03:31:03.593Z","status":"ssl_error","status_checked_at":"2026-02-04T03:29:50.742Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["a11y","checklist","practices","tools"],"created_at":"2024-10-13T09:25:18.324Z","updated_at":"2026-02-04T06:03:16.524Z","avatar_url":"https://github.com/alexnm.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# A11y Checklist \nA quick checklist for accessibility practices and tools for web developers. These are not only aimed at people with permanent disabilities, they [target the whole internet](https://thewholeinternet.com/). Contributions are more than welcome!\n\n### 👀 Visual \nThese practices and patterns are helping users with various types of dissabilities (permanent or temporary), from color-blindness, to vestibular dysfunction, to low vision to hearing deficits.\n\n* color contrast, **\u003e4.5** for AA standard, **\u003e7.0** for AAA (a lot of tools can automate this check for the entire site)\n* aim for _bigger_ contrast for _smaller_ text\n* prioritize text contrast vs borders / other elements\n* use **icons** or other visual indicators together with color (ex: showing errors in forms)\n* min font-size should be **16px**\n* keep 80 characters per line when displaying longer texts and ensure standard spacing for paragraphs\n* ensure animations are _necessary_ and not _unexpected_\n* use [**prefers-reduced-motion**](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) to disable animations when users opt-in from their OS\n* ensure videos have _subtitles_ or _auto-captions_\n* ensure that at least 5 zoom levels are available on your website and that the layout responds well to zooming in\n\n### ✅ Semantic HTML \nThe use of semantic HTML is crucial for [offering support](http://wicg.github.io/aom/explainer.html) to screen readers and other assistive technologies. By default, HTML does a pretty decent job at this, but you have to make sure you follow the standard and don't override useful defaults.\n\n* avoid using a \u003cdiv\u003e when a semantic tag can be used instead\n* use standard **landmarks** for defining: header, main, footer, etc.\n* use **headings** in the right order, always start from **h1**\n* form inputs should always be accompanied by **labels**\n* menus should start from a **\u003cnav\u003e** element and contains _lists_ and _list items_\n* use relevant **titles** for links - they are read by screen readers as users tab their way through the site\n* avoid titles like: \"click here\" or \"read more\", as they give no indication about the actual link\n* images should be accompanied by relevant **alt** texts\n* use _ARIA_ attributes only when there's no semantic alternative\n\n### ✋ Interaction\nNever make assumptions about how your users interact with the website and make sure you have support for things like keyboard navigation. Some of these practices target people with motion difficulties, tremors and other problems limiting their interaction skills.\n\n* _links_ and _buttons_ should always be keyboard focusable (using the tab key)\n* _menus_ and _lists_ should be keyboard accessible (left-right for navigation)\n* modal windows have to close when pressing the Esc key\n* always show an outline when focusing elements - at a minimum, support keyboard outline with [what-input](https://github.com/ten1seven/what-input)\n* **focus** should be handled in parallel with click/tap events as well as with :hover pseudo-selectors\n* don't use tabindex \u003e 0, allow a natural flow for the focus through the interface\n* trap focus when showing modal/overlays, so the user cannot navigate behind the foreground\n* handle focus after navigation - especially for SPA-like applications which are not reloading the page\n* ensure a **touch area** of at least 44px\n\n### 🔨 Tools \u0026 Projects\n* Screen Readers\n  * **Jaws** for Windows\n  * **NVDA**\n  * **VoiceOver** on OS-X/iOS\n  * **Orca** for Linux\n* [lighthouse](https://developers.google.com/web/tools/lighthouse/) - performs audits in chrome (the audit tab in devtools).\n* [axe-core](https://github.com/dequelabs/axe-core) - performs e2e automated tests for a11y issues, can easily be integrated in cypress or jest.\n* [tota11y](https://khan.github.io/tota11y/) - shows a11y validations on top of existing websites.\n* [alexjs](https://alexjs.com/) - catches insensitive and inconsiderate writing.\n* [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) - ESLint plugin for static analysis of a11y violations.\n* [ReachUI](https://ui.reach.tech/) - a list of a11y first React components\n* [Inclusive Components](https://inclusive-components.design/) - a list of articles and examples of inclusive and accessibile components\n\n### 📝 References \n* [A guide to color accessibility in product design](https://www.invisionapp.com/inside-design/color-accessibility-product-design/)\n* [Designing Accessible Content: Typography, Font Styling, and Structure](https://webdesign.tutsplus.com/articles/designing-accessible-content-typography-font-styling-and-structure--cms-31934)\n* [Designing Safer Web Animation For Motion Sensitivity\n](https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity/)\n* [Accessibility showcases of real projects](https://a11ywins.tumblr.com/)\n* [Web Accessibility Course on Udacity](https://eu.udacity.com/course/web-accessibility--ud891)\n* [Useful Accessibility Resources by Stefan Judis](https://www.stefanjudis.com/useful-accessibility-resources/)\n* [Status of a11y support in browsers](https://www.html5accessibility.com/)\n* [Building Accessible Menu Systems](https://www.smashingmagazine.com/2017/11/building-accessible-menu-systems/)\n* [Human Interface Guidelines for iOS](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/)\n* [Handling Touch Targets](https://a11yproject.com/posts/large-touch-targets/)\n* [WAI-ARIA Guidelines](https://www.w3.org/WAI/standards-guidelines/aria/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexnm%2Fa11y-checklist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexnm%2Fa11y-checklist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexnm%2Fa11y-checklist/lists"}