{"id":24932367,"url":"https://github.com/enamhasan/web-accessibility-101","last_synced_at":"2026-01-07T11:49:54.481Z","repository":{"id":182168658,"uuid":"661882459","full_name":"enamhasan/web-accessibility-101","owner":"enamhasan","description":"Web Accessibility Cheat Sheet","archived":false,"fork":false,"pushed_at":"2023-08-25T19:24:54.000Z","size":59,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-02T14:38:44.249Z","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/enamhasan.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}},"created_at":"2023-07-03T22:06:31.000Z","updated_at":"2023-07-03T22:06:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"524937c8-9e82-4c0d-ae0e-2a716beadfb2","html_url":"https://github.com/enamhasan/web-accessibility-101","commit_stats":null,"previous_names":["enamhasan/web-accessibility-101"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enamhasan%2Fweb-accessibility-101","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enamhasan%2Fweb-accessibility-101/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enamhasan%2Fweb-accessibility-101/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enamhasan%2Fweb-accessibility-101/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/enamhasan","download_url":"https://codeload.github.com/enamhasan/web-accessibility-101/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246043915,"owners_count":20714493,"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":"2025-02-02T14:38:50.133Z","updated_at":"2026-01-07T11:49:54.452Z","avatar_url":"https://github.com/enamhasan.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# web-accessibility-101\nWeb Accessibility / ADA complaint Cheat Sheet\n\n#  Tools to ensure web Accessibility\n\n * Wave \n* Google Lighthouse\n* voice-over\n* Power mapper\n\n# How to make a button web accessible\n\n```\u003cbutton\u003e``` VS ```\u003ca\u003e``` tag  in terms of web Accessibility\n\nThe \u003cbutton\u003e element should be used for any interaction that performs an action on the current page. \nThe \u003ca\u003e element should be used for any interaction that navigates to another view.\n\nTo make a button web-accessible\n* Use Semantic HTML ```\u003cbutton\u003e``` tag with type attribute\n* Use the aria-label Attribute to provide a more explicit label for assistive technologies. \n* Ensure the button is fully keyboard accessible. Users should be able to navigate to the button using the \"Tab\" key and activate it using the \"Enter\" or \"Space\"\n\n### Example\n\n ``` \u003cbutton type=\"button\" aria-label=\"Click to submit the contact form\"\u003eSend\u003c/button\u003e ```\n\nWhen you can’t use semantic HTML\n\n``` \u003cdiv role=\"button\" tabindex=\"0\" aria-label=\"Buy now, iPhone 17\"\u003eBuy now \u003c/div\u003e ```\n\n# Make a background image web Accessible with Alt text\n\nDo this:\n```html\n\u003cdiv\u003e\n\u003cspan class=\"background-image\" role=\"img\" aria-label=\"[place alt text here]\u003e \u003c/span\u003e\n[all the rest of my content]\n\u003c/div\u003e\n```\nDon't do this:\n```\n\u003cdiv class=\"background-image\" role=\"img\" aria-label=\"blah blah blah\"\u003e\n[all the rest of my content]\n\u003c/div\u003e\n```\nTry not to use CSS for important informational images\nFor ambient images that are CSS, it is a courtesy to provide alternate text. When doing so, place image in its own empty\u003cspan\u003e with an aria-label and role=\"img.This is also true, in a situation where CSS must be used for information content.\nIf the \u003cdiv\u003e with the CSS image absolutely MUST contain other content, then provide an empty \u003cspan\u003e with an aria-label and role=\"img\" immediately following the \u003cdiv\u003e that has the image.\n\n# Make HTML Tab Accessible\n![Accessible Tabs](https://github.com/enamhasan/web-accessibility-101/assets/9293561/4d5cdf00-1785-4cb1-a720-28c07377122b)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenamhasan%2Fweb-accessibility-101","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fenamhasan%2Fweb-accessibility-101","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenamhasan%2Fweb-accessibility-101/lists"}