{"id":2103,"date":"2009-01-22T07:33:54","date_gmt":"2009-01-22T14:33:54","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=2103"},"modified":"2015-02-25T19:46:55","modified_gmt":"2015-02-26T02:46:55","slug":"51-a-lesson-learned-in-accessibility","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/51-a-lesson-learned-in-accessibility\/","title":{"rendered":"#51: A Lesson Learned in Accessibility"},"content":{"rendered":"
Even when designing with our best intentions toward accessibility, it often takes someone who really uses accessibility software to test the site and help us get the details right. The problem is compounded when dealing with AJAX style behavior. That is exactly what happened with my jQuery FAQ example. What I thought was nicely accessible turned out to not be. This screencast walks through what I needed to do to fix it.<\/p>\n
Links from Video:<\/strong><\/p>\n Even when designing with our best intentions toward accessibility, it often takes someone who really uses accessibility software to test the site and help us get the details right. The problem is compounded when dealing with AJAX style behavior. That is exactly what happened with my jQuery FAQ example. What I thought was nicely accessible […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1283,"menu_order":0,"comment_status":"open","ping_status":"open","template":"video-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":335369,"url":"https:\/\/css-tricks.com\/video-screencasts\/204-using-the-axe-devtools-web-accessibility-testing-browser-plugin\/","url_meta":{"origin":2103,"position":0},"title":"#204: Using the axe DevTools Web Accessibility Testing Browser Plugin","date":"March 4, 2021","format":false,"excerpt":"In this video, I'm joined by Preety Kumar of Deque to take a look at their DevTools plugin for axe. Short story: this is an amazing plugin that helps you quickly find accessibility problems on any website, then helps you fix them. There is quick automated testing as well as\u2026","rel":"","context":"In \"accessibility\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/thumb-axe.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3770,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/smooth-scrolling\/","url_meta":{"origin":2103,"position":1},"title":"Smooth Scrolling","date":"September 4, 2009","format":false,"excerpt":"Hey! Before you go too far down the rabbit hole of JavaScript-based smooth scrolling, know that there is a native CSS feature for this: scroll-behavior. html { scroll-behavior: smooth; } And before you reach for a library like jQuery to help, there is also a native JavaScript version of smooth\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3482,"url":"https:\/\/css-tricks.com\/snippets\/css\/accessibilityseo-friendly-css-hiding\/","url_meta":{"origin":2103,"position":2},"title":"Accessibility\/SEO Friendly CSS Hiding","date":"August 21, 2009","format":false,"excerpt":".screen-reader-text { position: absolute; top: -9999px; left: -9999px; } This class can remove an item from the page, taking it out of flow and doesn't cause overflow scrolling. It's better than display: none; or even visibility: hidden; when the goal is to hide the element visually but leave it accessible\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14901,"url":"https:\/\/css-tricks.com\/video-screencasts\/105-using-spritecow\/","url_meta":{"origin":2103,"position":3},"title":"#105: Using SpriteCow","date":"November 16, 2011","format":false,"excerpt":"In which I take a real example of somewhere I knew using sprites would be a good idea, create the sprite by hand in Photoshop (my preferred method), and then use SpriteCow to help with the exact position values needed to use the individual images. Pseudo elements are also used\u2026","rel":"","context":"With 58 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":244389,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/speak\/","url_meta":{"origin":2103,"position":4},"title":"speak","date":"March 10, 2017","format":false,"excerpt":"The speak property in CSS is for specifying if a browser should speak the content it reads, such as through a screen reader. .module { speak: never; speak-as: spell-out; } Values for speak auto: As long as the element is not display: block and is visibility: visible, text will be\u2026","rel":"","context":"In \"accessibility\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3751,"url":"https:\/\/css-tricks.com\/snippets\/css\/remove-dotted-link-borders\/","url_meta":{"origin":2103,"position":5},"title":"Remove Dotted Link Borders","date":"September 4, 2009","format":false,"excerpt":"Dotted borders around links are an accessibility feature most browsers have by default. It's for users who must or choose to navigate by keyboard, there is a visual style applied to those links when \"tabbed\" to. These borders also show up when the link is clicked (in it's \"active\" state),\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/2103"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=2103"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/2103\/revisions"}],"predecessor-version":[{"id":155784,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/2103\/revisions\/155784"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=2103"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=2103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n