{"id":24127,"date":"2020-05-29T15:27:24","date_gmt":"2020-05-29T19:27:24","guid":{"rendered":"https:\/\/docs.gravityforms.com\/?p=24127"},"modified":"2025-02-12T06:59:25","modified_gmt":"2025-02-12T11:59:25","slug":"accessibility-for-designers","status":"publish","type":"post","link":"https:\/\/docs.gravityforms.com\/accessibility-for-designers\/","title":{"rendered":"Accessibility Guide for Designers"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"h-intro\">Intro<\/h2>\n\n\n\n<p>Design a beautiful form and make it accessible for all users, that\u2019s what we all want. What do you need to take into account? On this page we list some of the most important topics where design, accessibility and good UX meet.<\/p>\n\n\n\n<p>We suggest you first read the document for <a href=\"https:\/\/docs.gravityforms.com\/accessibility-for-content-providers\/\" rel=\"noopener noreferrer\" target=\"_blank\">Accessibility for Content Providers<\/a>, as a lot of that information is also relevant to designers.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-use-a-visible-label\">Use a visible label<\/h2>\n\n\n\n<p>As highlighted in the documentation for content providers, it is worth emphasizing again here: a visible label is <strong>required<\/strong> for an accessible website.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>It reminds the user about what to fill out.<\/li>\n\n\n\n<li>If the form is filled with values via autofill, the user can check easily if the information is filled out correctly.<\/li>\n\n\n\n<li>Give the user all the help you can offer to fill out a form.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-the-order-of-elements\">The order of elements<\/h2>\n\n\n\n<p>Visitors, and especially people using a screen reader, read from the top down. So the order of the information must be logical if you read it from the top down.\u2028 For example information placed below the submit button could stay unnoticed. Place the label above or next to the form control, not below it. A label below an input field can confuse users about which label belongs to which input field.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-colour-contrast-of-form-controls\">Colour contrast of form controls<\/h2>\n\n\n\n<p>A form control, like an input field should be recognisable. Don\u2019t make your visitor guess where an input field is. People are used to conventions, so no need to reinvent the wheel for an important element. Diversion from understood conventions may introduce difficulties for some of your customers.<\/p>\n\n\n\n<p>Give a form control like an input field with clearfield clear borders, with a colour contrast of 3:1 between the control and the background.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-design-clear-hover-and-focus-states\">Design clear hover and focus states<\/h2>\n\n\n\n<p>Let users clearly see the <em>on hover<\/em> or <em>on focus<\/em> states for focusable elements like buttons, input fields and links. Keyboard only users need to know when an element has focus, or else they can be easily lost on a page. Make sure the state change is not just based on a color change, as color blind people may miss that change.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-make-it-easily-clickable\">Make it easily clickable!<\/h2>\n\n\n\n<p>Very small buttons are harder to target with a mouse or a finger. Make focusable elements like buttons or selects, stand out. Give them room, and make them large enough to be easily clicked or pushed.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-custom-styled-controls-can-be-hard\">Custom styled controls can be hard<\/h2>\n\n\n\n<p>Consult your developer when you apply complex custom styling to select fields, options, checkboxes, and radio buttons. Some styling is <a href=\"https:\/\/rianrietveld.com\/2017\/11\/accessible-custom-styled-form-elements\/\" target=\"_blank\" rel=\"noreferrer noopener\">very hard to make accessible<\/a>, and a compromise may be the best solution.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-font-size\">Font size<\/h2>\n\n\n\n<p>Avoid small font sizes: stick with 16px or larger wherever possible, then everyone can read the text comfortably.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-additional-resources\">Additional Resources:<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Jesse Hausler: <a href=\"https:\/\/medium.com\/salesforce-ux\/7-things-every-designer-needs-to-know-about-accessibility-64f105f0881b\" target=\"_blank\" rel=\"noopener noreferrer\">7 Things Every Designer Needs to Know about Accessibility<\/a><\/li>\n\n\n\n<li>Tyler Hawkins: <a href=\"https:\/\/uxdesign.cc\/10-tips-for-designing-accessible-forms-a016dae8e9aa\" target=\"_blank\" rel=\"noopener noreferrer\">Designing accessible forms: the 10 foundational rules<\/a><\/li>\n\n\n\n<li>Human Made: <a href=\"https:\/\/humanmade.com\/2017\/11\/09\/accessible-design-a-process\/\" target=\"_blank\" rel=\"noopener noreferrer\">Accessible Design: A Process<\/a><\/li>\n\n\n\n<li>WebAIM: <a href=\"https:\/\/webaim.org\/techniques\/forms\/\" target=\"_blank\" rel=\"noopener noreferrer\">Creating Accessible Forms &#8211; General Form Accessibility<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Design a beautiful form and and make it accessible for all users. On this page we list some of the most important topics where design, accessibility and good UX meet.<\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_autodraft_ids":[],"_sb_is_suggestion_mode":false,"_sb_show_suggestion_boards":false,"_sb_show_comment_boards":false,"_sb_suggestion_history":"","_sb_update_block_changes":"","_is_real_time_mode":false,"_realtime_collaborators":"","footnotes":"","jetpack_post_was_ever_published":false,"cf_checklist_status":[]},"categories":[17610],"tags":[],"class_list":["post-24127","post","type-post","status-publish","format-standard","hentry","category-accessibility","wpautop"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Accessibility Guide for Designers - Gravity Forms Documentation<\/title>\n<meta name=\"description\" content=\"Design a beautiful form and and make it accessible for all users. On this page we list some of the most important topics where design, accessibility and good UX meet.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/docs.gravityforms.com\/accessibility-for-designers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Accessibility Guide for Designers\" \/>\n<meta property=\"og:description\" content=\"Design a beautiful form and and make it accessible for all users. On this page we list some of the most important topics where design, accessibility and good UX meet.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/docs.gravityforms.com\/accessibility-for-designers\/\" \/>\n<meta property=\"og:site_name\" content=\"Gravity Forms Documentation\" \/>\n<meta property=\"article:published_time\" content=\"2020-05-29T19:27:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-12T11:59:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/docs.gravityforms.com\/wp-content\/uploads\/2023\/08\/gf-docs-default-v3.png\" \/>\n\t<meta property=\"og:image:width\" content=\"544\" \/>\n\t<meta property=\"og:image:height\" content=\"288\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Justin Pakes\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@gravityforms\" \/>\n<meta name=\"twitter:site\" content=\"@gravityforms\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Justin Pakes\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/accessibility-for-designers\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/accessibility-for-designers\\\/\"},\"author\":{\"name\":\"Justin Pakes\",\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/#\\\/schema\\\/person\\\/8a88745ec2ee5bc1bb24eea8634bf376\"},\"headline\":\"Accessibility Guide for Designers\",\"datePublished\":\"2020-05-29T19:27:24+00:00\",\"dateModified\":\"2025-02-12T11:59:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/accessibility-for-designers\\\/\"},\"wordCount\":495,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/#organization\"},\"articleSection\":[\"Accessibility\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/docs.gravityforms.com\\\/accessibility-for-designers\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/accessibility-for-designers\\\/\",\"url\":\"https:\\\/\\\/docs.gravityforms.com\\\/accessibility-for-designers\\\/\",\"name\":\"Accessibility Guide for Designers - Gravity Forms Documentation\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/#website\"},\"datePublished\":\"2020-05-29T19:27:24+00:00\",\"dateModified\":\"2025-02-12T11:59:25+00:00\",\"description\":\"Design a beautiful form and and make it accessible for all users. On this page we list some of the most important topics where design, accessibility and good UX meet.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/accessibility-for-designers\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/docs.gravityforms.com\\\/accessibility-for-designers\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/accessibility-for-designers\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/docs.gravityforms.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Accessibility Guide for Designers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/#website\",\"url\":\"https:\\\/\\\/docs.gravityforms.com\\\/\",\"name\":\"Gravity Forms Documentation\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/docs.gravityforms.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/#organization\",\"name\":\"Gravity Forms\",\"url\":\"https:\\\/\\\/docs.gravityforms.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/docs.gravityforms.com\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/gravity-forms-2020-logo-stacked.png\",\"contentUrl\":\"https:\\\/\\\/docs.gravityforms.com\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/gravity-forms-2020-logo-stacked.png\",\"width\":392,\"height\":515,\"caption\":\"Gravity Forms\"},\"image\":{\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/gravityforms\",\"http:\\\/\\\/@gravityforms.com\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/docs.gravityforms.com\\\/#\\\/schema\\\/person\\\/8a88745ec2ee5bc1bb24eea8634bf376\",\"name\":\"Justin Pakes\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/791cb5bec00c6dd4bec2e80cf4df9638297207d8f77890c96b6b483be434ecea?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/791cb5bec00c6dd4bec2e80cf4df9638297207d8f77890c96b6b483be434ecea?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/791cb5bec00c6dd4bec2e80cf4df9638297207d8f77890c96b6b483be434ecea?s=96&d=mm&r=g\",\"caption\":\"Justin Pakes\"},\"url\":\"https:\\\/\\\/docs.gravityforms.com\\\/author\\\/pakes\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Accessibility Guide for Designers - Gravity Forms Documentation","description":"Design a beautiful form and and make it accessible for all users. On this page we list some of the most important topics where design, accessibility and good UX meet.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/docs.gravityforms.com\/accessibility-for-designers\/","og_locale":"en_US","og_type":"article","og_title":"Accessibility Guide for Designers","og_description":"Design a beautiful form and and make it accessible for all users. On this page we list some of the most important topics where design, accessibility and good UX meet.","og_url":"https:\/\/docs.gravityforms.com\/accessibility-for-designers\/","og_site_name":"Gravity Forms Documentation","article_published_time":"2020-05-29T19:27:24+00:00","article_modified_time":"2025-02-12T11:59:25+00:00","og_image":[{"width":544,"height":288,"url":"https:\/\/docs.gravityforms.com\/wp-content\/uploads\/2023\/08\/gf-docs-default-v3.png","type":"image\/png"}],"author":"Justin Pakes","twitter_card":"summary_large_image","twitter_creator":"@gravityforms","twitter_site":"@gravityforms","twitter_misc":{"Written by":"Justin Pakes","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/docs.gravityforms.com\/accessibility-for-designers\/#article","isPartOf":{"@id":"https:\/\/docs.gravityforms.com\/accessibility-for-designers\/"},"author":{"name":"Justin Pakes","@id":"https:\/\/docs.gravityforms.com\/#\/schema\/person\/8a88745ec2ee5bc1bb24eea8634bf376"},"headline":"Accessibility Guide for Designers","datePublished":"2020-05-29T19:27:24+00:00","dateModified":"2025-02-12T11:59:25+00:00","mainEntityOfPage":{"@id":"https:\/\/docs.gravityforms.com\/accessibility-for-designers\/"},"wordCount":495,"commentCount":0,"publisher":{"@id":"https:\/\/docs.gravityforms.com\/#organization"},"articleSection":["Accessibility"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/docs.gravityforms.com\/accessibility-for-designers\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/docs.gravityforms.com\/accessibility-for-designers\/","url":"https:\/\/docs.gravityforms.com\/accessibility-for-designers\/","name":"Accessibility Guide for Designers - Gravity Forms Documentation","isPartOf":{"@id":"https:\/\/docs.gravityforms.com\/#website"},"datePublished":"2020-05-29T19:27:24+00:00","dateModified":"2025-02-12T11:59:25+00:00","description":"Design a beautiful form and and make it accessible for all users. On this page we list some of the most important topics where design, accessibility and good UX meet.","breadcrumb":{"@id":"https:\/\/docs.gravityforms.com\/accessibility-for-designers\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/docs.gravityforms.com\/accessibility-for-designers\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/docs.gravityforms.com\/accessibility-for-designers\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/docs.gravityforms.com\/"},{"@type":"ListItem","position":2,"name":"Accessibility Guide for Designers"}]},{"@type":"WebSite","@id":"https:\/\/docs.gravityforms.com\/#website","url":"https:\/\/docs.gravityforms.com\/","name":"Gravity Forms Documentation","description":"","publisher":{"@id":"https:\/\/docs.gravityforms.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/docs.gravityforms.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/docs.gravityforms.com\/#organization","name":"Gravity Forms","url":"https:\/\/docs.gravityforms.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/docs.gravityforms.com\/#\/schema\/logo\/image\/","url":"https:\/\/docs.gravityforms.com\/wp-content\/uploads\/2020\/01\/gravity-forms-2020-logo-stacked.png","contentUrl":"https:\/\/docs.gravityforms.com\/wp-content\/uploads\/2020\/01\/gravity-forms-2020-logo-stacked.png","width":392,"height":515,"caption":"Gravity Forms"},"image":{"@id":"https:\/\/docs.gravityforms.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/gravityforms","http:\/\/@gravityforms.com"]},{"@type":"Person","@id":"https:\/\/docs.gravityforms.com\/#\/schema\/person\/8a88745ec2ee5bc1bb24eea8634bf376","name":"Justin Pakes","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/791cb5bec00c6dd4bec2e80cf4df9638297207d8f77890c96b6b483be434ecea?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/791cb5bec00c6dd4bec2e80cf4df9638297207d8f77890c96b6b483be434ecea?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/791cb5bec00c6dd4bec2e80cf4df9638297207d8f77890c96b6b483be434ecea?s=96&d=mm&r=g","caption":"Justin Pakes"},"url":"https:\/\/docs.gravityforms.com\/author\/pakes\/"}]}},"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pdGaEa-6h9","_links":{"self":[{"href":"https:\/\/docs.gravityforms.com\/wp-json\/wp\/v2\/posts\/24127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.gravityforms.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.gravityforms.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.gravityforms.com\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.gravityforms.com\/wp-json\/wp\/v2\/comments?post=24127"}],"version-history":[{"count":3,"href":"https:\/\/docs.gravityforms.com\/wp-json\/wp\/v2\/posts\/24127\/revisions"}],"predecessor-version":[{"id":42639,"href":"https:\/\/docs.gravityforms.com\/wp-json\/wp\/v2\/posts\/24127\/revisions\/42639"}],"wp:attachment":[{"href":"https:\/\/docs.gravityforms.com\/wp-json\/wp\/v2\/media?parent=24127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.gravityforms.com\/wp-json\/wp\/v2\/categories?post=24127"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.gravityforms.com\/wp-json\/wp\/v2\/tags?post=24127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}