{"id":13398082,"url":"https://github.com/Heydon/inclusive-design-checklist","last_synced_at":"2025-03-14T00:32:56.390Z","repository":{"id":42187169,"uuid":"110424613","full_name":"Heydon/inclusive-design-checklist","owner":"Heydon","description":"Aims to be the biggest checklist of inclusive design considerations ever","archived":false,"fork":false,"pushed_at":"2020-06-11T11:48:40.000Z","size":84,"stargazers_count":2721,"open_issues_count":3,"forks_count":155,"subscribers_count":104,"default_branch":"master","last_synced_at":"2024-10-29T17:40:34.538Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/Heydon.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}},"created_at":"2017-11-12T10:51:08.000Z","updated_at":"2024-10-25T13:29:20.000Z","dependencies_parsed_at":"2022-08-12T08:50:53.430Z","dependency_job_id":null,"html_url":"https://github.com/Heydon/inclusive-design-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/Heydon%2Finclusive-design-checklist","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Heydon%2Finclusive-design-checklist/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Heydon%2Finclusive-design-checklist/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Heydon%2Finclusive-design-checklist/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Heydon","download_url":"https://codeload.github.com/Heydon/inclusive-design-checklist/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242922274,"owners_count":20207182,"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-07-30T18:02:06.087Z","updated_at":"2025-03-14T00:32:56.085Z","avatar_url":"https://github.com/Heydon.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","\u003ca id=\"Web-Development\"\u003e\u003c/a\u003eWeb Development","📦 Legacy \u0026 Inactive Projects"],"sub_categories":["\u003ca id=\"Front-End-Development\"\u003e\u003c/a\u003eFront-End Development"],"readme":"# Inclusive Web Design Checklist\n\nAims to be the **biggest** checklist of inclusive design considerations for the web _ever_. Includes items for accessibility, performance, device support, interoperability, and language. Pull requests welcome!\n\n- [ ] Minify CSS and JS, and remove unused/redundant code [[#1](https://developers.google.com/speed/docs/insights/MinifyResources)] \n- [ ] Maintain terse HTML, without over-reliance on `\u003cdiv\u003e` scaffolding [[#1](http://designingforperformance.com/optimizing-markup-and-styles/#divitis)] \n- [ ] Use screen reader and keyboard accessible HTML [[#1](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)] \n- [ ] Compress raster images [[#1](https://www.html5rocks.com/en/tutorials/speed/img-compression/)] \n- [ ] Optimize SVG path data [[#1](https://web-design-weekly.com/2014/10/22/optimizing-svg-web/)] \n- [ ] Make sure heading levels describe a logical section/subsection structure [[#1](https://webaim.org/techniques/semanticstructure/)] \n- [ ] Only include heading elements where they introduce sections of content\n- [ ] Remove potentially insensitive or uninclusive language (use \"singular they\") [[#1](http://alexjs.com/)] \n- [ ] Give video content captions and transcripts\n- [ ] Provide transcripts for audio content\n- [ ] Make sure main body (paragraph) text is no smaller than the default (user agent) size [[#1](https://www.smashingmagazine.com/2011/10/16-pixels-body-copy-anything-less-costly-mistake/)] \n- [ ] Support \"pinch zoom\" (remove `user-scalable=no` if present)\n- [ ] Use relative units (`em`, `rem`, and `ch`), especially for font metrics\n- [ ] Make sure styles and scripts are not render blocking [[#1](https://csabapalfi.github.io/eliminate-render-blocking/)] \n- [ ] Install a service worker and cache all applicable assets [[#1](https://css-tricks.com/serviceworker-for-offline/)] \n- [ ] Use content-based, not device-specific, media queries [[#1](http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/#content)] \n- [ ] Provide alternatives and/or descriptions for complex visualizations\n- [ ] Include only clear, meaningful animations\n- [ ] Honor requests to remove animation via the `prefers-reduced-motion` media query\n- [ ] Make sure controls do not elicit unexpected or jarring behavior [[#1](https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-receive-focus.html)]  [[#2](https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-unpredictable-change.html)] \n- [ ] Do not include third parties that compromise user privacy [[#1](https://css-tricks.com/potential-dangers-of-third-party-javascript/)] \n- [ ] Do not recreate supported and expected browser behaviors with bespoke scripts\n- [ ] Support Windows high contrast mode (use images, not background images) [[#1](http://adrianroselli.com/2012/08/css-background-images-high-contrast-mode.html)] \n- [ ] Provide alternative text for salient images [[#1](https://www.w3.org/WAI/tutorials/images/decision-tree/)] \n- [ ] Apply `alt=\"` or `aria-hidden=\"true\"` to decorative images [[#1](https://www.w3.org/WAI/tutorials/images/decorative/)] \n- [ ] Make sure text and background colors contrast sufficiently [[#1](https://accessibility.blog.gov.uk/2016/06/17/colour-contrast-why-does-it-matter/)] \n- [ ] Provide `\u003ctitle\u003e`s that name the site and the specific page [[#1](https://www.w3.org/TR/WCAG20-TECHS/G88.html)] \n- [ ] Provide large touch \"targets\" for interactive elements [[#1](http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/design/touch-target-size)] \n- [ ] Use data tables (`\u003ctable\u003e`) for data only, not visual layout purposes\n- [ ] Make scrollable elements focusable for keyboard users\n- [ ] Do not rely on color for differentiation of visual elements\n- [ ] Use the same design patterns to solve the same problems\n- [ ] Ensure keyboard focus order is logical regarding visual layout\n- [ ] Lazy load large image assets\n- [ ] Honour DNT (Do Not Track) header [[#1](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/DNT)] \n- [ ] Translate / spell out acronyms the first time you use them\n- [ ] Do not hijack standard scrolling behavior\n- [ ] Move focus between dialogs and the controls that invoked them\n- [ ] Give all form elements permanently visible labels\n- [ ] Give grouped form elements group labels\n- [ ] Place labels above form elements\n- [ ] Provide status and error messages as WAI-ARIA live regions\n- [ ] Provide clear, unambiguous focus styles\n- [ ] Employ well-balanced, highly legible fonts (not too complex or elaborate)\n- [ ] Do not use very thin font faces [[#1](http://www.telegraph.co.uk/science/2016/10/23/internet-is-becoming-unreadable-because-of-a-trend-towards-light/)] \n- [ ] Ensure states (pressed, expanded, invalid, etc) are communicated to assistive software\n- [ ] Match semantics to behavior for assistive technology users\n- [ ] Provide a default language and use `lang=\"[ISO code]\"` for subsections in different languages\n- [ ] Make controls look like controls; give them strong perceived affordance\n- [ ] Underline links — at least in body copy\n- [ ] Make sure all content belongs to a landmark element (`\u003cheader\u003e`, `\u003cfooter\u003e`, `\u003cnav\u003e`, `\u003cmain\u003e`, etc)\n- [ ] Avoid pure white or pure black shades\n- [ ] Mark invalid fields clearly and provide associated error messages\n- [ ] Ensure content is not obscured through zooming (no fixed widths)\n- [ ] Provide a `manifest.json` file for identifiable homescreen entries\n- [ ] Indicate swipe gesture support clearly, and provide simple tap-based alternatives\n- [ ] Make sure data tables wider than their container can be scrolled horizontally\n- [ ] Avoid time constraints where possible; provide a clear warning and option to extend where not possible \n- [ ] Label and describe the same things with the same terminology\n- [ ] Ensure disabled controls are not focusable\n- [ ] Do not instate \"infinite scroll\" by default; provide buttons to load more items\n- [ ] Avoid justified body text [[#1](https://www.w3.org/TR/WCAG20-TECHS/F88.html)] \n- [ ] Provide enough spacing between lines of text (`line-height`) [[#1](https://www.w3.org/TR/WCAG20-TECHS/C21.html)] \n- [ ] Ensure PDF content is accessible (include tags) [[#1](https://webaim.org/techniques/acrobat/)] \n- [ ] Provide a skip link if necessary  [[#1](https://webaim.org/techniques/skipnav/)] \n- [ ] Avoid all-caps text [[#1](https://github.com/humanmade/hm-pattern-library/issues/75)] \n- [ ] Ensure that content is written as clearly and simply as possible [[#1](https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-supplements.html)] \n- [ ] Provide descriptive captions for figures\n- [ ] Warn users of links that have unusual behaviors, like linking off-site, or loading a new tab\n- [ ] Make content easier to find and improve search results with structured data [[#1](https://developers.google.com/search/docs/guides/prototype)] \n- [ ] Use textual labels to make voice activation cues obvious\n- [ ] Do not mark up subheadings/straplines with separate heading elements\n- [ ] Ensure primary calls to action are easy to recognize and reach\n- [ ] Avoid images of text — text that cannot be translated, selected, or understood by assistive tech\n- [ ] Provide a print stylesheet (single column, with interactive content hidden)\n- [ ] Use well-established, therefore recognizable, icons and symbols\n- [ ] Subset fonts to just the characters needed\n- [ ] Instead of obstructing users with CAPTCHAs, use honeypots [[#1](https://en.wikipedia.org/wiki/Honeypot_(computing))] \n- [ ] Begin long, multi-section documents with a table of contents\n- [ ] Don\"t make users perform actions to reveal content unless completely necessary\n- [ ] If content is meant to be hidden, ensure it is properly hidden to all users\n- [ ] Make sure controls within hidden content are not focusable\n- [ ] Use `srcset` to tailor images to devices and reduce bandwidth costs\n- [ ] Do not auto focus form fields, on page load\n- [ ] Break up long and complex forms into discrete sections and/or screens\n- [ ] Make forms as short as possible; offer shortcuts like autocompleting the address using the postcode\n- [ ] Ensure the same content is available across different devices and platforms\n- [ ] Inform the user when there are important changes to the application state\n- [ ] Make sure the purpose of a link is clearly described: \"read more\" vs. \"read more about accessibility\"\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHeydon%2Finclusive-design-checklist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FHeydon%2Finclusive-design-checklist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHeydon%2Finclusive-design-checklist/lists"}