├── README.md ├── checklist.json └── generator └── index.js /README.md: -------------------------------------------------------------------------------- 1 | # Inclusive Web Design Checklist 2 | 3 | Aims 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! 4 | 5 | - [ ] Minify CSS and JS, and remove unused/redundant code [[#1](https://developers.google.com/speed/docs/insights/MinifyResources)] 6 | - [ ] Maintain terse HTML, without over-reliance on `
` scaffolding [[#1](http://designingforperformance.com/optimizing-markup-and-styles/#divitis)] 7 | - [ ] Use screen reader and keyboard accessible HTML [[#1](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)] 8 | - [ ] Compress raster images [[#1](https://www.html5rocks.com/en/tutorials/speed/img-compression/)] 9 | - [ ] Optimize SVG path data [[#1](https://web-design-weekly.com/2014/10/22/optimizing-svg-web/)] 10 | - [ ] Make sure heading levels describe a logical section/subsection structure [[#1](https://webaim.org/techniques/semanticstructure/)] 11 | - [ ] Only include heading elements where they introduce sections of content 12 | - [ ] Remove potentially insensitive or uninclusive language (use "singular they") [[#1](http://alexjs.com/)] 13 | - [ ] Give video content captions and transcripts 14 | - [ ] Provide transcripts for audio content 15 | - [ ] 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/)] 16 | - [ ] Support "pinch zoom" (remove `user-scalable=no` if present) 17 | - [ ] Use relative units (`em`, `rem`, and `ch`), especially for font metrics 18 | - [ ] Make sure styles and scripts are not render blocking [[#1](https://csabapalfi.github.io/eliminate-render-blocking/)] 19 | - [ ] Install a service worker and cache all applicable assets [[#1](https://css-tricks.com/serviceworker-for-offline/)] 20 | - [ ] Use content-based, not device-specific, media queries [[#1](http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/#content)] 21 | - [ ] Provide alternatives and/or descriptions for complex visualizations 22 | - [ ] Include only clear, meaningful animations 23 | - [ ] Honor requests to remove animation via the `prefers-reduced-motion` media query 24 | - [ ] 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)] 25 | - [ ] Do not include third parties that compromise user privacy [[#1](https://css-tricks.com/potential-dangers-of-third-party-javascript/)] 26 | - [ ] Do not recreate supported and expected browser behaviors with bespoke scripts 27 | - [ ] Support Windows high contrast mode (use images, not background images) [[#1](http://adrianroselli.com/2012/08/css-background-images-high-contrast-mode.html)] 28 | - [ ] Provide alternative text for salient images [[#1](https://www.w3.org/WAI/tutorials/images/decision-tree/)] 29 | - [ ] Apply `alt="` or `aria-hidden="true"` to decorative images [[#1](https://www.w3.org/WAI/tutorials/images/decorative/)] 30 | - [ ] Make sure text and background colors contrast sufficiently [[#1](https://accessibility.blog.gov.uk/2016/06/17/colour-contrast-why-does-it-matter/)] 31 | - [ ] Provide ``s that name the site and the specific page [[#1](https://www.w3.org/TR/WCAG20-TECHS/G88.html)] 32 | - [ ] Provide large touch "targets" for interactive elements [[#1](http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/design/touch-target-size)] 33 | - [ ] Use data tables (`<table>`) for data only, not visual layout purposes 34 | - [ ] Make scrollable elements focusable for keyboard users 35 | - [ ] Do not rely on color for differentiation of visual elements 36 | - [ ] Use the same design patterns to solve the same problems 37 | - [ ] Ensure keyboard focus order is logical regarding visual layout 38 | - [ ] Lazy load large image assets 39 | - [ ] Honour DNT (Do Not Track) header [[#1](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/DNT)] 40 | - [ ] Translate / spell out acronyms the first time you use them 41 | - [ ] Do not hijack standard scrolling behavior 42 | - [ ] Move focus between dialogs and the controls that invoked them 43 | - [ ] Give all form elements permanently visible labels 44 | - [ ] Give grouped form elements group labels 45 | - [ ] Place labels above form elements 46 | - [ ] Provide status and error messages as WAI-ARIA live regions 47 | - [ ] Provide clear, unambiguous focus styles 48 | - [ ] Employ well-balanced, highly legible fonts (not too complex or elaborate) 49 | - [ ] 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/)] 50 | - [ ] Ensure states (pressed, expanded, invalid, etc) are communicated to assistive software 51 | - [ ] Match semantics to behavior for assistive technology users 52 | - [ ] Provide a default language and use `lang="[ISO code]"` for subsections in different languages 53 | - [ ] Make controls look like controls; give them strong perceived affordance 54 | - [ ] Underline links — at least in body copy 55 | - [ ] Make sure all content belongs to a landmark element (`<header>`, `<footer>`, `<nav>`, `<main>`, etc) 56 | - [ ] Avoid pure white or pure black shades 57 | - [ ] Mark invalid fields clearly and provide associated error messages 58 | - [ ] Ensure content is not obscured through zooming (no fixed widths) 59 | - [ ] Provide a `manifest.json` file for identifiable homescreen entries 60 | - [ ] Indicate swipe gesture support clearly, and provide simple tap-based alternatives 61 | - [ ] Make sure data tables wider than their container can be scrolled horizontally 62 | - [ ] Avoid time constraints where possible; provide a clear warning and option to extend where not possible 63 | - [ ] Label and describe the same things with the same terminology 64 | - [ ] Ensure disabled controls are not focusable 65 | - [ ] Do not instate "infinite scroll" by default; provide buttons to load more items 66 | - [ ] Avoid justified body text [[#1](https://www.w3.org/TR/WCAG20-TECHS/F88.html)] 67 | - [ ] Provide enough spacing between lines of text (`line-height`) [[#1](https://www.w3.org/TR/WCAG20-TECHS/C21.html)] 68 | - [ ] Ensure PDF content is accessible (include tags) [[#1](https://webaim.org/techniques/acrobat/)] 69 | - [ ] Provide a skip link if necessary [[#1](https://webaim.org/techniques/skipnav/)] 70 | - [ ] Avoid all-caps text [[#1](https://github.com/humanmade/hm-pattern-library/issues/75)] 71 | - [ ] Ensure that content is written as clearly and simply as possible [[#1](https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-supplements.html)] 72 | - [ ] Provide descriptive captions for figures 73 | - [ ] Warn users of links that have unusual behaviors, like linking off-site, or loading a new tab 74 | - [ ] Make content easier to find and improve search results with structured data [[#1](https://developers.google.com/search/docs/guides/prototype)] 75 | - [ ] Use textual labels to make voice activation cues obvious 76 | - [ ] Do not mark up subheadings/straplines with separate heading elements 77 | - [ ] Ensure primary calls to action are easy to recognize and reach 78 | - [ ] Avoid images of text — text that cannot be translated, selected, or understood by assistive tech 79 | - [ ] Provide a print stylesheet (single column, with interactive content hidden) 80 | - [ ] Use well-established, therefore recognizable, icons and symbols 81 | - [ ] Subset fonts to just the characters needed 82 | - [ ] Instead of obstructing users with CAPTCHAs, use honeypots [[#1](https://en.wikipedia.org/wiki/Honeypot_(computing))] 83 | - [ ] Begin long, multi-section documents with a table of contents 84 | - [ ] Don"t make users perform actions to reveal content unless completely necessary 85 | - [ ] If content is meant to be hidden, ensure it is properly hidden to all users 86 | - [ ] Make sure controls within hidden content are not focusable 87 | - [ ] Use `srcset` to tailor images to devices and reduce bandwidth costs 88 | - [ ] Do not auto focus form fields, on page load 89 | - [ ] Break up long and complex forms into discrete sections and/or screens 90 | - [ ] Make forms as short as possible; offer shortcuts like autocompleting the address using the postcode 91 | - [ ] Ensure the same content is available across different devices and platforms 92 | - [ ] Inform the user when there are important changes to the application state 93 | - [ ] Make sure the purpose of a link is clearly described: "read more" vs. "read more about accessibility" 94 | -------------------------------------------------------------------------------- /checklist.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "item": "Minify CSS and JS, and remove unused/redundant code", 4 | "resources": ["https://developers.google.com/speed/docs/insights/MinifyResources"] 5 | }, 6 | { 7 | "item": "Maintain terse HTML, without over-reliance on `<div>` scaffolding", 8 | "resources": ["http://designingforperformance.com/optimizing-markup-and-styles/#divitis"] 9 | }, 10 | { 11 | "item": "Use screen reader and keyboard accessible HTML", 12 | "resources": ["https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML"] 13 | }, 14 | { 15 | "item": "Compress raster images", 16 | "resources": ["https://www.html5rocks.com/en/tutorials/speed/img-compression/"] 17 | }, 18 | { 19 | "item": "Optimize SVG path data", 20 | "resources": ["https://web-design-weekly.com/2014/10/22/optimizing-svg-web/"] 21 | }, 22 | { 23 | "item": "Make sure heading levels describe a logical section/subsection structure", 24 | "resources": ["https://webaim.org/techniques/semanticstructure/"] 25 | }, 26 | { 27 | "item": "Only include heading elements where they introduce sections of content" 28 | }, 29 | { 30 | "item": "Remove potentially insensitive or uninclusive language (use \"singular they\")", 31 | "resources": ["http://alexjs.com/"] 32 | }, 33 | { 34 | "item": "Give video content captions and transcripts" 35 | }, 36 | { 37 | "item": "Provide transcripts for audio content" 38 | }, 39 | { 40 | "item": "Make sure main body (paragraph) text is no smaller than the default (user agent) size", 41 | "resources": ["https://www.smashingmagazine.com/2011/10/16-pixels-body-copy-anything-less-costly-mistake/"] 42 | }, 43 | { 44 | "item": "Support \"pinch zoom\" (remove `user-scalable=no` if present)" 45 | }, 46 | { 47 | "item": "Use relative units (`em`, `rem`, and `ch`), especially for font metrics" 48 | }, 49 | { 50 | "item": "Make sure styles and scripts are not render blocking", 51 | "resources": ["https://csabapalfi.github.io/eliminate-render-blocking/"] 52 | }, 53 | { 54 | "item": "Install a service worker and cache all applicable assets", 55 | "resources": ["https://css-tricks.com/serviceworker-for-offline/"] 56 | }, 57 | { 58 | "item": "Use content-based, not device-specific, media queries", 59 | "resources": ["http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/#content"] 60 | }, 61 | { 62 | "item": "Provide alternatives and/or descriptions for complex visualizations" 63 | }, 64 | { 65 | "item": "Include only clear, meaningful animations" 66 | }, 67 | { 68 | "item": "Honor requests to remove animation via the `prefers-reduced-motion` media query" 69 | }, 70 | { 71 | "item": "Make sure controls do not elicit unexpected or jarring behavior", 72 | "resources": ["https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-receive-focus.html", "https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-unpredictable-change.html"] 73 | }, 74 | { 75 | "item": "Do not include third parties that compromise user privacy", 76 | "resources": ["https://css-tricks.com/potential-dangers-of-third-party-javascript/"] 77 | }, 78 | { 79 | "item": "Do not recreate supported and expected browser behaviors with bespoke scripts" 80 | }, 81 | { 82 | "item": "Support Windows high contrast mode (use images, not background images)", 83 | "resources": ["http://adrianroselli.com/2012/08/css-background-images-high-contrast-mode.html"] 84 | }, 85 | { 86 | "item": "Provide alternative text for salient images", 87 | "resources": ["https://www.w3.org/WAI/tutorials/images/decision-tree/"] 88 | }, 89 | { 90 | "item": "Apply `alt=\"\"` or `aria-hidden=\"true\"` to decorative images", 91 | "resources": ["https://www.w3.org/WAI/tutorials/images/decorative/"] 92 | }, 93 | { 94 | "item": "Make sure text and background colors contrast sufficiently", 95 | "resources": ["https://accessibility.blog.gov.uk/2016/06/17/colour-contrast-why-does-it-matter/"] 96 | }, 97 | { 98 | "item": "Provide `<title>`s that name the site and the specific page", 99 | "resources": ["https://www.w3.org/TR/WCAG20-TECHS/G88.html"] 100 | }, 101 | { 102 | "item": "Provide large touch \"targets\" for interactive elements", 103 | "resources": ["http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/design/touch-target-size"] 104 | }, 105 | { 106 | "item": "Use data tables (`<table>`) for data only, not visual layout purposes" 107 | }, 108 | { 109 | "item": "Make scrollable elements focusable for keyboard users" 110 | }, 111 | { 112 | "item": "Do not rely on color for differentiation of visual elements" 113 | }, 114 | { 115 | "item": "Use the same design patterns to solve the same problems" 116 | }, 117 | { 118 | "item": "Ensure keyboard focus order is logical regarding visual layout" 119 | }, 120 | { 121 | "item": "Lazy load large image assets" 122 | }, 123 | { 124 | "item": "Honour DNT (Do Not Track) header", 125 | "resources": ["https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/DNT"] 126 | }, 127 | { 128 | "item": "Translate / spell out acronyms the first time you use them" 129 | }, 130 | { 131 | "item": "Do not hijack standard scrolling behavior" 132 | }, 133 | { 134 | "item": "Move focus between dialogs and the controls that invoked them" 135 | }, 136 | { 137 | "item": "Provide focus traps to dialogs and make other elements non-selectable", 138 | "resources":["https://css-tricks.com/a-css-approach-to-trap-focus-inside-of-an-element/"] 139 | }, 140 | { 141 | "item": "Give all form elements permanently visible labels" 142 | }, 143 | { 144 | "item": "Give grouped form elements group labels" 145 | }, 146 | { 147 | "item": "Place labels above form elements" 148 | }, 149 | { 150 | "item": "Provide status and error messages as WAI-ARIA live regions" 151 | }, 152 | { 153 | "item": "Provide clear, unambiguous focus styles" 154 | }, 155 | { 156 | "item": "Employ well-balanced, highly legible fonts (not too complex or elaborate)" 157 | }, 158 | { 159 | "item": "Do not use very thin font faces", 160 | "resources":["http://www.telegraph.co.uk/science/2016/10/23/internet-is-becoming-unreadable-because-of-a-trend-towards-light/"] 161 | }, 162 | { 163 | "item": "Ensure states (pressed, expanded, invalid, etc) are communicated to assistive software" 164 | }, 165 | { 166 | "item": "Match semantics to behavior for assistive technology users" 167 | }, 168 | { 169 | "item": "Provide a default language and use `lang=\"[ISO code]\"` for subsections in different languages" 170 | }, 171 | { 172 | "item": "Make controls look like controls; give them strong perceived affordance" 173 | }, 174 | { 175 | "item": "Underline links — at least in body copy" 176 | }, 177 | { 178 | "item": "Make sure all content belongs to a landmark element (`<header>`, `<footer>`, `<nav>`, `<main>`, etc)" 179 | }, 180 | { 181 | "item": "Avoid pure white or pure black shades" 182 | }, 183 | { 184 | "item": "Mark invalid fields clearly and provide associated error messages" 185 | }, 186 | { 187 | "item": "Ensure content is not obscured through zooming (no fixed widths)" 188 | }, 189 | { 190 | "item": "Provide a `manifest.json` file for identifiable homescreen entries" 191 | }, 192 | { 193 | "item": "Indicate swipe gesture support clearly, and provide simple tap-based alternatives" 194 | }, 195 | { 196 | "item": "Make sure data tables wider than their container can be scrolled horizontally" 197 | }, 198 | { 199 | "item": "Avoid time constraints where possible; provide a clear warning and option to extend where not possible" 200 | }, 201 | { 202 | "item": "Label and describe the same things with the same terminology" 203 | }, 204 | { 205 | "item": "Ensure disabled controls are not focusable" 206 | }, 207 | { 208 | "item": "Do not instate \"infinite scroll\" by default; provide buttons to load more items" 209 | }, 210 | { 211 | "item": "Avoid justified body text", 212 | "resources": ["https://www.w3.org/TR/WCAG20-TECHS/F88.html"] 213 | }, 214 | { 215 | "item": "Provide enough spacing between lines of text (`line-height`)", 216 | "resources": ["https://www.w3.org/TR/WCAG20-TECHS/C21.html"] 217 | }, 218 | { 219 | "item": "Ensure PDF content is accessible (include tags)", 220 | "resources": ["https://webaim.org/techniques/acrobat/"] 221 | }, 222 | { 223 | "item": "Provide a skip link if necessary ", 224 | "resources": ["https://webaim.org/techniques/skipnav/"] 225 | }, 226 | { 227 | "item": "Avoid all-caps text", 228 | "resources": ["https://github.com/humanmade/hm-pattern-library/issues/75"] 229 | }, 230 | { 231 | "item": "Ensure that content is written as clearly and simply as possible", 232 | "resources": ["https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-supplements.html"] 233 | }, 234 | { 235 | "item": "Provide descriptive captions for figures" 236 | }, 237 | { 238 | "item": "Warn users of links that have unusual behaviors, like linking off-site, or loading a new tab" 239 | }, 240 | { 241 | "item": "Make content easier to find and improve search results with structured data", 242 | "resources": ["https://developers.google.com/search/docs/guides/prototype"] 243 | }, 244 | { 245 | "item": "Use textual labels to make voice activation cues obvious" 246 | }, 247 | { 248 | "item": "Do not mark up subheadings/straplines with separate heading elements" 249 | }, 250 | { 251 | "item": "Ensure primary calls to action are easy to recognize and reach" 252 | }, 253 | { 254 | "item": "Avoid images of text — text that cannot be translated, selected, or understood by assistive tech" 255 | }, 256 | { 257 | "item": "Provide a print stylesheet (single column, with interactive content hidden)" 258 | }, 259 | { 260 | "item": "Use well-established, therefore recognizable, icons and symbols" 261 | }, 262 | { 263 | "item": "Subset fonts to just the characters needed" 264 | }, 265 | { 266 | "item": "Instead of obstructing users with CAPTCHAs, use honeypots", 267 | "resources": ["https://en.wikipedia.org/wiki/Honeypot_(computing)"] 268 | }, 269 | { 270 | "item": "Begin long, multi-section documents with a table of contents" 271 | }, 272 | { 273 | "item": "Do not make users perform actions to reveal content unless completely necessary" 274 | }, 275 | { 276 | "item": "If content is meant to be hidden, ensure it is properly hidden to all users" 277 | }, 278 | { 279 | "item": "Make sure controls within hidden content are not focusable" 280 | }, 281 | { 282 | "item": "Use `srcset` to tailor images to devices and reduce bandwidth costs" 283 | }, 284 | { 285 | "item": "Do not auto focus form fields, on page load" 286 | }, 287 | { 288 | "item": "Break up long and complex forms into discrete sections and/or screens" 289 | }, 290 | { 291 | "item": "Make forms as short as possible; offer shortcuts like autocompleting the address using the postcode" 292 | }, 293 | { 294 | "item": "Ensure the same content is available across different devices and platforms" 295 | }, 296 | { 297 | "item": "Inform the user when there are important changes to the application state" 298 | }, 299 | { 300 | "item": "Make sure the purpose of a link is clearly described: \"read more\" vs. \"read more about accessibility\"" 301 | } 302 | ] 303 | -------------------------------------------------------------------------------- /generator/index.js: -------------------------------------------------------------------------------- 1 | var dataSet = require('../checklist.json'); 2 | var fs = require('fs'); 3 | var path = require('path'); 4 | 5 | // For storing the main result. 6 | var result = ''; 7 | 8 | // Try and load up the intro 9 | result += fs.readFileSync(path.join(__dirname, 'intro.md')).toString() + '\n'; 10 | 11 | // Something has gone wrong with the dataset, so throw an error 12 | if(!dataSet.length) { 13 | console.error('Something has gone wrong with checklist.json. There doesn\'t appear to be any items :('); 14 | return; 15 | } 16 | 17 | // Loop each item and generate a check item 18 | dataSet.map(function(data) { 19 | 20 | // Add a checkbox 21 | result += '- [ ] '; 22 | 23 | // Append the content of the item 24 | result += data.item; 25 | 26 | if(data.resources) { 27 | 28 | // For storing generated resources 29 | var resources = ''; 30 | 31 | // Loop each resource and generate a link 32 | data.resources.map(function(resource, index) { 33 | resources += ' [[#' + (index + 1) + '](' + resource + ')] '; 34 | }); 35 | 36 | // Add resources to the result string 37 | result += resources; 38 | } 39 | 40 | // Add a line break 41 | result += '\n'; 42 | }); 43 | 44 | // Write the new .MD file 45 | fs.writeFileSync(path.join(__dirname, '../README.md'), result, { encoding: 'UTF-8' }); 46 | --------------------------------------------------------------------------------