<\/figure>\nI\u2019m sure there are a ton of other ways we can make accessibility issues more public and visible. There are tools such as Lighthouse and browser extensions that are already out there, but making accessibility (and even performance, another silent fail) a part of our minute-to-minute workflow ensures that we can\u2019t ignore it. Something like this would encourage us to learn about the problems, give us links to potential solutions, and encourage us all to care for a relatively misunderstood part of front-end development.<\/p>\n","protected":false},"excerpt":{"rendered":"
I was chatting with some front-end folks the other day about why so many companies struggle at making accessible websites. Why are accessible websites so hard to build? We learn about HTML, we make sure things are semantic and — voila! @— we have an accessible website. During the course of conversation, someone mentioned the […]<\/p>\n","protected":false},"author":223806,"featured_media":274123,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[466,1419,592],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/accessibility-logo-feature.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":280687,"url":"https:\/\/css-tricks.com\/the-elements-of-ui-engineering\/","url_meta":{"origin":297451,"position":0},"title":"The Elements of UI Engineering","date":"January 4, 2019","format":false,"excerpt":"I really enjoyed this post by Dan Abramov. He defines his work as a UI engineer and I especially like what he writes about his learning experience: My biggest learning breakthroughs weren\u2019t about a particular technology. Rather, I learned the most when I struggled to solve a particular UI problem.\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/ellipses-brackets.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":294177,"url":"https:\/\/css-tricks.com\/accessibility-and-web-performance-are-not-features-theyre-the-baseline\/","url_meta":{"origin":297451,"position":1},"title":"Accessibility and web performance are not features, they\u2019re the baseline","date":"August 16, 2019","format":false,"excerpt":"This week I\u2019ve been brooding about web performance and accessibility. It all began when Ethan Marcotte made a lot of great notes about the accessibility issues that are common with AMP: In the recordings above, I\u2019m trying to navigate through the AMP Story. And as I do, VoiceOver describes a\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/css-running.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":284079,"url":"https:\/\/css-tricks.com\/accessibility-is-not-a-react-problem\/","url_meta":{"origin":297451,"position":2},"title":"Accessibility is not a \u201cReact Problem\u201d","date":"March 11, 2019","format":false,"excerpt":"Leslie Cohn-Wein's main point: While [lots of divs, inline styles, focus management problems] are valid concerns, it should be noted that nothing in React prevents us from building accessible web apps. True. I'm quite capable (and sadly, guilty) of building inaccessible interfaces with React or without. I've long told people\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/04\/react-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":297416,"url":"https:\/\/css-tricks.com\/weekly-platform-news-css-column-span-property-ada-applies-to-websites-auto-generated-image-descriptions\/","url_meta":{"origin":297451,"position":3},"title":"Weekly Platform News: CSS column-span Property, ADA applies to Websites, Auto-generated Image Descriptions","date":"October 17, 2019","format":false,"excerpt":"In this week's roundup: multi-column layouts gain wide support, the ADA means more A11y for retailers, and Google is doing something about all the empty image alt attributes in the wild. The CSS column-span property will soon be widely supported The CSS column-span property, which has been supported in Chrome\u2026","rel":"","context":"In "Weekly Platform News"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/wpn-20191017.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":336679,"url":"https:\/\/css-tricks.com\/platform-news-prefers-contrast-mathml-is-and-css-background-initial-values\/","url_meta":{"origin":297451,"position":4},"title":"Platform News: Prefers Contrast, MathML, :is(), and CSS Background Initial Values","date":"March 19, 2021","format":false,"excerpt":"In this week\u2019s round-up, prefers-contrast lands in Safari, MathML gets some attention, :is() is actually quite forgiving, more ADA-related lawsuits, inconsistent initial values for CSS Backgrounds properties can lead to unwanted \u2014 but sorta neat \u2014 patterns. The prefers-contrast: more media query is supported in Safari Preview After prefers-reduced-motion in\u2026","rel":"","context":"In "Weekly Platform News"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/wpn-20210319.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":247760,"url":"https:\/\/css-tricks.com\/high-contrast-postcss-plugin-story\/","url_meta":{"origin":297451,"position":5},"title":"High Contrast, A PostCSS Plugin Story*","date":"November 24, 2016","format":false,"excerpt":"*Based on true events It\u2019s hard to imagine life without internet today. Many people\u2019s lives are less or more tied with internet. Think about everything we rely on it for: communication, education, shopping, business control, home management, entertainment, etc. It\u2019s like a world inside another world, with it\u2019s own rules\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/accessibility-logo-feature.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/297451"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=297451"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/297451\/revisions"}],"predecessor-version":[{"id":297800,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/297451\/revisions\/297800"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/274123"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=297451"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=297451"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=297451"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}