{"id":17236619,"url":"https://github.com/illright/a11y-testing-is-not-scary","last_synced_at":"2025-02-24T14:31:31.722Z","repository":{"id":113010863,"uuid":"489446022","full_name":"illright/a11y-testing-is-not-scary","owner":"illright","description":"The slides and the example app for the talk \"Тестирование доступности — это не страшно\" at Merge 2022","archived":true,"fork":false,"pushed_at":"2023-10-06T23:12:33.000Z","size":1733,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-01-30T23:14:40.471Z","etag":null,"topics":["accessibility-testing","cypress","react","slidev","testing-library"],"latest_commit_sha":null,"homepage":"https://illright.github.io/a11y-testing-is-not-scary/","language":"Vue","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/illright.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-05-06T17:50:19.000Z","updated_at":"2024-09-16T08:12:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"4f80df83-2712-44a4-8472-995134e82754","html_url":"https://github.com/illright/a11y-testing-is-not-scary","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/illright%2Fa11y-testing-is-not-scary","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/illright%2Fa11y-testing-is-not-scary/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/illright%2Fa11y-testing-is-not-scary/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/illright%2Fa11y-testing-is-not-scary/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/illright","download_url":"https://codeload.github.com/illright/a11y-testing-is-not-scary/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240494695,"owners_count":19810476,"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":["accessibility-testing","cypress","react","slidev","testing-library"],"created_at":"2024-10-15T05:36:33.860Z","updated_at":"2025-02-24T14:31:31.371Z","avatar_url":"https://github.com/illright.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./slides/public/merge-conference-logo.svg#gh-light-mode-only\" alt=\"Merge conference, Innopolis, 2022\" height=\"48\" /\u003e\n  \u003cimg src=\"./.github/readme-assets/merge-conference-logo-dark.svg#gh-dark-mode-only\" alt=\"Merge conference, Innopolis, 2022\" height=\"48\" /\u003e\n  \n  ## Accessibility testing is not scary\n  \n  _Test on the same page with your users!_\n  \n  \u003ca href=\"https://youtu.be/t3goFFU-pJo\"\u003e\n    \u003cimg alt=\"Talk in Russian\" src=\"./.github/readme-assets/talk-en.svg\" height=\"36\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://illright.github.io/a11y-testing-is-not-scary/\"\u003e\n    \u003cimg alt=\"Slides in Russian\" src=\"https://github.com/illright/a11y-testing-is-not-scary/raw/main/.github/readme-assets/slides-en.svg\" height=\"36\" /\u003e\u003c/a\u003e\n  \u003ca href=\"./README.ru.md\"\u003e\n    \u003cimg alt=\"README на русском\" src=\"./.github/readme-assets/readme-in-russian.svg\" height=\"36\" /\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\nA talk on the importance of HTML roles for accessibility and website navigation from a tester's perspective and a practical showcase of [the Testing Library](https://testing-library.com/) for accessibility testing with Cypress.\n\nThis talk was given at [Merge 2022](https://mergeconf.ru/) in Innopolis, Russia.\n\n## Key points\n\n* A significant obstacle in automated testing is how to use the website programmatically\n* There are two common approaches to locating elements on the page:\n  * Using CSS selectors\n  * Using test IDs\n* The aforementioned approaches don't represent the way real users use the website  \n* HTML roles are a way of communicating important regions and interactive elements to the browser \n* Testing Library helps to use roles to build resilient tests, checking accessibility along the way\n\n## Example app\n\nThe app is a Next.js frontend for the [Real World App](https://realworld.io/) project. The following modifications have been made ([compare](https://github.com/illright/next-realworld-example-app/compare/main...a11y)):\n\n* The article list has been turned into a `feed` ([`ccda521`](https://github.com/illright/next-realworld-example-app/commit/ccda52106e7cec9208b1fa4d73dee88ee1b813b2))\n* Each article has been turned into an `article` and given an accessible name ([`e197baf`](https://github.com/illright/next-realworld-example-app/commit/e197baf8c7a66a62821d57c7a41de3980b02ee6d))\n* The sidebar with tags has been turned into a `complementary` and given an accessible name ([`4b808c6`](https://github.com/illright/next-realworld-example-app/commit/4b808c670e96bd95d3d5ffc3a7f7c94a27b13612))\n* The tab bar has been turned into a `tablist` ([`d825145`](https://github.com/illright/next-realworld-example-app/commit/d825145b838cac08c5ca65723f71ca757bc000b6))\n* Integration tests have been written in Cypress ([`6dfe4bc`](https://github.com/illright/next-realworld-example-app/commit/6dfe4bc1b85893be9859aec475c92b516201e75a))\n* Accessbile labels have been given to the form fields in the sign-up form ([`3d2dea2`](https://github.com/illright/next-realworld-example-app/commit/3d2dea2c918972df085bc8840099bb18ea452fdb))\n\n## Present locally\n\nThe slides are powered by [Slidev](https://sli.dev). Start them with the `dev` script inside the `slides/` directory:\n\n```bash\ncd slides\npnpm i\npnpm dev\n```\n\n## License\n\nThe Merge conference logo is **copyrighted**, it is distributed with permission from copyright holders.\n\nThe emojis are a part of [EmojiOne](https://www.joypixels.com/), licensed under **CC-BY 4.0**.\n\nThe slides and the example app are licensed under **ISC**. [Click here](https://choosealicense.com/licenses/isc/) to learn more about the license.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fillright%2Fa11y-testing-is-not-scary","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fillright%2Fa11y-testing-is-not-scary","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fillright%2Fa11y-testing-is-not-scary/lists"}