CINXE.COM

<!DOCTYPE html> <html lang="en-US"> <head > <meta charset="UTF-8" /> <script type="text/javascript"> /* <![CDATA[ */ var gform;gform||(document.addEventListener("gform_main_scripts_loaded",function(){gform.scriptsLoaded=!0}),window.addEventListener("DOMContentLoaded",function(){gform.domLoaded=!0}),gform={domLoaded:!1,scriptsLoaded:!1,initializeOnLoaded:function(o){gform.domLoaded&&gform.scriptsLoaded?o():!gform.domLoaded&&gform.scriptsLoaded?window.addEventListener("DOMContentLoaded",o):document.addEventListener("gform_main_scripts_loaded",o)},hooks:{action:{},filter:{}},addAction:function(o,n,r,t){gform.addHook("action",o,n,r,t)},addFilter:function(o,n,r,t){gform.addHook("filter",o,n,r,t)},doAction:function(o){gform.doHook("action",o,arguments)},applyFilters:function(o){return gform.doHook("filter",o,arguments)},removeAction:function(o,n){gform.removeHook("action",o,n)},removeFilter:function(o,n,r){gform.removeHook("filter",o,n,r)},addHook:function(o,n,r,t,i){null==gform.hooks[o][n]&&(gform.hooks[o][n]=[]);var e=gform.hooks[o][n];null==i&&(i=n+"_"+e.length),gform.hooks[o][n].push({tag:i,callable:r,priority:t=null==t?10:t})},doHook:function(n,o,r){var t;if(r=Array.prototype.slice.call(r,1),null!=gform.hooks[n][o]&&((o=gform.hooks[n][o]).sort(function(o,n){return o.priority-n.priority}),o.forEach(function(o){"function"!=typeof(t=o.callable)&&(t=window[t]),"action"==n?t.apply(null,r):r[0]=t.apply(null,r)})),"filter"==n)return r[0]},removeHook:function(o,n,t,i){var r;null!=gform.hooks[o][n]&&(r=(r=gform.hooks[o][n]).filter(function(o,n,r){return!!(null!=i&&i!=o.tag||null!=t&&t!=o.priority)}),gform.hooks[o][n]=r)}}); /* ]]> */ </script> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' />  <title>Building a Custom Plugin with an Accessibility First Approach: Phil Webster - Equalize Digital</title> <meta name="description" content="In our Meetup on November 15, 2021, Phil Webster, a Developer at Delicious Brains, discussed how to build a custom plugin with accessibility in mind." /> <link rel="canonical" href="https://equalizedigital.com/building-a-custom-plugin-with-an-accessibility-first-approach/" /> <meta property="og:locale" content="en_US" /> <meta property="og:type" content="article" /> <meta property="og:title" content="Building a Custom Plugin with an Accessibility First Approach: Phil Webster - Equalize Digital" /> <meta property="og:description" content="In our Meetup on November 15, 2021, Phil Webster, a Developer at Delicious Brains, discussed how to build a custom plugin with accessibility in mind." /> <meta property="og:url" content="https://equalizedigital.com/building-a-custom-plugin-with-an-accessibility-first-approach/" /> <meta property="og:site_name" content="Equalize Digital" /> <meta property="article:published_time" content="2021-11-18T21:38:42+00:00" /> <meta property="article:modified_time" content="2024-09-12T14:11:35+00:00" /> <meta property="og:image" content="https://equalizedigital.com/wp-content/uploads/2021/11/WP_Accessibility_Meetup_Banner_Phil_webster_white.png" /> <meta property="og:image:width" content="1920" /> <meta property="og:image:height" content="1080" /> <meta property="og:image:type" content="image/png" /> <meta name="author" content="Equalize Digital" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:label1" content="Written by" /> <meta name="twitter:data1" content="Equalize Digital" /> <meta name="twitter:label2" content="Est. reading time" /> <meta name="twitter:data2" content="1 minute" /> <script type="application/ld+json" class="yoast-schema-graph">{"@context":"https://schema.org","@graph":[{"@type":"Article","@id":"https://equalizedigital.com/building-a-custom-plugin-with-an-accessibility-first-approach/#article","isPartOf":{"@id":"https://equalizedigital.com/building-a-custom-plugin-with-an-accessibility-first-approach/"},"author":{"name":"Equalize Digital","@id":"https://equalizedigital.com/#/schema/person/48b846552d175121f8f63f35c7399344"},"headline":"Building a Custom Plugin with an Accessibility First Approach: Phil Webster","datePublished":"2021-11-18T21:38:42+00:00","dateModified":"2024-09-12T14:11:35+00:00","mainEntityOfPage":{"@id":"https://equalizedigital.com/building-a-custom-plugin-with-an-accessibility-first-approach/"},"wordCount":10588,"publisher":{"@id":"https://equalizedigital.com/#organization"},"image":{"@id":"https://equalizedigital.com/building-a-custom-plugin-with-an-accessibility-first-approach/#primaryimage"},"thumbnailUrl":"https://equalizedigital.com/wp-content/uploads/2021/11/WP_Accessibility_Meetup_Banner_Phil_webster_white.png","keywords":["WordPress Accessibility Meetup"],"articleSection":["Recorded Webinars"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https://equalizedigital.com/building-a-custom-plugin-with-an-accessibility-first-approach/","url":"https://equalizedigital.com/building-a-custom-plugin-with-an-accessibility-first-approach/","name":"Building a Custom Plugin with an Accessibility First Approach: Phil Webster - Equalize Digital","isPartOf":{"@id":"https://equalizedigital.com/#website"},"primaryImageOfPage":{"@id":"https://equalizedigital.com/building-a-custom-plugin-with-an-accessibility-first-approach/#primaryimage"},"image":{"@id":"https://equalizedigital.com/building-a-custom-plugin-with-an-accessibility-first-approach/#primaryimage"},"thumbnailUrl":"https://equalizedigital.com/wp-content/uploads/2021/11/WP_Accessibility_Meetup_Banner_Phil_webster_white.png","datePublished":"2021-11-18T21:38:42+00:00","dateModified":"2024-09-12T14:11:35+00:00","description":"In our Meetup on November 15, 2021, Phil Webster, a Developer at Delicious Brains, discussed how to build a custom plugin with accessibility in mind.","breadcrumb":{"@id":"https://equalizedigital.com/building-a-custom-plugin-with-an-accessibility-first-approach/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https://equalizedigital.com/building-a-custom-plugin-with-an-accessibility-first-approach/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https://equalizedigital.com/building-a-custom-plugin-with-an-accessibility-first-approach/#primaryimage","url":"https://equalizedigital.com/wp-content/uploads/2021/11/WP_Accessibility_Meetup_Banner_Phil_webster_white.png","contentUrl":"https://equalizedigital.com/wp-content/uploads/2021/11/WP_Accessibility_Meetup_Banner_Phil_webster_white.png","width":1920,"height":1080,"caption":"wordpress accessibility meetup, how to build a custom plugin with an accessibility first approach with phil webster. Monday, November 15, 2021"},{"@type":"BreadcrumbList","@id":"https://equalizedigital.com/building-a-custom-plugin-with-an-accessibility-first-approach/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://equalizedigital.com/"},{"@type":"ListItem","position":2,"name":"Learning Center","item":"https://equalizedigital.com/resources/"},{"@type":"ListItem","position":3,"name":"Building a Custom Plugin with an Accessibility First Approach: Phil Webster"}]},{"@type":"WebSite","@id":"https://equalizedigital.com/#website","url":"https://equalizedigital.com/","name":"Equalize Digital","description":"Website Accessibility Consulting, Training, and Development","publisher":{"@id":"https://equalizedigital.com/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://equalizedigital.com/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https://equalizedigital.com/#organization","name":"Equalize Digital","url":"https://equalizedigital.com/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https://equalizedigital.com/#/schema/logo/image/","url":"https://equalizedigital.com/wp-content/uploads/2021/01/ED-Brand-FullColor-F_TM-V2.png","contentUrl":"https://equalizedigital.com/wp-content/uploads/2021/01/ED-Brand-FullColor-F_TM-V2.png","width":862,"height":313,"caption":"Equalize Digital"},"image":{"@id":"https://equalizedigital.com/#/schema/logo/image/"}},{"@type":"Person","@id":"https://equalizedigital.com/#/schema/person/48b846552d175121f8f63f35c7399344","name":"Equalize Digital","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https://equalizedigital.com/#/schema/person/image/","url":"https://secure.gravatar.com/avatar/31a282a697924328bd766eba9e906d2a?s=96&d=mm&r=g","contentUrl":"https://secure.gravatar.com/avatar/31a282a697924328bd766eba9e906d2a?s=96&d=mm&r=g","caption":"Equalize Digital"},"description":"Equalize Digital's team has specialized in WordPress accessibility for more than a decade. We offer accessibility audits, WordPress accessibility remediation, user testing, and build bespoke, accessibility-first websites. Our WordPress Accessibility Checker plugin is used by large and small businesses, nonprofits, higher ed, and government websites worldwide. Try it free today.","url":"https://equalizedigital.com/author/roadwarriorwp/"}]}</script>  <link rel='dns-prefetch' href='//use.fontawesome.com' /> <link rel='dns-prefetch' href='//cdnjs.cloudflare.com' /> <link rel="alternate" type="text/calendar" title="Equalize Digital » iCal Feed" href="https://equalizedigital.com/events/?ical=1" /> <link rel='stylesheet' id='tribe-events-pro-mini-calendar-block-styles-css' href='https://equalizedigital.com/wp-content/plugins/events-calendar-pro/src/resources/css/tribe-events-pro-mini-calendar-block.min.css?ver=7.0.2' type='text/css' media='all' /> <link rel='stylesheet' id='road-warrior-creative-base-theme-css' href='https://equalizedigital.com/wp-content/themes/accessible-web-pros/style.css?ver=1.0.8' type='text/css' media='all' /> <style id='road-warrior-creative-base-theme-inline-css' type='text/css'> .wp-custom-logo .site-container .title-area { max-width: 200px; } </style> <link rel='stylesheet' id='shared-counts-css' href='https://equalizedigital.com/wp-content/plugins/shared-counts/assets/css/shared-counts.min.css?ver=1.5.0' type='text/css' media='all' /> <link rel='stylesheet' id='wp-block-library-css' href='https://equalizedigital.com/wp-includes/css/dist/block-library/style.min.css?ver=6.6.1' type='text/css' media='all' /> <link rel='stylesheet' id='kioken-blocks-style-css' href='https://equalizedigital.com/wp-content/plugins/kioken-blocks/dist/blocks.style.build.css?ver=1.3.9' type='text/css' media='all' /> <style id='classic-theme-styles-inline-css' type='text/css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <style id='global-styles-inline-css' type='text/css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--color--yellow: #f3cd1e;--wp--preset--color--blue: #015798;--wp--preset--color--navy: #072446;--wp--preset--color--light-grey: #f3f4fe;--wp--preset--color--grey-body-copy: #353537;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 12px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 20px;--wp--preset--font-size--x-large: 42px;--wp--preset--font-size--normal: 18px;--wp--preset--font-size--larger: 24px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} </style> <link rel='stylesheet' id='srtf-blocks-editor-css-css' href='https://equalizedigital.com/wp-content/plugins/screen-reader-text-format/dist/main.css?ver=0.2' type='text/css' media='all' /> <link rel='stylesheet' id='searchandfilter-css' href='https://equalizedigital.com/wp-content/plugins/search-filter/style.css?ver=1' type='text/css' media='all' /> <link rel='stylesheet' id='ub-extension-style-css-css' href='https://equalizedigital.com/wp-content/plugins/ultimate-blocks/src/extensions/style.css?ver=6.6.1' type='text/css' media='all' /> <link rel='stylesheet' id='affwp-forms-css' href='https://equalizedigital.com/wp-content/plugins/affiliate-wp/assets/css/forms.min.css?ver=2.24.4' type='text/css' media='all' /> <link rel='stylesheet' id='uagb-block-css-css' href='https://equalizedigital.com/wp-content/uploads/uag-plugin/custom-style-blocks.css?ver=2.15.1' type='text/css' media='all' /> <link rel='stylesheet' id='rwc-base-fonts-css' href='https://equalizedigital.com/wp-content/cache/perfmatters/equalizedigital.com/fonts/90dc0aac8d03.google-fonts.min.css' type='text/css' media='all' /> <link rel='stylesheet' id='dashicons-css' href='https://equalizedigital.com/wp-includes/css/dashicons.min.css?ver=6.6.1' type='text/css' media='all' /> <link rel='stylesheet' id='rwc-font-awesome-css' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css?ver=1.0.8' type='text/css' media='all' /> <link rel='stylesheet' id='animate-css' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css?ver=1.0.8' type='text/css' media='all' /> <link rel='stylesheet' id='slick-css' href='https://equalizedigital.com/wp-content/themes/accessible-web-pros/assets/vendor/slick/slick.css?ver=6.6.1' type='text/css' media='all' /> <link rel='stylesheet' id='slick-theme-css' href='https://equalizedigital.com/wp-content/themes/accessible-web-pros/assets/vendor/slick/slick-theme.css?ver=6.6.1' type='text/css' media='all' /> <link rel='stylesheet' id='simple-social-icons-font-css' href='https://equalizedigital.com/wp-content/plugins/simple-social-icons/css/style.css?ver=3.0.2' type='text/css' media='all' /> <link rel='stylesheet' id='tablepress-default-css' href='https://equalizedigital.com/wp-content/plugins/tablepress/css/build/default.css?ver=2.4.1' type='text/css' media='all' /> <link rel='stylesheet' id='gform_basic-css' href='https://equalizedigital.com/wp-content/plugins/gravityforms/assets/css/dist/basic.min.css?ver=2.8.18' type='text/css' media='all' /> <link rel='stylesheet' id='gform_theme_components-css' href='https://equalizedigital.com/wp-content/plugins/gravityforms/assets/css/dist/theme-components.min.css?ver=2.8.18' type='text/css' media='all' /> <link rel='stylesheet' id='gform_theme_ie11-css' href='https://equalizedigital.com/wp-content/plugins/gravityforms/assets/css/dist/theme-ie11.min.css?ver=2.8.18' type='text/css' media='all' /> <link rel='stylesheet' id='gform_theme-css' href='https://equalizedigital.com/wp-content/plugins/gravityforms/assets/css/dist/theme.min.css?ver=2.8.18' type='text/css' media='all' /> <link rel='stylesheet' id='popup-maker-site-css' href='//equalizedigital.com/wp-content/uploads/pum/pum-site-styles-1.css?generated=1729116861&ver=1.19.1' type='text/css' media='all' /> <style id='block-visibility-screen-size-styles-inline-css' type='text/css'> /* Large screens (desktops, 992px and up) */ @media ( min-width: 992px ) { .block-visibility-hide-large-screen { display: none !important; } } /* Medium screens (tablets, between 768px and 992px) */ @media ( min-width: 768px ) and ( max-width: 991.98px ) { .block-visibility-hide-medium-screen { display: none !important; } } /* Small screens (mobile devices, less than 768px) */ @media ( max-width: 767.98px ) { .block-visibility-hide-small-screen { display: none !important; } } </style> <script type="text/javascript" src="https://equalizedigital.com/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script> <script type="text/javascript" src="https://equalizedigital.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id="jquery-migrate-js"></script> <script type="text/javascript" src="https://equalizedigital.com/wp-content/plugins/handl-utm-grabber/js/js.cookie.js?ver=6.6.1" id="js.cookie-js"></script> <script type="text/javascript" id="handl-utm-grabber-js-extra"> /* <![CDATA[ */ var handl_utm = []; /* ]]> */ </script> <script type="text/javascript" src="https://equalizedigital.com/wp-content/plugins/handl-utm-grabber/js/handl-utm-grabber.js?ver=6.6.1" id="handl-utm-grabber-js"></script> <script type="text/javascript" id="jquery-cookie-js-extra"> /* <![CDATA[ */ var affwp_scripts = {"ajaxurl":"https:\/\/equalizedigital.com\/wp-admin\/admin-ajax.php"}; /* ]]> */ </script> <script type="text/javascript" src="https://equalizedigital.com/wp-content/plugins/affiliate-wp/assets/js/jquery.cookie.min.js?ver=1.4.0" id="jquery-cookie-js"></script> <script type="text/javascript" id="affwp-tracking-js-extra"> /* <![CDATA[ */ var affwp_debug_vars = {"integrations":{"edd":"Easy Digital Downloads"},"version":"2.24.4","currency":"USD","ref_cookie":"affwp_ref","visit_cookie":"affwp_ref_visit_id","campaign_cookie":"affwp_campaign"}; /* ]]> */ </script> <script type="text/javascript" src="https://equalizedigital.com/wp-content/plugins/affiliate-wp/assets/js/tracking.min.js?ver=2.24.4" id="affwp-tracking-js"></script> <script type="text/javascript" defer='defer' src="https://equalizedigital.com/wp-content/plugins/gravityforms/js/jquery.json.min.js?ver=2.8.18" id="gform_json-js"></script> <script type="text/javascript" id="gform_gravityforms-js-extra"> /* <![CDATA[ */ var gf_global = {"gf_currency_config":{"name":"U.S. Dollar","symbol_left":"$","symbol_right":"","symbol_padding":"","thousand_separator":",","decimal_separator":".","decimals":2,"code":"USD"},"base_url":"https:\/\/equalizedigital.com\/wp-content\/plugins\/gravityforms","number_formats":[],"spinnerUrl":"https:\/\/equalizedigital.com\/wp-content\/plugins\/gravityforms\/images\/spinner.svg","version_hash":"03078a7566414b3b98e30e6ccd255d14","strings":{"newRowAdded":"New row added.","rowRemoved":"Row removed","formSaved":"The form has been saved. The content contains the link to return and complete the form."}}; var gf_global = {"gf_currency_config":{"name":"U.S. Dollar","symbol_left":"$","symbol_right":"","symbol_padding":"","thousand_separator":",","decimal_separator":".","decimals":2,"code":"USD"},"base_url":"https:\/\/equalizedigital.com\/wp-content\/plugins\/gravityforms","number_formats":[],"spinnerUrl":"https:\/\/equalizedigital.com\/wp-content\/plugins\/gravityforms\/images\/spinner.svg","version_hash":"03078a7566414b3b98e30e6ccd255d14","strings":{"newRowAdded":"New row added.","rowRemoved":"Row removed","formSaved":"The form has been saved. The content contains the link to return and complete the form."}}; var gf_global = {"gf_currency_config":{"name":"U.S. Dollar","symbol_left":"$","symbol_right":"","symbol_padding":"","thousand_separator":",","decimal_separator":".","decimals":2,"code":"USD"},"base_url":"https:\/\/equalizedigital.com\/wp-content\/plugins\/gravityforms","number_formats":[],"spinnerUrl":"https:\/\/equalizedigital.com\/wp-content\/plugins\/gravityforms\/images\/spinner.svg","version_hash":"03078a7566414b3b98e30e6ccd255d14","strings":{"newRowAdded":"New row added.","rowRemoved":"Row removed","formSaved":"The form has been saved. The content contains the link to return and complete the form."}}; var gform_i18n = {"datepicker":{"days":{"monday":"Mo","tuesday":"Tu","wednesday":"We","thursday":"Th","friday":"Fr","saturday":"Sa","sunday":"Su"},"months":{"january":"January","february":"February","march":"March","april":"April","may":"May","june":"June","july":"July","august":"August","september":"September","october":"October","november":"November","december":"December"},"firstDay":0,"iconText":"Select date"}}; var gf_legacy_multi = {"45":"","15":""}; var gform_gravityforms = {"strings":{"invalid_file_extension":"This type of file is not allowed. Must be one of the following:","delete_file":"Delete this file","in_progress":"in progress","file_exceeds_limit":"File exceeds size limit","illegal_extension":"This type of file is not allowed.","max_reached":"Maximum number of files reached","unknown_error":"There was a problem while saving the file on the server","currently_uploading":"Please wait for the uploading to complete","cancel":"Cancel","cancel_upload":"Cancel this upload","cancelled":"Cancelled"},"vars":{"images_url":"https:\/\/equalizedigital.com\/wp-content\/plugins\/gravityforms\/images"}}; /* ]]> */ </script> <script type="text/javascript" defer='defer' src="https://equalizedigital.com/wp-content/plugins/gravityforms/js/gravityforms.min.js?ver=2.8.18" id="gform_gravityforms-js"></script> <script type="text/javascript" defer='defer' src="https://equalizedigital.com/wp-content/plugins/gravityforms/assets/js/dist/utils.min.js?ver=50c7bea9c2320e16728e44ae9fde5f26" id="gform_gravityforms_utils-js"></script>  <script type="pmdelayedscript" data-perfmatters-type="text/javascript" data-cfasync="false" data-no-optimize="1" data-no-defer="1" data-no-minify="1"> jQuery(function($){ // mailto function $('a[href^="mailto:"]').click(function(){ ga('send','event','mailto','click','email clicked'); return true; }); }); jQuery(function($){ // tel function $('a[href^="tel:"]').click(function(){ ga('send','event','tel','click','phone clicked'); return true; }); }); </script><meta name="facebook-domain-verification" content="a35nih95l5jaoddlry38yfqaju5drb" />  <script> !function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window, document,'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '445194393567953'); fbq('track', 'PageView'); </script> <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=445194393567953&ev=PageView&noscript=1" /></noscript>    <script async src="https://www.googletagmanager.com/gtag/js?id=AW-11373621978" type="pmdelayedscript" data-cfasync="false" data-no-optimize="1" data-no-defer="1" data-no-minify="1"></script> <script type="pmdelayedscript" data-cfasync="false" data-no-optimize="1" data-no-defer="1" data-no-minify="1"> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'AW-11373621978'); </script>   <script> (function(h,o,t,j,a,r){ h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)}; h._hjSettings={hjid:2026314,hjsv:6}; a=o.getElementsByTagName('head')[0]; r=o.createElement('script');r.async=1; r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv; a.appendChild(r); })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv='); </script>  <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "SoftwareApplication", "name": "Equalize Digital Accessibility Checker", "operatingSystem": "WordPress", "applicationCategory": "UtilitiesApplication", "aggregateRating": { "@type": "AggregateRating", "ratingValue": "5.0", "ratingCount": "46" }, "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" } } </script> <style></style> <script type="text/javascript"> var AFFWP = AFFWP || {}; AFFWP.referral_var = 'ref'; AFFWP.expiration = 30; AFFWP.debug = 0; AFFWP.cookie_domain = '.equalizedigital.com'; AFFWP.referral_credit_last = 1; </script> <meta name="tec-api-version" content="v1"><meta name="tec-api-origin" content="https://equalizedigital.com"><link rel="alternate" href="https://equalizedigital.com/wp-json/tribe/events/v1/" /><style id="uagb-style-conditional-extension">@media (min-width: 1025px){body .uag-hide-desktop.uagb-google-map__wrap,body .uag-hide-desktop{display:none !important}}@media (min-width: 768px) and (max-width: 1024px){body .uag-hide-tab.uagb-google-map__wrap,body .uag-hide-tab{display:none !important}}@media (max-width: 767px){body .uag-hide-mob.uagb-google-map__wrap,body .uag-hide-mob{display:none !important}}</style><style id="uagb-style-frontend-5767">.uagb-block-d62489e0.uagb-section__wrap{padding-top: 20px;padding-bottom: 20px;padding-left: 20px;padding-right: 20px;margin-top: 0px;margin-bottom: 40px;border-style: none;margin-right: auto;margin-left: auto;max-width: 900px;}.uagb-block-d62489e0 > .uagb-section__video-wrap{opacity: 0.5;}.uagb-block-d62489e0 > .uagb-section__inner-wrap{max-width: 100%;}.uagb-block-d62489e0.wp-block-uagb-section{box-shadow: 0px 0px ;}.uagb-block-d62489e0 > .uagb-section__overlay{background-color: #f3f4fe;border-radius: ;}@media only screen and (max-width: 976px) {.uagb-block-d62489e0.uagb-section__wrap{border-style: none;}}@media only screen and (max-width: 767px) {.uagb-block-d62489e0.uagb-section__wrap{border-style: none;}}</style><link rel="icon" href="https://equalizedigital.com/wp-content/uploads/2020/09/cropped-Equalize-Digital-Accessibility-Emblem-1-32x32.png" sizes="32x32" /> <link rel="icon" href="https://equalizedigital.com/wp-content/uploads/2020/09/cropped-Equalize-Digital-Accessibility-Emblem-1-192x192.png" sizes="192x192" /> <link rel="apple-touch-icon" href="https://equalizedigital.com/wp-content/uploads/2020/09/cropped-Equalize-Digital-Accessibility-Emblem-1-180x180.png" /> <meta name="msapplication-TileImage" content="https://equalizedigital.com/wp-content/uploads/2020/09/cropped-Equalize-Digital-Accessibility-Emblem-1-270x270.png" /> <style type="text/css" id="wp-custom-css"> .wp-block-buttons.aligncenter { text-align: center; justify-content: center; } .large-callout h2 { font-weight: 400; line-height: 1; margin-bottom: 0; } .large-callout p { line-height: 1; } .p-boxed { border-radius: 5px; box-shadow: 0 15px 35px rgba(50,50,93,0.1), 0 5px 15px rgba(0,0,0,0.09); } hr.wp-block-separator { border-top:4px solid; margin: 3em auto; } .single-post li { margin-bottom: 10px; } img.img-plain, .img-plain img { border-radius: 0; box-shadow: none; } .has-light-grey-background-color { background-color: #f3f4fe; } .client-logo { max-height: 45px; margin: 10px; } .footer-widgets .wrap { border-top: none; } @media only screen and (max-width: 1200px) { .check-list { -webkit-columns: 1; -moz-columns: 1; columns: 1; text-align:center; } } .uagb-team__title { font-size: 24px; margin-bottom: 0; } .uagb-team__prefix { Color: #353537 !important; font-style:normal !important; font-size: 18px !important; } .shared-counts-wrap.style-fancy .shared-counts-button { margin: 5px; } .shared-counts-wrap.style-fancy .shared-counts-button.included_total .shared-counts-label, .shared-counts-wrap.style-fancy .shared-counts-button.included_total { color: #072446 !important; font-size: 11px; } .shared-counts-wrap.style-fancy .shared-counts-button.included_total svg { fill: #072446 !important; } .shared-counts-wrap.after_content.style-fancy a { text-decoration: none; } .shared-counts-wrap.style-fancy .twitter.shared-counts-button, .shared-counts-wrap.style-slim .twitter.shared-counts-button, .shared-counts-wrap.style-classic .twitter.shared-counts-button, .shared-counts-wrap.style-block .twitter.shared-counts-button, .shared-counts-wrap.style-rounded .twitter.shared-counts-button, .shared-counts-wrap.style-buttons .twitter.shared-counts-button, .shared-counts-wrap.style-bar .twitter.shared-counts-button:not(.included_total) { background-color: #007EA8; } .offset-gallery-block video { border-radius:5px; box-shadow: 0 15px 35px rgba(50,50,93,0.1), 0 5px 15px rgba(0,0,0,0.09); } .table-of-contents-block { box-shadow: 0 0 15px 2px rgba(7,36,70,0.1) !important; border-radius: 5px !important; background-color: #ffffff; border-top: none !important; border-left: none !important; border-right: none !important; border-bottom: 8px solid #F3CD1E !important; padding: 30px 30px !important; font-size: 16px; font-weight: 400; letter-spacing: 0.3px; line-height: 24px; padding-top: 13px; width: 100% !important; max-width:100% !important; margin-bottom: 40px; } .table-of-contents-block .uagb-section__overlay { border-radius: 5px; } .table-of-contents-block h2 { font-size: 20px; } .table-of-contents-block .ub_table-of-contents { background: none; border: none; padding:0; margin-bottom: 0 } .single-post .site-inner img, .single-a11y-checker .site-inner img { margin-bottom: 20px; } h4 { font-size: 18px; } h3 { font-size: 22px; } .wp-block-code { background-color: #f3f4fe; padding: 5px 16px; border-radius:5px; margin: 0 0 30px; } .highlight { background: #F3CD1E; color: #072446; } .screen-reader-shortcut, .screen-reader-text, .screen-reader-text span { background-color: #f3f4fe !important; } #gform_8 { max-width: 600px !important; } #gform_8 .gfield_label, .free-risk-assessment .gform_wrapper .gform_footer { text-align: center !important; width: 100%; } #gform_8 .gfield_required { display: none; } .partial_entry_warning { display: none; } th { font-weight: 700; } .drop-shadow figure img, .drop-shaddow { box-shadow: 0 0 15px 2px rgba(7,36,70,0.1) !important; } .border-radius figure img, .border-radius { border-radius: 5px !important; } .single-a11y-checker .awp-custom-hero { left: 0; right: 0; margin: 0; padding: 60px 0 0; text-align:left; width: 100%; } .single-a11y-checker .breadcrumb, .single-a11y-checker h1 { text-align:left; } .ed-side-label { font-weight:700; font-size: 18px; } .single-a11y-checker .sidebar h3 { font-size: 18px; font-weight: 700; } .searchandfilter #searchfield { width: 100%; padding: 10px !important; } #custom_html-8 { box-shadow: 0 0 15px 2px rgba(7,36,70,0.1) !important; border-radius: 5px; overflow: hidden; border-bottom: 8px solid #f3cd1e; } #custom_html-8 h3 { padding: 20px; text-align: center; background: #006600; color: #fff; border-radius: 5px 5px 0 0 !important; font-size: 22px; } #custom_html-8 ul { padding: 0 10px; } #custom_html-8 li { border-bottom: 2px solid #f3f4fe; padding-bottom: 8px; padding-left: 28px; } #custom_html-8 .checked-list>li:before { height: 21px; width: 21px; margin-right: 18px; left: 0px; top: 0px; } #custom_html-8 p { padding: 10px; font-size: 14px; margin-bottom: 0; } #custom_html-8 a.secondary-button { margin: 0 0px 10px; } .ac-meta { margin-bottom: 20px; overflow: hidden; } .ac-meta .notice-type, .ac-meta .levels { float: left; margin: 0 10px 10px 0; font-weight: 700; padding-top: 5px; } .ac-meta .notice-type .error { background: #b30f0f; color: #fff; padding: 5px; border-radius:5px } .ac-meta .notice-type .warning { background: #f3cd1e; color: #072446; padding: 5px; border-radius:5px } .offset-list .list-block h3 { font-size: 20px; line-height: 24px; margin-bottom: 10px; margin-top: 10px; } @media only screen and (min-width: 1024px) { .single-a11y-checker .content-sidebar-wrap .sidebar { padding-left: 40px; margin-top: 100px; border-left: 2px solid #f3f4fe; margin-left: 2%; width: 27%; } } .page-id-4090 article { margin-bottom: 0; } /** Above Header Styles **/ .page-id-5257 .above-header { display: none; } .above-header { padding:10px; text-align: center; background: #072446; color: #fff; font-size: 16px; } .above-header a { color: #f3cd1e; } .above-header a:focus { outline: 2px solid #fff; } .above-header .widget { margin-bottom: 0; } .admin-bar .site-header.scroll { top:32px; } .site-header.scroll { top:0; } .blocks-gallery-grid.is-cropped .blocks-gallery-image a, .blocks-gallery-grid.is-cropped .blocks-gallery-image img, .blocks-gallery-grid.is-cropped .blocks-gallery-item a, .blocks-gallery-grid.is-cropped .blocks-gallery-item img, .wp-block-gallery.is-cropped .blocks-gallery-image a, .wp-block-gallery.is-cropped .blocks-gallery-image img, .wp-block-gallery.is-cropped .blocks-gallery-item a, .wp-block-gallery.is-cropped .blocks-gallery-item img { height: auto !important; width: 100% !important; flex: none; object-fit: unset; border-radius: 5px !important; display: block; box-shadow: 0 0 15px 2px rgba(7,36,70,.1) !important; } .blocks-gallery-grid .blocks-gallery-image figure, .blocks-gallery-grid .blocks-gallery-item figure, .wp-block-gallery .blocks-gallery-image figure, .wp-block-gallery .blocks-gallery-item figure { display: block !important; align-items: normal !important; justify-content: left !important; } .blocks-gallery-grid .blocks-gallery-image figcaption, .blocks-gallery-grid .blocks-gallery-item figcaption, .wp-block-gallery .blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption { position: relative !important; display: block !important; clear: both !important; bottom: auto !important; width: 100% !important; max-height: 100% !important; overflow: auto; padding: 5px; margin-top: 14px; margin-bottom: 20px; color: #072446 !important; text-align: left !important; font-size: 16px !important; background: #fff !important; } .wp-block-audio figcaption, .wp-block-embed figcaption, .wp-block-image figcaption { color: #015798 !important; font-size: 16px !important; font-style: italic; margin-bottom: 30px !important; margin-top: 10px !important; } .wp-block-gallery.has-nested-images figure.wp-block-image figcaption { background: none !important; position: relative !important; text-align: left !important; margin-top: 0 !important; } .site-footer { max-width: 1197px; margin: 0 auto; padding: 20px 0; } .site-footer p { float:left; margin-top: 20px } .cert-logos { float: right; } .cert-logos img { width: 40px; } #gfield_description_16_5 ul li { list-style-type: disc !important; } @media only screen and (max-width: 1024px) { .site-footer { margin: 0 30px; padding: 20px } .cert-logos, .site-footer p { float: none; } } @media only screen and (max-width: 800px) { .mobile-hide { display: none; } .blocks-gallery-grid.columns-3 .blocks-gallery-image, .blocks-gallery-grid.columns-3 .blocks-gallery-item, .wp-block-gallery.columns-3 .blocks-gallery-image, .wp-block-gallery.columns-3 .blocks-gallery-item { width: 100% !important; margin-right: 0 !important; } } .why-benefits .why-benefits-content a { color: #f3cd1e; } .why-benefits .why-benefits-content .benefit-text-inner-wrap a { color: #0d5f9d; } .why-benefits .why-benefits-content a:hover { color: #fff; } .why-benefits .why-benefits-content .benefit-text-inner-wrap a:hover { color: #000; } .why-benefits .why-benefits-content .benefit-text-inner-wrap a:focus { outline: 2px solid #0d5f9d; } .why-benefits .why-benefits-content a:focus { outline: 2px solid #fff; } .single-post .entry-content img { margin-bottom: 40px; } .single-post .wp-block-kioken-accordion .kioken-accordion-item-active .kioken-accordion-item-content { border-bottom: 1px solid #cccdce; } .entry-content .wp-block-kioken-accordion { margin-bottom: 30px; } @media (min-width: 768px) { h1 { font-size: 50px; } } @media only screen and (max-width: 1325px) { .entry-meta .one-third { width: 33%; float: left; margin: 0; } .home-h1 { font-size: 40px !important; } } @media only screen and (max-width: 1024px) { .home-hero .inner-column-1 { max-width: 535px; text-align: left; margin-bottom: 50px; } } @media only screen and (max-width: 450px) { .entry-meta .one-third { width: 100%; float: none; text-align: left !important; padding-top: 5px; overflow: hidden; } .home-h1 { font-size: 28px !important; } } .gform_wrapper.gravity-theme .gf_progressbar_title { color: #545454; } .gform_wrapper.gravity-theme .gf_progressbar_percentage.percentbar_0 span { color: #000; } .page-id-5257 .site-inner { margin-top: 20px; } .wp-block-button.secondary-button .wp-block-button__link { margin-top: 18px; } /** Sales Docs **/ .tax_sales-docs .breadcrumb, .tax_sales-docs h1 { text-align: center; } .features-table { border-radius: 5px; position:relative; background:#fff; z-index: 999; } @media only screen and (max-width: 600px) { .features-table { font-size: 13px; line-height: 20px; } } .features-table tr:first-child th { font-weight: 700; background-color: #015798; color: #fff; border-top: 0; position: sticky; top: 112px; } .admin-bar .features-table tr:first-child th { top: 142px; } @media only screen and (max-width: 1096px) { .features-table tr:first-child th {top:0; } .admin-bar .features-table tr:first-child th { top: 42px; } } .features-table th, .features-table td { border: 1px solid #ddd; padding: 5px 10px; } .features-table td, .features-table .th-center { text-align:center; } .fa-check { color: #006600; } .fa-times { color: #b30f0f; } /** pricing table **/ .tax_sales-docs .wp-block-kioken-tabs .kioken-tabs-buttons { border-radius:30px; background-color: #f3f4fe; width: 265px; margin: 0 auto; border: 2px solid #f3f4fe; } .tax_sales-docs .wp-block-kioken-tabs .kioken-tabs-buttons>.kioken-tabs-buttons-item { opacity: 1; width: 130px; background-color: #f3f4fe00; text-align: center; } .tax_sales-docs .wp-block-kioken-tabs .kioken-tabs-buttons>.kioken-tabs-buttons-item:first-of-type { border-bottom-left-radius:30px !important; border-top-left-radius:30px !important; margin-right: 1px !important; } .tax_sales-docs .wp-block-kioken-tabs .kioken-tabs-buttons>.kioken-tabs-buttons-item:last-of-type { border-bottom-right-radius:30px !important; border-top-right-radius:30px !important; } .tax_sales-docs .wp-block-kioken-tabs .kioken-tabs-buttons>.kioken-tabs-buttons-item:hover, .tax_sales-docs .wp-block-kioken-tabs .kioken-tabs-buttons>.kioken-tabs-buttons-item:focus, .tax_sales-docs .kioken-tabs-buttons-item-active { border-radius:30px !important; border-color: #072446 !important; } .tax_sales-docs .kioken-tabs-buttons-item-active:hover { background-color: #072446 !important; color: #F3CD1E !important; text-decoration: none !important; } .wp-block-spacer.features { background: #fff; margin-top: -100px; width: 100%; position: absolute; width: calc( 100vw * 2); margin-left: -50vw; margin-right: -50vw; z-index: 99; } .tax_sales-docs .wp-block-kioken-tabs .kioken-tabs-buttons>.kioken-tabs-buttons-item:hover { text-decoration: underline; border-color: #072446 !important; } .pricingtable .checked-list { margin-top: 30px; font-size: 16px; } .box-shadow { box-shadow:0 0 15px 2px rgb(7 36 70 / 10%); } .no-shadow img { box-shadow: none !important; border-radius: 0; } .smallnote { text-align: center; font-size: 15px; margin-bottom: 0px } .pt-smallbiz { margin-left: -5px; margin-right:-5px; z-index: 999; display:block; padding: 0 !important; } .pt-smallbiz .mostpop { padding: 10px !important; } .pt-smallbiz .uagb-column__inner-wrap { padding: 0 !important; } .pt-smallbiz h3 { margin-top: 20px; } .pt-smallbiz h3, .pt-smallbiz .price, .pt-smallbiz .smallnote, .pt-smallbiz .wp-block-buttons, .pt-smallbiz .checked-list { padding-left: 30px; padding-right: 30px; } .pt-smallbiz .checked-list { margin-bottom: 30px; } .pricingtable .price { text-align: center; color: #18609d; font-weight:700; font-family: "Open Sans",sans-serif; font-size: 24px; margin-bottom: 0; } .pricingtable .price .number { font-size: 32px; } .pricingtable .wp-block-buttons { margin-top:30px; } .pricingtable .checked-list { margin-bottom: 0; } @media only screen and (max-width: 980px) { .uagb-columns__columns-4>.uagb-column__wrap { margin-bottom: 10px; } .pt-smallbiz { margin-top: 0 !important; margin-bottom: 10px !important; margin-left: 0 !important; margin-right:0 !important; } } /** Pricing Page modifications **/ .postid-5436 .awp-custom-hero h1, .postid-5436 .before-footer-widgets { display:none !important; } .testimonial-name { font-weight: 700; color: #18609d; font-size: 18px; } /** New Contact Page **/ .page-id-5492 .awp-custom-hero-image { display: none; } @media only screen and (min-width: 1328px) { .page-id-5492 .awp-custom-hero-content { max-width: 600px !important; } } @media only screen and (min-width: 975px) { .page-id-5492 .awp-custom-hero-content { max-width: 500px !important; } } .page-id-5492 .awp-custom-hero-wrap { padding-left: 5px; max-width: 1200px; } .page-id-5492 .uagb-block-25ef0763 .uagb-column__inner-wrap { padding:0; } /** Soliloquy **/ .soliloquy-container .soliloquy-next { right: -28px !important; background-color: #18609d !important; border-radius: 50%; } .soliloquy-container .soliloquy-prev { left: -28px !important; background-color: #18609d !important; border-radius: 50%; } .soliloquy-container .soliloquy-controls-auto-item { bottom: -45px !important; } .soliloquy-container .soliloquy-start, .soliloquy-container .soliloquy-stop { background-color: #072446 !important; width: 80px !important; background-position: 15% 50% !important; border-radius: 5px; } .soliloquy-container .soliloquy-stop::after { content:"Pause"; color: #fff; font-size: 15px; font-weight: 700; left: 27px; position:absolute; top: 9px; width: 50px; } .soliloquy-container .soliloquy-start { background-size: 12px 14px !important; } .soliloquy-container .soliloquy-start::after { content:"Play"; color: #fff; font-size: 15px; font-weight: 700; left: 32px; position:absolute; top: 9px; width: 50px; } .soliloquy-container .soliloquy-next:focus, .soliloquy-container .soliloquy-prev:focus{ background-color: #072446 !important; border: 3px solid #f3cd1f; } .soliloquy-container .soliloquy-start:focus, .soliloquy-container .soliloquy-stop:focus { background-color: #18609d !important; border: 3px solid #f3cd1f; } .soliloquy-viewport::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: -moz-linear-gradient(left,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 10%,rgba(255,255,255,0) 90%,rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(left,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 10%,rgba(255,255,255,0) 90%,rgba(255,255,255,1) 100%); background: linear-gradient(to right,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 10%,rgba(255,255,255,0) 90%,rgba(255,255,255,1) 100%); } /** AC Page Boxed List mods **/ .boxed-list-block.ac-main-page li { height: auto; max-width: 350px; flex: none; } .boxed-list-block.ac-main-page h3 { margin-top: 10px } .boxed-list-block.ac-main-page p { font-size: 16px; font-weight: 400; } /** vertical center elements in column **/ .vertical-center { display:flex; flex-direction: column; justify-content: center; } .before-footer-widgets { display: none; } /** Fix problem related to UAG plugin updates that was overriding the full width CSS **/ .alignfull { margin-left: calc(-100vw / 2 + 100% / 2) !important; margin-right: calc(-100vw / 2 + 100% / 2) !important; max-width: 100vw !important; } /** Post WP Engine Migration CSS fixes */ .awp-services .one-third img, .awp-industries .one-third img { max-width:44px; } .video-testimonials .logo img { width: auto; } /** Pricing Table Styles **/ .ed-pricing-table h3 { margin-bottom: 0; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -o-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; padding-bottom: 5px !important; position: relative; } .ed-pricing-table .pricing-info { padding: 0 10px 10px !important; margin-bottom: 0; font-size: 15px; min-height:60px; } .ed-pricing-table .checked-list>li:before { content: url(https://equalizedigital.com/wp-content/themes/accessible-web-pros/assets/images/list-check.png); height: 21px; width: 21px; margin-right: 18px; display: inline-block; vertical-align: middle; line-height: normal; position: absolute; top: 8px; left: 10px; } .ed-pricing-table .checked-list>li { padding-left: 38px !important; margin-bottom: 0; background: #fff; } /** Align Wide Fix **/ .alignwide.ub-block-post-grid { width: 1200px; margin-left: calc( (100% - 1200px ) / 2); margin-right: calc( (100% - 1200px ) / 2); max-width: 1200px; padding-right: 0 !important; padding-left: 0 !important; } /** TEC fix on Meetup Page **/ .page-id-5286 .tribe-events-widget-events-list__event-title { font-size: 17px !important; } .page-id-5286 .tribe-events-calendar-series-archive__container { display: none; } @media (max-width: 768px) { .modaal-video-wrap { margin: auto 0; } } @media (max-width: 781px) { .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column { flex-basis: 100%!important; width: 100% !important; } } .button-list { margin-left: 0 !important; padding-left: 0; } .button-list li { list-style-type: none !important; display: block; margin-bottom: 20px; margin-left: 0; } .button-list li a { width: 100%; padding: 10px; border: 2px solid; border-radius: 5px; display: block; text-decoration: none } .button-list li a:hover { background: #F4CC1C; } .wp-block-audio figcaption, .wp-block-embed figcaption, .wp-block-image figcaption { margin-top: -18px !important; } .author-box .avatar { background: #fff; box-shadow: none !important; border-radius: 50% !important; } .author-box h4 { display:none; } /** Fix Table Row Header styles **/ th[scope='row'] { padding: 6px; border-top: 1px solid #F3CD1E; text-align: left; font-weight: 400; } /** Fix GF Consent checkbox alignment **/ #gform_wrapper_44 .gfield-choice-input+label { vertical-align: top; } /** Hide Share count number **/ .shared-counts-wrap.style-fancy .shared-counts-button .shared-counts-count {display: none;} .shared-counts-wrap.style-fancy .shared-counts-button .fa-external-link-alt { padding-top: 8px; } /** Page Builder Ranking Table Styles **/ .page-builder-rank-table th, .results-list th { font-size: 0.9em !important; line-height: 1.1em; background-color: #fff; vertical-align: bottom; text-align: center; border-color: #015798; border: 1px solid #015798; border-collapse: collapse; padding:.5rem; } .page-builder-rank-table th.column-11 { border-right:2px solid #015798; } .page-builder-rank-table th:first-of-type { text-align:left; } .page-builder-rank-table .row-hover th { font-weight: 400; } .results-list td, .results-list tbody, .page-builder-rank-table td, .page-builder-rank-table tbody { border-color: #015798; border: 1px solid #015798; text-align:center; border-collapse: collapse; padding: .5rem; } .results-list img, .page-builder-rank-table img { border-radius:0 !important; margin-bottom: 0 !important; box-shadow: none !important; height: 40px !important; width: auto !important; } .results-list { max-width:400px; margin: 0 0 1rem; } .ub_table-of-contents-header-container { display: none; } .ub_table-of-contents-container li { margin-bottom: 4px; } /** Hide the popup title visually */ #pum_popup_title_8042 { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; } .footer-widgets .genesis-sidebar-title { background-color: #000 !important; } .site-header-menu { padding-top: 0; } #nav-primary.toggled-on { padding-top: 10px; } .shared-counts-button .screen-reader-text { background-color: #000 !important; } #kt-layout-id_ce7add-7d, #kt-layout-id_fdd8bf-a1, #kt-layout-id_b542a2-a2{ background-color: #015798 !important; } .footer-wrap a:hover { text-decoration:underline; } /** Adjust spacing on contact page */ .page-id-5492 </style> <style type="text/css" media="all" id="kioken-blocks-frontend"></style><noscript><style>.perfmatters-lazy[data-src]{display:none !important;}</style></noscript></head> <body class="post-template-default single single-post postid-5767 single-format-standard wp-custom-logo wp-embed-responsive affwp-affiliate-area tribe-no-js is_IE full-width-content genesis-breadcrumbs-visible genesis-footer-widgets-visible has-thumbnail first-block-core-paragraph"><div class="site-container"><ul class="genesis-skip-link"><li><a href="#genesis-content" class="screen-reader-shortcut"> Skip to main content</a></li><li><a href="#genesis-footer-widgets" class="screen-reader-shortcut"> Skip to footer</a></li></ul><header class="site-header"><div class="wrap"><div class="title-area"><a href="https://equalizedigital.com/" class="custom-logo-link" rel="home"><img width="1" height="1" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1'%20height='1'%20viewBox='0%200%201%201'%3E%3C/svg%3E" class="custom-logo wp-image-6502 perfmatters-lazy" alt="Equalize Digital Home" decoding="async" data-src="https://equalizedigital.com/wp-content/uploads/2022/11/Equalize-Digital-color-logo.svg" /><noscript><img width="1" height="1" src="https://equalizedigital.com/wp-content/uploads/2022/11/Equalize-Digital-color-logo.svg" class="custom-logo wp-image-6502" alt="Equalize Digital Home" decoding="async" /></noscript></a><p class="site-title">Equalize Digital</p><p class="site-description">Website Accessibility Consulting, Training, and Development</p></div><div class="widget-area header-widget-area"><section id="nav_menu-8" class="widget widget_nav_menu"><div class="widget-wrap"><nav class="nav-header"><ul id="menu-above-header" class="menu genesis-nav-menu js-superfish"><li id="menu-item-4959" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4959"><a href="https://my.equalizedigital.com/"><span >My Account</span></a></li> <li id="menu-item-4958" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4958"><a href="https://my.equalizedigital.com/checkout/"><span ><i class="fas fa-shopping-cart" aria-hidden="true"></i> <span class="screen-reader-text">Checkout</span></span></a></li> </ul></nav></div></section> </div> <div class="menu-container"> <div id="site-header-menu" class="site-header-menu"> <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="Primary Menu"> <button class="menu-button" aria-controls="nav-primary" aria-label="Menu"><span class="screen-reader-text">Menu</span></button> <div id="nav-primary" class="nav-primary"><ul id="primary-menu" class="menu"><li id="menu-item-2115" class="menu-item menu-item-type-post_type_archive menu-item-object-service menu-item-has-children menu-item-2115"><a href="https://equalizedigital.com/services/">Services</a> <ul class="sub-menu"> <li id="menu-item-2117" class="menu-item menu-item-type-post_type menu-item-object-service menu-item-2117"><a href="https://equalizedigital.com/services/accessible-website-development/">Bespoke Websites</a></li> <li id="menu-item-2119" class="menu-item menu-item-type-post_type menu-item-object-service menu-item-2119"><a href="https://equalizedigital.com/services/website-accessibility-audit/">Accessibility Audits</a></li> <li id="menu-item-2122" class="menu-item menu-item-type-post_type menu-item-object-service menu-item-2122"><a href="https://equalizedigital.com/services/web-accessibility-user-testing/">User Testing</a></li> <li id="menu-item-2121" class="menu-item menu-item-type-post_type menu-item-object-service menu-item-2121"><a href="https://equalizedigital.com/services/website-accessibility-remediation/">Accessibility Remediation</a></li> <li id="menu-item-2118" class="menu-item menu-item-type-post_type menu-item-object-service menu-item-2118"><a href="https://equalizedigital.com/services/website-accessibility-monitoring/">Accessibility Monitoring</a></li> <li id="menu-item-2120" class="menu-item menu-item-type-post_type menu-item-object-service menu-item-2120"><a href="https://equalizedigital.com/services/website-accessibility-training/">Web Accessibility Training</a></li> <li id="menu-item-4957" class="menu-item menu-item-type-post_type menu-item-object-service menu-item-4957"><a href="https://equalizedigital.com/services/accessibility-for-agencies/">Accessibility for Agencies</a></li> </ul> </li> <li id="menu-item-4834" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4834"><a href="https://equalizedigital.com/accessibility-checker">Accessibility Checker</a> <ul class="sub-menu"> <li id="menu-item-6250" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6250"><a href="https://equalizedigital.com/accessibility-checker/">Overview</a></li> <li id="menu-item-5684" class="menu-item menu-item-type-post_type menu-item-object-a11y-checker menu-item-5684"><a href="https://equalizedigital.com/accessibility-checker/features/">Features</a></li> <li id="menu-item-5682" class="menu-item menu-item-type-post_type menu-item-object-a11y-checker menu-item-5682"><a href="https://equalizedigital.com/accessibility-checker/pricing/">Pricing</a></li> <li id="menu-item-5683" class="menu-item menu-item-type-post_type menu-item-object-a11y-checker menu-item-5683"><a href="https://equalizedigital.com/accessibility-checker/documentation/">Documentation</a></li> <li id="menu-item-4948" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4948"><a href="https://equalizedigital.com/support/">Support</a></li> <li id="menu-item-5685" class="menu-item menu-item-type-post_type menu-item-object-a11y-checker menu-item-5685"><a href="https://equalizedigital.com/accessibility-checker/pricing/">Buy Now</a></li> </ul> </li> <li id="menu-item-2132" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2132"><a href="https://equalizedigital.com/about/">Company</a> <ul class="sub-menu"> <li id="menu-item-2135" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2135"><a href="https://equalizedigital.com/about/">About Us</a></li> <li id="menu-item-6727" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6727"><a href="https://equalizedigital.com/about/team/">Our Team</a></li> <li id="menu-item-4839" class="menu-item menu-item-type-post_type_archive menu-item-object-industry menu-item-4839"><a href="https://equalizedigital.com/industries/">Industry Expertise</a></li> <li id="menu-item-2131" class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-2131"><a href="https://equalizedigital.com/resources/">Blog</a></li> <li id="menu-item-5965" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5965"><a href="https://equalizedigital.com/wordpress-accessibility-meetup/">WordPress Accessibility Meetup</a></li> <li id="menu-item-2160" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2160"><a href="https://equalizedigital.com/about/accessibility-statement/">Accessibility Statement</a></li> <li id="menu-item-5681" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5681"><a href="https://equalizedigital.com/contact/">Contact Sales</a></li> <li id="menu-item-4837" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4837"><a href="https://my.equalizedigital.com/affiliates/">Become An Affiliate</a></li> </ul> </li> <li id="menu-item-6644" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6644"><a href="https://equalizedigital.com/events/">Events</a></li> <li id="menu-item-5520" class="menu-highlight menu-item menu-item-type-post_type menu-item-object-page menu-item-5520"><a href="https://equalizedigital.com/contact/">Contact Sales</a></li> <li id="menu-item-4960" class="menu-item-mobile menu-item menu-item-type-custom menu-item-object-custom menu-item-4960"><a href="https://my.equalizedigital.com/">My Account</a></li> <li id="menu-item-4961" class="menu-item-mobile menu-item menu-item-type-custom menu-item-object-custom menu-item-4961"><a href="https://my.equalizedigital.com/checkout/"><i class="fas fa-shopping-cart" aria-hidden="true"></i> <span class="screen-reader-text">Checkout</span></a></li> </ul></div> </nav> </div> </div> </div></header><div class="site-inner"><div class="content-sidebar-wrap"><main class="content" id="genesis-content"><div class="breadcrumb"><span><span><a href="https://equalizedigital.com/">Home</a></span> / <span><a href="https://equalizedigital.com/resources/">Learning Center</a></span> / <span class="breadcrumb_last" aria-current="page">Building a Custom Plugin with an Accessibility First Approach: Phil Webster</span></span></div><article class="post-5767 post type-post status-publish format-standard has-post-thumbnail category-recorded-webinars tag-wordpress-accessibility-meetup entry" aria-label="Building a Custom Plugin with an Accessibility First Approach: Phil Webster"><header class="entry-header"><h1 class="entry-title">Building a Custom Plugin with an Accessibility First Approach: Phil Webster</h1> <p class="entry-meta"><span class="one-third first"><span class="em-label">Article Published</span><time class="entry-time">November 18, 2021</time></span><span class="one-third"><span class="em-label">Last Updated</span><time class="entry-modified-time">September 12, 2024</time></span> <span class="one-third"><span class="em-label">Written by</span><span class="entry-author"><span class="entry-author-name">Equalize Digital</span></span></span></p></header><div class="entry-content"><img width="1600" height="840" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='840'%20viewBox='0%200%201600%20840'%3E%3C/svg%3E" class="aligncenter wp-image-5775 perfmatters-lazy" alt="wordpress accessibility meetup, how to build a custom plugin with an accessibility first approach with phil webster. Monday, November 15, 2021" decoding="async" data-src="https://equalizedigital.com/wp-content/uploads/2021/11/WP_Accessibility_Meetup_Banner_Phil_webster_white-1600x840.png" data-srcset="https://equalizedigital.com/wp-content/uploads/2021/11/WP_Accessibility_Meetup_Banner_Phil_webster_white-1600x840.png 1600w, https://equalizedigital.com/wp-content/uploads/2021/11/WP_Accessibility_Meetup_Banner_Phil_webster_white-800x420.png 800w" data-sizes="(max-width: 1600px) 100vw, 1600px" /><noscript><img width="1600" height="840" src="https://equalizedigital.com/wp-content/uploads/2021/11/WP_Accessibility_Meetup_Banner_Phil_webster_white-1600x840.png" class="aligncenter wp-image-5775" alt="wordpress accessibility meetup, how to build a custom plugin with an accessibility first approach with phil webster. Monday, November 15, 2021" decoding="async" srcset="https://equalizedigital.com/wp-content/uploads/2021/11/WP_Accessibility_Meetup_Banner_Phil_webster_white-1600x840.png 1600w, https://equalizedigital.com/wp-content/uploads/2021/11/WP_Accessibility_Meetup_Banner_Phil_webster_white-800x420.png 800w" sizes="(max-width: 1600px) 100vw, 1600px" /></noscript> <p>As part of our commitment to giving back and sharing knowledge, we have partnered with the WordPress Foundation鈥檚 community team to run an official WordPress Meetup centered around building more accessible websites with WordPress. This post has a recap of our Meetup that took place on Monday, November 15, 2021, and a video recording of the presentation.</p> <h2 class="wp-block-heading">About the Topic</h2> <p>During the WordPress Accessibility Meetup on November 15th, </p> <p>Phil Webster, a Senior WordPress Developer at Delicious Brains, discussed the steps to build a custom plugin that for a client site that has accessibility top of mind. Topics included design considerations, using semantic markup, vetting third party extensions, preventing accessibility issues by using validation, and when to use aria attributes.</p> <h2 class="wp-block-heading">Thanks to Our Sponsors</h2> <p class="wp-embed-aspect-16-9 wp-has-aspect-ratio"><a href="https://wpengine.com/" target="_blank" rel="noreferrer noopener">WP Engine</a>, a WordPress technology company, sponsored the live captions for this event. They provide the most relied upon and trusted brands and developer-centric WordPress products for companies and agencies of all sizes, including managed WordPress hosting, enterprise WordPress, headless WordPress, Flywheel, Local and Genesis. WP Engine’s tech innovation and award-winning WordPress experts help to power more than 1.5 million sites across 150 countries.</p> <p class="wp-embed-aspect-16-9 wp-has-aspect-ratio"><a href="https://wp2static.com/" target="_blank" rel="noreferrer noopener">Leon Stafford</a>, who sponsored the ASL Interpretation for this event, is a developer at <a href="https://www.strattic.com/" target="_blank" rel="noreferrer noopener">Strattic</a> and creator of <a href="https://wp2static.com/" target="_blank" rel="noreferrer noopener">WP2Static</a>. He also maintains <a href="https://github.com/leonstafford/accessible-minimalism-hugo-theme" target="_blank" rel="noreferrer noopener">the Accessible Minimalism theme for Hugo</a> and is in the process of porting that to WordPress. He thinks accessibility is one of the most important goals of technology, but also one of the hardest to get developers and stakeholders to care about. He gives thanks to all the champions in the a11y space and for everyone just becoming aware of its importance.</p> <h2 class="wp-block-heading">About the Meetup</h2> <p>The WordPress Accessibility Meetup is a global group of WordPress developers, designers, and users interested in building more accessible websites. The meetup meets twice per month for presentations on a variety of topics related to making WordPress websites that can be used by people of all abilities. Meetups are held on the 1st Thursday of the month at 10 AM Central/8 AM Pacific and on the 3rd Monday of the month at 7 PM Central/5 PM Pacific.</p> <p><a href="https://www.meetup.com/wordpress-accessibility-meetup-group/" target="_blank" rel="noreferrer noopener">Learn more about the WordPress Accessibility Meetup Group</a>. </p> <h2 class="wp-block-heading">Watch the Recording</h2> <p>If you missed the meetup or would like a recap, watch the video below or read the transcript. If you have questions about what was covered in this meetup please <a href="https://twitter.com/equalizedigital" target="_blank" rel="noreferrer noopener">tweet us @EqualizeDigital on Twitter,</a> or join our <a href="https://www.facebook.com/groups/wordpress.accessibility" target="_blank" rel="noreferrer noopener">Facebook group for WordPress Accessibility</a>.</p> <figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper"> <iframe title="Building a Custom Plugin with an Accessibility First Approach with Phil Webster" width="500" height="281" src="https://www.youtube.com/embed/fQHtBMI4r28?wmode=transparent&rel=0&feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> </div></figure> <h3 class="wp-block-heading">Links Mentioned In This Video</h3> <p>The following resources were discussed or shared in the chat at this Meetup:</p> <ul class="wp-block-list"> <li><a href="https://equalizedigital.com/survey/">Accessibility Tools Survey</a></li> <li><a href="https://equalizedigital.com/focus-state/">Focus State Newsletter</a></li> <li><a href="https://twitter.com/EqualizeDigital" target="_blank" rel="noreferrer noopener">Equalize Digital on Twitter</a></li> <li><a href="https://equalizedigital.com/">Equalize Digital website </a></li> <li><a href="https://wpengine.com/" target="_blank" rel="noreferrer noopener">WP Engine website </a></li> <li><a href="https://twitter.com/wpengine" target="_blank" rel="noreferrer noopener">WP Engine on Twitter </a></li> <li><a href="https://ljs.dev/" target="_blank" rel="noreferrer noopener">Leon Stafford’s Website </a></li> <li><a href="https://twitter.com/ljsdotdev" target="_blank" rel="noreferrer noopener">Leon Stafford on Twitter </a></li> <li><a href="https://github.com/philwp/author-press" target="_blank" rel="noreferrer noopener">Phil Webster’s Author-Press GitHub</a></li> <li><a href="http://web-accessibility.carnegiemuseums.org/" target="_blank" rel="noreferrer noopener">Carnegie Museums Accessibility Statement </a></li> <li><a href="https://pluginmachine.com/" target="_blank" rel="noreferrer noopener">Plugin Machine from Josh Pollock </a></li> <li><a href="https://dev.to/jasonwebb/how-to-build-a-more-accessible-carousel-or-slider-35lp" target="_blank" rel="noreferrer noopener">How to Build an Accessible Slider or Carousel from Jason Webb</a> </li> <li><a href="https://accessibilityinsights.io/docs/en/web/overview/" target="_blank" rel="noreferrer noopener">Accessibility Insights for Web Chrome Extension</a></li> </ul> <p class="has-text-align-center has-small-font-size mb-0">Article continued below.</p> <section class="wp-block-uagb-section uagb-section__wrap uagb-section__background-color uagb-block-d62489e0"><div class="uagb-section__overlay"></div><div class="uagb-section__inner-wrap"> <div class="wp-block-group has-light-grey-background-color has-background"><div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained"> <h2 class="wp-block-heading has-large-font-size">Stay on top of web accessibility news and best practices.</h2> <p>Join our email list to get notified of changes to website accessibility laws, WordPress accessibility resources, and accessibility webinar invitations in your inbox.</p> <div class='gf_browser_ie gf_browser_ie7 gform_wrapper gravity-theme gform-theme--no-framework' data-form-theme='gravity-theme' data-form-index='0' id='gform_wrapper_15' ><style>#gform_wrapper_15[data-form-index="0"].gform-theme,[data-parent-form="15_0"]{--gf-color-primary: #204ce5;--gf-color-primary-rgb: 32, 76, 229;--gf-color-primary-contrast: #fff;--gf-color-primary-contrast-rgb: 255, 255, 255;--gf-color-primary-darker: #001AB3;--gf-color-primary-lighter: #527EFF;--gf-color-secondary: #fff;--gf-color-secondary-rgb: 255, 255, 255;--gf-color-secondary-contrast: #112337;--gf-color-secondary-contrast-rgb: 17, 35, 55;--gf-color-secondary-darker: #F5F5F5;--gf-color-secondary-lighter: #FFFFFF;--gf-color-out-ctrl-light: rgba(17, 35, 55, 0.1);--gf-color-out-ctrl-light-rgb: 17, 35, 55;--gf-color-out-ctrl-light-darker: rgba(104, 110, 119, 0.35);--gf-color-out-ctrl-light-lighter: #F5F5F5;--gf-color-out-ctrl-dark: #585e6a;--gf-color-out-ctrl-dark-rgb: 88, 94, 106;--gf-color-out-ctrl-dark-darker: #112337;--gf-color-out-ctrl-dark-lighter: rgba(17, 35, 55, 0.65);--gf-color-in-ctrl: #fff;--gf-color-in-ctrl-rgb: 255, 255, 255;--gf-color-in-ctrl-contrast: #112337;--gf-color-in-ctrl-contrast-rgb: 17, 35, 55;--gf-color-in-ctrl-darker: #F5F5F5;--gf-color-in-ctrl-lighter: #FFFFFF;--gf-color-in-ctrl-primary: #204ce5;--gf-color-in-ctrl-primary-rgb: 32, 76, 229;--gf-color-in-ctrl-primary-contrast: #fff;--gf-color-in-ctrl-primary-contrast-rgb: 255, 255, 255;--gf-color-in-ctrl-primary-darker: #001AB3;--gf-color-in-ctrl-primary-lighter: #527EFF;--gf-color-in-ctrl-light: rgba(17, 35, 55, 0.1);--gf-color-in-ctrl-light-rgb: 17, 35, 55;--gf-color-in-ctrl-light-darker: rgba(104, 110, 119, 0.35);--gf-color-in-ctrl-light-lighter: #F5F5F5;--gf-color-in-ctrl-dark: #585e6a;--gf-color-in-ctrl-dark-rgb: 88, 94, 106;--gf-color-in-ctrl-dark-darker: #112337;--gf-color-in-ctrl-dark-lighter: rgba(17, 35, 55, 0.65);--gf-radius: 3px;--gf-font-size-secondary: 14px;--gf-font-size-tertiary: 13px;--gf-icon-ctrl-number: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 0C4.26522 5.96046e-08 4.51957 0.105357 4.70711 0.292893L7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711C7.31658 5.09763 6.68342 5.09763 6.29289 4.70711L4 2.41421L1.70711 4.70711C1.31658 5.09763 0.683417 5.09763 0.292893 4.70711C-0.0976311 4.31658 -0.097631 3.68342 0.292893 3.29289L3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0ZM0.292893 9.29289C0.683417 8.90237 1.31658 8.90237 1.70711 9.29289L4 11.5858L6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289C8.09763 9.68342 8.09763 10.3166 7.70711 10.7071L4.70711 13.7071C4.31658 14.0976 3.68342 14.0976 3.29289 13.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289Z' fill='rgba(17, 35, 55, 0.65)'/%3E%3C/svg%3E");--gf-icon-ctrl-select: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683417 -0.097631 1.31658 -0.097631 1.70711 0.292893L5 3.58579L8.29289 0.292893C8.68342 -0.0976311 9.31658 -0.0976311 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L5.70711 5.70711C5.31658 6.09763 4.68342 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893Z' fill='rgba(17, 35, 55, 0.65)'/%3E%3C/svg%3E");--gf-icon-ctrl-search: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cpath d='M256 128c-70.692 0-128 57.308-128 128 0 70.691 57.308 128 128 128 70.691 0 128-57.309 128-128 0-70.692-57.309-128-128-128zM64 256c0-106.039 85.961-192 192-192s192 85.961 192 192c0 41.466-13.146 79.863-35.498 111.248l154.125 154.125c12.496 12.496 12.496 32.758 0 45.254s-32.758 12.496-45.254 0L367.248 412.502C335.862 434.854 297.467 448 256 448c-106.039 0-192-85.962-192-192z' fill='rgba(17, 35, 55, 0.65)'/%3E%3C/svg%3E");--gf-label-space-y-secondary: var(--gf-label-space-y-md-secondary);--gf-ctrl-border-color: #686e77;--gf-ctrl-size: var(--gf-ctrl-size-md);--gf-ctrl-label-color-primary: #112337;--gf-ctrl-label-color-secondary: #112337;--gf-ctrl-choice-size: var(--gf-ctrl-choice-size-md);--gf-ctrl-checkbox-check-size: var(--gf-ctrl-checkbox-check-size-md);--gf-ctrl-radio-check-size: var(--gf-ctrl-radio-check-size-md);--gf-ctrl-btn-font-size: var(--gf-ctrl-btn-font-size-md);--gf-ctrl-btn-padding-x: var(--gf-ctrl-btn-padding-x-md);--gf-ctrl-btn-size: var(--gf-ctrl-btn-size-md);--gf-ctrl-btn-border-color-secondary: #686e77;--gf-ctrl-file-btn-bg-color-hover: #EBEBEB;--gf-field-pg-steps-number-color: rgba(17, 35, 55, 0.8);}</style><div id='gf_15' class='gform_anchor' tabindex='-1'></div><form method='post' enctype='multipart/form-data' target='gform_ajax_frame_15' id='gform_15' action='/building-a-custom-plugin-with-an-accessibility-first-approach/#gf_15' data-formid='15' novalidate> <input type='hidden' class='gforms-pum' value='{"closepopup":false,"closedelay":0,"openpopup":false,"openpopup_id":0}' /> <div class='gform-body gform_body'><div id='gform_fields_15' class='gform_fields top_label form_sublabel_below description_below validation_below'><div id="field_15_9" class="gfield gfield--type-handlfree_utm_campaign gfield--width-quarter field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible" data-js-reload="field_15_9" ><div class='ginput_container ginput_container_text'><input name='input_9' id='input_15_9' type='hidden' class='gform_hidden' aria-invalid="false" value='' /></div></div><div id="field_15_7" class="gfield gfield--type-handlfree_utm_medium gfield--width-quarter field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible" data-js-reload="field_15_7" ><div class='ginput_container ginput_container_text'><input name='input_7' id='input_15_7' type='hidden' class='gform_hidden' aria-invalid="false" value='' /></div></div><div id="field_15_6" class="gfield gfield--type-handlfree_utm_source gfield--width-quarter field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible" data-js-reload="field_15_6" ><div class='ginput_container ginput_container_text'><input name='input_6' id='input_15_6' type='hidden' class='gform_hidden' aria-invalid="false" value='' /></div></div><div id="field_15_8" class="gfield gfield--type-handlfree_utm_term gfield--width-quarter field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible" data-js-reload="field_15_8" ><div class='ginput_container ginput_container_text'><input name='input_8' id='input_15_8' type='hidden' class='gform_hidden' aria-invalid="false" value='' /></div></div><div id="field_15_2" class="gfield gfield--type-email gfield_contains_required field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible" data-js-reload="field_15_2" ><label class='gfield_label gform-field-label' for='input_15_2'>Email<span class="gfield_required"><span class="gfield_required gfield_required_text">(Required)</span></span></label><div class='ginput_container ginput_container_email'> <input name='input_2' id='input_15_2' type='email' value='' class='large' aria-required="true" aria-invalid="false" /> </div></div><fieldset id="field_15_1" class="gfield gfield--type-name gfield--width-full field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible" data-js-reload="field_15_1" ><legend class='gfield_label gform-field-label gfield_label_before_complex' >Name</legend><div class='ginput_complex ginput_container ginput_container--name no_prefix has_first_name no_middle_name has_last_name no_suffix gf_name_has_2 ginput_container_name gform-grid-row' id='input_15_1'> <span id='input_15_1_3_container' class='name_first gform-grid-col gform-grid-col--size-auto' > <input type='text' name='input_1.3' id='input_15_1_3' value='' aria-required='false' /> <label for='input_15_1_3' class='gform-field-label gform-field-label--type-sub '>First</label> </span> <span id='input_15_1_6_container' class='name_last gform-grid-col gform-grid-col--size-auto' > <input type='text' name='input_1.6' id='input_15_1_6' value='' aria-required='false' /> <label for='input_15_1_6' class='gform-field-label gform-field-label--type-sub '>Last</label> </span> </div></fieldset><fieldset id="field_15_4" class="gfield gfield--type-consent gfield--type-choice gfield--input-type-consent gfield--width-full gfield_contains_required field_sublabel_below gfield--no-description field_description_below hidden_label field_validation_below gfield_visibility_visible" data-js-reload="field_15_4" ><legend class='gfield_label gform-field-label gfield_label_before_complex' >Subscribe Consent<span class="gfield_required"><span class="gfield_required gfield_required_text">(Required)</span></span></legend><div class='ginput_container ginput_container_consent'><input name='input_4.1' id='input_15_4_1' type='checkbox' value='1' aria-required="true" aria-invalid="false" /> <label class="gform-field-label gform-field-label--type-inline gfield_consent_label" for='input_15_4_1' >I opt-in to receive emails from Equalize Digital and have read the <a href="https://equalizedigital.com/privacy-policy/" target="_blank">privacy policy</a>.<span class="gfield_required gfield_required_text">(Required)</span></label><input type='hidden' name='input_4.2' value='I opt-in to receive emails from Equalize Digital and have read the <a href="https://equalizedigital.com/privacy-policy/" target="_blank">privacy policy</a>.' class='gform_hidden' /><input type='hidden' name='input_4.3' value='2' class='gform_hidden' /></div></fieldset><div id="field_15_3" class="gfield gfield--type-hidden gfield--width-full gform_hidden field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible" data-js-reload="field_15_3" ><div class='ginput_container ginput_container_text'><input name='input_3' id='input_15_3' type='hidden' class='gform_hidden' aria-invalid="false" value='Building a Custom Plugin with an Accessibility First Approach: Phil Webster' /></div></div><div id="field_15_5" class="gfield gfield--type-html gfield--width-full gfield_html gfield_html_formatted gfield_no_follows_desc field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_hidden" data-js-reload="field_15_5" ><p style="font-size:15px;">Equalize Digital uses Zoho Campaigns. By entering your contact details, you acknowledge that your information will be transferred to Zoho for processing. Learn more about <a href="https://www.zoho.com/privacy.html" target="_blank">Zoho鈥檚 privacy practices.</a></p></div><div id="field_15_10" class="gfield gfield--type-honeypot gform_validation_container field_sublabel_below gfield--has-description field_description_below field_validation_below gfield_visibility_visible" data-js-reload="field_15_10" ><label class='gfield_label gform-field-label' for='input_15_10'>Name</label><div class='ginput_container'><input name='input_10' id='input_15_10' type='text' value='' autocomplete='new-password'/></div><div class='gfield_description' id='gfield_description_15_10'>This field is for validation purposes and should be left unchanged.</div></div></div></div> <div class='gform_footer top_label'> <span class="input-wrapper"><input type="hidden" name="affwp_action" value="affiliate_register" /><input type='submit' id='gform_submit_button_15' class='gform_button button' value='Subscribe' onclick='if(window["gf_submitting_15"]){return false;} if( !jQuery("#gform_15")[0].checkValidity || jQuery("#gform_15")[0].checkValidity()){window["gf_submitting_15"]=true;} ' onkeypress='if( event.keyCode == 13 ){ if(window["gf_submitting_15"]){return false;} if( !jQuery("#gform_15")[0].checkValidity || jQuery("#gform_15")[0].checkValidity()){window["gf_submitting_15"]=true;} jQuery("#gform_15").trigger("submit",[true]); }' /><span class="input-after" ></span></span> <input type='hidden' name='gform_ajax' value='form_id=15&title=&description=&tabindex=0&theme=gravity-theme' /> <input type='hidden' class='gform_hidden' name='is_submit_15' value='1' /> <input type='hidden' class='gform_hidden' name='gform_submit' value='15' /> <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' /> <input type='hidden' class='gform_hidden' name='state_15' value='WyJ7XCI0LjFcIjpcImU4Y2NkYmZkM2E4YmZlMWU5NjFmNGUxMmUyZDU2NDhhXCIsXCI0LjJcIjpcIjdlMDE5NWM5ZWRmMGQwNTA2NjdjNWJjZGI5ZWUyYTQ2XCIsXCI0LjNcIjpcImY3Zjk2YjYxYzAyYmEzNzViMzBlNWIyZDQxMjU0YTNjXCJ9IiwiMWFlZjVjYjk0MGMxYjY1ZGZkNjRlNjFhOTE0NTBhODEiXQ==' /> <input type='hidden' class='gform_hidden' name='gform_target_page_number_15' id='gform_target_page_number_15' value='0' /> <input type='hidden' class='gform_hidden' name='gform_source_page_number_15' id='gform_source_page_number_15' value='1' /> <input type='hidden' name='gform_field_values' value='' /> </div> </form> </div> <iframe style='display:none;width:0px;height:0px;' src='about:blank' name='gform_ajax_frame_15' id='gform_ajax_frame_15' title='This iframe contains the logic required to handle Ajax powered Gravity Forms.'></iframe> <script type="text/javascript"> /* <![CDATA[ */ gform.initializeOnLoaded( function() {gformInitSpinner( 15, 'https://equalizedigital.com/wp-content/plugins/gravityforms/images/spinner.svg', true );jQuery('#gform_ajax_frame_15').on('load',function(){var contents = jQuery(this).contents().find('*').html();var is_postback = contents.indexOf('GF_AJAX_POSTBACK') >= 0;if(!is_postback){return;}var form_content = jQuery(this).contents().find('#gform_wrapper_15');var is_confirmation = jQuery(this).contents().find('#gform_confirmation_wrapper_15').length > 0;var is_redirect = contents.indexOf('gformRedirect(){') >= 0;var is_form = form_content.length > 0 && ! is_redirect && ! is_confirmation;var mt = parseInt(jQuery('html').css('margin-top'), 10) + parseInt(jQuery('body').css('margin-top'), 10) + 100;if(is_form){jQuery('#gform_wrapper_15').html(form_content.html());if(form_content.hasClass('gform_validation_error')){jQuery('#gform_wrapper_15').addClass('gform_validation_error');} else {jQuery('#gform_wrapper_15').removeClass('gform_validation_error');}setTimeout( function() { /* delay the scroll by 50 milliseconds to fix a bug in chrome */ jQuery(document).scrollTop(jQuery('#gform_wrapper_15').offset().top - mt); }, 50 );if(window['gformInitDatepicker']) {gformInitDatepicker();}if(window['gformInitPriceFields']) {gformInitPriceFields();}var current_page = jQuery('#gform_source_page_number_15').val();gformInitSpinner( 15, 'https://equalizedigital.com/wp-content/plugins/gravityforms/images/spinner.svg', true );jQuery(document).trigger('gform_page_loaded', [15, current_page]);window['gf_submitting_15'] = false;}else if(!is_redirect){var confirmation_content = jQuery(this).contents().find('.GF_AJAX_POSTBACK').html();if(!confirmation_content){confirmation_content = contents;}jQuery('#gform_wrapper_15').replaceWith(confirmation_content);jQuery(document).scrollTop(jQuery('#gf_15').offset().top - mt);jQuery(document).trigger('gform_confirmation_loaded', [15]);window['gf_submitting_15'] = false;wp.a11y.speak(jQuery('#gform_confirmation_message_15').text());}else{jQuery('#gform_15').append(contents);if(window['gformRedirect']) {gformRedirect();}}jQuery(document).trigger("gform_pre_post_render", [{ formId: "15", currentPage: "current_page", abort: function() { this.preventDefault(); } }]); if (event && event.defaultPrevented) { return; } const gformWrapperDiv = document.getElementById( "gform_wrapper_15" ); if ( gformWrapperDiv ) { const visibilitySpan = document.createElement( "span" ); visibilitySpan.id = "gform_visibility_test_15"; gformWrapperDiv.insertAdjacentElement( "afterend", visibilitySpan ); } const visibilityTestDiv = document.getElementById( "gform_visibility_test_15" ); let postRenderFired = false; function triggerPostRender() { if ( postRenderFired ) { return; } postRenderFired = true; jQuery( document ).trigger( 'gform_post_render', [15, current_page] ); gform.utils.trigger( { event: 'gform/postRender', native: false, data: { formId: 15, currentPage: current_page } } ); if ( visibilityTestDiv ) { visibilityTestDiv.parentNode.removeChild( visibilityTestDiv ); } } function debounce( func, wait, immediate ) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if ( !immediate ) func.apply( context, args ); }; var callNow = immediate && !timeout; clearTimeout( timeout ); timeout = setTimeout( later, wait ); if ( callNow ) func.apply( context, args ); }; } const debouncedTriggerPostRender = debounce( function() { triggerPostRender(); }, 200 ); if ( visibilityTestDiv && visibilityTestDiv.offsetParent === null ) { const observer = new MutationObserver( ( mutations ) => { mutations.forEach( ( mutation ) => { if ( mutation.type === 'attributes' && visibilityTestDiv.offsetParent !== null ) { debouncedTriggerPostRender(); observer.disconnect(); } }); }); observer.observe( document.body, { attributes: true, childList: false, subtree: true, attributeFilter: [ 'style', 'class' ], }); } else { triggerPostRender(); } } );} ); /* ]]> */ </script> </div></div> </div></section> <h2 class="wp-block-heading">Read the Transcript</h2> <p><strong>Amber Hinds 0:00</strong><br>Our announcements for this evening: The first one is, if you’re not part of our Facebook group, please go join. Maybe Emma can throw the link up in the chat, but it’s facebook.com/groups/wordpress.accessibility. And the link will be in the chat for anyone who needs that. And it’s a great way to connect with people in between Meetup events. And we’re starting to have some really good conversations there. If you need help with something, or you’re looking for feedback, or if you want to provide value to other people, we really appreciate that. So, please join the Facebook group. </p> <p>The next announcement is, if you have not done so yet, please go take our accessibility tools survey. It’s at equalizedigital.com/survey, and, what this is is it’s totally anonymous unless at the very end, you choose to enter your information, but you don’t have to, it talks about how your organization approaches accessibility, what tools you use, and things like that. </p> <p>We are trying to get at least 200 participants. Our goal is to put together a report, and do a talk on it in the springtime at a Meetup event, so that we can sort of share what the current accessibility landscape looks like among website owners, particularly in WordPress. So, that is there. There is the ability to enter to win a $200 Amazon gift card in case that is motivating for you. Otherwise, please go take it, because it will be helpful to us, and you’ll get to see what all the results are as well. </p> <p>And then, I did want to announce that as of last Wednesday, we started an email newsletter. We’re calling it Focus State, it’s going to come on the second and fourth Wednesday’s of the month. And, I wanted to encourage people to join it, especially because I sent some announcements out on Meetup, which you may have gotten last Friday, and then I got feedback from somebody that said “it really would have been great if there were headings in these, so that I could jump around in my screen reader and get to different sections.” And I realized I had coded headings into that Meetup email, and Meetup had stripped all the H tags out when it sent the email. So, especially if you need an accessible version, please consider joining the email list, because we have more control over it than we do on Meetup. </p> <p>And then, just a quick shout out, we are looking for additional sponsors to help cover our- some increased costs we’re anticipating with regards to our interpreters, and, transcripts and things like that in the new year. So, please contact me if you, or your organization might be interested in sponsoring, and I can give you more information. And then, um- let’s see, someone asked if the host can enable the option to save the transcript. I can try to do that. Um, I may have to do that when I am not sharing my screen, but let me see if I can do that. </p> <p>To be honest, I am not 100% certain how to do that, but I will say that we do provide- yeah, I’m sorry, I’m not seeing that option in the, in the Settings panel, but we do provide the, uh, a full corrected transcript with the video, usually within a week, if not sooner. So, there will be a transcript available on our website. And then, on that note, if you have any other suggestions, if you do know how, and you want to tell me, and send it to me in the chat, I can try and do that in a minute here when Phil starts talking. I’m just not certain how to do it right now.</p> <p><strong>Amber Hinds 4:08</strong><br>So, let me- if we go the right direction- real quick, I’m gonna give some information about who we are, and then also our sponsors, and then I’ll introduce Phil. So, our- I’m Amber, I’m the CEO of Equalize Digital. We’re a certified B Corporation that specializes in WordPress accessibility, and we have a WordPress accessibility checking tool called word- called Accessibility Checker. </p> <p>And, we have been organizing the Meetup, a little bit selfishly, because we wanted to have the ability to learn from all these great speakers that we’ve been having. And, so, I was sort of like, “there’s no one in my area, what can I do?” So, we started the meetup. So, that’s what made us start it. If you want to get a hold of us outside, you can find us at equalizedigital.com, or we are on Twitter a lot, @equalizedigital. </p> <p>And then, we have two sponsors this evening. The first one is WP Engine, who many of you probably have heard of. They are a hosting company. They have their brand, and then also Flywheel, and they own the Local app for local development, and are the owners of the Genesis themes. And they host more than- let’s see, I’m looking at this- one and a half million sites across 150 companies, or, sorry, countries, 150 countries. And you can find them at WPengine.com, or on Twitter @WPEngine. </p> <p>And then, our interpretation sponsor for this evening is Leon Stafford. Leon is a developer at Strattic, and the creator of WP2Static. He also maintains the accessible minimalism theme for Hugo, which is a different CMS, and he’s in the process of porting it over to WordPress. He wants us to thank- he asked us to thank everybody who attends this Meetup, because he thinks accessibility is really important, and he thinks it’s amazing that people are learning about how to make things more accessible, and so that is why he is supporting our ASL interpretation, which is awesome. </p> <p>Emma put links in the chat for Twitter @WPEngine and Twitter @ljsdotdev. We ask, if you can, just send them a quick tweet saying “thank you for sponsoring our Meetup.” I think that that encourages them to want to continue to sponsor our Meetup, and help us to make these as accessible as possible. </p> <p>Some upcoming events that are important to know about, on Thursday, December 2, we will have Meryl Evans, who’s an accessibility consultant, who is deaf, and she’ll be speaking about how to create accessible captioned videos for WordPress and beyond. </p> <p>And then, on Monday, December 20, so this same time slot in December, we will have two different accessibility engineers from VMware, one is Joyce Oshita, and the other one is Chris Lane, and they will actually be doing an accessibility test of the FacetWP plugin, which is a faceted search plugin that is very popular. And they’ll be providing feedback to the developer, who will be on the call as well. So it’ll be the opportunity for people to sort of observe how a blind user- so Joyce is blind- how she engages with the site, with her screen reader, and then some of the feedback that they have. And, also the plugin developer will be able to ask questions. So, it hopefully will be both educational and helpful, so that it can improve not just that plugin, but all the websites that use that plugin.</p> <p><strong>Amber Hinds 8:16</strong><br>So, I am so excited, now I’m going to transition, I know you guys have heard me talk a lot, and you’re probably ready to hear the main event. So, I’m very excited to introduce Phil Webster this evening. He is a Senior WordPress Plugin Developer at Delicious Brains, and he works on the WP Migrate DB Pro team. Phil has a deep interest in making the web accessible for everyone. </p> <p>You may have heard, at the beginning, we were talking about how he’s been tweeting a lot about accessibility lately. And, he’s from Pittsburgh. He has a wife, and three kids, and he enjoys being outdoors, and all sorts of awesome stuff. He often tweets pictures of pizzas he’s made, that made me feel incredibly hungry [laughs]. So, I’m going to stop sharing now, and I’m going to hand over the reins to Phil. I’m going to turn off my spotlight. If you do have any questions, I’ll be paying attention to the chat. And we’ll let Phil go ahead and take it away!</p> <p><strong>Phil Webster 9:27</strong><br>I’m trying to share my screen here.</p> <p><strong>Amber Hinds 9:29</strong><br>Is it letting you?</p> <p><strong>Phil Webster 9:41</strong><br>Alright. I think I have to get your permission.</p> <p><strong>Amber Hinds 9:44</strong><br>Okay. Alright. So, in just a minute, we’ll get Phil’s screen up, and then we’ll go.</p> <p><strong>Phil Webster 10:01</strong><br>Alright. Hopefully it’ll allow me to do it now. There we go. Do we have it?</p> <p><strong>Amber Hinds 10:16</strong><br>Yes.</p> <p><strong>Phil Webster 10:18</strong><br>Great. Alright. So, as Amber said, my name is Phil. And, today we’re going to be talking about building a custom plugin with an accessibility first approach. Let me put the link that I have here on that slide into chat. I am really not good at hosting on, on Zoom. There’s the chat.</p> <p><strong>Amber Hinds 10:58</strong><br>We might be able to type it in for you, too. If that would be easier.</p> <p><strong>Phil Webster 11:02</strong><br>Yeah, I don’t know. It’s- keeps putting me into Preferences. Alright. Why?</p> <p><strong>Amber Hinds 11:13</strong><br>I can find it. It’s on your GitHub?</p> <p><strong>Phil Webster 11:17</strong><br>Yeah. Is that it? Do you see it now? Is that in the chat?</p> <p><strong>Amber Hinds 11:21</strong><br>Uh, no, I do not see it in the chat. But, I’ll find it, if you want to get started</p> <p><strong>Phil Webster 11:30</strong><br>Okay. Thank you. Alright, so I’m gonna- we’ll get to that GitHub eventually. Alright, so, as we already said- what was that?</p> <p><strong>Amber Hinds 12:00</strong><br>It’s in the chat now.</p> <p><strong>Phil Webster 12:02</strong><br>Okay, thank you. I completely have no idea what the chat is. I just found the chat [laughs]. Thank you. So, if you have any questions, I think it might be good to, um, maybe Amber can interrupt me, if we get a bunch of questions at some point, and stop, so that we don’t get too far away from wherever that question was. </p> <p>So, as Amber said, I work at Delicious Brains, and I do work on the Migrate DB Pro team. We have, in our last release, we made some fairly decent improvements to accessibility. The, it’s pretty much 100% keyboard navigate- you can use a keyboard to navigate through the entire plugin. There’s definitely still work to be done, and, we are working on that for sure, but it’s way better than it was when I first started there, so. I’ve been at Delicious Brains since, um, since June. And before that, as Amber said, I was at Equalize Digital, where I did some work on the Accessibility Checker plugin, and I also did a lot of the work on the actual Equalize Digital website itself.</p> <p><strong>Phil Webster 13:34</strong><br>So, 26% of the adults in the United States have some type of disability, according to the CDC. So, accessibility is very important for us to work on. And, one of the things that I like to think about is that we need to be building for, for everyone, and that accessible design can be beautiful, and accessible design can work. </p> <p>This picture here of this big curly red access ramp is, is just one example of how architecture has really evolved over the last, what is it, 50 years of the ADA? Might not be that. About, what- I don’t know how many years it’s been. But, over the years of the ADA, buildings now really are accepting the beauty that they can come, come from accessible design, and I think that we need to do that too, as, as people who build for the web. </p> <p>I found this quote from the Carnegie Museums, which are here in Pittsburgh, and the “Carnegie Museums of Pittsburgh welcome all visitors both on-site and online. We work to assist visitors with disabilities in obtaining reasonable and appropriate accommodations, and in supporting equal access to services, programs, and activities.” So, if you follow this, this link here, the web-accessibility.carnegiemuseums.org, what you’ll find there is a really great guide for developers, for developing with accessibility in mind. If you go to the GitHub link that I provided, all of these links that are in here are available there as well. </p> <p>Alright, so let’s talk about the plugin that we’re going to be reviewing today. So, this is not a plugin that would be good for commercial release, but this is one that would be applicable to any agency or freelance developer who brought on a client, and then was going to build a custom plugin for, for them, with specific purposes. So, I know that lots of examples use plugins that are for selling books, or for listing books. Well, that’s what we’re gonna do today, too, but this one actually is for real. So, my mom asked me to help her with her website, and she happens to be an author. </p> <p>So, this is a plugin that I’m working on to help her with her- list her books on her website. So, the books are available for sale on an external site, on Amazon. And she wanted a way to be able to list all of the different books. So, here’s the basic layout of, of the site. So, each book will have a title, a picture of the cover, a summary of that book, a button to be able to go buy that book, a list of details, and then a list of reviews. </p> <p>So, as you can see, there are some issues that we will need to address, in terms of accessibility, here for sure, such as the icons, the slider for the reviews. I put the slider in there just to make it harder on myself on purpose, so we could talk about dealing with a slider. So, the most important thing to consider is that you need to write semantic HTML. A lot of accessibility issues can be avoided just by writing good, good HTML. So, HTML elements are the structure that happens on every page, and some of your main semantic elements are the header, nav, main, article, aside, and footer. </p> <p>So, if we were to break down that example, this is approximately one, one, I think one decent interpretation of how we could do that. I didn’t label every single, single part on there to try to make this a little easier, but we’ll just go over. So, the main section here is, well, in general, WordPress is going to give us main. </p> <p>So, this, this first outside red square is, would be, is going to be an article element, which is also going to be given to us by, by WordPress, if we don’t mess with it. And then, the title will be an h1. And then, the first main section, over to the right, we’re going to break into a section that has an h2 at the top, and then, each of the other main sections below that are, will be other sections, and then each of those headings will also get an h2. Alright. </p> <p>So, in terms of what we’re going to use, on the WordPress side, is, we’re going to use two custom post types, one for books, and then, the other one is going to be for the reviews. And, in order to make the blocks, uh, for this, we’re going to use ACF Pro, to build the blocks, and, and a custom carousel too.</p> <p><strong>Phil Webster 20:27</strong><br>So, I’m going to hop over to, to GitHub, for a second here. And, we’re going to walk through the, the plugin just a little bit. I built this in a way that wouldn’t require any build tools at all. So, you could download this, and install this, if you want to, if you want to, if you want to play around with it. The only thing you would have to have is ACF Pro, if you want to do it exactly the way that I have it in here. ACF Pro could be substituted with your own custom blocks, if you wanted to do that. But, I thought this would be faster and easier to use. </p> <p>So, over here on GitHub, just go into the main author-press file. I’m going to go kind of quick through non-accessibility related issues with the plugin, and if we have questions about some specific things, then, we, we can probably address those at the end. So, the plugin starts with a few checks to make sure the PHP version is high enough, and also to ensure that ACF Pro is installed.</p> <p>I’ll tell you what file I’m going to go to, if you want to look at the actual file. So, now I’m going to go to the bootstrap.php. So, one thing I would like to highlight is that I am using namespaces in this plugin. And, using namespaces allows you to not have to prefix all of your functions. So, this is just a short file. What this does is auto loads those, those namespace files, which prevents me from having to do requires. So, I don’t have to do a require, and, a lot of plugins you see will have a real long list of required files. This avoids that with being able to use the auto loader. And then it just loads this main class called “Start.” </p> <p>And then, in, so Start is in the classes directory. And then, in this file, we define our custom post types. Which, I have constants up here, for their names. And, I also rewrite the permalinks here, so you don’t have to do that manually. Alright, so, let’s look at the, at the, at the two custom post types. So, since we are using the block editor, we have to make sure that we have “show_in_rest” set to true. </p> <p>And, there are two other features that I have not used very much, but I really like, and that are, those are the “template” argument, and “template_lock.” These are built in features to control the, the block layout on the page. So, what block templates are, is, they are a preset layout of blocks that are on the page. So, this is a very simple one here. And, you can see in this function, it just has one block, and that’s the quote block. </p> <p>When you declare a block template, what you have is you have an array that has, that has an a nested array inside of it that, where you declare the name of the block, and then, the second parameter are any attributes that those blocks might have. So, in this case, we’re using, we’re adding this, the class name “is-style-large” to that quote block. And I’ll show you, I can show you that. So, this is the, the template for the review.</p> <p><strong>Phil Webster 25:50</strong><br>So, here’s our review post type. And, you can see that the template is this, just the core quote block. And that template block, sorry, “template_lock” is “all.” So, what “all” means is that you cannot change the order, or add any blocks to that template.</p> <p>So, if we actually look at, this is what a review post type looks like, and you can see that the, the blue plus sign, where you would typically add blocks, does not function, because it is disabled. So, what we’re preventing is the the ability to add and change the content. So, this is a good way to control the user’s content. So, all you can add- all you can do is add a title, which doesn’t show on the front at all, in this case, add the quote, and then, who added it. And, and that is the only information you can add for the review. So, the thought is, is the mo- the more we can control what the user can enter, the, the easier it is for us to make sure that we can keep the, the content accessible. </p> <p>Alright, let’s go back here. And I have a much more complicated block template for the, for the book itself. So, this is a combination of core blocks, and of those custom ACF blocks. I tried to indent the code here, so that it would be easy to see, like, the hierarchy. So, the top is two columns, so we have the core, the core columns block, and then we have those two columns declared with that core/column. And then, the second attribute here is, are the, the attributes for that, for that block, which is set to width of 50. And then, inside of that, we have another array, that has the content of that column. </p> <p>So, this gets a little tricky, with so many arrays inside of arrays. But, it, we’re essentially writing the same code that you would see in, on the front end. It’s just, we’re using this, this, um, this array syntax to do that. And then, in the second column is our first custom ACF block, which I’ve called “ap-summary.” And then, below that is a details block. And then, finally, the reviews block at the end.</p> <p>So, I’ve decided to, to use ACF Pro to create these accessible blocks. You can also do this with core blocks, I believe. Most, most of it- there’s probably other solutions, too- this is just one approach.</p> <p>So, what, what we’re trying to do here is we’re going to try to create blocks that stand alone, in terms of content, so that that block will always be accessible. So, no matter where you put it, it will work. So, we’re going to start with the summary here. Every one of these custom blocks start with an h2. So, no matter where we put that, it will work. I can’t think of a place where you could stick this block, and it would break the accessibility of the page, in terms of content flow. So, all of the content are going to be paragraph tags, and, the button at the bottom, that’s not actually a button, is the- has ambiguous text, so we need to make sure that we deal with that somehow, too.</p> <p><strong>Phil Webster 30:39</strong><br>So, this is our code for a summary block. So, we have the title. And then, we have this, this inner blocks thing here, which is not HTML, but, that is actually JSX, so. This is coming over from the React side of Gutenberg. But, what inner blocks is, is a way for us to tell the block editor that we want to have a section inside of another block that has other blocks in it. And, in this case, there’s this “allowed_blocks” attribute here, and what I do there is I tell, I tell WordPress that the only block that we’re going to allow is the paragraph block. </p> <p>So, I could not stick a gallery in the middle here, or I couldn’t stick an h1 in there. So, the only content that we- you’re allowed to put there is, are paragraphs. It is possible that you could still break accessibility, but, we’re going to do, we’re trying our hardest to prevent that. And then, we follow up here with, with a link out to the, um, to Amazon, typically. But, instead of just “buy book,” we’re gonna have “buy book,” and then we’re adding the title of the book as screen reader text to ensure that that link itself is not an ambiguous link.</p> <p>There’s this one extra div here in the inner blocks that I don’t really like, but, right now, that’s needed in order to function properly. It’s one of the quirks of Gutenberg. If I leave that out, then it makes my, my book, my “buy book” button disappear. So, maybe that’s something that we’ll be able to fix in the future. </p> <p>Alright, let’s, before we move on, let me show you. So, if I go back to the main author-press directory, and then go into blocks. So, this is, these are each of the, of the custom blocks. So, we’ll go back into the summary block. So, there’s a little bit of extra stuff here, too. One of my- I find this to be an accessibility issue, and, it’s one of my pet peeves- is that, in Gutenberg, the links are active in the editor. </p> <p>So, this, like, book link right here, where- if it’s on the, if it’s in the editor side, I’ve set it to not actually be a link. So, you can click on the button, and it won’t take you to that page. [Mumbles to self]. Yes, and then, so, here you can see where, the “allowed_blocks,” and that it’s set to be just “core/paragraph.”</p> <p><strong>Phil Webster 34:41</strong><br>So, let’s see here. So, that, that, this ends up with this block here where we have “summary,” so. It’s automatically populated with summary, but I could change that here, if I want to change that to something else. And that would come over there. And then here, all I can put in, if you click here, you can see, like, I cannot add anything but paragraphs, which is a very nice feature. And then, I can click right on here, and it’s not going to take me to that page, but I can add the book link over here, and then that will link up the book. And the next section we’re going to talk about is this “details” here. Let’s look at the code first.</p> <p><strong>Amber Hinds 35:38</strong><br>Phil, there was one question.</p> <p><strong>Phil Webster 35:40</strong><br>Okay.</p> <p><strong>Amber Hinds 35:41</strong><br>Nick said, “I previously used WP scaffold block to create blocks. Do you know if there are problems with it? Also, I think one can use templates to generate blocks. Do you know of any good templates for accessibility?”</p> <p><strong>Phil Webster 35:59</strong><br>Um, I’ve never used WP scaffold block. There is a block plugin that I- or, like a scaffolding plugin I have used before. I can’t remember the name of it, I’ll see if I can find it, and I can, we could share that later. So, the issue with, like, a lot of those block templates are that they are just blocks. They’re just for creating blocks. </p> <p>So, if you wanted to create custom post types or anything, in addition, it would be hard to find- it’s, it’s, it’s hard to add that on to, to that. I know that, like, Josh Pollock has just come out with his Plugin Machine Boilerplate plugin. That, I think, is try- he’s trying to address that issue, so, like, if you want to add blocks to a plugin, you, there will be a script to help you with that. </p> <p>In terms of the other part, I don’t really know about good templates for accessibility. I will say that the core blocks themselves are are fairly good. It’s just how you use them, that’s going to be the, that’s going to be the issue there. </p> <p>Alright, so let’s go back to the details block. And, in the block- so that is this block here, where we have a bunch of icons. So, when I program something like this, I’m going to program it with the screen reader in mind first. So, each of these icons stands for something. So, when you initially code this, instead of putting the icon there, start with the text that would make sense for the screen reader. And these icons themselves don’t even necessarily portray very well what it is that I’m trying to represent here. </p> <p>So, if we look at the actual block itself, this details block, we have number of pages, which is that little bookmark icon. The formats, which is the book icon. Publication date, which is a calendar. Language, that globe. And dimensions, which is, which are the ruler. If you go to the actual Amazon book page itself, they have, they have a very similar set of icons, and details about the book. </p> <p>So, when I see a list of items like this, whether it’s an, an actual list, an actual bulleted list, or numbered list, I’m thinking that my semantic HTML is some form of a list. And, the, the type of list that I think works best for this is, is a DL, which is not used very frequently. But a DL is a description list. So, you use the DT element, which is the term, and then you can have one, or multiple, DD elements, which is the description that goes with that term. So, one of the reasons I chose that was because we have multiple formats of the book. So, I think that’s, it’s sensible markup to use for, for this. </p> <p>And, and the icons are, they’re all SVGs, and they are inline SVGs, so they don’t use an image tag, but they actually use the SVG right on- in the code. So, I took the approach of using the ARIA specifications, so, I use an ARIA hidden to remove the SVG from screen readers, and then provide those, the terms with screen reader text.</p> <p><strong>Phil Webster 40:57</strong><br>And, something that I think works well for this- so, I said, I’m creating helpers to ensure you do this correctly, so, what I mean by that is, so, I’m looking at the, the helpers.php file, which is inside of the classes directory. </p> <p>So, I wrote a function here that I just called “icon” that takes two parameters. It has a name, which is the name of the icon, and the screen reader text. So, this function will not work if I do not provide screen reader text. So, basically, if the developer here- so this is developer accessibility, um, validation, basically- if I don’t provide a screen reader text, I’m just gonna get an error, and the plugin will no longer function. </p> <p>So, what, what I, what it does here is, you paste a name in, and it gets that file, and then it also requires that you have screen reader text. And then, sorry, let’s get back to the block, and look at that in, so now I’m in the details.php/ So, each of these, you can see, is, so here’s our DL. Once again, the whole block starts with an h2, but we have a DL, so that’s our description list. And then, we have the DT, and inside of that, we have the icon. And then this icon, as we said, is outputting both the, the icon itself and the screen reader text. </p> <p>So, it’s- using a, a function like that cleans up your, the way that this looks, and makes it a lot easier to, to look at, from a development standpoint. And, and then we have the detailed definitions. So, for pages, it’s just one. For the formats, we loop through, and, and print out each one. And then, the rest of them all just have one option, as well.</p> <p><strong>Phil Webster 43:31</strong><br>Alright, let’s go on here. And here’s that, that icon function again. Alright, so, the tricky part is to build a slider that’s accessible. So, one of the things I really recommend is that you do not reinvent the, reinvent the wheel every time you want to add a function, or a new feature to a site. </p> <p>So, there are lots and lots of sliders that are available. So, what we need to do is find one to use, and not start from scratch. It, in the, um, GitHub page, you will find an article, a link to an article called “How to build a more accessible carousel or slider” by Jason Webb. And, in that article, you can find a whole bunch of information about different types of sliders, what a slider should have, what, what to look for in a good slider, and, and how to implement that. </p> <p>A slider that I’ve always, think works well with WordPress is called Slick Slider. It has jQuery as a requirement, so, since WordPress already has that, it is a good one to use. And, there’s actually a fork of Slick Slider that’s called Accessible Slick, that makes it even better. So, let’s take a look at the code for that.</p> <p>So, our slider is in the blocks directory, and it is in reviews. So, actually, let’s go back to classes, where I register the blocks. So, this, this class does all the- handles registering the ACF blocks. So, that is here, when we do reviews. So, we’re just, uh, the, we’re just adding all the attributes for the, for the block here. </p> <p>One of the things that I like about ACF blocks is the ability to, for it to enqueue assets. So, in this “reviews_assets” function down here, this is where I’m adding all of the files for, for Accessible Slick. So, this uses your, I think, the WP enqueue style, and WP enqueue script functions that you typically would see. And I have put the slick- I downloaded and installed the the slick files in a vendor directory here in the plugin. </p> <p>If you wanted to use build tools, you could use NPM to install this, instead of having to manually do that, but I did it manually so that it would be easier for everyone to use the plugin if they want to. So, we’re, we’re enqueueing the scripts, and then, let’s go back to the, the block itself. And in the reviews block. Sorry, we got the PHP file. In reviews.php, I’m, once again, creating a block that will be accessible no matter where we put it.</p> <p><strong>Phil Webster 48:12</strong><br>So, it starts with an h2. It’s wrapped in a section. And then, we’re creating the slider here. So, the slider, once again, is, is, consists of one block, and that block is a, um, quote block. So, we’re putting the quote here, which is just the content of, of that post, which, since it’s a post type. </p> <p>And then, I’m adding this little additional screen reader text here, where it’s “Reviews %s of %s,” and these 2 dollar sign- sorry, “%s,” they get filled with the current review number, and the total reviews. So, on the front end, this will say, in screen reader text “review one of three,” and then, if you move to the next slide, it will then say, “review two of three,” so, so a screen reader user would have the context of which, which slide from the carousel they were on. </p> <p>And, and then, let’s look at the JavaScript for this. So, here’s where we’re kicking it off, down here, just using a regular jQuery function here. So, this is called “initializeblock.” And then, up here you can see, we just call a function “slick” on it. But, the thing that is interesting about Slick Slider is that it gives you- it’s pretty easy for you to change a lot of settings on there. </p> <p>So, one thing to note is that the Accessible Slick is, has autoplay off by default. So, there is no autoplay on this. On the slider, one of the things that you need to provide, for a slider, is the ability to pause it, or stop, stop the motion, if you have that as, if that’s on by default. So, we don’t have to deal with that, because this is paused by default. So, the only way to move the, change the slider is with the navigation that is, that’s there. </p> <p>So, you can navigate with the, with the dots at the bottom. So, you can navigate with these dots, or you can navigate with the arrow buttons. And, you can see, we also have the ability to highlight those with the keyboard, and navigate with the keyboard too. So, you want to be- for navigating that, you want to be able to navigate with a tab button between those, between those different controls. In terms of what these controls need to be, these need to be, these need to be buttons. </p> <p>So, if we- this might not be the best idea, but, let’s see if I can, I can make it bigger. So, there is a button here. And you can put the class of slick next, so that- this, this button is what controls the slider. And, you can see, I’ve added screen reader text here that says “next review,” and slick took care of this for us, but, they hid, they used ARIA hidden to, to hide that icon from screen readers. </p> <p>So, if we look at the code, we can see how easy- alright, I’m gonna, it wasn’t necessarily that easy to hack this, but, the next arrow, and the previous arrow, I had to put all of this HTML in there just so I could change this. So, let’s say “next review” and “previous review.” They’re, they don’t have an a way of declaring just the screen reader text, the screen reader text does exist by default, but it is really generic. So, I’ve updated it so that it would be clear that this was for navigating the reviews. </p> <p>And, this little thing here at the bottom is a way to load this JavaScript on the backside of the website, too, so you can see the slider in the editor itself. So, here, if we add a review, you can see that the review shows up. And then, if I add another one, the slider shows up. So that, I think that makes a little bit better editing experience for the user.</p> <p><strong>Phil Webster 53:35</strong><br>Alright. So, that’s about all I have for my presentation itself. I think it would be great, if we have questions, to go, and have a discussion that way, so that I can actually answer people’s questions they have instead of guessing.</p> <p><strong>Amber Hinds 53:58</strong><br>Well, thank you so much, Phil, that was really awesome. Hopefully I’m here. Yep, I am. I checked my other computer. Does anybody have any questions or thoughts about building plugins and accessibility? Feel free to just unmute, or if you want to raise your hand, or put something in the chat, whatever works best for you. </p> <p>Um, I will say, I’ll maybe get started, Phil. I’m curious to know, as far as, from a developer standpoint, what have you found to be the most helpful as far as learning what you need to do to make code accessible, or the output of code accessible?</p> <p><strong>Phil Webster 54:42</strong><br>Well, the unfair answer is that writing tests for a plugin that checks for accessibility makes you understand the output of [laughs] of what you need a lot. </p> <p>Really, I would say that it’s mostly just making sure you have good HTML. So, good HTML is going to fix a lot of problems. The second thing that fixes a lot of problems is figuring out when you have to break HT- not break HTML. So, in my day job, I’m writing in React probably at least 50% of the time, so at least- so anytime that anything is seen by a user, it’s in React. </p> <p>So, it’s not, I know that React gets a bad rep for being inaccessible, but React, in reality is just outputting HTML. For the most part. We, we do have ways of interacting with it. React, and, any HTML, allows us to, the, Chrome and the, the, the browsers are very forgiving, so, they’ll make broken HTML work. </p> <p>I’ve seen lots of buttons that are really links, and I’ve seen lots of links that are really buttons, but to a sighted user, they work fine. Just knowing what the role of, of the elements that you’re trying to put on the page, what they do, is, using the right, using them for the right thing is the most important thing, I believe. Forms can be really difficult.</p> <p><strong>Amber Hinds 56:42</strong><br>Yeah.</p> <p><strong>Phil Webster 56:43</strong><br>To deal with. I mean, one of the good things about most front end code is that we can just use a plugin that is going to give us an accessible form. It’s when we start to create our own forms, or create interactive elements, that’s where it starts to become tricky. But, still there, it’s like, just properly formatted HTML, having labels, are- it’s gonna help you, like, give you a good start. You’re gonna get a lot of the way there by, by just, by just having good HTML.</p> <p><strong>Amber Hinds 57:24</strong><br>Yeah. So Nick asked, “what are some considerations you have for developers who are blind?”</p> <p><strong>Phil Webster 57:32</strong><br>I would say I don’t have a good ans- I don’t have a good answer for that. I don’t know, like, what the tools, that are in place. I, is Nick’s question about, in terms of, like, the admin of WordPress, or using a code editor? I don’t know what that, like, what particular direction?</p> <p><strong>Amber Hinds 58:02</strong><br>Yeah, we have had some people- I’m not sure if Alex is still here, and if Alex is a developer- but we have had some participants in our Facebook group, who are developers, and, um- oh, I got a clarification but I’ll finish- but also are blind. So, that might be a good question for the Facebook group, because they might have suggestions on like, which text editor works better, and those sorts of things, right? </p> <p>So, Nick’s clarification was, “what considerations do you have for the back end of WordPress?” And the output there for, maybe it’s not necessarily just developers, but more like users, or people who are building the plugin, or setting- building the block, right?</p> <p><strong>Phil Webster 58:57</strong><br>Yeah. So, you know, I mean, it’s, it’s basically the same answer, because the backend of, the backend of WordPress is really still a front end application. It’s just, it’s, you have to log in to get there. I do think that there is not nearly as much attention put there by, at least, third party plugin developers. I know that, like, the block editor itself has seen improvements. I can honestly say that I have not tried to use it with a screen reader. I’ve try- I’ve, I’ve used it with keyboard only to see how that works, and, I feel like it’s, it works fairly well.</p> <p><strong>Amber Hinds 59:46</strong><br>Mhmm. Yeah, I’ve, I feel like we’ve gotten some feedback on things that we’ve built with ACF, and they’ve said that that was fine. But, I think you have to think about, if you’re coding- you know, we put work into this with Accessibility Checker- the same sort of things that you do on the front end, right? So, not having ambiguous links, as much as possible. Using tables only where appropriate. No empty buttons, or, making sure they’re actually buttons. I, so, I think, you know, anytime you’re building a plugin that has settings, you need to make sure you’re following the same HTML semantics that you talked about, so. </p> <p>Joe is asking, “Do you have any plans to submit this to the WordPress plugin repository?” So, I’ll start with that question, and then I’ll follow up with some other questions he had.</p> <p><strong>Phil Webster 1:00:43</strong><br>Right now, I do not. I thought that maybe I would, but I’d have to take all of those ACF blocks, and write custom blocks for them. So that you could, you wouldn’t have to have ACF Pro. At least that’s, that’s how I would want it to work, is without that.</p> <p><strong>Amber Hinds 1:01:00</strong><br>Mhmm. So, do you know, or can you talk a little bit about the approval process for submitting things to wordpress.org, and, will accessibility features make the approval easier or quicker?</p> <p><strong>Phil Webster 1:01:17</strong><br>Um.</p> <p><strong>Amber Hinds 1:01:19</strong><br>Oh, do you want to stop sharing? Someone asked if they could do that so they can get a larger view of the sign- of our interpreters.</p> <p><strong>Phil Webster 1:01:32</strong><br>There we go. So, I don’t, I don’t know this as a fact, but, I don’t think that there’s any kind of accessibility review by the plugin team. At least, so, I don’t think that that would be a consideration for approval or disapproval. I could be wrong, but I don’t think that accessibility is part of that approval process at all. The- on the theme side of things, I think it is, but, I don’t think so on the plugin side of things.</p> <p><strong>Amber Hinds 1:02:09</strong><br>So, my understanding of the plugin review process is that they mostly, I think, have, like, some automated scans that they run, and they look for some really specific things, like, if you’re using prefixes that are unique enough. So, I don’t even think you can have two characters anymore for a prefix. And, they look for, like, some security issues, they look for trademark violations. I’m not certain if they actually activate the plugins and try them, though.</p> <p><strong>Phil Webster 1:02:46</strong><br>Yeah, I don’t, I don’t know. I know they do review all of the code in there.</p> <p><strong>Amber Hinds 1:02:51</strong><br>Mhmm. Yeah.</p> <p><strong>Phil Webster 1:02:51</strong><br>So, yeah. So, like the namespacing that’s in the plugin, I, I’ve, we’ll help with that. So, if you do like a two pref- a two letter prefix, you’re gonna get a response that says, use, “use namespacing or a longer prefix.” And then, the other main thing is, anytime you’re outputting data from the database, you have to use, you have to escape that data. </p> <p>So, you’ll see, in the, in the plugin, there are, those esc- those “escape_html,” or, escape attr- attributes, which are escaping information that’s coming from the database. Which prevents people from, it’s really, it prevents people from adding malicious code, which you really don’t need to worry about that much if you already have to log in to enter information, but, it is just another layer of safety. So, I mean, most people who are going to be posting onto your website as an admin, are not going to inject JavaScript to delete your database or anything. You would hope.</p> <p><strong>Amber Hinds 1:04:00</strong><br>Yeah-</p> <p><strong>Phil Webster 1:04:00</strong><br>-They could just delete it, because they’re already logged in. [Laughs].</p> <p><strong>Amber Hinds 1:04:04</strong><br>I will say, it’s kind of interesting on a, um, I don’t know, just from, like, a standpoint of someone who cares about accessibility, and we’ve talked about this a lot, you know, when we think about, we want to make it easier for people who know nothing about accessibility to build accessible websites. </p> <p>It would be great, I, if there were accessibility audits on plugins, and all themes, because there’s only a optional accessibility audit, if you want to be able to get the Accessibility Ready tag on your theme, and, and then you can apply to get that audit. Otherwise, there is no accessibility audit on, on themes, and there’s no accessibility audit on plugins, which means that the average user, who has never heard of accessibility, will install things and not even know what’s going on. </p> <p>But, I had a conversation about this on Twitter with someone just last week, following the whole, AcessiBe, uh, case, or, situation with Eyebobs, and the lawsuit that got settled. And, the problem is, is that all of the review teams are volunteer. And, I mean, who even knows, like, a lot of those review teams probably don’t even know about accessibility. </p> <p>And then, even beyond that, it’s, an accessibility audit is a much more thorough audit, then what happens, which is why I think they say that if you request one for your theme, it can be really delayed, and it can take a long time because they only have so many people who are qualified to do it. So, that would be such a major shift in the plugin directory, to manage that.</p> <p><strong>Phil Webster 1:05:51</strong><br>Financially, financially, I don’t see how WordPress could support running those audits, since they would have to be manual. Because, any kind of automated, I mean, they could add something that would be automated, but that’s only going to catch a certain percentage of those, of those actual issues.</p> <p><strong>Amber Hinds 1:06:02</strong><br>I mean, a certain, a small percentage would be better than nothing, right? If things were more accessible?</p> <p><strong>Phil Webster 1:06:16</strong><br>True, but then, like, are you going to put some kind of label on it? And then use that as like, “this is accessible”?</p> <p><strong>Amber Hinds 1:06:23</strong><br>Yeah, but it’s not necessarily.</p> <p><strong>Phil Webster 1:06:25</strong><br>Then it’s not really. Yeah.</p> <p><strong>Amber Hinds 1:06:26</strong><br>Yeah. I think the, I think the other problem with that, too, is, right, is it just when the plugin first gets introduced? Or is it every single update? Right? Like, just because there wasn’t an empty button at the beginning doesn’t mean that the developer doesn’t add one later on. Which is a challenge, so. </p> <p>Do you, are, can you speak at all to- so, right now at Delicious Brains, you guys are a plugin company. Do you, do you talk about, or can you speak at all about, like, how accessibility factors into any decisions there, or am I putting you on the spot and you can’t really answer that question?</p> <p><strong>Phil webster 1:07:06</strong><br>You’re putting me on the spot, sort of. But, I would say that like, I, I am, like, I would be considered the advocate for that, at this point. So, I’m advocating for those, those things. I only work on one of the plugins, so. We’re working to improve it, for sure.</p> <p><strong>Amber Hinds 1:07:30</strong><br>Mhmm. Yeah. Yeah, I think that’s the hardest thing, right, is how do we get more companies to make it a priority? And I would love to hear if anybody has any thoughts about this, um, and you wanted to chime in. Um, let’s see, I’m also looking at some of the questions. I think, Brian said, “Is there a way to tell whether a WordPress plugin has been well coded for accessibility? How would you test for that?”</p> <p><strong>Phil Webster 1:08:07</strong><br>I would give, so, here’s two answers. One answer is use the Accessibility Checker plugin-</p> <p><strong>Amber Hinds 1:08:12</strong><br>-I did not, I did not pay Phil to say that. [Laughs]</p> <p><strong>Phil Webster 1:08:15</strong><br>[Laughs] The other set of, like, the other tools that you could use would probably be the, the axe web tools would be would be good ones to use. I have a Chrome extension that is called Accessibility Insights for Web that I, I’ll put the link for that in the chat, so that, that runs the axe web tools. And you can run that, so you can run that in your browser, so you could run that on a local site. You don’t, it doesn’t necessarily have to be, like, a live website, like a lot of the checkers, you have to have it on a website that is going to check it, so this is in your browser. </p> <p>I like that one, because it, um, is, it’s really easy to get to, like, turn on, and to use, because it just sits as a web extension, a Chrome extension. So, you just turn it on, and you can run the test right there. And, that is going to give you, like, real fast answers to, like, there are missing labels, or these, these buttons are you know, have no, are empty, and that the color contrast is, is poor. I think it actually has a setting that’s called, like, “Fastpass,” where it runs through those, like, tests very, very quickly. And it, it’ll also give you a list of things to check, like “manually check these things.” </p> <p>I also use the Lighthouse extension in the Chrome DevTools sometimes. Which, it, it’s a very, it’s very similar to when you do it with the axe, the axe web tools there.</p> <p><strong>Amber Hinds 1:10:09</strong><br>Yeah, we’ll, we’ll frequently test, like, the demos, if it’s a plugin that has a demo. Um, but I, the thing that’s hard about that, I think, with testing the demos, is that you can, you have to be able to know, what are problems that exist in the theme that weren’t actually added by the plugin, because a lot of times the demo site has problems on it, so. So that, it, it kind of requires knowing a little bit, but. Well, we are getting close to time. </p> <p>Does anybody else have any questions or thoughts about plugin development and accessibility, while we have Phil here to answer them? While we’re waiting to see if anyone does, do you want to let everyone know how they can get in touch with you, if they think of something later? Or where they can follow you, or find out more?</p> <p><strong>Phil Webster 1:11:12</strong><br>Sure. So, on, on Twitter, it’s @phil_webs. Isn’t it convenient that my last name, if you stop after four letters, just spells “webs”? It’s like I was born for this. [Laughs]. Or, if you want to send me an email, you can email me at Phil@deliciousbrains.com.</p> <p><strong>Amber Hinds 1:11:44</strong><br>Awesome.</p> <p><strong>Lance Hillier 1:11:46</strong><br>Hey, thanks, thanks for what I heard, guys. I’m sorry I was late. Just a question about, I noticed this is being recorded. Is this going up anywhere, so I can watch back later?</p> <p><strong>Amber Hinds 1:11:59</strong><br>Yes, we rec- we, it usually takes us a few days. So, it might not be by the end of the week, but I’ll definitely be next week, we will have it up on our website, so equalizedigital.com, on our blog. Equalize, equalizedigital.com. We do post the link in, on the Meetup event, and in the Facebook group. And, it takes a little while, because we correct the transcript, and make sure that we have correct captions, and then a correct transcript will be available as well, so.</p> <p><strong>Lance Hillier 1:12:35</strong><br>Great. Thank you.</p> <p><strong>Amber Hinds 1:12:37</strong><br>Yeah, thank you.</p> <p><strong>Phil Webster 1:12:41</strong><br>So, today, I was working on a new feature for for Migrate DB Pro, that has, it has a version of what’s on the site that you’re, are migrating from, and a version of the site that you’re going to, and comparing those two versions of a, of a, either a theme or a plugin. And it has a little arrow that indicates if if the version is the same, if the version is higher or lower. And, you, I think, when you have accessibility in mind, you always need to be thinking about that during the entire process. </p> <p>So, I’m, I’ve started my coding, started changing over, so that I’m coding the accessible part first. So, make it accessible, and then, like, take that away. So like, start with the screen reader text, and then get rid of that, and then put the icon in there. So like, does it work before I mess it up, basically. Before we mess it up. Before we mess with accessibility [laughs] does it work, you know? I think that’s, like, a better way to go about it. Starting, start with accessibility, and then go to, to the design, from that.</p> <p><strong>Amber Hinds 1:13:57</strong><br>Yeah, I think- I definitely agree, like, and maybe that’s one thing, I don’t know how many plugin developers have designers on their team, or actually start with design. Especially for the back end of their plugin, and not the front end. Right? Um, and, which, the one you just talked about, it’s all backend, right?</p> <p><strong>Phil Webster 1:14:16</strong><br>Yeah, it’s a 100% backend plugin.</p> <p><strong>Amber Hinds 1:14:18</strong><br>Mhmm. And, so, it’s like, and I don’t know, you know, if you guys had designs, or created designs, and you have to go create this thing, and you have a design to look at. But I think that would apply the same way that we talked about with websites, which is it is way easier if accessibility starts earlier in the process. </p> <p>So, if you have designs, your plugin designer should be thinking about accessibility. And if you don’t have designs, but they’re saying, “we need to add an arrow,” right, so, I like what you said you output the screen reader text first, you know, “higher,” “lower,” “version number,” or whatever, right? And then you go find the icon to make it pretty. </p> <p>So, and, and I think, too, like, even thinking about that, right, you could have chosen an icon, you could have chosen an icon, which is just a dot, and said, “I’m gonna make it green or red,” but that would cause a problem for somebody if they can’t see red, green, if they can’t distinguish between the two. So, then you have to make the decision, right, to have an arrow up or down, versus just having a dot that changes color.</p> <p><strong>Phil Webster 1:15:27</strong><br>Yeah, and the good thing is the designer that we do have on our team is, he’s open to these discussions. You know, so it, it has to be a conversation. So, you need to have someone who’s advocating for this. Whether it is, you know, if you, if you have the advantage of being on a team, you, someone, if someone’s not advocating for it, it’s going to get left out.</p> <p><strong>Amber Hinds 1:15:52</strong><br>Yeah. Well, you guys may have heard in my background, a little bit, I have a little person who is not very happy right now. And we are about at time. So, thank you so much, Phil, I really appreciate this, and it was nice to have a more developer, code-focused talk. </p> <p>So, we will be, as a reminder, we’ll be putting up the recording and everything soon, we’ll announce that in the Facebook group, and also on the Meetup event page. </p> <p>A quick shout out again, to join our newsletter, which is equalizedigital.com/focus-state, and that will get you also upcoming events, and news and things because the Meetup emails are not especially accessible, as I found out last week. And, please do, if you get a chance to, send a Twitter shout out to our sponsors, we’d very much appreciate that, to thank them. They were, um, we posted them earlier, and we’ll message about them again. So, feel free to say thank you to them, so. </p> <p>Thank you to our captioner, and our interpreters and I hope everyone has a really great evening. Thanks, Phil.</p> </div><footer class="entry-footer"><div class="shared-counts-wrap after_content style-fancy"><a href="https://www.facebook.com/sharer/sharer.php?u=https://equalizedigital.com/building-a-custom-plugin-with-an-accessibility-first-approach/&display=popup&ref=plugin&src=share_button" title="Share on Facebook" target="_blank" rel="nofollow noopener noreferrer" class="shared-counts-button facebook" data-postid="5767" data-social-network="Facebook" data-social-action="Share" data-social-target="https://equalizedigital.com/building-a-custom-plugin-with-an-accessibility-first-approach/"><span class="shared-counts-icon-label"><span class="shared-counts-icon"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="18.8125" height="32" viewBox="0 0 602 1024"><path d="M548 6.857v150.857h-89.714q-49.143 0-66.286 20.571t-17.143 61.714v108h167.429l-22.286 169.143h-145.143v433.714h-174.857v-433.714h-145.714v-169.143h145.714v-124.571q0-106.286 59.429-164.857t158.286-58.571q84 0 130.286 6.857z"></path></svg></span><span class="shared-counts-label">Facebook</span></span><span class="shared-counts-count">2</span></a><a href="https://twitter.com/share?url=https://equalizedigital.com/building-a-custom-plugin-with-an-accessibility-first-approach/&text=Building%20a%20Custom%20Plugin%20with%20an%20Accessibility%20First%20Approach%3A%20Phil%20Webster" title="Share on Twitter" target="_blank" rel="nofollow noopener noreferrer" class="shared-counts-button twitter shared-counts-no-count" data-postid="5767" data-social-network="Twitter" data-social-action="Tweet" data-social-target="https://equalizedigital.com/building-a-custom-plugin-with-an-accessibility-first-approach/"><span class="shared-counts-icon-label"><span class="shared-counts-icon"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13.8944 10.4695L21.3345 2H19.5716L13.1085 9.35244L7.95022 2H1.99936L9.80147 13.1192L1.99936 22H3.76218L10.5832 14.2338L16.0318 22H21.9827L13.8944 10.4695ZM11.4792 13.2168L10.6875 12.1089L4.39789 3.30146H7.10594L12.1833 10.412L12.9717 11.5199L19.5708 20.7619H16.8628L11.4792 13.2168Z" /></svg></span><span class="shared-counts-label">Tweet</span></span><span class="shared-counts-count">0</span></a><a href="https://www.linkedin.com/shareArticle?mini=true&url=https://equalizedigital.com/building-a-custom-plugin-with-an-accessibility-first-approach/" title="Share on LinkedIn" target="_blank" rel="nofollow noopener noreferrer" class="shared-counts-button linkedin shared-counts-no-count" data-postid="5767" data-social-network="LinkedIn" data-social-action="Share" data-social-target="https://equalizedigital.com/building-a-custom-plugin-with-an-accessibility-first-approach/"><span class="shared-counts-icon-label"><span class="shared-counts-icon"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="27.4375" height="32" viewBox="0 0 878 1024"><path d="M199.429 357.143v566.286h-188.571v-566.286h188.571zM211.429 182.286q0.571 41.714-28.857 69.714t-77.429 28h-1.143q-46.857 0-75.429-28t-28.571-69.714q0-42.286 29.429-70t76.857-27.714 76 27.714 29.143 70zM877.714 598.857v324.571h-188v-302.857q0-60-23.143-94t-72.286-34q-36 0-60.286 19.714t-36.286 48.857q-6.286 17.143-6.286 46.286v316h-188q1.143-228 1.143-369.714t-0.571-169.143l-0.571-27.429h188v82.286h-1.143q11.429-18.286 23.429-32t32.286-29.714 49.714-24.857 65.429-8.857q97.714 0 157.143 64.857t59.429 190z"></path></svg></span><span class="shared-counts-label">LinkedIn</span></span><span class="shared-counts-count">0</span></a><a href="" title="Print this Page" class="shared-counts-button print shared-counts-no-count" data-postid="5767" data-social-network="Print" data-social-action="Printed" data-social-target="https://equalizedigital.com/building-a-custom-plugin-with-an-accessibility-first-approach/"><span class="shared-counts-icon-label"><span class="shared-counts-icon"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="29.71875" height="32" viewBox="0 0 951 1024"><path d="M219.429 877.714h512v-146.286h-512v146.286zM219.429 512h512v-219.429h-91.429q-22.857 0-38.857-16t-16-38.857v-91.429h-365.714v365.714zM877.714 548.571q0-14.857-10.857-25.714t-25.714-10.857-25.714 10.857-10.857 25.714 10.857 25.714 25.714 10.857 25.714-10.857 10.857-25.714zM950.857 548.571v237.714q0 7.429-5.429 12.857t-12.857 5.429h-128v91.429q0 22.857-16 38.857t-38.857 16h-548.571q-22.857 0-38.857-16t-16-38.857v-91.429h-128q-7.429 0-12.857-5.429t-5.429-12.857v-237.714q0-45.143 32.286-77.429t77.429-32.286h36.571v-310.857q0-22.857 16-38.857t38.857-16h384q22.857 0 50.286 11.429t43.429 27.429l86.857 86.857q16 16 27.429 43.429t11.429 50.286v146.286h36.571q45.143 0 77.429 32.286t32.286 77.429z"></path></svg></span><span class="shared-counts-label">Print</span></span><span class="shared-counts-count">0</span></a><span class="shared-counts-button included_total" data-postid="5767" data-social-target="https://equalizedigital.com/building-a-custom-plugin-with-an-accessibility-first-approach/"><span class="shared-counts-icon-label"><span class="shared-counts-icon"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="27.4375" height="32" viewBox="0 0 878 1024"><path d="M694.857 585.143q76 0 129.429 53.429t53.429 129.429-53.429 129.429-129.429 53.429-129.429-53.429-53.429-129.429q0-6.857 1.143-19.429l-205.714-102.857q-52.571 49.143-124.571 49.143-76 0-129.429-53.429t-53.429-129.429 53.429-129.429 129.429-53.429q72 0 124.571 49.143l205.714-102.857q-1.143-12.571-1.143-19.429 0-76 53.429-129.429t129.429-53.429 129.429 53.429 53.429 129.429-53.429 129.429-129.429 53.429q-72 0-124.571-49.143l-205.714 102.857q1.143 12.571 1.143 19.429t-1.143 19.429l205.714 102.857q52.571-49.143 124.571-49.143z"></path></svg></span><span class="shared-counts-label">Shares</span></span><span class="shared-counts-count">2</span></span></div><p class="entry-meta"><span class="entry-categories">Filed Under: <a href="https://equalizedigital.com/category/recorded-webinars/" rel="category tag">Recorded Webinars</a></span> <span class="entry-tags"> <a href="https://equalizedigital.com/tag/wordpress-accessibility-meetup/" rel="tag">WordPress Accessibility Meetup</a></span></p></footer></article><section class="author-box"><img alt src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='70'%20height='70'%20viewBox='0%200%2070%2070'%3E%3C/svg%3E" class="avatar avatar-70 photo perfmatters-lazy" height="70" width="70" decoding="async" data-src="https://secure.gravatar.com/avatar/31a282a697924328bd766eba9e906d2a?s=70&d=mm&r=g" data-srcset="https://secure.gravatar.com/avatar/31a282a697924328bd766eba9e906d2a?s=140&d=mm&r=g 2x" /><noscript><img alt='' src='https://secure.gravatar.com/avatar/31a282a697924328bd766eba9e906d2a?s=70&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/31a282a697924328bd766eba9e906d2a?s=140&d=mm&r=g 2x' class='avatar avatar-70 photo' height='70' width='70' decoding='async'/></noscript><h2 class="author-box-title">About <span itemprop="name">Equalize Digital</span></h2><div class="author-box-content" itemprop="description"><p>Equalize Digital's team has specialized in WordPress accessibility for more than a decade. We offer <a href="https://equalizedigital.com/services/website-accessibility-audit/">accessibility audits</a>, <a href="https://equalizedigital.com/services/website-accessibility-remediation/">WordPress accessibility remediation</a>, <a href="https://equalizedigital.com/services/web-accessibility-user-testing/">user testing</a>, and build <a href="https://equalizedigital.com/services/accessible-website-development/">bespoke, accessibility-first websites</a>. Our <a href="https://equalizedigital.com/accessibility-checker">WordPress Accessibility Checker plugin</a> is used by large and small businesses, nonprofits, higher ed, and government websites worldwide. Try it free today.</p> </div></section> <nav class="navigation post-navigation" aria-label="Posts"> <h2 class="screen-reader-text">Post navigation</h2> <div class="nav-links"><div class="nav-previous"><a href="https://equalizedigital.com/introducing-focus-state/" rel="prev"><img width="1600" height="840" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='840'%20viewBox='0%200%201600%20840'%3E%3C/svg%3E" class="attachment-awp-article size-awp-article wp-image-5757 wp-post-image perfmatters-lazy" alt="Black or African American man holding smart phone and reading the Focus State accessibility email newsletter" decoding="async" data-src="https://equalizedigital.com/wp-content/uploads/2021/11/Focus-State-on-Phone-large-1600x840.png" data-srcset="https://equalizedigital.com/wp-content/uploads/2021/11/Focus-State-on-Phone-large-1600x840.png 1600w, https://equalizedigital.com/wp-content/uploads/2021/11/Focus-State-on-Phone-large-800x420.png 800w" data-sizes="(max-width: 1600px) 100vw, 1600px" /><noscript><img width="1600" height="840" src="https://equalizedigital.com/wp-content/uploads/2021/11/Focus-State-on-Phone-large-1600x840.png" class="attachment-awp-article size-awp-article wp-image-5757 wp-post-image" alt="Black or African American man holding smart phone and reading the Focus State accessibility email newsletter" decoding="async" srcset="https://equalizedigital.com/wp-content/uploads/2021/11/Focus-State-on-Phone-large-1600x840.png 1600w, https://equalizedigital.com/wp-content/uploads/2021/11/Focus-State-on-Phone-large-800x420.png 800w" sizes="(max-width: 1600px) 100vw, 1600px" /></noscript><span class="screen-reader-text">Previous post:</span> <span class="post-title">Introducing Focus State</span></a></div><div class="nav-next"><a href="https://equalizedigital.com/hiring-a-content-specialist/" rel="next"><img width="800" height="420" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='800'%20height='420'%20viewBox='0%200%20800%20420'%3E%3C/svg%3E" class="attachment-awp-article size-awp-article wp-image-5774 wp-post-image perfmatters-lazy" alt="speech bubble coming out of megaphone with the words we're hiring" decoding="async" data-src="https://equalizedigital.com/wp-content/uploads/2021/11/were-hiring-equalize-digital-800x420.png" data-srcset="https://equalizedigital.com/wp-content/uploads/2021/11/were-hiring-equalize-digital-800x420.png 800w, https://equalizedigital.com/wp-content/uploads/2021/11/were-hiring-equalize-digital-300x158.png 300w, https://equalizedigital.com/wp-content/uploads/2021/11/were-hiring-equalize-digital-768x403.png 768w, https://equalizedigital.com/wp-content/uploads/2021/11/were-hiring-equalize-digital-1024x538.png 1024w, https://equalizedigital.com/wp-content/uploads/2021/11/were-hiring-equalize-digital-1536x806.png 1536w, https://equalizedigital.com/wp-content/uploads/2021/11/were-hiring-equalize-digital.png 1600w" data-sizes="(max-width: 800px) 100vw, 800px" /><noscript><img width="800" height="420" src="https://equalizedigital.com/wp-content/uploads/2021/11/were-hiring-equalize-digital-800x420.png" class="attachment-awp-article size-awp-article wp-image-5774 wp-post-image" alt="speech bubble coming out of megaphone with the words we're hiring" decoding="async" srcset="https://equalizedigital.com/wp-content/uploads/2021/11/were-hiring-equalize-digital-800x420.png 800w, https://equalizedigital.com/wp-content/uploads/2021/11/were-hiring-equalize-digital-300x158.png 300w, https://equalizedigital.com/wp-content/uploads/2021/11/were-hiring-equalize-digital-768x403.png 768w, https://equalizedigital.com/wp-content/uploads/2021/11/were-hiring-equalize-digital-1024x538.png 1024w, https://equalizedigital.com/wp-content/uploads/2021/11/were-hiring-equalize-digital-1536x806.png 1536w, https://equalizedigital.com/wp-content/uploads/2021/11/were-hiring-equalize-digital.png 1600w" sizes="(max-width: 800px) 100vw, 800px" /></noscript><span class="screen-reader-text">Next post:</span> <span class="post-title">We’re Hiring a Content Specialist</span></a></div></div> </nav></main></div></div> <div class="before-footer-widgets"> </div> <div class="before-footer-2-widgets"> <div class="before-footer-2-overlay"> <section id="custom_html-6" class="widget_text widget widget_custom_html"><div class="widget_text widget-wrap"><div class="textwidget custom-html-widget"><div class="left-col"> <h2> Easier, Faster Accessibility Testing</h2> <p> Equalize Digital Accessibility Checker gives you real-time accessibility feedback in the WordPress editor. Learn accessibility and make fixes earlier in the dev and content creation process. Full-site accessibility scanning without the per page fees. </p> </div> <div class="right-col"> <a href="https://equalizedigital.com/accessibility-checker" class="primary-button">Get Accessibility Checker</a> </div> </div></div></section> </div> </div> <div class="footer-wrap"><div class="footer-widgets" id="genesis-footer-widgets"><h2 class="genesis-sidebar-title screen-reader-text">Footer</h2><div class="wrap"><div class="widget-area footer-widgets-1 footer-widget-area"><section id="media_image-5" class="widget widget_media_image"><div class="widget-wrap"><img width="400" height="147" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='147'%20viewBox='0%200%20400%20147'%3E%3C/svg%3E" class="image wp-image-5691 attachment-full size-full perfmatters-lazy" alt="Equalize Digital Websites for Everyone" style="max-width: 100%; height: auto;" decoding="async" data-src="https://equalizedigital.com/wp-content/uploads/2021/11/Equalize-Digital-white-logo-400px.png" data-srcset="https://equalizedigital.com/wp-content/uploads/2021/11/Equalize-Digital-white-logo-400px.png 400w, https://equalizedigital.com/wp-content/uploads/2021/11/Equalize-Digital-white-logo-400px-300x110.png 300w" data-sizes="(max-width: 400px) 100vw, 400px" /><noscript><img width="400" height="147" src="https://equalizedigital.com/wp-content/uploads/2021/11/Equalize-Digital-white-logo-400px.png" class="image wp-image-5691 attachment-full size-full" alt="Equalize Digital Websites for Everyone" style="max-width: 100%; height: auto;" decoding="async" srcset="https://equalizedigital.com/wp-content/uploads/2021/11/Equalize-Digital-white-logo-400px.png 400w, https://equalizedigital.com/wp-content/uploads/2021/11/Equalize-Digital-white-logo-400px-300x110.png 300w" sizes="(max-width: 400px) 100vw, 400px" /></noscript></div></section> <section id="text-11" class="widget widget_text"><div class="widget-wrap"> <div class="textwidget"><p>Your WordPress accessibility team. Accessibility plugins, rapid audits, and consulting to help you make your website usable by people of all abilities.</p> </div> </div></section> <section id="simple-social-icons-3" class="widget simple-social-icons"><div class="widget-wrap"><ul class="alignleft"><li class="ssi-facebook"><a href="https://www.facebook.com/groups/wordpress.accessibility" ><svg role="img" class="social-facebook" aria-labelledby="social-facebook-3"><title id="social-facebook-3">Facebook</title><use xlink:href="https://equalizedigital.com/wp-content/plugins/simple-social-icons/symbol-defs.svg#social-facebook"></use></svg></a></li><li class="ssi-github"><a href="https://github.com/equalizedigital" ><svg role="img" class="social-github" aria-labelledby="social-github-3"><title id="social-github-3">GitHub</title><use xlink:href="https://equalizedigital.com/wp-content/plugins/simple-social-icons/symbol-defs.svg#social-github"></use></svg></a></li><li class="ssi-linkedin"><a href="https://www.linkedin.com/company/equalizedigital" ><svg role="img" class="social-linkedin" aria-labelledby="social-linkedin-3"><title id="social-linkedin-3">LinkedIn</title><use xlink:href="https://equalizedigital.com/wp-content/plugins/simple-social-icons/symbol-defs.svg#social-linkedin"></use></svg></a></li><li class="ssi-twitter"><a href="https://twitter.com/equalizedigital" ><svg role="img" class="social-twitter" aria-labelledby="social-twitter-3"><title id="social-twitter-3">Twitter</title><use xlink:href="https://equalizedigital.com/wp-content/plugins/simple-social-icons/symbol-defs.svg#social-twitter"></use></svg></a></li></ul></div></section> </div><div class="widget-area footer-widgets-2 footer-widget-area"><section id="nav_menu-3" class="widget widget_nav_menu"><div class="widget-wrap"><h3 class="widgettitle widget-title">Company</h3> <div class="menu-company-container"><ul id="menu-company" class="menu"><li id="menu-item-3308" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3308"><a href="https://equalizedigital.com/about/">About Equalize Digital</a></li> <li id="menu-item-5964" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5964"><a href="https://equalizedigital.com/wordpress-accessibility-meetup/">WordPress Accessibility Meetup</a></li> <li id="menu-item-2205" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2205"><a href="https://equalizedigital.com/about/accessibility-statement/">Accessibility Statement</a></li> <li id="menu-item-3310" class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-3310"><a href="https://equalizedigital.com/resources/">Blog</a></li> <li id="menu-item-6646" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6646"><a href="https://equalizedigital.com/events/">Events</a></li> <li id="menu-item-5686" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5686"><a href="https://equalizedigital.com/contact/">Contact Us</a></li> </ul></div></div></section> </div><div class="widget-area footer-widgets-3 footer-widget-area"><section id="nav_menu-5" class="widget widget_nav_menu"><div class="widget-wrap"><h3 class="widgettitle widget-title">Services</h3> <div class="menu-services-container"><ul id="menu-services" class="menu"><li id="menu-item-2484" class="menu-item menu-item-type-post_type menu-item-object-service menu-item-2484"><a href="https://equalizedigital.com/services/accessible-website-development/">Website Development</a></li> <li id="menu-item-2481" class="menu-item menu-item-type-post_type menu-item-object-service menu-item-2481"><a href="https://equalizedigital.com/services/website-accessibility-audit/">Accessibility Audits</a></li> <li id="menu-item-2482" class="menu-item menu-item-type-post_type menu-item-object-service menu-item-2482"><a href="https://equalizedigital.com/services/web-accessibility-user-testing/">User Testing</a></li> <li id="menu-item-2483" class="menu-item menu-item-type-post_type menu-item-object-service menu-item-2483"><a href="https://equalizedigital.com/services/website-accessibility-remediation/">Remediation</a></li> <li id="menu-item-2486" class="menu-item menu-item-type-post_type menu-item-object-service menu-item-2486"><a href="https://equalizedigital.com/services/website-accessibility-monitoring/">Ongoing Monitoring</a></li> <li id="menu-item-2487" class="menu-item menu-item-type-post_type menu-item-object-service menu-item-2487"><a href="https://equalizedigital.com/services/website-accessibility-training/">Accessibility Training</a></li> <li id="menu-item-5003" class="menu-item menu-item-type-post_type menu-item-object-service menu-item-5003"><a href="https://equalizedigital.com/services/accessibility-for-agencies/">For Agencies</a></li> </ul></div></div></section> </div><div class="widget-area footer-widgets-4 footer-widget-area"><section id="nav_menu-10" class="widget widget_nav_menu"><div class="widget-wrap"><h3 class="widgettitle widget-title">Accessibility Checker</h3> <div class="menu-accessibility-checker-container"><ul id="menu-accessibility-checker" class="menu"><li id="menu-item-5005" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5005"><a href="https://equalizedigital.com/accessibility-checker/features/">Features</a></li> <li id="menu-item-5006" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5006"><a href="https://equalizedigital.com/accessibility-checker/pricing">Pricing</a></li> <li id="menu-item-5008" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5008"><a href="https://equalizedigital.com/accessibility-checker/documentation">Documentation</a></li> <li id="menu-item-5009" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5009"><a href="https://equalizedigital.com/support/">How to Get Support</a></li> <li id="menu-item-5010" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5010"><a href="https://my.equalizedigital.com/">My Account</a></li> <li id="menu-item-5013" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5013"><a href="https://my.equalizedigital.com/my-account/affiliate-dashboard/">Affiliate Dashboard</a></li> <li id="menu-item-5012" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5012"><a href="https://equalizedigital.com/affiliate-program/">Become an Affiliate</a></li> </ul></div></div></section> </div></div></div><footer class="site-footer"><div class="wrap"><p><strong>© 2024 Equalize Digital</strong> · <a href="https://equalizedigital.com/privacy-policy/">Privacy Policy</a> · <a href="https://equalizedigital.com/terms-of-service/">Terms of Service</a> · <a href="https://equalizedigital.com/software-terms">Software Terms & Refund Policy</a><div class="cert-logos"><a href="https://www.accessibilityassociation.org/" style="margin-left:20px"><img width="411" height="119" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='411'%20height='119'%20viewBox='0%200%20411%20119'%3E%3C/svg%3E" alt="International Association of Accessibility Professionals member" style="height:52px;width:auto;margin-top: 8px" class="perfmatters-lazy" data-src="https://equalizedigital.com/wp-content/uploads/2021/04/IAAP-logo.png" /><noscript><img width="411" height="119" src="https://equalizedigital.com/wp-content/uploads/2021/04/IAAP-logo.png" alt="International Association of Accessibility Professionals member" style="height:52px;width:auto;margin-top: 8px"></noscript></a></div></p></div></footer></div></div><script async src="https://equalizedigital.com/wp-content/uploads/perfmatters/gtagv4.js?id=G-MGVKKL4XCQ" type="pmdelayedscript" data-cfasync="false" data-no-optimize="1" data-no-defer="1" data-no-minify="1"></script><script type="pmdelayedscript" data-cfasync="false" data-no-optimize="1" data-no-defer="1" data-no-minify="1">window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag("js", new Date());gtag("config", "G-MGVKKL4XCQ");</script> <script> ( function ( body ) { 'use strict'; body.className = body.className.replace( /\btribe-no-js\b/, 'tribe-js' ); } )( document.body ); </script> <div id="pum-8042" class="pum pum-overlay pum-theme-8033 pum-theme-default-theme popmake-overlay pum-click-to-close auto_open click_open" data-popmake="{"id":8042,"slug":"small-business-accessibility-playbook","theme_id":8033,"cookies":[{"event":"on_popup_close","settings":{"name":"pum-8042","key":"","session":false,"path":"1","time":"1 month"}},{"event":"form_submission","settings":{"name":"pum-8042","key":"","session":null,"path":true,"time":"1 month","form":"gravityforms_44"}}],"triggers":[{"type":"auto_open","settings":{"cookie_name":["pum-8042"],"delay":"1000"}},{"type":"click_open","settings":{"extra_selectors":"","cookie_name":null}}],"mobile_disabled":null,"tablet_disabled":null,"meta":{"display":{"stackable":false,"overlay_disabled":false,"scrollable_content":false,"disable_reposition":false,"size":"medium","responsive_min_width":"0%","responsive_min_width_unit":false,"responsive_max_width":"100%","responsive_max_width_unit":false,"custom_width":"640px","custom_width_unit":false,"custom_height":"380px","custom_height_unit":false,"custom_height_auto":false,"location":"center","position_from_trigger":false,"position_top":"100","position_left":"0","position_bottom":"0","position_right":"0","position_fixed":false,"animation_type":"fade","animation_speed":"350","animation_origin":"center top","overlay_zindex":false,"zindex":"1999999999"},"close":{"text":"","button_delay":"0","overlay_click":"1","esc_press":"1","f4_press":false},"click_open":[]}}" role="dialog" aria-modal="false" aria-labelledby="pum_popup_title_8042"> <div id="popmake-8042" class="pum-container popmake theme-8033 pum-responsive pum-responsive-medium responsive size-medium"> <div id="pum_popup_title_8042" class="pum-title popmake-title"> Small Business Accessibility Playbook </div> <div class="pum-content popmake-content" tabindex="0"> <style> #popmake-8042{background: linear-gradient(90deg, rgba(12,42,77,1) 25%, rgba(1,87,152,1) 65%); max-width:760px !important;} #popmake-8042 #gform_previous_button_45{display:none;} #popmake-8042 .gfield-choice-input {vertical-align:top;} @media screen and (max-width: 1020px) { #popmake-8042 {max-width:360px !important;} #popmake-8042 h2{margin-top:25px;padding-right:20px !important;} .edpop-content {padding-top:20px !important; min-height:200px !important;} .popmake-close {border: 1px solid #fff;}}<br /></style> <div> <div class="one-half first" style="align-content: end; min-height: 450px;"> <h2 style="color: #fff; font-size: 28px; padding: 50px 0 0 25px; margin-bottom: 0; font-style: italic;">Learn how to make your website accessible.</h2> <p style="margin-bottom: 0;"><img fetchpriority="high" decoding="async" class="alignnone wp-image-8046 size-large" style="margin-bottom: 0; max-width: 400px; width: 100%;" src="https://equalizedigital.com/wp-content/uploads/2024/06/transparent-background-1024x1024.png" alt="Free Ebook: The Small Business Accessibility Playbook for WordPress by Equalize Digital and WP Buffs." width="1024" height="1024" srcset="https://equalizedigital.com/wp-content/uploads/2024/06/transparent-background-1024x1024.png 1024w, https://equalizedigital.com/wp-content/uploads/2024/06/transparent-background-300x300.png 300w, https://equalizedigital.com/wp-content/uploads/2024/06/transparent-background-150x150.png 150w, https://equalizedigital.com/wp-content/uploads/2024/06/transparent-background-768x768.png 768w, https://equalizedigital.com/wp-content/uploads/2024/06/transparent-background-75x75.png 75w, https://equalizedigital.com/wp-content/uploads/2024/06/transparent-background.png 1080w" sizes="(max-width: 1024px) 100vw, 1024px" /></p> </div> <div class="one-half edpop-content" style="padding: 52px 18px 20px 20px; background: #fff; min-height: 450px;"><script type="text/javascript"></script> <div class='gf_browser_ie gf_browser_ie7 gform_wrapper gravity-theme gform-theme--no-framework' data-form-theme='gravity-theme' data-form-index='0' id='gform_wrapper_45' ><div id='gf_45' class='gform_anchor' tabindex='-1'></div> <div class='gform_heading'> <p class='gform_description'>Get a copy of the free e-book via email.</p> </div><form method='post' enctype='multipart/form-data' target='gform_ajax_frame_45' id='gform_45' action='/building-a-custom-plugin-with-an-accessibility-first-approach/#gf_45' data-formid='45' novalidate> <input type='hidden' class='gforms-pum' value='{"closepopup":false,"closedelay":0,"openpopup":false,"openpopup_id":0}' /> <div class='gform-body gform_body'><div id='gform_fields_45' class='gform_fields top_label form_sublabel_below description_below validation_below'><fieldset id="field_45_1" class="gfield gfield--type-name gfield--input-type-name gfield_contains_required field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible" data-js-reload="field_45_1" ><legend class='gfield_label gform-field-label gfield_label_before_complex' >Name<span class="gfield_required"><span class="gfield_required gfield_required_text">(Required)</span></span></legend><div class='ginput_complex ginput_container ginput_container--name no_prefix has_first_name no_middle_name has_last_name no_suffix gf_name_has_2 ginput_container_name gform-grid-row' id='input_45_1'> <span id='input_45_1_3_container' class='name_first gform-grid-col gform-grid-col--size-auto' > <input type='text' name='input_1.3' id='input_45_1_3' value='' aria-required='true' /> <label for='input_45_1_3' class='gform-field-label gform-field-label--type-sub '>First</label> </span> <span id='input_45_1_6_container' class='name_last gform-grid-col gform-grid-col--size-auto' > <input type='text' name='input_1.6' id='input_45_1_6' value='' aria-required='true' /> <label for='input_45_1_6' class='gform-field-label gform-field-label--type-sub '>Last</label> </span> </div></fieldset><div id="field_45_4" class="gfield gfield--type-email gfield--input-type-email gfield--width-full gfield_contains_required field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible" data-js-reload="field_45_4" ><label class='gfield_label gform-field-label' for='input_45_4'>Email<span class="gfield_required"><span class="gfield_required gfield_required_text">(Required)</span></span></label><div class='ginput_container ginput_container_email'> <input name='input_4' id='input_45_4' type='email' value='' class='large' aria-required="true" aria-invalid="false" /> </div></div><div id="field_45_3" class="gfield gfield--type-text gfield--input-type-text gfield--width-full field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_hidden" data-js-reload="field_45_3" ><div class='admin-hidden-markup'><i class='gform-icon gform-icon--hidden'></i><span>Hidden</span></div><label class='gfield_label gform-field-label' for='input_45_3'>Company Name</label><div class='ginput_container ginput_container_text'><input name='input_3' id='input_45_3' type='text' value='' class='large' aria-invalid="false" /> </div></div><div id="field_45_9" class="gfield gfield--type-phone gfield--input-type-phone gfield--width-full field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_hidden" data-js-reload="field_45_9" ><div class='admin-hidden-markup'><i class='gform-icon gform-icon--hidden'></i><span>Hidden</span></div><label class='gfield_label gform-field-label' for='input_45_9'>Phone</label><div class='ginput_container ginput_container_phone'><input name='input_9' id='input_45_9' type='tel' value='' class='large' aria-invalid="false" /></div></div><fieldset id="field_45_10" class="gfield gfield--type-checkbox gfield--type-choice gfield--input-type-checkbox gfield--width-full gfield_contains_required field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible" data-js-reload="field_45_10" ><legend class='gfield_label gform-field-label gfield_label_before_complex' >Privacy Policy<span class="gfield_required"><span class="gfield_required gfield_required_text">(Required)</span></span></legend><div class='ginput_container ginput_container_checkbox'><div class='gfield_checkbox' id='input_45_10'><div class='gchoice gchoice_45_10_1'> <input class='gfield-choice-input' name='input_10.1' type='checkbox' value='I opt-in to receive emails from Equalize Digital and WP Buffs. I can unsubscribe at any time. For more information, see the <a href="https://equalizedigital.com/privacy-policy/" target="_blank">privacy policy.</a>' id='choice_45_10_1' /> <label for='choice_45_10_1' id='label_45_10_1' class='gform-field-label gform-field-label--type-inline'>I opt-in to receive emails from Equalize Digital and WP Buffs. I can unsubscribe at any time. For more information, see the <a href="https://equalizedigital.com/privacy-policy/" target="_blank">privacy policy.</a></label> </div></div></div></fieldset><div id="field_45_8" class="gfield gfield--type-text gfield--input-type-text gfield--width-full field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_hidden" data-js-reload="field_45_8" ><div class='admin-hidden-markup'><i class='gform-icon gform-icon--hidden'></i><span>Hidden</span></div><label class='gfield_label gform-field-label' for='input_45_8'>Source URL</label><div class='ginput_container ginput_container_text'><input name='input_8' id='input_45_8' type='text' value='https://equalizedigital.com/building-a-custom-plugin-with-an-accessibility-first-approach/' class='large' aria-invalid="false" /> </div></div><div id="field_45_7" class="gfield gfield--type-handlfree_utm_campaign gfield--input-type-handlfree_utm_campaign gfield--width-third field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible" data-js-reload="field_45_7" ><div class='ginput_container ginput_container_text'><input name='input_7' id='input_45_7' type='hidden' class='gform_hidden' aria-invalid="false" value='' /></div></div><div id="field_45_6" class="gfield gfield--type-handlfree_utm_medium gfield--input-type-handlfree_utm_medium gfield--width-third field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible" data-js-reload="field_45_6" ><div class='ginput_container ginput_container_text'><input name='input_6' id='input_45_6' type='hidden' class='gform_hidden' aria-invalid="false" value='' /></div></div><div id="field_45_5" class="gfield gfield--type-handlfree_utm_source gfield--input-type-handlfree_utm_source gfield--width-third field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible" data-js-reload="field_45_5" ><div class='ginput_container ginput_container_text'><input name='input_5' id='input_45_5' type='hidden' class='gform_hidden' aria-invalid="false" value='' /></div></div><div id="field_45_11" class="gfield gfield--type-honeypot gform_validation_container field_sublabel_below gfield--has-description field_description_below field_validation_below gfield_visibility_visible" data-js-reload="field_45_11" ><label class='gfield_label gform-field-label' for='input_45_11'>Comments</label><div class='ginput_container'><input name='input_11' id='input_45_11' type='text' value='' autocomplete='new-password'/></div><div class='gfield_description' id='gfield_description_45_11'>This field is for validation purposes and should be left unchanged.</div></div></div></div> <div class='gform_footer top_label'> <span class="input-wrapper"><input type="hidden" name="affwp_action" value="affiliate_register" /><input type='submit' id='gform_submit_button_45' class='gform_button button' value='Submit' onclick='if(window["gf_submitting_45"]){return false;} if( !jQuery("#gform_45")[0].checkValidity || jQuery("#gform_45")[0].checkValidity()){window["gf_submitting_45"]=true;} ' onkeypress='if( event.keyCode == 13 ){ if(window["gf_submitting_45"]){return false;} if( !jQuery("#gform_45")[0].checkValidity || jQuery("#gform_45")[0].checkValidity()){window["gf_submitting_45"]=true;} jQuery("#gform_45").trigger("submit",[true]); }' /><span class="input-after" ></span></span> <input type='hidden' name='gform_ajax' value='form_id=45&title=&description=1&tabindex=0&theme=gravity-theme' /> <input type='hidden' class='gform_hidden' name='is_submit_45' value='1' /> <input type='hidden' class='gform_hidden' name='gform_submit' value='45' /> <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' /> <input type='hidden' class='gform_hidden' name='state_45' value='WyJ7XCIxMC4xXCI6XCJhNWE4NjZmYmYwZmM0ZTU4NDBmMGZjMDRhZWVkNTE2Y1wifSIsImE3YmNmY2NkNmVjNWRiN2VlMjRmNTZmNTRjOThkMzhlIl0=' /> <input type='hidden' class='gform_hidden' name='gform_target_page_number_45' id='gform_target_page_number_45' value='0' /> <input type='hidden' class='gform_hidden' name='gform_source_page_number_45' id='gform_source_page_number_45' value='1' /> <input type='hidden' name='gform_field_values' value='' /> </div> </form> </div> <iframe style='display:none;width:0px;height:0px;' src='about:blank' name='gform_ajax_frame_45' id='gform_ajax_frame_45' title='This iframe contains the logic required to handle Ajax powered Gravity Forms.'></iframe> <script type="text/javascript"> /* <![CDATA[ */ gform.initializeOnLoaded( function() {gformInitSpinner( 45, 'https://equalizedigital.com/wp-content/plugins/gravityforms/images/spinner.svg', true );jQuery('#gform_ajax_frame_45').on('load',function(){var contents = jQuery(this).contents().find('*').html();var is_postback = contents.indexOf('GF_AJAX_POSTBACK') >= 0;if(!is_postback){return;}var form_content = jQuery(this).contents().find('#gform_wrapper_45');var is_confirmation = jQuery(this).contents().find('#gform_confirmation_wrapper_45').length > 0;var is_redirect = contents.indexOf('gformRedirect(){') >= 0;var is_form = form_content.length > 0 && ! is_redirect && ! is_confirmation;var mt = parseInt(jQuery('html').css('margin-top'), 10) + parseInt(jQuery('body').css('margin-top'), 10) + 100;if(is_form){jQuery('#gform_wrapper_45').html(form_content.html());if(form_content.hasClass('gform_validation_error')){jQuery('#gform_wrapper_45').addClass('gform_validation_error');} else {jQuery('#gform_wrapper_45').removeClass('gform_validation_error');}setTimeout( function() { /* delay the scroll by 50 milliseconds to fix a bug in chrome */ jQuery(document).scrollTop(jQuery('#gform_wrapper_45').offset().top - mt); }, 50 );if(window['gformInitDatepicker']) {gformInitDatepicker();}if(window['gformInitPriceFields']) {gformInitPriceFields();}var current_page = jQuery('#gform_source_page_number_45').val();gformInitSpinner( 45, 'https://equalizedigital.com/wp-content/plugins/gravityforms/images/spinner.svg', true );jQuery(document).trigger('gform_page_loaded', [45, current_page]);window['gf_submitting_45'] = false;}else if(!is_redirect){var confirmation_content = jQuery(this).contents().find('.GF_AJAX_POSTBACK').html();if(!confirmation_content){confirmation_content = contents;}jQuery('#gform_wrapper_45').replaceWith(confirmation_content);jQuery(document).scrollTop(jQuery('#gf_45').offset().top - mt);jQuery(document).trigger('gform_confirmation_loaded', [45]);window['gf_submitting_45'] = false;wp.a11y.speak(jQuery('#gform_confirmation_message_45').text());}else{jQuery('#gform_45').append(contents);if(window['gformRedirect']) {gformRedirect();}}jQuery(document).trigger("gform_pre_post_render", [{ formId: "45", currentPage: "current_page", abort: function() { this.preventDefault(); } }]); if (event && event.defaultPrevented) { return; } const gformWrapperDiv = document.getElementById( "gform_wrapper_45" ); if ( gformWrapperDiv ) { const visibilitySpan = document.createElement( "span" ); visibilitySpan.id = "gform_visibility_test_45"; gformWrapperDiv.insertAdjacentElement( "afterend", visibilitySpan ); } const visibilityTestDiv = document.getElementById( "gform_visibility_test_45" ); let postRenderFired = false; function triggerPostRender() { if ( postRenderFired ) { return; } postRenderFired = true; jQuery( document ).trigger( 'gform_post_render', [45, current_page] ); gform.utils.trigger( { event: 'gform/postRender', native: false, data: { formId: 45, currentPage: current_page } } ); if ( visibilityTestDiv ) { visibilityTestDiv.parentNode.removeChild( visibilityTestDiv ); } } function debounce( func, wait, immediate ) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if ( !immediate ) func.apply( context, args ); }; var callNow = immediate && !timeout; clearTimeout( timeout ); timeout = setTimeout( later, wait ); if ( callNow ) func.apply( context, args ); }; } const debouncedTriggerPostRender = debounce( function() { triggerPostRender(); }, 200 ); if ( visibilityTestDiv && visibilityTestDiv.offsetParent === null ) { const observer = new MutationObserver( ( mutations ) => { mutations.forEach( ( mutation ) => { if ( mutation.type === 'attributes' && visibilityTestDiv.offsetParent !== null ) { debouncedTriggerPostRender(); observer.disconnect(); } }); }); observer.observe( document.body, { attributes: true, childList: false, subtree: true, attributeFilter: [ 'style', 'class' ], }); } else { triggerPostRender(); } } );} ); /* ]]> */ </script> </div> </div> </div> <button type="button" class="pum-close popmake-close" aria-label="Close"> Close </button> </div> </div> <style type="text/css" media="screen">#simple-social-icons-3 ul li a, #simple-social-icons-3 ul li a:hover, #simple-social-icons-3 ul li a:focus { background-color: #0d5f9d !important; border-radius: 3px; color: #ffffff !important; border: 2px #0d5f9d solid !important; font-size: 20px; padding: 10px; } #simple-social-icons-3 ul li a:hover, #simple-social-icons-3 ul li a:focus { background-color: #062446 !important; border-color: #f3cd1e !important; color: #f3cd1e !important; } #simple-social-icons-3 ul li a:focus { outline: 1px dotted #062446 !important; }</style><script type="text/javascript">(function(e,t,o,n,p,r,i){e.visitorGlobalObjectAlias=n;e[e.visitorGlobalObjectAlias]=e[e.visitorGlobalObjectAlias]||function(){(e[e.visitorGlobalObjectAlias].q=e[e.visitorGlobalObjectAlias].q||[]).push(arguments)};e[e.visitorGlobalObjectAlias].l=(new Date).getTime();r=t.createElement("script");r.src=o;r.async=true;i=t.getElementsByTagName("script")[0];i.parentNode.insertBefore(r,i)})(window,document,"https://diffuser-cdn.app-us1.com/diffuser/diffuser.js","vgo");vgo("setAccount", "226403033");vgo("setTrackByDefault", true);vgo("process");</script><script> /* <![CDATA[ */var tribe_l10n_datatables = {"aria":{"sort_ascending":": activate to sort column ascending","sort_descending":": activate to sort column descending"},"length_menu":"Show _MENU_ entries","empty_table":"No data available in table","info":"Showing _START_ to _END_ of _TOTAL_ entries","info_empty":"Showing 0 to 0 of 0 entries","info_filtered":"(filtered from _MAX_ total entries)","zero_records":"No matching records found","search":"Search:","all_selected_text":"All items on this page were selected. ","select_all_link":"Select all pages","clear_selection":"Clear Selection.","pagination":{"all":"All","next":"Next","previous":"Previous"},"select":{"rows":{"0":"","_":": Selected %d rows","1":": Selected 1 row"}},"datepicker":{"dayNames":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"dayNamesShort":["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],"dayNamesMin":["S","M","T","W","T","F","S"],"monthNames":["January","February","March","April","May","June","July","August","September","October","November","December"],"monthNamesShort":["January","February","March","April","May","June","July","August","September","October","November","December"],"monthNamesMin":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"nextText":"Next","prevText":"Prev","currentText":"Today","closeText":"Done","today":"Today","clear":"Clear"}};/* ]]> */ </script><script type="text/javascript" id="shared-counts-js-extra"> /* <![CDATA[ */ var shared_counts = {"social_tracking":"1"}; var shared_counts = {"social_tracking":"1"}; /* ]]> */ </script> <script type="text/javascript" src="https://equalizedigital.com/wp-content/plugins/shared-counts/assets/js/shared-counts.min.js?ver=1.5.0" id="shared-counts-js"></script> <script type="text/javascript" src="https://equalizedigital.com/wp-includes/js/jquery/ui/core.min.js?ver=1.13.3" id="jquery-ui-core-js"></script> <script type="text/javascript" src="https://equalizedigital.com/wp-includes/js/jquery/ui/datepicker.min.js?ver=1.13.3" id="jquery-ui-datepicker-js"></script> <script type="text/javascript" id="jquery-ui-datepicker-js-after"> /* <![CDATA[ */ jQuery(function(jQuery){jQuery.datepicker.setDefaults({"closeText":"Close","currentText":"Today","monthNames":["January","February","March","April","May","June","July","August","September","October","November","December"],"monthNamesShort":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"nextText":"Next","prevText":"Previous","dayNames":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"dayNamesShort":["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],"dayNamesMin":["S","M","T","W","T","F","S"],"dateFormat":"MM d, yy","firstDay":0,"isRTL":false});}); /* ]]> */ </script> <script type="text/javascript" src="https://equalizedigital.com/wp-content/plugins/kioken-blocks/dist/vendor/swiper.min.js?ver=4.5.0" id="swiper-js-js"></script> <script type="text/javascript" src="https://equalizedigital.com/wp-content/plugins/kioken-blocks/dist/vendor/ofi.min.js?ver=3.2.4" id="object-fit-images-js"></script> <script type="text/javascript" src="https://equalizedigital.com/wp-content/plugins/kioken-blocks/dist/vendor/anime.min.js?ver=3.1.0" id="anime-js-js"></script> <script type="text/javascript" src="https://equalizedigital.com/wp-content/plugins/kioken-blocks/dist/vendor/scrollmagic/ScrollMagic.min.js?ver=2.0.7" id="scrollmagic-js-js"></script> <script type="text/javascript" src="https://equalizedigital.com/wp-content/plugins/kioken-blocks/dist/vendor/animation.anime.min.js?ver=1.0.0" id="anime-scrollmagic-js-js"></script> <script type="text/javascript" src="https://equalizedigital.com/wp-content/plugins/kioken-blocks/dist/vendor/jarallax/dist/jarallax.min.js?ver=1.12.0" id="jarallax-js"></script> <script type="text/javascript" src="https://equalizedigital.com/wp-content/plugins/kioken-blocks/dist/vendor/jarallax/dist/jarallax-video.min.js?ver=1.10.7" id="jarallax-video-js"></script> <script type="text/javascript" src="https://equalizedigital.com/wp-content/plugins/kioken-blocks/dist/vendor/resize-observer-polyfill/ResizeObserver.global.min.js?ver=1.5.0" id="resize-observer-polyfill-js"></script> <script type="text/javascript" src="https://equalizedigital.com/wp-content/plugins/kioken-blocks/dist/js/kiokenblocks-min.js?ver=1.3.9" id="kioken-blocks-frontend-utils-js"></script> <script type="text/javascript" src="https://equalizedigital.com/wp-includes/js/hoverIntent.min.js?ver=1.10.2" id="hoverIntent-js"></script> <script type="text/javascript" src="https://equalizedigital.com/wp-content/themes/genesis/lib/js/menu/superfish.min.js?ver=1.7.10" id="superfish-js"></script> <script type="text/javascript" src="https://equalizedigital.com/wp-content/themes/genesis/lib/js/menu/superfish.args.min.js?ver=3.5.0" id="superfish-args-js"></script> <script type="text/javascript" src="https://equalizedigital.com/wp-content/themes/genesis/lib/js/skip-links.min.js?ver=3.5.0" id="skip-links-js"></script> <script type="text/javascript" src="https://equalizedigital.com/wp-content/themes/accessible-web-pros/assets/js/responsive-menus-min.js?ver=1.0.8" id="rwc-base-responsive-menu-js"></script> <script type="text/javascript" src="https://equalizedigital.com/wp-content/themes/accessible-web-pros/assets/vendor/slick/slick.min.js?ver=1.0.8" id="slick-js"></script> <script type="text/javascript" src="https://equalizedigital.com/wp-content/themes/accessible-web-pros/assets/vendor/modaal/modaal.min.js?ver=1.0.8" id="modaal-js"></script> <script type="text/javascript" src="https://equalizedigital.com/wp-content/themes/accessible-web-pros/assets/js/rwc-base.js?ver=1.0.8" id="rwc-base-js"></script> <script type="text/javascript" src="https://equalizedigital.com/wp-content/themes/accessible-web-pros/assets/js/menu-min.js?ver=1.0.8" id="theme-menu-js"></script> <script type="text/javascript" id="perfmatters-lazy-load-js-before"> /* <![CDATA[ */ window.lazyLoadOptions={elements_selector:"img[data-src],.perfmatters-lazy,.perfmatters-lazy-css-bg",thresholds:"0px 0px",class_loading:"pmloading",class_loaded:"pmloaded",callback_loaded:function(element){if(element.tagName==="IFRAME"){if(element.classList.contains("pmloaded")){if(typeof window.jQuery!="undefined"){if(jQuery.fn.fitVids){jQuery(element).parent().fitVids()}}}}}};window.addEventListener("LazyLoad::Initialized",function(e){var lazyLoadInstance=e.detail.instance;}); /* ]]> */ </script> <script type="text/javascript" async src="https://equalizedigital.com/wp-content/plugins/perfmatters/js/lazyload.min.js?ver=2.3.4" id="perfmatters-lazy-load-js"></script> <script type="text/javascript" src="https://equalizedigital.com/wp-includes/js/dist/dom-ready.min.js?ver=f77871ff7694fffea381" id="wp-dom-ready-js"></script> <script type="text/javascript" src="https://equalizedigital.com/wp-includes/js/dist/hooks.min.js?ver=2810c76e705dd1a53b18" id="wp-hooks-js"></script> <script type="text/javascript" src="https://equalizedigital.com/wp-includes/js/dist/i18n.min.js?ver=5e580eb46a90c2b997e6" id="wp-i18n-js"></script> <script type="text/javascript" id="wp-i18n-js-after"> /* <![CDATA[ */ wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); /* ]]> */ </script> <script type="text/javascript" src="https://equalizedigital.com/wp-includes/js/dist/a11y.min.js?ver=d90eebea464f6c09bfd5" id="wp-a11y-js"></script> <script type="text/javascript" defer='defer' src="https://equalizedigital.com/wp-content/plugins/gravityforms/assets/js/dist/vendor-theme.min.js?ver=54e7080aa7a02c83aa61fae430b9d869" id="gform_gravityforms_theme_vendors-js"></script> <script type="text/javascript" id="gform_gravityforms_theme-js-extra"> /* <![CDATA[ */ var gform_theme_config = {"common":{"form":{"honeypot":{"version_hash":"03078a7566414b3b98e30e6ccd255d14"}}},"hmr_dev":"","public_path":"https:\/\/equalizedigital.com\/wp-content\/plugins\/gravityforms\/assets\/js\/dist\/"}; /* ]]> */ </script> <script type="text/javascript" defer='defer' src="https://equalizedigital.com/wp-content/plugins/gravityforms/assets/js/dist/scripts-theme.min.js?ver=bab19fd84843dabc070e73326d787910" id="gform_gravityforms_theme-js"></script> <script type="text/javascript" id="popup-maker-site-js-extra"> /* <![CDATA[ */ var pum_vars = {"version":"1.19.1","pm_dir_url":"https:\/\/equalizedigital.com\/wp-content\/plugins\/popup-maker\/","ajaxurl":"https:\/\/equalizedigital.com\/wp-admin\/admin-ajax.php","restapi":"https:\/\/equalizedigital.com\/wp-json\/pum\/v1","rest_nonce":null,"default_theme":"8033","debug_mode":"","disable_tracking":"","home_url":"\/","message_position":"top","core_sub_forms_enabled":"1","popups":[],"cookie_domain":"","analytics_route":"analytics","analytics_api":"https:\/\/equalizedigital.com\/wp-json\/pum\/v1"}; var pum_sub_vars = {"ajaxurl":"https:\/\/equalizedigital.com\/wp-admin\/admin-ajax.php","message_position":"top"}; var pum_popups = {"pum-8042":{"triggers":[{"type":"auto_open","settings":{"cookie_name":["pum-8042"],"delay":"1000"}}],"cookies":[{"event":"on_popup_close","settings":{"name":"pum-8042","key":"","session":false,"path":"1","time":"1 month"}},{"event":"form_submission","settings":{"name":"pum-8042","key":"","session":null,"path":true,"time":"1 month","form":"gravityforms_44"}}],"disable_on_mobile":false,"disable_on_tablet":false,"atc_promotion":null,"explain":null,"type_section":null,"theme_id":"8033","size":"medium","responsive_min_width":"0%","responsive_max_width":"100%","custom_width":"640px","custom_height_auto":false,"custom_height":"380px","scrollable_content":false,"animation_type":"fade","animation_speed":"350","animation_origin":"center top","open_sound":"none","custom_sound":"","location":"center","position_top":"100","position_bottom":"0","position_left":"0","position_right":"0","position_from_trigger":false,"position_fixed":false,"overlay_disabled":false,"stackable":false,"disable_reposition":false,"zindex":"1999999999","close_button_delay":"0","fi_promotion":null,"close_on_form_submission":false,"close_on_form_submission_delay":"0","close_on_overlay_click":true,"close_on_esc_press":true,"close_on_f4_press":false,"disable_form_reopen":false,"disable_accessibility":false,"theme_slug":"default-theme","id":8042,"slug":"small-business-accessibility-playbook"}}; /* ]]> */ </script> <script type="text/javascript" src="//equalizedigital.com/wp-content/uploads/pum/pum-site-scripts-1.js?defer&generated=1729116862&ver=1.19.1" id="popup-maker-site-js"></script> <script type="text/javascript" async data-no-optimize="1" src="https://equalizedigital.com/wp-content/plugins/perfmatters/vendor/instant-page/pminstantpage.min.js?ver=2.3.4" id="perfmatters-instant-page-js"></script> <script type="text/javascript"> jQuery('.soliloquy-container').removeClass('no-js'); </script> <script type="text/javascript"> /* <![CDATA[ */ gform.initializeOnLoaded( function() { jQuery(document).on('gform_post_render', function(event, formId, currentPage){if(formId == 45) {jQuery( "#gform_45" ).on( 'submit', function( event ) { jQuery( '<input>' ) .attr( 'type', 'hidden' ) .attr( 'name', 'gf_zero_spam_key' ) .attr( 'value', 'RsqIyZi2wfNQdJGjHkMrXyBqK87A90J2J9JIJmXh4EWptlvyynOGNTuuHZeJiaHn' ) .attr( 'autocomplete', 'new-password' ) .appendTo( jQuery( this ) ); } );} } );jQuery(document).on('gform_post_conditional_logic', function(event, formId, fields, isInit){} ) } ); /* ]]> */ </script> <script type="text/javascript"> /* <![CDATA[ */ gform.initializeOnLoaded( function() {jQuery(document).trigger("gform_pre_post_render", [{ formId: "45", currentPage: "1", abort: function() { this.preventDefault(); } }]); if (event && event.defaultPrevented) { return; } const gformWrapperDiv = document.getElementById( "gform_wrapper_45" ); if ( gformWrapperDiv ) { const visibilitySpan = document.createElement( "span" ); visibilitySpan.id = "gform_visibility_test_45"; gformWrapperDiv.insertAdjacentElement( "afterend", visibilitySpan ); } const visibilityTestDiv = document.getElementById( "gform_visibility_test_45" ); let postRenderFired = false; function triggerPostRender() { if ( postRenderFired ) { return; } postRenderFired = true; jQuery( document ).trigger( 'gform_post_render', [45, 1] ); gform.utils.trigger( { event: 'gform/postRender', native: false, data: { formId: 45, currentPage: 1 } } ); if ( visibilityTestDiv ) { visibilityTestDiv.parentNode.removeChild( visibilityTestDiv ); } } function debounce( func, wait, immediate ) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if ( !immediate ) func.apply( context, args ); }; var callNow = immediate && !timeout; clearTimeout( timeout ); timeout = setTimeout( later, wait ); if ( callNow ) func.apply( context, args ); }; } const debouncedTriggerPostRender = debounce( function() { triggerPostRender(); }, 200 ); if ( visibilityTestDiv && visibilityTestDiv.offsetParent === null ) { const observer = new MutationObserver( ( mutations ) => { mutations.forEach( ( mutation ) => { if ( mutation.type === 'attributes' && visibilityTestDiv.offsetParent !== null ) { debouncedTriggerPostRender(); observer.disconnect(); } }); }); observer.observe( document.body, { attributes: true, childList: false, subtree: true, attributeFilter: [ 'style', 'class' ], }); } else { triggerPostRender(); } } ); /* ]]> */ </script> <script type="text/javascript"> /* <![CDATA[ */ gform.initializeOnLoaded( function() { jQuery(document).on('gform_post_render', function(event, formId, currentPage){if(formId == 15) {jQuery( "#gform_15" ).on( 'submit', function( event ) { jQuery( '<input>' ) .attr( 'type', 'hidden' ) .attr( 'name', 'gf_zero_spam_key' ) .attr( 'value', 'RsqIyZi2wfNQdJGjHkMrXyBqK87A90J2J9JIJmXh4EWptlvyynOGNTuuHZeJiaHn' ) .attr( 'autocomplete', 'new-password' ) .appendTo( jQuery( this ) ); } );} } );jQuery(document).on('gform_post_conditional_logic', function(event, formId, fields, isInit){} ) } ); /* ]]> */ </script> <script type="text/javascript"> /* <![CDATA[ */ gform.initializeOnLoaded( function() {jQuery(document).trigger("gform_pre_post_render", [{ formId: "15", currentPage: "1", abort: function() { this.preventDefault(); } }]); if (event && event.defaultPrevented) { return; } const gformWrapperDiv = document.getElementById( "gform_wrapper_15" ); if ( gformWrapperDiv ) { const visibilitySpan = document.createElement( "span" ); visibilitySpan.id = "gform_visibility_test_15"; gformWrapperDiv.insertAdjacentElement( "afterend", visibilitySpan ); } const visibilityTestDiv = document.getElementById( "gform_visibility_test_15" ); let postRenderFired = false; function triggerPostRender() { if ( postRenderFired ) { return; } postRenderFired = true; jQuery( document ).trigger( 'gform_post_render', [15, 1] ); gform.utils.trigger( { event: 'gform/postRender', native: false, data: { formId: 15, currentPage: 1 } } ); if ( visibilityTestDiv ) { visibilityTestDiv.parentNode.removeChild( visibilityTestDiv ); } } function debounce( func, wait, immediate ) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if ( !immediate ) func.apply( context, args ); }; var callNow = immediate && !timeout; clearTimeout( timeout ); timeout = setTimeout( later, wait ); if ( callNow ) func.apply( context, args ); }; } const debouncedTriggerPostRender = debounce( function() { triggerPostRender(); }, 200 ); if ( visibilityTestDiv && visibilityTestDiv.offsetParent === null ) { const observer = new MutationObserver( ( mutations ) => { mutations.forEach( ( mutation ) => { if ( mutation.type === 'attributes' && visibilityTestDiv.offsetParent !== null ) { debouncedTriggerPostRender(); observer.disconnect(); } }); }); observer.observe( document.body, { attributes: true, childList: false, subtree: true, attributeFilter: [ 'style', 'class' ], }); } else { triggerPostRender(); } } ); /* ]]> */ </script> <script id="perfmatters-delayed-scripts-js">const pmDelayClick=false;const pmUserInteractions=["keydown","mousedown","mousemove","wheel","touchmove","touchstart","touchend"],pmDelayedScripts={normal:[],defer:[],async:[]},jQueriesArray=[],pmInterceptedClicks=[];var pmDOMLoaded=!1,pmClickTarget="";function pmTriggerDOMListener(){"undefined"!=typeof pmDelayTimer&&clearTimeout(pmDelayTimer),pmUserInteractions.forEach(function(e){window.removeEventListener(e,pmTriggerDOMListener,{passive:!0})}),document.removeEventListener("visibilitychange",pmTriggerDOMListener),"loading"===document.readyState?document.addEventListener("DOMContentLoaded",pmTriggerDelayedScripts):pmTriggerDelayedScripts()}async function pmTriggerDelayedScripts(){pmDelayEventListeners(),pmDelayJQueryReady(),pmProcessDocumentWrite(),pmSortDelayedScripts(),pmPreloadDelayedScripts(),await pmLoadDelayedScripts(pmDelayedScripts.normal),await pmLoadDelayedScripts(pmDelayedScripts.defer),await pmLoadDelayedScripts(pmDelayedScripts.async),await pmTriggerEventListeners(),document.querySelectorAll("link[data-pmdelayedstyle]").forEach(function(e){e.setAttribute("href",e.getAttribute("data-pmdelayedstyle"))}),window.dispatchEvent(new Event("perfmatters-allScriptsLoaded")),pmWaitForPendingClicks().then(()=>{pmReplayClicks()})}function pmDelayEventListeners(){let e={};function t(t,n){function r(n){return e[t].delayedEvents.indexOf(n)>=0?"perfmatters-"+n:n}e[t]||(e[t]={originalFunctions:{add:t.addEventListener,remove:t.removeEventListener},delayedEvents:[]},t.addEventListener=function(){arguments[0]=r(arguments[0]),e[t].originalFunctions.add.apply(t,arguments)},t.removeEventListener=function(){arguments[0]=r(arguments[0]),e[t].originalFunctions.remove.apply(t,arguments)}),e[t].delayedEvents.push(n)}function n(e,t){let n=e[t];Object.defineProperty(e,t,{get:n||function(){},set:function(n){e["perfmatters"+t]=n}})}t(document,"DOMContentLoaded"),t(window,"DOMContentLoaded"),t(window,"load"),t(window,"pageshow"),t(document,"readystatechange"),n(document,"onreadystatechange"),n(window,"onload"),n(window,"onpageshow")}function pmDelayJQueryReady(){let e=window.jQuery;Object.defineProperty(window,"jQuery",{get:()=>e,set(t){if(t&&t.fn&&!jQueriesArray.includes(t)){t.fn.ready=t.fn.init.prototype.ready=function(e){pmDOMLoaded?e.bind(document)(t):document.addEventListener("perfmatters-DOMContentLoaded",function(){e.bind(document)(t)})};let n=t.fn.on;t.fn.on=t.fn.init.prototype.on=function(){if(this[0]===window){function e(e){return e=(e=(e=e.split(" ")).map(function(e){return"load"===e||0===e.indexOf("load.")?"perfmatters-jquery-load":e})).join(" ")}"string"==typeof arguments[0]||arguments[0]instanceof String?arguments[0]=e(arguments[0]):"object"==typeof arguments[0]&&Object.keys(arguments[0]).forEach(function(t){delete Object.assign(arguments[0],{[e(t)]:arguments[0][t]})[t]})}return n.apply(this,arguments),this},jQueriesArray.push(t)}e=t}})}function pmProcessDocumentWrite(){let e=new Map;document.write=document.writeln=function(t){var n=document.currentScript,r=document.createRange();let a=e.get(n);void 0===a&&(a=n.nextSibling,e.set(n,a));var i=document.createDocumentFragment();r.setStart(i,0),i.appendChild(r.createContextualFragment(t)),n.parentElement.insertBefore(i,a)}}function pmSortDelayedScripts(){document.querySelectorAll("script[type=pmdelayedscript]").forEach(function(e){e.hasAttribute("src")?e.hasAttribute("defer")&&!1!==e.defer?pmDelayedScripts.defer.push(e):e.hasAttribute("async")&&!1!==e.async?pmDelayedScripts.async.push(e):pmDelayedScripts.normal.push(e):pmDelayedScripts.normal.push(e)})}function pmPreloadDelayedScripts(){var e=document.createDocumentFragment();[...pmDelayedScripts.normal,...pmDelayedScripts.defer,...pmDelayedScripts.async].forEach(function(t){var n=t.getAttribute("src");if(n){var r=document.createElement("link");r.href=n,"module"==t.getAttribute("data-perfmatters-type")?r.rel="modulepreload":(r.rel="preload",r.as="script"),e.appendChild(r)}}),document.head.appendChild(e)}async function pmLoadDelayedScripts(e){var t=e.shift();return t?(await pmReplaceScript(t),pmLoadDelayedScripts(e)):Promise.resolve()}async function pmReplaceScript(e){return await pmNextFrame(),new Promise(function(t){let n=document.createElement("script");[...e.attributes].forEach(function(e){let t=e.nodeName;"type"!==t&&("data-perfmatters-type"===t&&(t="type"),n.setAttribute(t,e.nodeValue))}),e.hasAttribute("src")?(n.addEventListener("load",t),n.addEventListener("error",t)):(n.text=e.text,t()),e.parentNode.replaceChild(n,e)})}async function pmTriggerEventListeners(){pmDOMLoaded=!0,await pmNextFrame(),document.dispatchEvent(new Event("perfmatters-DOMContentLoaded")),await pmNextFrame(),window.dispatchEvent(new Event("perfmatters-DOMContentLoaded")),await pmNextFrame(),document.dispatchEvent(new Event("perfmatters-readystatechange")),await pmNextFrame(),document.perfmattersonreadystatechange&&document.perfmattersonreadystatechange(),await pmNextFrame(),window.dispatchEvent(new Event("perfmatters-load")),await pmNextFrame(),window.perfmattersonload&&window.perfmattersonload(),await pmNextFrame(),jQueriesArray.forEach(function(e){e(window).trigger("perfmatters-jquery-load")});let e=new Event("perfmatters-pageshow");e.persisted=window.pmPersisted,window.dispatchEvent(e),await pmNextFrame(),window.perfmattersonpageshow&&window.perfmattersonpageshow({persisted:window.pmPersisted})}async function pmNextFrame(){return new Promise(function(e){requestAnimationFrame(e)})}function pmReplayClicks(){window.removeEventListener("touchstart",pmTouchStartHandler,{passive:!0}),window.removeEventListener("mousedown",pmTouchStartHandler),pmInterceptedClicks.forEach(e=>{e.target.outerHTML===pmClickTarget&&e.target.dispatchEvent(new MouseEvent("click",{view:e.view,bubbles:!0,cancelable:!0}))})}function pmWaitForPendingClicks(){return new Promise(e=>{window.pmIsClickPending?pmPendingClickFinished=e:e()})}function pmPendingClickStarted(){window.pmIsClickPending=!0}function pmPendingClickFinished(){window.pmIsClickPending=!1}function pmClickHandler(e){e.target.removeEventListener("click",pmClickHandler),pmRenameDOMAttribute(e.target,"pm-onclick","onclick"),pmInterceptedClicks.push(e),e.preventDefault(),e.stopPropagation(),e.stopImmediatePropagation(),pmPendingClickFinished()}function pmTouchStartHandler(e){"HTML"!==e.target.tagName&&(pmClickTarget||(pmClickTarget=e.target.outerHTML),window.addEventListener("touchend",pmTouchEndHandler),window.addEventListener("mouseup",pmTouchEndHandler),window.addEventListener("touchmove",pmTouchMoveHandler,{passive:!0}),window.addEventListener("mousemove",pmTouchMoveHandler),e.target.addEventListener("click",pmClickHandler),pmRenameDOMAttribute(e.target,"onclick","pm-onclick"),pmPendingClickStarted())}function pmTouchMoveHandler(e){window.removeEventListener("touchend",pmTouchEndHandler),window.removeEventListener("mouseup",pmTouchEndHandler),window.removeEventListener("touchmove",pmTouchMoveHandler,{passive:!0}),window.removeEventListener("mousemove",pmTouchMoveHandler),e.target.removeEventListener("click",pmClickHandler),pmRenameDOMAttribute(e.target,"pm-onclick","onclick"),pmPendingClickFinished()}function pmTouchEndHandler(e){window.removeEventListener("touchend",pmTouchEndHandler),window.removeEventListener("mouseup",pmTouchEndHandler),window.removeEventListener("touchmove",pmTouchMoveHandler,{passive:!0}),window.removeEventListener("mousemove",pmTouchMoveHandler)}function pmRenameDOMAttribute(e,t,n){e.hasAttribute&&e.hasAttribute(t)&&(event.target.setAttribute(n,event.target.getAttribute(t)),event.target.removeAttribute(t))}window.pmIsClickPending=!1,window.addEventListener("pageshow",e=>{window.pmPersisted=e.persisted}),pmUserInteractions.forEach(function(e){window.addEventListener(e,pmTriggerDOMListener,{passive:!0})}),pmDelayClick&&(window.addEventListener("touchstart",pmTouchStartHandler,{passive:!0}),window.addEventListener("mousedown",pmTouchStartHandler)),document.addEventListener("visibilitychange",pmTriggerDOMListener);</script></body></html>