{"id":19614337,"url":"https://github.com/fpapado/gaad-2019-presentation","last_synced_at":"2026-03-03T15:34:22.216Z","repository":{"id":96504976,"uuid":"187032038","full_name":"fpapado/gaad-2019-presentation","owner":"fpapado","description":"Notes on my presentation for Global Accessibility Awareness Day 2019","archived":false,"fork":false,"pushed_at":"2019-05-16T13:33:12.000Z","size":4,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-26T17:47:49.582Z","etag":null,"topics":["a11y","accessibility","gaad","presentation"],"latest_commit_sha":null,"homepage":"","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-05-16T13:19:43.000Z","updated_at":"2019-05-16T18:44:51.000Z","dependencies_parsed_at":"2023-04-30T18:49:45.369Z","dependency_job_id":null,"html_url":"https://github.com/fpapado/gaad-2019-presentation","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/fpapado/gaad-2019-presentation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fpapado%2Fgaad-2019-presentation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fpapado%2Fgaad-2019-presentation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fpapado%2Fgaad-2019-presentation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fpapado%2Fgaad-2019-presentation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fpapado","download_url":"https://codeload.github.com/fpapado/gaad-2019-presentation/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fpapado%2Fgaad-2019-presentation/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30050496,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-03T15:26:47.567Z","status":"ssl_error","status_checked_at":"2026-03-03T15:26:17.132Z","response_time":61,"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","accessibility","gaad","presentation"],"created_at":"2024-11-11T10:51:26.582Z","updated_at":"2026-03-03T15:34:22.177Z","avatar_url":"https://github.com/fpapado.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Global Accessibility Awareness Day 2019\n\nhttps://github.com/fpapado/gaad-2019-presentation\n\n## Some motivation\n\u003e Around 80 million people in the EU are \naffected by a disability in some degree\n(temporary / permanent disability).\n\n- EAA Factsheet \n\n\u003e Disabled people make up 1/6 of the\nworking age people in Europe.\n\n- EU department of Employment, Social Affairs \u0026 Inclusion\n\n\u003e On average in the EU-27, only 5% of\npublic websites comply fully with web\naccessibility standards, though more\nare partially accessible.\n\n- European Disability Strategy 2010-2020: A Renewed Commitment to a BarrierFree Europe\n\n## What is Accessibility?\n\n1. The quality of being able to be reached or entered.\n2. The quality of being easy to obtain or use.\n3. The quality of being easily understood or appreciated.\n\nIn the digital world, accessibility covers more areas than one\nwould think, these include:\nPerformance, Design, Implementation of code, Copywriting Legal,\nDiversity and Inclusion\n\n## How Accessibility Affects Us\n\nMajor categories of disability:\n- Visual (Blindness, low vision, color-blindness)\n- Hearing (Deafness and hard-of-hearing)\n- Motor (Inability to use a mouse, slow response time, limited fine motor control)\n- Cognitive (Learning disabilities, distractibility, inability to remember or focus on large amounts of information)\n\nSource: https://webaim.org/intro/\n\nMany of these can be:\n- Permanent (e.g. if you are born or become permanently blind)\n- Temporary (e.g. an arm in a cast, eye surgery)\n- Situational (e.g. holding a baby, being under stress)\n\n## Where do I start?\n\nGuidance to making sites accessible: POUR\n- Perceivable\n- Operable\n- Understandable\n- Robust\n\n## A11y?\n\n- It's a numeronym, that stands for Accessibility\n- Pronounced \"accessibility\"\n- A ...(11 letters)... y\n- Easy to google/search in hashtags\n\n## Web Content Accessibility Guidelines (WCAG)\n\n- [Latest version 2.1](https://www.w3.org/TR/WCAG21/)\n- A set of criteria and, well, guidelines\n- Different levels of compliance (A, AA, AAA)\n- Aim to address real issues\n- ...don't think of it as just \"a spec\"\n\n## Common issues\n\n## Accessibility in ...\n\n\u003e Knowing what / who to ask, is more important than how to solve it \n\n## Accessibility in Design\n- Responsive Web Design and mobile-first approaches work *great* for zoom-levels. A \"desktop\" 400% zoom might as well be a short \"mobile\" screen!\n- Similar points for fixed elements; prefer flexible layout methods \u0026 designs\n- Colour contrast\n- Heading levels\n- Form labels\n- Underlines on links\n- Do not remove focus outlines\n- Design systems as an opportunity\n\n## Accessibility in Development\n- Responsive Web Design (in the implementation and communication)\n- Semantic HTML; headling levels increase logically, lists, forms, inputs, buttons\n- Communicating error states\n- Any of the notes in the design section above :)\n- Exposing the correct widget roles and behaviour\n\n## What could we learn from each other?\nThese are some things I find \n- From Design: User research! Intentionally designing stats.\n- From Development: Communicating the constraints and possibilities of layout; emphasising the required semantic promises (headings, labels etc.)\n- Having a shorter feedback loop\n\n## Section 2: Possible Activities\n- Auditing a site live\n- Going over references\n- Reading an audit\n- Having a Q\u0026A\n\n## Section 3: 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 issues\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\n[Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG21/)\n\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[A11y Project](https://a11yproject.com/). A lot of resources on Accessibility.\n\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffpapado%2Fgaad-2019-presentation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffpapado%2Fgaad-2019-presentation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffpapado%2Fgaad-2019-presentation/lists"}