{"id":15293,"date":"2018-06-12T12:25:29","date_gmt":"2018-06-12T11:25:29","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=15293"},"modified":"2020-08-25T16:48:45","modified_gmt":"2020-08-25T15:48:45","slug":"accessibility-checklist-designers-developers","status":"publish","type":"post","link":"https:\/\/shopjessicabuckley.com\/blog\/accessibility-checklist-designers-developers\/","title":{"rendered":"An Accessibility Checklist 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\"><span class=\"long-quote\">Accessibility: (noun) the qualities that make an experience open to\u00a0all<\/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\">Accessible design is <em>good<\/em> design \u2014 an accessible user interface (UI) opens experiences to a wider range of users <em>and <\/em>improves experiences for existing users. That\u2019s the beauty of designing with all abilities in mind \u2014 it benefits <em>everyone<\/em>, not just those with limited vision, hearing, or mobility.<\/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\">When designing for disabilities, you\u2019re solving for a few, but extending to many. Take, for example, a technology like closed captioning. Although it was designed for users with limited hearing, many people use closed captioning to watch movies or TV shows nowadays. Keyboard navigation is another great example: users with limited mobility use the keyboard to navigate screens, but many other users also use keyboards to quickly navigate through pages. Clearly, all users can benefit from more accessible features, and designing accessible UI is no different.<\/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\">Creating accessible UI does require some planning and thinking, but if it\u2019s integrated into your design from the start, it shouldn\u2019t take much extra time or effort at all. Here\u2019s a checklist to get you started on thinking about accessible UI design\u2026<\/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;\">\u2714\ufe0f Hierarchy and\u00a0order<\/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\">Can users visually navigate a page? <\/strong>When scanning a page for information, users rely on visual hierarchy: important things at the top, related items grouped together, and headers summarizing content. Users should be able to gather key information quickly, and in a logical order. Essential elements include:<\/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 page title describing the purpose of the page.<\/li>\n<li>Headers that convey the structure of the page.<\/li>\n<li>Visual order that matches reading order.<\/li>\n<\/ul>\n<div id=\"attachment_6580\" style=\"width: 1583px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/06\/19OCsOaYo100gkNAVKyzMuA.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/06\/19OCsOaYo100gkNAVKyzMuA.png\" alt=\"\" width=\"1573\" height=\"799\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Content presented in visual order: top to bottom, left to\u00a0right.<\/p><\/div>\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\">Can screen readers scan your app\u2019s UI?<\/strong> Visual hierarchy helps assistive technology, too. To scan pages for users, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/support.microsoft.com\/en-us\/help\/22798\/windows-10-narrator-get-started\">screen readers<\/a> typically follow the UI\u2019s visual order, announcing headers, landmarks, and hyperlinks along the way. Ideally, there should be a linear, logical order for all users and assistive technologies to navigate your UI.<\/div>\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\">Is there a logical, predictable order for keyboard navigation?<\/strong> Users with limited vision and mobility rely on keyboard focus to navigate pages, and the order of navigation should also reflect the desired visual order. For more information on implementing keyboard access in your app, see the <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/uwp\/design\/input\/keyboard-interactions\">UWP guidelines for keyboard interactions<\/a>.<\/p>\n<div id=\"attachment_6580\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/06\/1CrDTKJPEGPNNfO4c_oZdpw.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/06\/1CrDTKJPEGPNNfO4c_oZdpw.png\" alt=\"\" width=\"800\" height=\"400\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">The arrow and tab keys are used for keyboard navigation.<\/p><\/div>\n<div id=\"attachment_6580\" style=\"width: 1583px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/06\/1IR7eydN5cGrSqHwq9edyEQ.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/06\/1IR7eydN5cGrSqHwq9edyEQ.png\" alt=\"\" width=\"1573\" height=\"799\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Tab order matches visual\u00a0order.<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/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;\">\u2714\ufe0f Labels<\/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\">Do UI elements have appropriate labels?<\/strong> Text labels not only clarify the purpose of UI elements and provide instructions to users, but they also help screen readers narrate the context of the UI elements.<\/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\"><center><div id=\"attachment_6580\" style=\"width: 410px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/06\/13B-bcUE-IEPeN4K9-2smsQ.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/06\/13B-bcUE-IEPeN4K9-2smsQ.png\" alt=\"\" width=\"400\" height=\"200\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Labels and placeholder text provide context for UI elements.<\/p><\/div><\/center><\/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\">Does all non-text content (media, figures, tables) have alt text? <\/strong>Screen readers automatically announce an image\/video, but specifying alternative text and captions provides a description. Additionally, in some cases when media can\u2019t load (i.e., poor internet connection), alt text can be useful for all users.<\/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\">Are UI elements labeled with accessible names for screen readers?<\/strong> An accessible name is a short, descriptive text string that a screen reader uses to announce a UI element, and they\u2019re especially necessary for interactive UI elements without text, such as text boxes or buttons with icons. While icons are great because they\u2019re universal across languages, not everyone can see them!<\/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\"><center><div id=\"attachment_6580\" style=\"width: 330px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/06\/1UZwVedqdLuEnmLeBFe_huA.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/06\/1UZwVedqdLuEnmLeBFe_huA.png\" alt=\"\" width=\"320\" height=\"48\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Buttons with icons should have accessible names.<\/p><\/div><\/center><\/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;\">\u2714\ufe0f Color and\u00a0contrast<\/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\">Is information conveyed through means other than color? <\/strong>Color doesn\u2019t translate perfectly across cultures or abilities. Rather than rely only on color, you can also use text, shapes, and textures to communicate information.<\/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\"><center><div id=\"attachment_6580\" style=\"width: 302px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/06\/1F2FX1iwCt77fHlV0feSk5A.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/06\/1F2FX1iwCt77fHlV0feSk5A.png\" alt=\"\" width=\"292\" height=\"282\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Hyperlinks use color and underlines as visual\u00a0cues.<\/p><\/div><\/center><\/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\">Does text meet minimum contrast ratio requirements?<\/strong> When users use dimmed displays or have limited vision, higher contrast makes seeing the screen\u2019s content much easier. According to the <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.w3.org\/TR\/WCAG20-TECHS\/G18.html\">W3C<\/a>, the minimum text to background contrast ratio should be 4.5:1.<\/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;\">\u2714\ufe0f Feedback<\/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\">Do you provide feedback for user interactions?<\/strong> Communication is key! Feedback communicates the results of interactions, allowing users to understand what they\u2019ve done, and what they can do next. Form controls should have appropriate validation\/error messages, and actions with significant consequences should have confirmation dialogs.<\/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\"><center><div id=\"attachment_6580\" style=\"width: 558px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/06\/132iINamZddb8RicmeWYX_A.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/06\/132iINamZddb8RicmeWYX_A.png\" alt=\"\" width=\"548\" height=\"184\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Deleting a file permanently can\u2019t be undone, so better confirm with the\u00a0user.<\/p><\/div><\/center><\/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\"><\/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;\">\u2714\ufe0f Scalable\u00a0layout<\/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\">Can your layout accommodate zoom?<\/strong> If users choose larger font options, zoom, or use other assistive technology, your UI should <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/uwp\/design\/layout\/responsive-design\">adjust appropriately<\/a>. UI that do not scale correctly may cause important components to overlap or hide other components and can become inaccessible. If your UI has many components, consider re-factoring for different magnification levels and screen sizes.<\/p>\n<div id=\"attachment_6580\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/06\/1dsq9rcZnRmVQjApJA8q03Q.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/06\/1dsq9rcZnRmVQjApJA8q03Q.png\" alt=\"\" width=\"800\" height=\"400\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">UI can respond to changes in screen width or\u00a0zoom.<\/p><\/div>\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;\">More 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\">If you\u2019re interested in building an accessible app, check out the <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/uwp\/design\/accessibility\/accessibility\">UWP accessibility guidelines<\/a>. There\u2019s plenty of specific guidance on using controls with built-in accessibility features, testing your app for accessibility, 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\">For more general design thinking about universal solutions, check out <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.microsoft.com\/design\/inclusive\">Microsoft Inclusive Design<\/a> for toolkits and inspirational videos.<\/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\"><em>This article was originally published on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/microsoft-design\/an-accessibility-checklist-for-designers-and-developers-a53a7d2d2c97\">Serena's Medium page<\/a>.\u00a0<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Accessibility: (noun) the qualities that make an experience open to\u00a0all Accessible design is good design \u2014 an accessible user interface (UI) opens experiences to a wider range of users and improves experiences for existing users. That\u2019s the beauty of designing with all abilities in mind \u2014 it benefits everyone, not just those with limited vision, hearing, or mobility. When designing&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/shopjessicabuckley.com\/blog\/accessibility-checklist-designers-developers\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":235,"featured_media":15314,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[495],"tags":[],"class_list":["post-15293","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-accessiblity"],"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=\"Accessible design is good design, an accessible user interface (UI) opens experiences to a wider range of users and improves experiences for existing users.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/shopjessicabuckley.com\/blog\/accessibility-checklist-designers-developers\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"An Accessibility Checklist for Designers and Developers | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"Accessible design is good design, an accessible user interface (UI) opens experiences to a wider range of users and improves experiences for existing users.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/shopjessicabuckley.com\/blog\/accessibility-checklist-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=\"2018-06-12T11:25:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-08-25T15:48:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2018\/06\/accessibility-check.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1400\" \/>\n\t<meta property=\"og:image:height\" content=\"750\" \/>\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:\/\/shopjessicabuckley.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/shopjessicabuckley.com\/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:\/\/shopjessicabuckley.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#website\",\"url\":\"https:\/\/shopjessicabuckley.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/shopjessicabuckley.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/accessibility-checklist-designers-developers\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2018\/06\/accessibility-check.png\",\"width\":1400,\"height\":750},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/accessibility-checklist-designers-developers\/#webpage\",\"url\":\"https:\/\/shopjessicabuckley.com\/blog\/accessibility-checklist-designers-developers\/\",\"name\":\"An Accessibility Checklist for Designers and Developers | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/accessibility-checklist-designers-developers\/#primaryimage\"},\"datePublished\":\"2018-06-12T11:25:29+00:00\",\"dateModified\":\"2020-08-25T15:48:45+00:00\",\"description\":\"Accessible design is good design, an accessible user interface (UI) opens experiences to a wider range of users and improves experiences for existing users.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/shopjessicabuckley.com\/blog\/accessibility-checklist-designers-developers\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/accessibility-checklist-designers-developers\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/accessibility-checklist-designers-developers\/#webpage\"},\"author\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#\/schema\/person\/18a1bfca0e33b3847a89e44b685a8bf3\"},\"headline\":\"An Accessibility Checklist for Designers and Developers\",\"datePublished\":\"2018-06-12T11:25:29+00:00\",\"dateModified\":\"2020-08-25T15:48:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/accessibility-checklist-designers-developers\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/accessibility-checklist-designers-developers\/#primaryimage\"},\"articleSection\":\"Accessibility\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/shopjessicabuckley.com\/blog\/accessibility-checklist-designers-developers\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#\/schema\/person\/18a1bfca0e33b3847a89e44b685a8bf3\",\"name\":\"Serena Zheng\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c457dc66a4114ed31b8265f2564738023a0f540169b501a4879a4d7aa45ee219?s=96&d=mm&r=g\",\"caption\":\"Serena Zheng\"},\"description\":\"Dev Writer @Microsoft, I write words and sometimes code.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/15293","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/users\/235"}],"replies":[{"embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/comments?post=15293"}],"version-history":[{"count":0,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/15293\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media\/15314"}],"wp:attachment":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media?parent=15293"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/categories?post=15293"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/tags?post=15293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}