{"id":335369,"date":"2021-03-04T15:11:38","date_gmt":"2021-03-04T23:11:38","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=335369"},"modified":"2021-03-04T15:14:54","modified_gmt":"2021-03-04T23:14:54","slug":"204-using-the-axe-devtools-web-accessibility-testing-browser-plugin","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/204-using-the-axe-devtools-web-accessibility-testing-browser-plugin\/","title":{"rendered":"#204: Using the axe DevTools Web Accessibility Testing Browser Plugin"},"content":{"rendered":"\n

In this video, I’m joined by Preety Kumar<\/a> of Deque<\/a> to take a look at their DevTools plugin<\/a> for axe<\/a>. Short story: this is an amazing<\/em> plugin that helps you quickly find accessibility problems on any website, then helps you fix them<\/em>. There is quick automated testing as well as guided tests that help you test things that need a little bit more walkthrough, like testing the page tab order and testing modal dialogs. <\/p>\n\n\n\n

\n
Try axe DevTools Pro Today<\/a><\/div>\n<\/div>\n\n\n\n

Free 14-day trial with no credit card required.<\/p>\n","protected":false},"excerpt":{"rendered":"

In this video, I’m joined by Preety Kumar of Deque to take a look at their DevTools plugin for axe. Short story: this is an amazing plugin that helps you quickly find accessibility problems on any website, then helps you fix them. There is quick automated testing as well as guided tests that help you […]<\/p>\n","protected":false},"author":3,"featured_media":335382,"parent":1283,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"video-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[466],"acf":[],"jetpack-related-posts":[{"id":293949,"url":"https:\/\/css-tricks.com\/video-screencasts\/174-using-local-overrides-in-devtools\/","url_meta":{"origin":335369,"position":0},"title":"#174: Using Local Overrides in DevTools","date":"August 8, 2019","format":false,"excerpt":"There is a feature of Chrome DevTools that lets you: See the code of any given resource the current web page is using (like CSS and JavaScript). \"Pretty Print\" it (format it for readability) Save it to disk Use that saved version to override the live version, even on page\u2026","rel":"","context":"In \"DevTools\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/Screen-Shot-2019-08-06-at-9.18.56-AM.png?fit=1200%2C701&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":205997,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/m\/marker\/","url_meta":{"origin":335369,"position":1},"title":"::marker","date":"August 3, 2015","format":false,"excerpt":"The\u00a0::marker\u00a0pseudo-element is for styling the stylistic marker of a list element. For example, the bullet point of a default

    (e.g. \u2022) or the numeral of a default
      (e.g. 1.). This makes it extremely easy to do simple things like colorize them. CodePen Embed Fallback Like a pseudo-element, you'll\u2026","rel":"","context":"With 7 comments","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/CleanShot-2021-02-15-at-07.00.59@2x.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":18642,"url":"https:\/\/css-tricks.com\/lodge\/v10\/118-viewing-live-site-with-theme-switcher-plugin\/","url_meta":{"origin":335369,"position":2},"title":"#118: Viewing Live Site with Theme Switcher Plugin","date":"October 1, 2012","format":false,"excerpt":"In this screencast we add a new plugin to the site that gives us the ability to switch the themes on the live site, but only so that we (as admins) can see it, not regular visitors. Before we add it, we look at the status of our project in\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3770,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/smooth-scrolling\/","url_meta":{"origin":335369,"position":3},"title":"Smooth Scrolling","date":"September 4, 2009","format":false,"excerpt":"Hey! Before you go too far down the rabbit hole of JavaScript-based smooth scrolling, know that there is a native CSS feature for this: scroll-behavior. html { scroll-behavior: smooth; } And before you reach for a library like jQuery to help, there is also a native JavaScript version of smooth\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5138,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/get-url-and-url-parts-in-javascript\/","url_meta":{"origin":335369,"position":4},"title":"Get URL and URL Parts in JavaScript","date":"December 22, 2009","format":false,"excerpt":"JavaScript can access the current URL in parts. For this URL: https:\/\/css-tricks.com\/example\/index.html?s=flexbox window.location.protocol = \"http:\"window.location.host = \"css-tricks.com\"window.location.pathname = \"\/example\/index.html\"window.location.search = \"?s=flexbox\" So to get the full URL path in JavaScript: var newURL = window.location.protocol + \"\/\/\" + window.location.host + \"\/\" + window.location.pathname + window.location.search A bit of a more modern\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":246112,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/convert-polygon-path-data\/","url_meta":{"origin":335369,"position":5},"title":"Convert Polygon to Path Data","date":"October 3, 2016","format":false,"excerpt":"I've had to do this a few times recently so I thought I'd save the method. StackOverflow has a method that works great: [].forEach.call(polys,convertPolyToPath); function convertPolyToPath(poly){ var svgNS = poly.ownerSVGElement.namespaceURI; var path = document.createElementNS(svgNS,'path'); var points = poly.getAttribute('points').split(\/\\s+|,\/); var x0=points.shift(), y0=points.shift(); var pathdata = 'M'+x0+','+y0+'L'+points.join(' '); if (poly.tagName=='polygon') pathdata+='z'; path.setAttribute('id',poly.getAttribute('id'));\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/335369"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=335369"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/335369\/revisions"}],"predecessor-version":[{"id":335853,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/335369\/revisions\/335853"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/335382"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=335369"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=335369"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}