Snipplr

(CSS) Methods for hiding content - thesmu

Fri, 27 May 2011 20:14:05 GMT

The first two mechanisms are probably the most popular, with display: none; being the go-to option implemented by nearly every JavaScript library on the planet and the lion’s share of ready-made JavaScript widgets. If you don’t want your hidden content to be read by a screen reader, those defaults may work for you, but if you want to ensure users have access to content (even if it isn’t displayed visually in the current interface), the final option (positioning content offscreen) is really the way to go.

(CSS) Hiding Content for Accessibility - dkl3in

Mon, 28 Feb 2011 19:16:55 GMT

(CSS) Screenreader access - paul66

Thu, 27 Jan 2011 04:10:29 GMT

This snippet basically gives us the best of both worlds, allowing the best usability when it comes to link outlines for both screenreaders tabbing through links, and mouse users.

(CSS) Accessible Image Replacement - Gilder/Levin Method - justinseiter

Sun, 26 Apr 2009 14:37:20 GMT

This method maintains its integrity with all combinations of images on/off and CSS on/off. This method works by laying an empty span over the top of the parent element with the required image applied as a background to that span. There is however a drawback to this method; the empty span. This is bearable though as the span will have no impact on the usability/accessibility on the page, and will only impact ever so slightly on semantics. Now users can always see an image or text regardless of whether they have CSS and/or images disabled.

(CSS) Hide Without Using Display:None - justinseiter

Sun, 26 Apr 2009 14:33:47 GMT

(CSS) Sustitución de H1 por logo (con rollover) / H1 logo image replacement (with rollover) - webDesign

Thu, 07 Sep 2006 03:56:35 GMT

(CSS) Accessible CSS Forms: Using CSS to Create a Two-Column Layout - zensir

Thu, 31 Aug 2006 13:20:42 GMT

In a recent study of web design patterns, Dr. Melody Ivory found that accessibility is the most underutilized aspect of good web page design (Ivory 2005). In fact websites have become more complex and less accessible over time (Hackett 2003). Less than 20% of the Fortune 100 have websites that are fully accessible (Loiacono 2004). Accessible forms are one way to combat this disturbing trend. With CSS layout, you can create two-column forms without the use of tables to save space and time. This article shows how to create a simple two-column contact form using CSS to style structural elements that is both fast and accessible. A survey of CSS-based forms revealed many variations on a theme (see Vandersluis 2004). Most use block-level floats and margins to position form elements on the page. However, in my testing I found IE5.x Mac to have rendering problems with many of these forms. After numerous iterations, I arrived at a solution that worked for IE5.x Mac as well as Safari 1.07 Mac, Firefox 1.07 Win/Mac, IE 6 Win, Camino, and Opera. Our goal here is to create a simple accessible contact form without the use of tables (see Figure 1).