{"id":297451,"date":"2019-10-23T10:36:47","date_gmt":"2019-10-23T17:36:47","guid":{"rendered":"https:\/\/css-tricks.com\/?p=297451"},"modified":"2019-10-23T15:02:09","modified_gmt":"2019-10-23T22:02:09","slug":"why-are-accessible-websites-so-hard-to-build","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/why-are-accessible-websites-so-hard-to-build\/","title":{"rendered":"Why Are Accessible Websites so Hard to Build?"},"content":{"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?<\/em> 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 Domino’s pizza legal case<\/a>, which is perhaps the most public example of a company being sued because of a lack of accessibility.<\/p>\n

Here\u2019s an interesting tidbit from that link:<\/p>\n

According to CNBC<\/em>, the number of lawsuits over inaccessible websites jumped 58 percent last year over 2017, to more than 2,200.<\/p><\/blockquote>\n

Inaccessible websites are not just a consideration for designers and engineers but a serious problem for a company\u2019s legal team as well. Thankfully, it seems more of these cases will be brought to trial and (my personal hope is) this will get folks to care more about semantics and front-end development best practices. Although I’d like to think that companies would do what\u2019s best for the web and make websites that meet the baseline requirements<\/a> without a legal threat, we absolutely need to make inaccessible websites illegal<\/em> for folks to really pay attention to this issue.<\/p>\n

<\/p>\n

However! I also worry about attributing what might simply be a lack of knowledge to malice. I reckon a lot of websites have bad accessibility not because folks don\u2019t care, but because they don\u2019t know there’s an issue in the first place. As my conversation with front-end engineers progressed, I realized that the reason accessibility isn\u2019t tackled seriously probably doesn\u2019t have anything to do with bandwidth, or experience, or money. <\/p>\n

I reckon the problem is that the accessibility of a website can be invisibly and silently broken. <\/p>\n

Here\u2019s an example: when developing a site, JavaScript errors are probably going to be caught because everything breaks if something goes wrong. And CSS bugs are going to get caught because something will look off. But the accessibility or performance of a website can go from okay to terrible overnight and with no warning whatsoever. The only way to fix these invisibly broken things is to first make them visible<\/em>.<\/p>\n

So, here\u2019s an idea: what if our text editors caught accessibility issues and showed them to us during development? It could look something like this:<\/p>\n

\"An<\/figure>\n

I\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}]}}