--- title: Accessibility Playbook Resources | Diagram description: Useful accessibility resources that are free for web designers, web developers, and content creators to help them build more inclusive websites. image: https://www.wearediagram.com/hubfs/Blog/Blog_Images/2023/accessibility-3-min.png --- down-arrow application-development hosting integrations halfdiamond diagramMask break-up-bottom break-up-top icon-challenge icon-solution icon-arrow-decrease icon-arrow-increase icon-arrow-left icon-arrow-right icon-arrow-left-narrow icon-arrow-right-narrow icon-change-decrease icon-change-increase icon-diagram-star diagram-star-extended diagram-process icon-facebook icon-linkedin icon-twitter icon-website icon-instagram [Diagram Company logo glyph ](https://www.wearediagram.com/) What are you looking for? Search Search Icon Popular Topics - [Strategy](https://www.wearediagram.com/blog/tag/digital-strategy#anchor) - [CMS](https://www.wearediagram.com/blog/tag/cms-strategy#anchor) - [Umbraco](https://www.wearediagram.com/blog/tag/umbraco#anchor) - [Episerver](https://www.wearediagram.com/blog/tag/episerver#anchor) **Published** October 3, 2024 **Author** [![Dennis Kardys](https://www.wearediagram.com/hs-fs/hubfs/dkardys-headshot.jpg?width=40&height=40&name=dkardys-headshot.jpg) Dennis Kardys ](https://www.wearediagram.com/about-us/profile/dennis-kardys) **Reading time** 2 minutes **Topics** Share [mailto:?subject=Take%20a%20look%20at%20this%20page&body=Hey,%20I%20found%20this%20and%20thought%20you’d%20like%20it:%0D%0Ahttps%3A%2F%2Fwww.wearediagram.com%2Fblog%2Faccessibility-playbook-resources](mailto:?subject=Take%20a%20look%20at%20this%20page&body=Hey,%20I%20found%20this%20and%20thought%20you’d%20like%20it:%0D%0Ahttps%3A%2F%2Fwww.wearediagram.com%2Fblog%2Faccessibility-playbook-resources) ## Getting Started - [Introduction to Accessibility](https://www.w3.org/WAI/fundamentals/accessibility-intro/): Accessibility fundamentals by the W3C Web Accessibility Initiative. - [WCAG Guidelines 2.2](https://www.w3.org/TR/WCAG22/): Full list of the current web content accessibility guidelines. - [WebAIM](https://webaim.org/): Guidance, tools, and training resources (like checklists) that are helpful for understanding accessibility best practices. ## Resources for Accessible Design - [Super Color Palette Generator](https://supercolorpalette.com/?scp=G0-hsl-FFDA1F-FFC71F-FFB41F-FFA21F-FF8F1F): Develop accessible color palettes. This tool has a contrast checker *and* HSL shifting built in. - [Color Contrast Grid](https://contrast-grid.eightshapes.com/): This tool by EightShapes checks the contrast ratio for many different foreground and background color combinations. - [Color Contrast Analyzer](https://www.tpgi.com/color-contrast-checker/): Eye-dropper tool for your OS. - [Color Blindness: ](https://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/)An overview of different types of color-blindness. - [Let's get Colorblind: ](https://chromewebstore.google.com/detail/lets-get-color-blind/bkdgdianpkfahpkmphgehigalpighjck)A chrome extension to simulate color-blindness. - [Tap Target Requirements: ](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)Guidelines for designing for touch devices and other modes of input. ## Resources for Accessible Coding - [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/): Includes examples and tutorials for developing, using, and testing [common UI patterns](https://www.w3.org/WAI/ARIA/apg/patterns/). - [MDN's Web Docs](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML): Provide code examples and best practices for creating accessible HTML. ## Resources for Accessible Content Creation - [Alt Text Decision Tree](https://www.w3.org/WAI/tutorials/images/decision-tree/): Guides you through determining whether your [image is decorative](https://www.w3.org/WAI/tutorials/images/decorative/) or needs descriptive alt text. - [Accessibility Statement Development](https://www.w3.org/WAI/planning/statements/): The W3C shows how to develop a useful, meaningful accessibility statement. - [Heading Structure Tutorial](https://www.w3.org/WAI/tutorials/page-structure/headings/): Learn how to use headings to properly structure your content. - [Accessibility in Writing](https://www.wcag.com/authors/): Key WCAG success criteria for content authors. - [Tips for Writing](https://www.w3.org/WAI/tips/writing/#keep-content-clear-and-concise): Basic considerations to help you write web content that is more accessible to people with disabilities. ## Resources for Testing - [MagentaA11y](https://www.magentaa11y.com/how-to-test/): Comprehensive guide that explains how to test different components and what to test for. - [AAArdvark](https://aaardvarkaccessibility.com/): An all-in-one testing, monitoring, issue management, and reporting platform - [AccessibilityChecker](https://www.accessibilitychecker.org/): A free website accessibility automated scan for WCAG 2.1 compliance issues. Just insert your URL and get instant results. - [Harvard University's Manual Accessibility Testing Guide](https://accessibility.huit.harvard.edu/manual-testing-accessibility). - [WAVE Evaluation Tool](https://wave.webaim.org/). - [HTML Code Sniffer Bookmarklet](https://squizlabs.github.io/HTML_CodeSniffer/): Run a full page scan and check the HTML for issues. - [Color Contrast Validator](https://www.audioeye.com/color-contrast-checker/). - [A11y Browser Extension (Chrome)](https://chromewebstore.google.com/detail/a11y-color-blindness-empa/idphhflanmeibmjgaciaadkmjebljhcc): Simulate different types of color blindness and visual impairment. - [Target Size Cursor Bookmarklet](https://codepen.io/jared_w_smith/full/vYGXeMy): Visually check targets to see if they meet the minimum size of 44 X 44px. - [NVDA Screen Reader (Windows)](https://www.nvaccess.org/download/). - [VoiceOver Screen Reader (Mac & iOS)](https://webaim.org/articles/voiceover/).   ## Results Matter. We design creative digital solutions that grow your business, strengthen your brand, and engage your audience. Are you looking for a partner to get you to the next level? [![Let's Talk](https://no-cache.hubspot.com/cta/default/213744/bdae329f-3319-4846-94e1-cc74813732c3.png)](https://cta-redirect.hubspot.com/cta/redirect/213744/bdae329f-3319-4846-94e1-cc74813732c3) ```json { "@context" : "https://schema.org", "@id" : "https://www.wearediagram.com/#website", "@type" : "WebSite", "name" : "Diagram", "potentialAction" : { "@type" : "SearchAction", "query-input" : "required name=search_term_string", "target" : "https://www.wearediagram.com/search?q={search_term_string}" }, "publisher" : { "@id" : "https://www.wearediagram.com/#org" }, "url" : "https://www.wearediagram.com/" } ``` ```json { "@context" : "https://schema.org", "@id" : "https://www.wearediagram.com/#org", "@type" : "Organization", "logo" : { "@type" : "ImageObject", "height" : 60, "url" : "https://www.wearediagram.com/hubfs/diagram-logo.png", "width" : 600 }, "name" : "Diagram", "url" : "https://www.wearediagram.com/" } ``` ```json { "@context" : "https://schema.org", "@id" : "https://www.wearediagram.com/blog/accessibility-playbook-resources#breadcrumbs", "@type" : "BreadcrumbList", "itemListElement" : [ { "@type" : "ListItem", "item" : { "@id" : "https://www.wearediagram.com/resources/", "name" : "Blog" }, "position" : 1 }, { "@type" : "ListItem", "item" : { "@id" : "https://www.wearediagram.com/blog/accessibility-playbook-resources", "name" : "Accessibility Playbook Resources" }, "position" : 2 } ] } ``` ```json { "@context" : "https://schema.org", "@id" : "https://www.wearediagram.com/blog/accessibility-playbook-resources#post", "@type" : "BlogPosting", "articleSection" : [ ], "author" : { "@type" : "Person", "name" : "Dennis Kardys" }, "dateModified" : "2025-12-03", "datePublished" : "2024-10-03", "description" : "Useful accessibility resources that are free for web designers, web developers, and content creators to help them build more inclusive websites.", "headline" : "Accessibility Playbook Resources", "image" : [ "https://www.wearediagram.com/hubfs/Blog/Blog_Images/2023/accessibility-3-min.png" ], "inLanguage" : "en", "keywords" : [ ], "mainEntityOfPage" : { "@id" : "https://www.wearediagram.com/blog/accessibility-playbook-resources", "@type" : "WebPage" }, "publisher" : { "@id" : "https://www.wearediagram.com/#org" }, "url" : "https://www.wearediagram.com/blog/accessibility-playbook-resources" } ```