{"id":19614335,"url":"https://github.com/fpapado/keeping-sites-accessible","last_synced_at":"2026-02-04T13:44:17.230Z","repository":{"id":96505028,"uuid":"184028520","full_name":"fpapado/keeping-sites-accessible","owner":"fpapado","description":null,"archived":false,"fork":false,"pushed_at":"2019-04-29T09:09:45.000Z","size":3,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-26T17:47:49.170Z","etag":null,"topics":[],"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/fpapado.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-04-29T08:12:36.000Z","updated_at":"2020-04-20T15:00:51.000Z","dependencies_parsed_at":null,"dependency_job_id":"cbd75439-13f5-435f-8e34-33a62d9a224b","html_url":"https://github.com/fpapado/keeping-sites-accessible","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/fpapado/keeping-sites-accessible","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fpapado%2Fkeeping-sites-accessible","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fpapado%2Fkeeping-sites-accessible/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fpapado%2Fkeeping-sites-accessible/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fpapado%2Fkeeping-sites-accessible/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fpapado","download_url":"https://codeload.github.com/fpapado/keeping-sites-accessible/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fpapado%2Fkeeping-sites-accessible/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265435368,"owners_count":23764708,"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-11T10:51:13.590Z","updated_at":"2026-02-04T13:44:17.194Z","avatar_url":"https://github.com/fpapado.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Keeping Sites Accessible\n\n## Checklists\n\n- Way to keep track of progress\n- However, **not** the actual guidelines\n\n[WebAim checklist](https://webaim.org/standards/wcag/checklist)\n\n\u003e The following is NOT the Web Content Accessibility Guidelines (WCAG) 2. It is a checklist that presents our recommendations for implementing accessibility principles and techniques for those seeking WCAG conformance. The language used here significantly simplifies and condenses the official WCAG 2.1 specification and supporting materials to make it easier to implement and verify for web pages.\n\n## Automated Checks\n\n- You can only catch 20-40% of checks\n- [AxE from Deque - AxE Plugin](https://www.deque.com/axe/)\n- [Accessibility Insights](https://accessibilityinsights.io/). Has a great \"manual\" mode.\n\nYou can get these in CI:\n- https://github.com/fpapado/accessible-pipeline\n\n...what does \"in CI\" mean, though?\n\n- Testing vs. Monitoring; building a backlog\n\n## Audits\n\n- Audits are a great way to find issues, keep a holistic overview, as well as learn things\n- Evaluation by pattern vs. by principle\n\n## Processes / Ways of Working\n\n\u003e A shared pain is half the pain, a shared joy is twice the joy\n\n- Always write things down\n- Agree that it's the focus\n- Ask questions\n- Knowing what / who to ask, is more important than how to solve it\n    - The sort of thing you could do in issues/PRs\n- Share references\n\n### Descriptive Issues / PRs\n\n(Internal links)\n\n### Code Reviews\n\n- PR templates\n    - e.g. with Inclusive Design Principles, or POUR, or...\n- Walk through with someone\n    - Someone dedicated / delegated to check accessibility\n\n## Things to watch for\n\n\u003e As you incorporate accessibility into your workflow, you develop an intuition for these things\n\n- Semantic HTML\n- Color contrast\n- Labels\n- Click handlers on non-buttons\n- Document hierarchy (h1-h6)\n- Identifying roles/widgets\n- Visual/source order mismatch (absolute positioning, flex order etc.)\n- Routing\n\n## You will be wrong, and that's fine :)\n\nFrom the HTML Design Principles:\n\u003e In case of conflict, consider users over authors over implementors over specifiers over theoretical purity\n\n## References\n\n### Specs and Principles\n[ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/) How to work with ARIA, how to implement speicfic patterns. For example, a combobox, a modal, a carousel. Also, illustrate how much semantic HTML gives you by default.\n\n[Inclusive Design Principles](https://inclusivedesignprinciples.org/). Series of principles that are meant to promote good practices. Great to print out and have as a reminder, and to help establish a common ground.\n\n[HTML Design Principles](https://www.w3.org/TR/html-design-principles/).\n\n[HTML Accessibility API Mappings](https://www.w3.org/TR/html-aam-1.0/). Ever wonder why we say \"semantic HTML is better for accessibility\"? This document establishes what role, label, and state each semantic HTML element exposes by default!\n\n### Reading\n[Inclusive Components](https://inclusive-components.design). A \"blog aiming to be a pattern library\", great breakdown of custom widgets and considerations. Also as an ebook.\n\n[Accessibility For Everyone](https://abookapart.com/products/accessibility-for-everyone). Great insight into the reasons, processes and implementation of accessibility.\n\n[Form Design Patterns](https://www.smashingmagazine.com/printed-books/form-design-patterns/).\n\n[Testing with Screen Readers](https://webaim.org/articles/screenreader_testing/).\n\n### Watch\n[How A Screen Reader User Accesses The Web: A Smashing Video](https://www.smashingmagazine.com/2019/02/accessibility-webinar/). Léonie Watson goes over how she browses, and various modes in screen readers.\n\n### Courses\n\n[Udemy: Web Accessibility, by Google](https://eu.udacity.com/course/web-accessibility--ud891). Short, fairly comprehensive insight into practical accessibility. Give this a watch!\n\n[Deque University](https://dequeuniversity.com/). Longer-form, self-paced courses. Intended to develop expertise and prepare for certification. Useful to have someone with that knowledge on the team.\n\n### Audits\n\nI think one of the best ways to learn, is to read audits. They show how accessibility is an ongoing process. One I like in particular is the [Bulb Inclusive Design Audit](https://bulbenergy.github.io/bulb-audit/).\n\n### People I follow (and that you might want to as well)\n\nEntirely not comprehensive list:\n- [Marcy Sutton](https://twitter.com/marcysutton)\n- [Heydon Pickering](https://twitter.com/heydonworks)\n- [Léonie Watson](https://twitter.com/leoniewatson)\n- [Scott O'Hara](https://twitter.com/scottohara)\n- [Adrian Roselli](https://twitter.com/aardrian)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffpapado%2Fkeeping-sites-accessible","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffpapado%2Fkeeping-sites-accessible","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffpapado%2Fkeeping-sites-accessible/lists"}