{"id":284780,"date":"2019-03-15T10:37:51","date_gmt":"2019-03-15T17:37:51","guid":{"rendered":"http:\/\/css-tricks.com\/?p=284780"},"modified":"2019-03-15T10:37:51","modified_gmt":"2019-03-15T17:37:51","slug":"see-no-evil-hidden-content-and-accessibility","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/see-no-evil-hidden-content-and-accessibility\/","title":{"rendered":"See No Evil: Hidden Content and Accessibility"},"content":{"rendered":"

There is no one true way to hide something on the web. Nor should there be, because hiding is too vague. Are you hiding visually or temporarily (like a user menu), but the content should still be accessible? Are you hiding it from assistive tech on purpose? Are you showing it to assistive tech only? Are you hiding it at certain screen sizes or other scenarios? Or are you just plain hiding it from everyone all the time? <\/p>\n

Paul Hebert digs into these scenarios. We’ve done a video on this subject<\/a> as well. <\/p>\n

Feels like many CSS properties play some role in hiding or revealing content: display<\/code>, position<\/code>, overflow<\/code>, opacity<\/code>, visibility<\/code>, clip-path<\/code>…<\/p>\n","protected":false},"excerpt":{"rendered":"

There is no one true way to hide something on the web. Nor should there be, because hiding is too vague. Are you hiding visually or temporarily (like a user menu), but the content should still be accessible? Are you hiding it from assistive tech on purpose? Are you showing it to assistive tech only? […]<\/p>\n","protected":false},"author":3,"featured_media":284805,"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":"See No Evil: Hidden Content and Accessibility","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[466,883],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/cloud4-see-no-evil.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":246530,"url":"https:\/\/css-tricks.com\/beware-smushed-off-screen-accessible-text\/","url_meta":{"origin":284780,"position":0},"title":"Beware Smushed Off-Screen Accessible Text","date":"October 14, 2016","format":false,"excerpt":"J. Ren\u00e9e Beach: Over a few sessions, Matt mentioned that the string of text \u201cShow more reactions\u201d was being smushed together and read as \u201cShowmorereactions\u201d. Turns out a popular technique for hiding content visually (but not hiding it for assistive technology) involved setting width: 1px; which was forcing words to\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":286528,"url":"https:\/\/css-tricks.com\/inclusively-hidden\/","url_meta":{"origin":284780,"position":1},"title":"Inclusively Hidden","date":"April 19, 2019","format":false,"excerpt":"Scott O'Hara recently published \"Inclusively Hidden,\" a nice walkthrough of the different ways to hide things on the web. Nothing is ever cut and dry when it comes to the web! What complicates this is that hidden begs the question: hidden for whom? Different answers to that have different solutions:\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/rabbit-in-a-hat.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":16370,"url":"https:\/\/css-tricks.com\/places-its-tempting-to-use-display-none-but-dont\/","url_meta":{"origin":284780,"position":2},"title":"Places it’s tempting to use `display: none;`, but don’t","date":"February 27, 2012","format":false,"excerpt":"Help yourself be better at accessibility by using better hiding techniques that don't use display: none;. This involves some tricks like using more clever class names, being fancier with how you deal with JavaScript library animations, or avoiding hiding all together.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/02\/faq1.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":289109,"url":"https:\/\/css-tricks.com\/a11y-with-lindsey\/","url_meta":{"origin":284780,"position":3},"title":"A11Y with Lindsey","date":"June 13, 2019","format":false,"excerpt":"Lindsey Kopacz has a wonderful blog about accessibility. I've seen a number of her articles making the rounds lately and I was like, dang I better make sure I'm subscribed. For example: An Introduction to ARIA States 3 Simple Tips to Improve Keyboard Accessibility Create custom keyboard accessible checkboxes Regarding\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/accessibility-logo-feature.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":251400,"url":"https:\/\/css-tricks.com\/maintaining-accessibility-responsive-world\/","url_meta":{"origin":284780,"position":4},"title":"Maintaining Accessibility in a Responsive World","date":"February 11, 2017","format":false,"excerpt":"There a bit of a CSS trick is Scott Jehl's latest article. Perhaps you've used an \"accessible hiding\" technique? That's where you are deliberately avoiding display: none; because you want the element to be focusable, but not seen visually. But... that can be awkward for anyone who uses the keyboard\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1877,"url":"https:\/\/css-tricks.com\/dynamic-faq-page\/","url_meta":{"origin":284780,"position":5},"title":"Dynamic FAQ Page – A Lesson in Accessibility and Progressive Enhancement","date":"December 29, 2008","format":false,"excerpt":"The idea is to make a question & answer style page which is embellished in functionality by JavaScript (jQuery). Each question will be shown in a box with a tag hanging from the bottom of the box. When clicked, the tag will slide out and reveal another box with the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/faq-example.jpg?resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/284780"}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=284780"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/284780\/revisions"}],"predecessor-version":[{"id":284803,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/284780\/revisions\/284803"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/284805"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=284780"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=284780"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=284780"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}