{"id":18933,"date":"2020-01-16T16:00:28","date_gmt":"2020-01-16T16:00:28","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=18933"},"modified":"2024-04-03T23:52:28","modified_gmt":"2024-04-03T22:52:28","slug":"accessibility-tools-designers-developers","status":"publish","type":"post","link":"https:\/\/www.marvelapp.net\/blog\/accessibility-tools-designers-developers\/","title":{"rendered":"Accessibility Tools for Designers and Developers"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">It\u2019s a practice of creating apps, sites, and products usable for everyone, including people with visual, motor, auditory, speech, or cognitive disabilities.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2020\/01\/1v91ZxZxDtnXpU72vDvYaJg.png\" alt=\"\" width=\"2000\" height=\"860\" \/><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Why should you support accessibility?<\/h2>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>You can impact someone\u2019s life by making inclusive and easy-to-use products.<\/li>\n<li>One billion people have disabilities: your product can be used by them.<\/li>\n<li>Better accessibility support leads to better UX and cleaner code.<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In this guide, you\u2019ll find accessibility testing tools, colour contrast checkers and colour blindness simulators, both for designers and developers who work with web and mobile.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Supporting accessibility could impact someone's life by making inclusive and easy-to-use products.\"<\/p><\/span><\/blockquote>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Tools for making accessible colours<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/usecontrast.com\/\">Contrast -\u00a0<\/a>A simple macOS app to check colour contrast ratios and identify accessible colour pairings based on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/accessibe.com\/blog\/knowledgebase\/guide-to-wcag\">WCAG Guidelines<\/a>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2020\/01\/0_GE-oMFqGX3xZMCfQ-600x331.png\" alt=\"\" width=\"2000\" height=\"860\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/toolness.github.io\/accessible-color-matrix\/\">Accessible Colour Palette Builder<\/a> \u2014 A great tool for building accessible color palettes. Enter up to 6 colours and see the colour matrix to know which colors can be combined.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.colorbox.io\/\">ColorBox <\/a>\u2014 A tool that algorithmically builds accessible colour systems. It also sorts by colour, hue, saturation, and luminosity when picking colour combinations.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/contrasteapp.com\/\">Contraste<\/a> \u2014 a free app for checking the accessibility of text against the WCAG rules.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2020\/01\/0_nuJP3orFwb6eTSS2-600x330.png\" alt=\"\" width=\"2000\" height=\"860\" \/><img class=\"size-full\" title=\"\" alt=\"\" \/><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/hexnaw.com\/\">Hex Naw<\/a> \u2014 A free color accessibility tool for testing entire color systems for contrast and accessibility. You can test about 12 different colors at the same time.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"http:\/\/clrs.cc\/a11y\/\">90 examples <\/a>\u2014 A free collection of accessible colour themes:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Variety of A11Y compliant colour combos.<\/li>\n<li>90 combinations of text\/background colour that has sufficient contrast ratio.<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2020\/01\/0_1g8qIGxqpNqqYO2j-600x331.png\" alt=\"\" width=\"2000\" height=\"860\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/contrast-checker.glitch.me\/\">Contrast Checker<\/a> \u2014 Another free colour accessibility tool that helps check the contrast between the background of an element and the page itself.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/colorable.jxnblk.com\/\">Colorable<\/a> \u2014 A free web-based contrast tool:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Take a set colour palette and get contrast values for every combination.<\/li>\n<li>Includes pass\/fail scores for the WCAG accessibility guidelines.<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" title=\"Accessibility Tools Colourable\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2020\/01\/0_1kIlioHnVIcQvXix-600x331.png\" alt=\"Accessibility Tools Colourable\" width=\"2000\" height=\"860\" \/><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Colour blindness simulators<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/getstark.co\/\">Stark<\/a> \u2014 A paid Sketch plugin that will let you simulate different types of colour blindness.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/colororacle.org\/\">Color Oracle<\/a> \u2014 A free color blindness simulator. It uses the algorithm for simulating colour vision impairment, so you can see colors as they are seen by colorblind people.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.toptal.com\/designers\/colorfilter\">Toptal\u2019s color filter <\/a>\u2014 This online tool lets you test your website and shows you how people with different color blindness will see your pages.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" title=\"Accessibility Tools Toptal\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2020\/01\/0_ePK-d_XifRWytjnz-600x331.png\" alt=\"Accessibility Tools Toptal\" width=\"2000\" height=\"860\" \/><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Accessibility testing tools<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.ssa.gov\/accessibility\/andi\/help\/install.html\">ANDI<\/a> \u2014 A free accessibility testing tool for web content:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Provides automated detection of accessibility issues<\/li>\n<li>Gives practical suggestions to improve accessibility and checks 508 compliance.<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/wave.webaim.org\/\">WAVE <\/a>\u2014 A free web accessibility evaluation tool:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Provides visual feedback by injecting icons and indicators into your page<\/li>\n<li>Has browsers extensions for evaluating local, dynamic, or password-protected pages.<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" title=\"Accessibility Tools\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2020\/01\/0_EWWYfhXJ6qqnlZvt-600x331.png\" alt=\"Accessibility Tools\" width=\"2000\" height=\"860\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/achecker.ca\/checker\/index.php\">AChecker<\/a> \u2014 A free accessibility testing web app, which allows you to check accessibility by web page URL, HTML file or even markup. Also, it enables additional options, such as CSS, HTML validator and more.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/a11ygator.chialab.io\/\">A11ygator<\/a> \u2014 A free web tool to analyze websites against WCAG. Also available as a browser extension and as Twitter bot. And to find more accessibility tools, check <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/github.com\/LisaDziuba\/Awesome-Design-Tools\/blob\/master\/README.md#accessibility-tools\">Awesome Design Tools<\/a> list.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Tools for iOS developers<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Accessibility Inspector<\/strong> is a part of Xcode, the main IDE for developing iOS apps. Think of it as a built-in accessibility checker that goes through an iOS application and tries to find accessibility issues. Accessibility Inspector shows parts of an iOS app that can be done better and helps to check iOS assistive technologies.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">VoiceOver<\/strong> helps navigate the app screen without seeing it. It also can be used for testing iOS apps accessibility, when you enable it and try to use your app.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">VoiceOver gives audible descriptions of what\u2019s on your screen \u2014 from battery level, to who\u2019s calling, to which app your finger is on. You can also adjust the speaking rate and pitch to suit your needs. When you touch the screen or drag your finger over it, VoiceOver speaks the name of the item your finger is on, including icons and text. To interact with the item, such as a button or link, or to navigate to another item, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/support.apple.com\/en-gb\/guide\/iphone\/learn-voiceover-gestures-iph3e2e2281\/13.0\/ios\/13.0\">use VoiceOver gestures<\/a> \u2014 <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/support.apple.com\/en-gb\/guide\/iphone\/iph3e2e415f\/ios\">iPhone User Guide<\/a><\/span><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" title=\"Accessibility Tools Voice Over\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2020\/01\/12ofuFHVIBL1hFkmUVPR5Rw.png\" alt=\"Accessibility Tools Voice Over\" width=\"2000\" height=\"860\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Take a look at <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/developer.apple.com\/accessibility\/ios\/\">Accessibility on iOS<\/a> section on the Apple site to learn more about assistive technology, which you can support in your iOS app:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2020\/01\/0gDcqWs0ZQuAT_pVq.png\" alt=\"\" width=\"2000\" height=\"860\" \/><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Useful Guides &amp; Resources<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In this guide, we focused more on tools to help you build products usable for more people rather than accessibility practices (which are equally important). So these guides will teach you to follow best practices:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Apple team put together Human Interface Guidelines with many\u00a0<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/developer.apple.com\/design\/human-interface-guidelines\/accessibility\/overview\/introduction\/\" target=\"_blank\" rel=\"noopener nofollow noreferrer\">tips on the accessibility in iOS design<\/a>. It covers user interface, navigation, typography, colours, motion and much more.<\/li>\n<li>Some great articles by other teams.\u00a0<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.invisionapp.com\/inside-design\/designing-accessibility-not-hard\/\" target=\"_blank\" rel=\"noopener nofollow noreferrer\">Designing for accessibility is not that hard<\/a>, where you\u2019ll find seven easy-to-implement design guidelines. A\u00a0<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.invisionapp.com\/inside-design\/color-accessibility-product-design\/\" target=\"_blank\" rel=\"noopener nofollow noreferrer\">guide to colour accessibility in product design<\/a>\u00a0will be interesting for those of you who want to design with accessibility in mind.<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2020\/01\/0_W5t1fUi_ja2IAFfm-600x227.gif\" alt=\"\" width=\"2000\" height=\"860\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Great image by Pablo Stanley<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.microsoft.com\/design\/inclusive\/\">Inclusive Design<\/a> by Microsoft team is a comprehensive accessibility methodology and a set of useful tools.<\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.viget.com\/articles\/color-contrast\/\">Color Contrast for Better Readability<\/a> is an article to help you establish and use an accessible color palette.<\/li>\n<li>For building your iOS apps more accessible with SwiftUI, learn about development tips for <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/flawless-app-stories\/swiftui-image-accessibility-f3ca19aefdb1\">Images<\/a>, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/flawless-app-stories\/swiftui-accessibility-sort-priority-3c878306ef19\">Sort Priority<\/a>,<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/flawless-app-stories\/swiftui-accessibility-named-controls-298766c454bc\"> Named Controls<\/a>,<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@r.whitaker\/swiftui-accessibility-dynamic-type-d9b99ae87334\"> Dynamic Type<\/a>, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/flawless-app-stories\/swiftui-accessibility-accessible-user-interface-ae55edc265c8\">Accessible User Interface<\/a>, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/flawless-app-stories\/swiftui-accessibility-traits-5fee4b56c272\">Traits<\/a>, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/flawless-app-stories\/swiftui-accessibility-attributes-4aa120b3cc76\">Attributes<\/a>, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/flawless-app-stories\/swiftui-accessibility-user-settings-cb4d121d7141\">User Settings<\/a>, and <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/flawless-app-stories\/swiftui-accessibility-semantic-views-1f0dea3b9602\">Semantic Views<\/a>. It\u2019s a great series of 3\u20134 minutes iOS dev guides written by iOS Engineer at Capital One, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@r.whitaker\">Rob Whitaker<\/a>.<\/li>\n<li>Also, take a look at Checklist: <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.hackingwithswift.com\/articles\/91\/checklist-how-to-make-your-ios-app-more-accessible\">How to make your iOS app more accessible<\/a>.<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">With all those tools and knowledge we can create more accessible products, reach a bigger audience and make life better for someone. I think it\u2019s a solid motivation to start supporting accessibility in your design and development.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Originally posted on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/uxdesign.cc\/accessibility-tools-for-designers-and-developers-ea400a415c0a\">Lisa's Medium<\/a>\u00a0page.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>It\u2019s a practice of creating apps, sites, and products usable for everyone, including people with visual, motor, auditory, speech, or cognitive disabilities. Why should you support accessibility? You can impact someone\u2019s life by making inclusive and easy-to-use products. One billion people have disabilities: your product can be used by them. Better accessibility support leads to better UX and cleaner code&#8230;. <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/www.marvelapp.net\/blog\/accessibility-tools-designers-developers\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":211,"featured_media":18967,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[495,7],"tags":[],"class_list":["post-18933","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-accessiblity","category-resources"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"To design for accessibility means to be inclusive to the needs of your users. Here is a great roundup of accessibility tools for designers and developers.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.marvelapp.net\/blog\/accessibility-tools-designers-developers\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Accessibility Tools for Designers and Developers | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"To design for accessibility means to be inclusive to the needs of your users. Here is a great roundup of accessibility tools for designers and developers.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.marvelapp.net\/blog\/accessibility-tools-designers-developers\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-16T16:00:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-03T22:52:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.marvelapp.net\/wp-content\/uploads\/2020\/01\/43.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"700\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"4 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/www.marvelapp.net\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/www.marvelapp.net\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#website\",\"url\":\"https:\/\/www.marvelapp.net\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.marvelapp.net\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.marvelapp.net\/blog\/accessibility-tools-designers-developers\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/www.marvelapp.net\/wp-content\/uploads\/2020\/01\/43.png\",\"width\":1600,\"height\":700},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.marvelapp.net\/blog\/accessibility-tools-designers-developers\/#webpage\",\"url\":\"https:\/\/www.marvelapp.net\/blog\/accessibility-tools-designers-developers\/\",\"name\":\"Accessibility Tools for Designers and Developers | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/accessibility-tools-designers-developers\/#primaryimage\"},\"datePublished\":\"2020-01-16T16:00:28+00:00\",\"dateModified\":\"2024-04-03T22:52:28+00:00\",\"description\":\"To design for accessibility means to be inclusive to the needs of your users. Here is a great roundup of accessibility tools for designers and developers.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.marvelapp.net\/blog\/accessibility-tools-designers-developers\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.marvelapp.net\/blog\/accessibility-tools-designers-developers\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/accessibility-tools-designers-developers\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#\/schema\/person\/8e3509265700a9bfec483526e812bb36\"},\"headline\":\"Accessibility Tools for Designers and Developers\",\"datePublished\":\"2020-01-16T16:00:28+00:00\",\"dateModified\":\"2024-04-03T22:52:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/accessibility-tools-designers-developers\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.marvelapp.net\/blog\/accessibility-tools-designers-developers\/#primaryimage\"},\"articleSection\":\"Accessibility,Resources\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.marvelapp.net\/blog\/accessibility-tools-designers-developers\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#\/schema\/person\/8e3509265700a9bfec483526e812bb36\",\"name\":\"Lisa Dziuba\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.marvelapp.net\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d9b43c4ad4b33e4151fb6e68318b508e8abced00a294453a9fff9ed4684fc733?s=96&d=mm&r=g\",\"caption\":\"Lisa Dziuba\"},\"description\":\"Swift Learner &amp; Marketer &amp; FlawlessAppio co-founder. Part of CocoaHeadsUA team ????\\u200d\\u2640\\ufe0f 2017 Product Hunt Maker of the Year Runner Up. Techstars London Alumni.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/posts\/18933","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/users\/211"}],"replies":[{"embeddable":true,"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/comments?post=18933"}],"version-history":[{"count":0,"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/posts\/18933\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/media\/18967"}],"wp:attachment":[{"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/media?parent=18933"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/categories?post=18933"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.marvelapp.net\/blog\/wp-json\/wp\/v2\/tags?post=18933"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}