{"id":13850,"date":"2017-03-06T12:00:46","date_gmt":"2017-03-06T17:00:46","guid":{"rendered":"https:\/\/webdevstudios.com\/?p=13850"},"modified":"2024-04-15T12:01:28","modified_gmt":"2024-04-15T16:01:28","slug":"accessibility-chrome-devtools","status":"publish","type":"post","link":"https:\/\/webdevstudios.com\/2017\/03\/06\/accessibility-chrome-devtools\/","title":{"rendered":"Accessibility in Chrome DevTools"},"content":{"rendered":"
Oh, the internet is a wondrous place – full of avenues to connect people, regardless of geography, language, or hardware.<\/div>\n

Accessibility is so broad and the usership is so diverse. When building a WordPress theme, I encourage you to think about the benefits of removing any potential barriers from someone being able to access information. (Yay usability and inclusion!)\u00a0As a reminder, the WordPress Accessibility Handbook<\/a> is an excellent resource, which outlines minimum requirements you’ll need to meet in order to make your theme “accessibility-ready”.<\/p>\n

There are several tools and resources out there<\/a> that can assist in this process.\u00a0Since my default browser is\u00a0Chrome, I’d like to dive a bit deeper into how\u00a0you can use Accessibility Developer Tools<\/a>\u00a0(a\u00a0free extension from Google)\u00a0to help out.<\/p>\n

Note: “Accessibility\u201d is often referred to as \u201ca11y\u201d and will be used interchangeably throughout this overview.<\/em><\/p>\n

Running an a11y Audit:<\/h4>\n

\"ScreenshopSo, you’ve started to develop your WordPress theme and you want to check on how things are shaping up on the a11y side of things.<\/p>\n

Once installed, you will want to select\u00a0the “Audits” tab. In addition to the usual “Web Page Performance” and “Network Utilization”, there is now also an “Accessibility” option listed. By checking that option and running an audit (either for present state or on page reload, depending on preference), it will return a basic report from the current site.<\/p>\n

The audit will (potentially)\u00a0return a list from severe to passing of accessibility errors it calculated within your code. What is helpful about this is that it will show you the actual node in the DOM where this issue is taking place. It provides a link to the\u00a0DevTools a11y wiki<\/a>\u00a0that relates to that issue, which\u00a0in turn links you to the relevant area of the\u00a0w3 spec<\/a>.<\/p>\n

\"Screenshop<\/p>\n

So much of\u00a0accessibility documentation can seem quite dense and overwhelming. I know that for me, this really helps to break it down and\u00a0give me a better idea of what should be happening\u00a0within my code\u00a0AND<\/span>\u00a0how to fix it.<\/p>\n

Debugging Existing accessibility:<\/h4>\n

What if you’re trying to debug issues that have already been implemented that aren’t translating properly into actual functionality? Follow me once more to a magical place called “Accessibility Properties” that lives within your DevTools in the Elements panel. Just a note, depending on how your DevTools is laid out, it could be listed under the right-pointing double angle quotation mark \u00bb.<\/p>\n

\"Screenshot<\/p>\n

Depending on which element you have selected, it will provide a list of properties that can help in validating ARIA roles\/attributes and debugging colour issues, focus\/visibility roles and text computation.<\/span><\/p>\n

Focus and Visibility<\/h5>\n

This will list what is happening with tabindex<\/code> and visibility<\/code>. This is great to have consolidated in one place to double check properties. I’ve found it\u00a0to be most helpful with elements like modals where something is focusable but\u00a0behind other content and needs adjusting. Focus and visibility are two examples of things to be conscious when developing so people are able to navigate via keyboard. Again, remember to double check these and other WordPress standards<\/a>\u00a0as you’re developing your theme!<\/p>\n

Colour Contrast<\/h5>\n

This will show you the current contrast ratio of your element. You will also see a suggested colour value pair to match the WCAG AA or AAA recommendation. WordPress aims to to maintain contrast at the WCAG AA<\/a>\u00a0level, which means a ratio of 4.5:1<\/em> for normal text and\u00a03:1<\/em> for large text. And if you want to see what that would hypothetically look like, you can toggle to test it by clicking on the square icon to the right of the hex values.<\/p>\n

Keep in mind that this also applies to a change of state (:focus or :hover) is there is no additional indicator like a text decoration change. Ideally, you’ll have worked out these things in the design phase\u00a0but sometimes buttons or other smaller elements\u00a0might fall under the radar. If you want to play with different shades, there are several contract checkers online (for example, here’s one by WebAIM<\/a>).<\/p>\n

ARIA Role and Attribute Validation<\/h5>\n

ARIA roles<\/a>\u00a0and attributes help screen readers understand the purpose of various sections of a web page by assigning certain regions. Certain landmarks should only be applied once per page.<\/p>\n

Similar to what we see with styling properties,\u00a0if\u00a0it is invalid somehow or being overwritten, it will be struck out<\/del> when inspected. This is useful to\u00a0narrow down whether it’s a browser bug, a screenreader bug, or if the markup is just plain ol’ incorrect (as seen in the instance below for the aria-describedby<\/code>\u00a0attribute).<\/p>\n

\"Screenshot<\/p>\n

In\u00a0my journey of learning more about accessibility, debugging has helped solidify how different components interact with attributes, which allows me to read up more and then use them more effectively in the future.<\/p>\n

If you weren’t already familiar with these accessibility add-ons in Chrome, welcome to a whole new world! And if you were, is there anything I missed\u00a0that is a total gem?<\/p>\n","protected":false},"excerpt":{"rendered":"

Oh, the internet is a wondrous place – full of avenues to connect people, regardless of geography, language, or hardware. Accessibility is so broad and the usership is so diverse. When building a WordPress theme, I encourage you to think about the benefits of removing any potential barriers from someone being able to access information. Read More Accessibility in Chrome DevTools<\/span><\/a><\/p>\n","protected":false},"author":72,"featured_media":13862,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"jetpack_post_was_ever_published":false,"footnotes":""},"categories":[191],"tags":[192],"coauthors":[979],"class_list":["post-13850","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-accessibility","tag-development-tips"],"acf":{"blog_hero_image":{"ID":15478,"id":15478,"title":"chrome","filename":"chrome.jpg","filesize":263552,"url":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome.jpg","link":"https:\/\/webdevstudios.com\/2017\/03\/06\/accessibility-chrome-devtools\/chrome\/","alt":"","author":"13","description":"","caption":"","name":"chrome","status":"inherit","uploaded_to":13850,"date":"2017-02-13 17:02:43","modified":"2017-02-13 17:03:51","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/webdevstudios.com\/wp-includes\/images\/media\/default.png","width":1920,"height":1357,"sizes":{"thumbnail":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-150x150.jpg","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-300x212.jpg","medium-width":300,"medium-height":212,"medium_large":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-768x543.jpg","medium_large-width":768,"medium_large-height":543,"large":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-1024x724.jpg","large-width":850,"large-height":601,"1536x1536":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-1536x1086.jpg","1536x1536-width":1536,"1536x1536-height":1086,"2048x2048":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome.jpg","2048x2048-width":1920,"2048x2048-height":1357,"featured-work-lg":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-436x511.jpg","featured-work-lg-width":436,"featured-work-lg-height":511,"featured-work-sm":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-436x241.jpg","featured-work-sm-width":436,"featured-work-sm-height":241,"book-cover":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-235x300.jpg","book-cover-width":235,"book-cover-height":300,"home-hero":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-1350x440.jpg","home-hero-width":1350,"home-hero-height":440,"services-screenshot":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-590x790.jpg","services-screenshot-width":590,"services-screenshot-height":790,"single-blog-featured":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-1920x625.jpg","single-blog-featured-width":1920,"single-blog-featured-height":625,"single-blog-inline":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-850x360.jpg","single-blog-inline-width":850,"single-blog-inline-height":360,"grid-image":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-420x420.jpg","grid-image-width":420,"grid-image-height":420,"logo-train":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-85x60.jpg","logo-train-width":85,"logo-train-height":60,"simple-header":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-1920x191.jpg","simple-header-width":1920,"simple-header-height":191,"full-width":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-1528x1080.jpg","full-width-width":1528,"full-width-height":1080,"fifty-fifty-media":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-1300x919.jpg","fifty-fifty-media-width":1300,"fifty-fifty-media-height":919,"gform-image-choice-sm":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome.jpg","gform-image-choice-sm-width":300,"gform-image-choice-sm-height":212,"gform-image-choice-md":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome.jpg","gform-image-choice-md-width":400,"gform-image-choice-md-height":283,"gform-image-choice-lg":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome.jpg","gform-image-choice-lg-width":600,"gform-image-choice-lg-height":424}},"background_choice":{"value":"null","label":"None"},"full_width":true,"font_color":"","background_image":{"ID":15478,"id":15478,"title":"chrome","filename":"chrome.jpg","filesize":263552,"url":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome.jpg","link":"https:\/\/webdevstudios.com\/2017\/03\/06\/accessibility-chrome-devtools\/chrome\/","alt":"","author":"13","description":"","caption":"","name":"chrome","status":"inherit","uploaded_to":13850,"date":"2017-02-13 17:02:43","modified":"2017-02-13 17:03:51","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/webdevstudios.com\/wp-includes\/images\/media\/default.png","width":1920,"height":1357,"sizes":{"thumbnail":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-150x150.jpg","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-300x212.jpg","medium-width":300,"medium-height":212,"medium_large":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-768x543.jpg","medium_large-width":768,"medium_large-height":543,"large":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-1024x724.jpg","large-width":850,"large-height":601,"1536x1536":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-1536x1086.jpg","1536x1536-width":1536,"1536x1536-height":1086,"2048x2048":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome.jpg","2048x2048-width":1920,"2048x2048-height":1357,"featured-work-lg":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-436x511.jpg","featured-work-lg-width":436,"featured-work-lg-height":511,"featured-work-sm":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-436x241.jpg","featured-work-sm-width":436,"featured-work-sm-height":241,"book-cover":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-235x300.jpg","book-cover-width":235,"book-cover-height":300,"home-hero":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-1350x440.jpg","home-hero-width":1350,"home-hero-height":440,"services-screenshot":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-590x790.jpg","services-screenshot-width":590,"services-screenshot-height":790,"single-blog-featured":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-1920x625.jpg","single-blog-featured-width":1920,"single-blog-featured-height":625,"single-blog-inline":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-850x360.jpg","single-blog-inline-width":850,"single-blog-inline-height":360,"grid-image":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-420x420.jpg","grid-image-width":420,"grid-image-height":420,"logo-train":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-85x60.jpg","logo-train-width":85,"logo-train-height":60,"simple-header":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-1920x191.jpg","simple-header-width":1920,"simple-header-height":191,"full-width":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-1528x1080.jpg","full-width-width":1528,"full-width-height":1080,"fifty-fifty-media":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome-1300x919.jpg","fifty-fifty-media-width":1300,"fifty-fifty-media-height":919,"gform-image-choice-sm":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome.jpg","gform-image-choice-sm-width":300,"gform-image-choice-sm-height":212,"gform-image-choice-md":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome.jpg","gform-image-choice-md-width":400,"gform-image-choice-md-height":283,"gform-image-choice-lg":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2017\/02\/chrome.jpg","gform-image-choice-lg-width":600,"gform-image-choice-lg-height":424}},"section_title_type":"h3","section_title_alignment":"center","section_title":""},"yoast_head":"\nAccessibility in Chrome DevTools - WebDevStudios<\/title>\n<meta name=\"description\" content=\"Accessibility is important. Here's a helpful rundown of the Chrome DevTools a11y plugin to help you achieve and debug it during development.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webdevstudios.com\/2017\/03\/06\/accessibility-chrome-devtools\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Accessibility in Chrome DevTools\" \/>\n<meta property=\"og:description\" content=\"Accessibility is important. Here's a helpful rundown of the Chrome DevTools a11y plugin to help you achieve and debug it during development.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdevstudios.com\/2017\/03\/06\/accessibility-chrome-devtools\/\" \/>\n<meta property=\"og:site_name\" content=\"WebDevStudios\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/webdevstudios\" \/>\n<meta property=\"article:published_time\" content=\"2017-03-06T17:00:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-15T16:01:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2016\/10\/a11y-chrome-dev.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"739\" \/>\n\t<meta property=\"og:image:height\" content=\"250\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Allison Tarr\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webdevstudios\" \/>\n<meta name=\"twitter:site\" content=\"@webdevstudios\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Allison Tarr\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2017\\\/03\\\/06\\\/accessibility-chrome-devtools\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2017\\\/03\\\/06\\\/accessibility-chrome-devtools\\\/\"},\"author\":{\"name\":\"Allison Tarr\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#\\\/schema\\\/person\\\/7675629b6c24dc9ee3111638f8cb9c04\"},\"headline\":\"Accessibility in Chrome DevTools\",\"datePublished\":\"2017-03-06T17:00:46+00:00\",\"dateModified\":\"2024-04-15T16:01:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2017\\\/03\\\/06\\\/accessibility-chrome-devtools\\\/\"},\"wordCount\":847,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2017\\\/03\\\/06\\\/accessibility-chrome-devtools\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2016\\\/10\\\/a11y-chrome-dev.jpg\",\"keywords\":[\"development tips\"],\"articleSection\":[\"Accessibility\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webdevstudios.com\\\/2017\\\/03\\\/06\\\/accessibility-chrome-devtools\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2017\\\/03\\\/06\\\/accessibility-chrome-devtools\\\/\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/2017\\\/03\\\/06\\\/accessibility-chrome-devtools\\\/\",\"name\":\"Accessibility in Chrome DevTools - WebDevStudios\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2017\\\/03\\\/06\\\/accessibility-chrome-devtools\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2017\\\/03\\\/06\\\/accessibility-chrome-devtools\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2016\\\/10\\\/a11y-chrome-dev.jpg\",\"datePublished\":\"2017-03-06T17:00:46+00:00\",\"dateModified\":\"2024-04-15T16:01:28+00:00\",\"description\":\"Accessibility is important. Here's a helpful rundown of the Chrome DevTools a11y plugin to help you achieve and debug it during development.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2017\\\/03\\\/06\\\/accessibility-chrome-devtools\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webdevstudios.com\\\/2017\\\/03\\\/06\\\/accessibility-chrome-devtools\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2017\\\/03\\\/06\\\/accessibility-chrome-devtools\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2016\\\/10\\\/a11y-chrome-dev.jpg\",\"contentUrl\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2016\\\/10\\\/a11y-chrome-dev.jpg\",\"width\":739,\"height\":250,\"caption\":\"Overlay of Chrome logo and post title over stylized code snippets\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2017\\\/03\\\/06\\\/accessibility-chrome-devtools\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/webdevstudios.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Accessibility in Chrome DevTools\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#website\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/\",\"name\":\"WebDevStudios\",\"description\":\"WordPress Design and Development Agency\",\"publisher\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/webdevstudios.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#organization\",\"name\":\"WebDevStudios\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/wds-amp-logo.png\",\"contentUrl\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/wds-amp-logo.png\",\"width\":173,\"height\":60,\"caption\":\"WebDevStudios\"},\"image\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"http:\\\/\\\/facebook.com\\\/webdevstudios\",\"https:\\\/\\\/x.com\\\/webdevstudios\",\"http:\\\/\\\/instagram.com\\\/webdevstudios\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/webdevstudios-llc-\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#\\\/schema\\\/person\\\/7675629b6c24dc9ee3111638f8cb9c04\",\"name\":\"Allison Tarr\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ea01000d901e66e88619d16e34564c0f823752aecc005b93e948beb1a7b9f6af?s=96&d=mm&r=g0263ad12f1f287272ef3c11abcb0b5e6\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ea01000d901e66e88619d16e34564c0f823752aecc005b93e948beb1a7b9f6af?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ea01000d901e66e88619d16e34564c0f823752aecc005b93e948beb1a7b9f6af?s=96&d=mm&r=g\",\"caption\":\"Allison Tarr\"},\"url\":\"https:\\\/\\\/webdevstudios.com\\\/author\\\/allison\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Accessibility in Chrome DevTools - WebDevStudios","description":"Accessibility is important. Here's a helpful rundown of the Chrome DevTools a11y plugin to help you achieve and debug it during development.","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:\/\/webdevstudios.com\/2017\/03\/06\/accessibility-chrome-devtools\/","og_locale":"en_US","og_type":"article","og_title":"Accessibility in Chrome DevTools","og_description":"Accessibility is important. Here's a helpful rundown of the Chrome DevTools a11y plugin to help you achieve and debug it during development.","og_url":"https:\/\/webdevstudios.com\/2017\/03\/06\/accessibility-chrome-devtools\/","og_site_name":"WebDevStudios","article_publisher":"http:\/\/facebook.com\/webdevstudios","article_published_time":"2017-03-06T17:00:46+00:00","article_modified_time":"2024-04-15T16:01:28+00:00","og_image":[{"width":739,"height":250,"url":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2016\/10\/a11y-chrome-dev.jpg","type":"image\/jpeg"}],"author":"Allison Tarr","twitter_card":"summary_large_image","twitter_creator":"@webdevstudios","twitter_site":"@webdevstudios","twitter_misc":{"Written by":"Allison Tarr","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webdevstudios.com\/2017\/03\/06\/accessibility-chrome-devtools\/#article","isPartOf":{"@id":"https:\/\/webdevstudios.com\/2017\/03\/06\/accessibility-chrome-devtools\/"},"author":{"name":"Allison Tarr","@id":"https:\/\/webdevstudios.com\/#\/schema\/person\/7675629b6c24dc9ee3111638f8cb9c04"},"headline":"Accessibility in Chrome DevTools","datePublished":"2017-03-06T17:00:46+00:00","dateModified":"2024-04-15T16:01:28+00:00","mainEntityOfPage":{"@id":"https:\/\/webdevstudios.com\/2017\/03\/06\/accessibility-chrome-devtools\/"},"wordCount":847,"commentCount":1,"publisher":{"@id":"https:\/\/webdevstudios.com\/#organization"},"image":{"@id":"https:\/\/webdevstudios.com\/2017\/03\/06\/accessibility-chrome-devtools\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2016\/10\/a11y-chrome-dev.jpg","keywords":["development tips"],"articleSection":["Accessibility"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webdevstudios.com\/2017\/03\/06\/accessibility-chrome-devtools\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webdevstudios.com\/2017\/03\/06\/accessibility-chrome-devtools\/","url":"https:\/\/webdevstudios.com\/2017\/03\/06\/accessibility-chrome-devtools\/","name":"Accessibility in Chrome DevTools - WebDevStudios","isPartOf":{"@id":"https:\/\/webdevstudios.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdevstudios.com\/2017\/03\/06\/accessibility-chrome-devtools\/#primaryimage"},"image":{"@id":"https:\/\/webdevstudios.com\/2017\/03\/06\/accessibility-chrome-devtools\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2016\/10\/a11y-chrome-dev.jpg","datePublished":"2017-03-06T17:00:46+00:00","dateModified":"2024-04-15T16:01:28+00:00","description":"Accessibility is important. Here's a helpful rundown of the Chrome DevTools a11y plugin to help you achieve and debug it during development.","breadcrumb":{"@id":"https:\/\/webdevstudios.com\/2017\/03\/06\/accessibility-chrome-devtools\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdevstudios.com\/2017\/03\/06\/accessibility-chrome-devtools\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevstudios.com\/2017\/03\/06\/accessibility-chrome-devtools\/#primaryimage","url":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2016\/10\/a11y-chrome-dev.jpg","contentUrl":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2016\/10\/a11y-chrome-dev.jpg","width":739,"height":250,"caption":"Overlay of Chrome logo and post title over stylized code snippets"},{"@type":"BreadcrumbList","@id":"https:\/\/webdevstudios.com\/2017\/03\/06\/accessibility-chrome-devtools\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdevstudios.com\/"},{"@type":"ListItem","position":2,"name":"Accessibility in Chrome DevTools"}]},{"@type":"WebSite","@id":"https:\/\/webdevstudios.com\/#website","url":"https:\/\/webdevstudios.com\/","name":"WebDevStudios","description":"WordPress Design and Development Agency","publisher":{"@id":"https:\/\/webdevstudios.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdevstudios.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webdevstudios.com\/#organization","name":"WebDevStudios","url":"https:\/\/webdevstudios.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevstudios.com\/#\/schema\/logo\/image\/","url":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/07\/wds-amp-logo.png","contentUrl":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/07\/wds-amp-logo.png","width":173,"height":60,"caption":"WebDevStudios"},"image":{"@id":"https:\/\/webdevstudios.com\/#\/schema\/logo\/image\/"},"sameAs":["http:\/\/facebook.com\/webdevstudios","https:\/\/x.com\/webdevstudios","http:\/\/instagram.com\/webdevstudios","https:\/\/www.linkedin.com\/company\/webdevstudios-llc-\/"]},{"@type":"Person","@id":"https:\/\/webdevstudios.com\/#\/schema\/person\/7675629b6c24dc9ee3111638f8cb9c04","name":"Allison Tarr","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/ea01000d901e66e88619d16e34564c0f823752aecc005b93e948beb1a7b9f6af?s=96&d=mm&r=g0263ad12f1f287272ef3c11abcb0b5e6","url":"https:\/\/secure.gravatar.com\/avatar\/ea01000d901e66e88619d16e34564c0f823752aecc005b93e948beb1a7b9f6af?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ea01000d901e66e88619d16e34564c0f823752aecc005b93e948beb1a7b9f6af?s=96&d=mm&r=g","caption":"Allison Tarr"},"url":"https:\/\/webdevstudios.com\/author\/allison\/"}]}},"jetpack_featured_media_url":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2016\/10\/a11y-chrome-dev.jpg","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3WX6u-3Bo","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/posts\/13850","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/users\/72"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/comments?post=13850"}],"version-history":[{"count":0,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/posts\/13850\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/media\/13862"}],"wp:attachment":[{"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/media?parent=13850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/categories?post=13850"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/tags?post=13850"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/coauthors?post=13850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}