{"id":18069049,"url":"https://github.com/irekrog/accessibility-checklist","last_synced_at":"2025-04-05T16:17:49.941Z","repository":{"id":144082116,"uuid":"112518685","full_name":"irekrog/accessibility-checklist","owner":"irekrog","description":null,"archived":false,"fork":false,"pushed_at":"2019-09-19T06:39:03.000Z","size":3,"stargazers_count":42,"open_issues_count":1,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-11T12:52:49.674Z","etag":null,"topics":["accessibility","aria","checklist","wcag","wcag2"],"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/irekrog.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":"2017-11-29T19:30:43.000Z","updated_at":"2024-02-06T05:36:48.000Z","dependencies_parsed_at":"2023-05-26T08:31:10.524Z","dependency_job_id":null,"html_url":"https://github.com/irekrog/accessibility-checklist","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/irekrog%2Faccessibility-checklist","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/irekrog%2Faccessibility-checklist/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/irekrog%2Faccessibility-checklist/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/irekrog%2Faccessibility-checklist/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/irekrog","download_url":"https://codeload.github.com/irekrog/accessibility-checklist/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247361704,"owners_count":20926643,"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","aria","checklist","wcag","wcag2"],"created_at":"2024-10-31T08:08:45.227Z","updated_at":"2025-04-05T16:17:49.927Z","avatar_url":"https://github.com/irekrog.png","language":null,"funding_links":[],"categories":["\u003ca id=\"Web-Development\"\u003e\u003c/a\u003eWeb Development"],"sub_categories":["\u003ca id=\"Front-End-Development\"\u003e\u003c/a\u003eFront-End Development"],"readme":"# Accessibility Checklist\n\n## Table of Contents\n\n* **[HTML](#html)**\n* **[CSS](#css)**\n* **[OTHER](#other)**\n* **[BEHAVIOR](#behavior)**\n* **[TOOLS](#tools)**\n* **[USEFUL LINKS](#useful-links)**\n\n## HTML\n\n**Add `alt` attribute with description or not (then empty) to every `\u003cimg\u003e` tag**\n\u003e * [1.1.1 - Non-text Content - Level](https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=111#qr-text-equiv-all)\n\n**Use only one `\u003ch1\u003e` per page**\n\u003e * [1.3.1 - Info and Relationships - Level A](https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=131#qr-content-structure-separation-programmatic)\n\u003e * [Creating on outline (look at the Warning)](http://w3c.github.io/html/sections.html#creating-an-outline)\n\u003e * [Computer says NO to HTML5 document outline](http://html5doctor.com/computer-says-no-to-html5-document-outline/)\n\n**Use proper and semantic HTML tags to presenting and behavior of content**\n* Examples:\n  * Date and time should be in the `\u003ctime\u003e` tag\n  * Table data should be in the `\u003ctable\u003e` tag\n  * Use `\u003ccaption\u003e` to title of the table\n  * If you have \"Back to top\" button on the page you should use `\u003cbutton\u003e` tag to this\n  * To listed items use `\u003cul\u003e` `\u003cli\u003e` (items ordered isn't important) or `\u003col\u003e` `\u003cli\u003e` (items ordered is important)\n  * Use `\u003cfigure`\u003e tag with `\u003cfigcaption\u003e` to embeds\n  * Watch out for the difference between `\u003cb\u003e` / `\u003cstrong\u003e` and `\u003ci\u003e` / `\u003cem\u003e`\n  * Use `\u003clabel\u003e`s tag to `\u003cinput\u003e`s tags\n\u003e * [1.3.1 - Info and Relationships - Level A](https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=131#qr-content-structure-separation-programmatic)\n\n**Separating content layer (HTML) from presentation layer (CSS)**\n\u003e * [1.3.1 - Info and Relationships - Level A](https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=131#content-structure-separation-programmatic)\n\n**Add `dir` attribute to `\u003chtml\u003e` tag**\n\u003e * [1.3.2 - Meaningful Sequence - Level A](https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=132#qr-content-structure-separation-sequence)\n\n**Don't use `maximum-scale=1.0` in viewport `\u003cmeta\u003e` tag**\n\u003e * [1.4.4 - Resize text - Level AA](https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=144#qr-visual-audio-contrast-scale)\n\n**Use skip links navigation**\n\u003e * [2.4.1 - Bypass Blocks - Level A](https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=241#qr-navigation-mechanisms-skip)\n\n**Use `\u003ctitle\u003e` tag**\n\u003e * [2.4.2 - Page Titled - Level A](https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=242#qr-navigation-mechanisms-title)\n\n**Add `lang` attribute to `\u003chtml\u003e` tag**\n\u003e * [3.1.2 - Language of Parts - Level AA](https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=312#qr-meaning-other-lang-id)\n\n## CSS\n\n**Contrast ratio should be 4.5:1 for normal text and 3:1 for large text**\n\u003e * [1.4.3 - Contrast (Minimum) - Level AA](https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=143#qr-visual-audio-contrast-contrast)\n\u003e * [1.4.6 - Contrast (Enhanced) - Level AAA](https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=146#qr-visual-audio-contrast7)\n\n**Don't remove focus (outline property in CSS) from interactive tags (`\u003ca\u003e`, `\u003cbutton\u003e`, `\u003cinput\u003e` etc.)**\n\u003e * [2.4.7 - Focus Visible - Level AA](https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=247#qr-navigation-mechanisms-focus-visible)\n\u003e * [3.2.1 - On Focus - Level A](https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=321#qr-consistent-behavior-receive-focus)\n\u003e * [DON'T DO IT - CSS outline property - outline: none and outline: 0](http://www.outlinenone.com/)\n\n## OTHER\n**Provide transcript for video or audio media (prerecorded)**\n\u003e * [1.2.1 - Audio-only and Video-only (Prerecorded) - Level A](https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=121#qr-text-equiv-all)\n\n**Provide captions for video or audio media (prerecorded)**\n\u003e * [1.2.2 - Captions (Prerecorded) - Level A](https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=122#media-equiv-captions)\n\n**Provide audiodescripton or alternative media (prerecorded)**\n\u003e * [1.2.3 - Audio Description or Media Alternative (Prerecorded) - Level A](https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=123#media-equiv-audio-desc)\n\n**Provide captions for live audio or video**\n\u003e * [1.2.4 - Captions (Live) - Level AA](https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=124#media-equiv-audio-desc)\n\n**Provide audiodescription for prerecorded video**\n\u003e * [1.2.5 - Audio Description (Prerecorded) - Level AA](https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=125#media-equiv-audio-desc)\n\n**Provide sign language for media content**\n\u003e * [1.2.6 - Sign Language (Prerecorded) - Level AAA](https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=126#media-equiv-audio-desc)\n\n## BEHAVIOR\n**Don't use shapes, colors, sounds to continue execute instructions. (Click on the red shape to continue)**\n\u003e * [1.3.3 - Sensory Characteristics - Level A](https://www.w3.org/WAI/WCAG20/quickref/#content-structure-separation-understanding)\n\n**If you have a form with required inputs don't use only colors to provide information about that**\n\u003e * [1.4.1 - Use of Color - Level A](https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=141#visual-audio-contrast-without-color)\n\n**If you have an audio automatically plays for more than 3 second should have mechanism to play, pause and stop this or control audio volume independent from OS**\n\u003e * [1.4.2 - Audio Control - Level A](https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=142#visual-audio-contrast-dis-audio)\n\n**Ensure tab sequence is logical**\n\u003e * [2.4.3 - Focus Order - Level A](https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=243#qr-navigation-mechanisms-focus-order)\n\n## TOOLS \n* [NVDA (NonVisual Desktop Access)](https://www.nvaccess.org/)\n* Accessibility Tab in Chrome DevTools\n* [Lighthouse](https://github.com/GoogleChrome/lighthouse)\n\n## USEFUL LINKS\n* http://www.html5accessibility.com/\n* https://webaim.org/\n* https://bbc.github.io/accessibility-news-and-you/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Firekrog%2Faccessibility-checklist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Firekrog%2Faccessibility-checklist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Firekrog%2Faccessibility-checklist/lists"}