{"id":1405,"date":"2019-01-22T02:42:33","date_gmt":"2019-01-22T02:42:33","guid":{"rendered":"https:\/\/blog.hassler.ec\/wp\/?p=1405"},"modified":"2019-01-06T09:48:19","modified_gmt":"2019-01-06T09:48:19","slug":"how-to-make-an-accessible-form-its-easier-than-you-think","status":"publish","type":"post","link":"https:\/\/blog.hassler.ec\/wp\/2019\/01\/22\/how-to-make-an-accessible-form-its-easier-than-you-think\/","title":{"rendered":"How to make an accessible form: it\u2019s easier than you\u00a0think"},"content":{"rendered":"<h1 id=\"5124\" class=\"graf graf--h3 graf--leading graf--title\"><\/h1>\n<div class=\"uiScale uiScale-ui--regular uiScale-caption--regular u-flexCenter u-marginVertical24 u-fontSize15 js-postMetaLockup\">\n<div class=\"u-flex1 u-paddingLeft15 u-overflowHidden\">\n<div class=\"ui-caption postMetaInline js-testPostMetaInlineSupplemental\"><img decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*AenJNna8ufix9ON-b9noJA.jpeg\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*AenJNna8ufix9ON-b9noJA.jpeg\"><\/div>\n<\/div>\n<\/div>\n<figure id=\"7fff\" class=\"graf graf--figure graf-after--h3\"><figcaption class=\"imageCaption\">Photo by&nbsp;<a class=\"markup--anchor markup--figure-anchor\" href=\"https:\/\/unsplash.com\/photos\/ylu3bpKHEXE?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\" target=\"_blank\" rel=\"noopener\" data-href=\"https:\/\/unsplash.com\/photos\/ylu3bpKHEXE?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">rawpixel<\/a>&nbsp;on&nbsp;<a class=\"markup--anchor markup--figure-anchor\" href=\"https:\/\/unsplash.com\/search\/photos\/website?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\" target=\"_blank\" rel=\"noopener\" data-href=\"https:\/\/unsplash.com\/search\/photos\/website?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Unsplash<\/a><\/figcaption><\/figure>\n<p id=\"6925\" class=\"graf graf--p graf-after--figure\">Forms are an essential component of the web, as they connect users to your business and help them accomplish what they came to your site or app for. That being said, you want to make sure all of your users are able to use your forms without having a horrible experience. The goal is to make these key user interactions as frictionless as possible.<\/p>\n<p id=\"2273\" class=\"graf graf--p graf-after--p\">Although building forms can be a difficult task at times, making them moderately accessible isn\u2019t as complicated as you might think. There are often excuses thrown around like, \u201cwe don\u2019t have time to worry about accessibility\u201d or \u201cwe\u2019ll make it accessible later\u201d. These excuses are often (if not always) invalid and you can help your team change this mindset.<\/p>\n<p id=\"61b5\" class=\"graf graf--p graf-after--p\">Here are some things to consider when building forms:<\/p>\n<ul class=\"postList\">\n<li id=\"1199\" class=\"graf graf--li graf-after--p\">What difficulties might someone with visual impairments have using my form?<\/li>\n<li id=\"635e\" class=\"graf graf--li graf-after--li\">Does the user have a clear indication of what data is expected for input?<\/li>\n<li id=\"c8c2\" class=\"graf graf--li graf-after--li\">Is the form easy to understand quickly?<\/li>\n<li id=\"4e32\" class=\"graf graf--li graf-after--li\">Am I able to use the keyboard to complete the form?<\/li>\n<\/ul>\n<h3 id=\"7452\" class=\"graf graf--h3 graf-after--li\">Let\u2019s make a basic subscription form<\/h3>\n<figure id=\"08be\" class=\"graf graf--figure graf-after--h3\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*9ANMDTkzYiKNb9aU9UECgg.png\" data-width=\"2244\" data-height=\"1290\" data-action=\"zoom\" data-action-value=\"1*9ANMDTkzYiKNb9aU9UECgg.png\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"42\"><\/canvas><img decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*9ANMDTkzYiKNb9aU9UECgg.png\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*9ANMDTkzYiKNb9aU9UECgg.png\"><\/div>\n<\/div><figcaption class=\"imageCaption\">I\u2019ve given you some starter code to help you cheat a little&nbsp;?<\/figcaption><\/figure>\n<p id=\"2051\" class=\"graf graf--p graf-after--figure\">Start with this:<strong class=\"markup--strong markup--p-strong\">&nbsp;<\/strong><a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/codepen.io\/JonathanSpeek\/pen\/JwNMYK\" target=\"_blank\" rel=\"noopener\" data-href=\"https:\/\/codepen.io\/JonathanSpeek\/pen\/JwNMYK\"><strong class=\"markup--strong markup--p-strong\">starter code on CodePen<\/strong><\/a><\/p>\n<p id=\"761f\" class=\"graf graf--p graf-after--p\">We\u2019ll eventually get to this:&nbsp;<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/codepen.io\/JonathanSpeek\/pen\/KrEdxR\" target=\"_blank\" rel=\"noopener\" data-href=\"https:\/\/codepen.io\/JonathanSpeek\/pen\/KrEdxR\"><strong class=\"markup--strong markup--p-strong\">finished CodePen<\/strong><\/a><\/p>\n<p id=\"0ed0\" class=\"graf graf--p graf-after--p\">I\u2019ve provided you with some basic styling and elements that would make up a simple subscription form, but there is a lot we can do here to make this form more usable. With anything you make, using good semantic HTML will get you a long way.<\/p>\n<p id=\"ad10\" class=\"graf graf--p graf-after--p\">Let\u2019s start by connecting the&nbsp;<code class=\"markup--code markup--p-code\">&lt;input&gt;<\/code>&nbsp;elements to their respective&nbsp;<code class=\"markup--code markup--p-code\">&lt;label&gt;<\/code>\u2019s. We do this by giving the&nbsp;<code class=\"markup--code markup--p-code\">&lt;input&gt;<\/code>&nbsp;an&nbsp;<code class=\"markup--code markup--p-code\">id<\/code>&nbsp;and using that as the&nbsp;<code class=\"markup--code markup--p-code\">&lt;label&gt;<\/code>\u2019s&nbsp;<code class=\"markup--code markup--p-code\">for<\/code>attribute. We can use \u201cname\u201d and \u201cemail\u201d for these and we\u2019ve already done two things:<\/p>\n<ol class=\"postList\">\n<li id=\"23ef\" class=\"graf graf--li graf-after--p\">we\u2019ve programmatically associated the label to the input, which will read the label to a screen reader user if that input is focused<\/li>\n<li id=\"c1dc\" class=\"graf graf--li graf-after--li\">the user can now click on the label and the respective input will be focused, so users now have a larger target size<\/li>\n<\/ol>\n<p id=\"b1ae\" class=\"graf graf--p graf-after--li\">Now that our inputs and labels are all wired-up, we can define the HTML input types. These are really useful and a super easy way to give an excellent user experience. Adding the type attribute (<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/codepen.io\/JonathanSpeek\/pen\/JwNMYK\" target=\"_blank\" rel=\"noopener\" data-href=\"https:\/\/codepen.io\/JonathanSpeek\/pen\/JwNMYK\">read about the different types here<\/a>) will help the user auto-fill your form and will provide a more suitable keyboard for mobile users. For our use case we can do&nbsp;<code class=\"markup--code markup--p-code\">type=\"text\"<\/code>&nbsp;for the name input and&nbsp;<code class=\"markup--code markup--p-code\">type=\"email\"<\/code>&nbsp;for the email input.<\/p>\n<p id=\"a1a7\" class=\"graf graf--p graf-after--p\">We also want our users to have a good idea of what type of data (and its formatting) we expect from them. Here it is pretty obvious, but that isn\u2019t always the case. It\u2019s generally good practice to provide a label that is always viewable and a placeholder that communicates the expected input. This means&nbsp;<strong class=\"markup--strong markup--p-strong\"><em class=\"markup--em markup--p-em\">not<\/em><\/strong>&nbsp;using the&nbsp;<code class=\"markup--code markup--p-code\">placeholder<\/code>&nbsp;attribute as a visual label for inputs where the label is not viewable once a users begins typing. This has been a popular practice and needs to be put to bed\u2026 We can give a placeholder of \u201cex. Jane Doe\u201d for the name and \u201cex.&nbsp;<a class=\"markup--anchor markup--p-anchor\" href=\"mailto:jane.doe@example.com\" target=\"_blank\" rel=\"nofollow noopener\" data-href=\"mailto:jane.doe@example.com\">jane.doe@example.com<\/a>\u201d for the email.<\/p>\n<p id=\"4b24\" class=\"graf graf--p graf-after--p\">Now to wrap-up, we can work on the&nbsp;<code class=\"markup--code markup--p-code\">focus<\/code>&nbsp;state styling. The default styling of focus states are different between the browsers and we can improve whatever the default styling might be to make more user friendly. In our case, we want the inputs to have a thick, colored outline that matches the button:<\/p>\n<figure id=\"d4f5\" class=\"graf graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*GBvoK5vrevErMfxNpKLLbg.png\" data-width=\"2244\" data-height=\"1290\" data-action=\"zoom\" data-action-value=\"1*GBvoK5vrevErMfxNpKLLbg.png\" data-scroll=\"native\"><canvas class=\"progressiveMedia-canvas js-progressiveMedia-canvas\" width=\"75\" height=\"42\"><\/canvas><img decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*GBvoK5vrevErMfxNpKLLbg.png\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*GBvoK5vrevErMfxNpKLLbg.png\"><\/div>\n<\/div><figcaption class=\"imageCaption\">Add your focus styles in your input selector&nbsp;?<\/figcaption><\/figure>\n<p id=\"9c11\" class=\"graf graf--p graf-after--figure\">Lastly, we need to add some focus styles around button element. This is often overlooked, but can really help keyboard-only users know where they are. We need to add this&nbsp;<code class=\"markup--code markup--p-code\">&amp;::moz-focus-innner<\/code>&nbsp;bit to get rid of some default styling in Firefox (you might want to save that snippet for future use).<\/p>\n<p id=\"c2fc\" class=\"graf graf--p graf-after--p\">Just like that, we have a basic subscription form you can be proud of and improve on. Because we\u2019ve used good semantics, the form is accessible via keyboard only (try using the tab and spacebar\/enter keys). The colors used for the button are a&nbsp;<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/contrast-ratio.com\/#%23FFF-on-%232E1BA6\" target=\"_blank\" rel=\"noopener\" data-href=\"https:\/\/contrast-ratio.com\/#%23FFF-on-%232E1BA6\">color ratio of 11.51<\/a>, meeting the&nbsp;<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#contrast-enhanced\" target=\"_blank\" rel=\"noopener\" data-href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#contrast-enhanced\">AAA standards for WCAG<\/a>(Web Content Accessibility Guidelines). We\u2019ve provided labels for both visual users and screen reader users, as well as styled focus states for our keyboard-using friends. Finally, notice that the font is set to&nbsp;<code class=\"markup--code markup--p-code\">18px<\/code>&nbsp;in the body, this makes our form much more readable ? (you should try to stay above 14px).<\/p>\n<p id=\"77a1\" class=\"graf graf--p graf-after--p\">Designing and building with accessibility in-mind takes practice, but you\u2019ll be a better developer for it and you\u2019ll have the added benefit of making the web a better place ?<\/p>\n<h3 id=\"02e0\" class=\"graf graf--h3 graf-after--p\">Resources<\/h3>\n<p id=\"89b9\" class=\"graf graf--p graf-after--h3\">Here are some great resources to help you empathize with your users and check your work:<\/p>\n<p id=\"ab94\" class=\"graf graf--p graf-after--p\"><a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/chrome.google.com\/webstore\/detail\/funkify-disability-simula\/ojcijjdchelkddboickefhnbdpeajdjg\" target=\"_blank\" rel=\"noopener\" data-href=\"https:\/\/chrome.google.com\/webstore\/detail\/funkify-disability-simula\/ojcijjdchelkddboickefhnbdpeajdjg\">Funkify<\/a>\u200a\u2014\u200aa brand new extension for Chrome that helps you experience the web and interfaces through the eyes of extreme users with different abilities and disabilities.<\/p>\n<p id=\"0f5e\" class=\"graf graf--p graf-after--p\"><a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/michelf.ca\/projects\/sim-daltonism\/\" target=\"_blank\" rel=\"noopener\" data-href=\"https:\/\/michelf.ca\/projects\/sim-daltonism\/\">Sim Daltonism<\/a>\u200a\u2014\u200avisualize colors as they are perceived with various types of color blindness.<\/p>\n<p id=\"cbc8\" class=\"graf graf--p graf-after--p\"><a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/web.dev\/measure\" target=\"_blank\" rel=\"noopener\" data-href=\"https:\/\/web.dev\/measure\">Web.dev<\/a>\u200a\u2014\u200aprovide any URL, and web.dev will run a series of audits using&nbsp;<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\/\" target=\"_blank\" rel=\"noopener\" data-href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\/\">Lighthouse<\/a>.<\/p>\n<p id=\"802b\" class=\"graf graf--p graf-after--p\"><a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\" target=\"_blank\" rel=\"noopener\" data-href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\">MDN\u2019s Accessibility Guide<\/a>\u200a\u2014\u200athis is a great resource to keep coming back to (I \u2764\ufe0f MDN\u2019s guides).<\/p>\n<p id=\"81b0\" class=\"graf graf--p graf-after--p graf--trailing\"><a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\" target=\"_blank\" rel=\"noopener\" data-href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\">Color Contrast Checker\u200a<\/a>\u2014\u200aprovides a quick and easy way to check color contrast ratios and what standards they meet.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>Source:<\/p>\n<p>Written by<\/p>\n<div class=\"u-tableCell\"><a class=\"link u-baseColor--link avatar\" dir=\"auto\" title=\"Go to the profile of Jonathan Speek\" href=\"https:\/\/medium.freecodecamp.org\/@JonSpeek?source=footer_card\" aria-label=\"Go to the profile of Jonathan Speek\" data-action-source=\"footer_card\" data-user-id=\"4ed92d786d6a\" data-collection-slug=\"free-code-camp\"><img decoding=\"async\" class=\"avatar-image avatar-image--small alignleft\" src=\"https:\/\/cdn-images-1.medium.com\/fit\/c\/60\/60\/1*FvPud8qr0__B4-6h70XC-A@2x.jpeg\" alt=\"Go to the profile of Jonathan Speek\"><\/a><\/div>\n<div class=\"u-tableCell u-verticalAlignMiddle u-breakWord u-paddingLeft15\">\n<h3 class=\"ui-h3 u-fontSize18 u-lineHeightTighter u-marginBottom4\"><a class=\"link link--primary u-accentColor--hoverTextNormal\" dir=\"auto\" title=\"Go to the profile of Jonathan Speek\" href=\"https:\/\/medium.freecodecamp.org\/@JonSpeek\" rel=\"author cc:attributionUrl\" aria-label=\"Go to the profile of Jonathan Speek\" data-user-id=\"4ed92d786d6a\" data-collection-slug=\"free-code-camp\">Jonathan Speek<\/a><\/h3>\n<p class=\"ui-body u-fontSize14 u-lineHeightBaseSans u-textColorDark u-marginBottom4\">?\ufe0f Product Designer &amp; Developer \/\/&nbsp;<a title=\"Twitter profile for @Cognizant\" href=\"http:\/\/twitter.com\/Cognizant\" target=\"_blank\" rel=\"noopener\">@Cognizant<\/a>Accelerator \/\/ \u26f0 Colorado, USA<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<div class=\"u-tableCell \"><a class=\"link u-baseColor--link avatar avatar--roundedRectangle\" title=\"Go to freeCodeCamp.org\" href=\"https:\/\/medium.freecodecamp.org\/?source=footer_card\" aria-label=\"Go to freeCodeCamp.org\" data-action-source=\"footer_card\" data-collection-slug=\"free-code-camp\"><img decoding=\"async\" class=\"avatar-image u-size60x60 alignleft\" src=\"https:\/\/cdn-images-1.medium.com\/fit\/c\/60\/60\/1*MotlWcSa2n6FrOx3ul89kw.png\" alt=\"freeCodeCamp.org\"><\/a><\/div>\n<div class=\"u-tableCell u-verticalAlignMiddle u-breakWord u-paddingLeft15\">\n<h3 class=\"ui-h3 u-fontSize18 u-lineHeightTighter u-marginBottom4\"><a class=\"link link--primary u-accentColor--hoverTextNormal\" href=\"https:\/\/medium.freecodecamp.org\/?source=footer_card\" rel=\"collection\" data-action-source=\"footer_card\" data-collection-slug=\"free-code-camp\">freeCodeCamp.org<\/a><\/h3>\n<p class=\"ui-body u-fontSize14 u-lineHeightBaseSans u-textColorDark u-marginBottom4\">Stories worth reading about programming and technology from our open source community.<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Photo by&nbsp;rawpixel&nbsp;on&nbsp;Unsplash Forms are an essential component of the web, as they connect users to your business and help them [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":1407,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[12,88,7,51,48,119,118,47,21,29],"tags":[],"class_list":["post-1405","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bloghassler-ec","category-design","category-editores","category-flexbox","category-front-end","category-html","category-internet","category-medium","category-productividad","category-programacion"],"_links":{"self":[{"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/posts\/1405","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/comments?post=1405"}],"version-history":[{"count":2,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/posts\/1405\/revisions"}],"predecessor-version":[{"id":1410,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/posts\/1405\/revisions\/1410"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/media\/1407"}],"wp:attachment":[{"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/media?parent=1405"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/categories?post=1405"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/tags?post=1405"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}