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.

(JavaScript) Use SWFObject to display Flash content - delineo

Fri, 03 Dec 2010 04:36:44 GMT

(JavaScript) Aria in Widgets - brettb

Fri, 29 Oct 2010 06:55:03 GMT

Reusable function to create an aria alert for any widget and provide a better abstraction to setting its innerHTML.

(jQuery) jQuery Remove target Attribute - LeeRJohnson

Wed, 27 Oct 2010 08:30:37 GMT

Removes target attributes from elements in one line of jQuery. Useful to prevent links opening in pop-ups.

(ActionScript 3) AS3 Keep Track of Where FocusRect Is Whilst Tabbing - adrianparr

Fri, 16 Jul 2010 01:21:18 GMT

This code traces out the name (and display list path) of the object that currently has focus. This handy when you are testing the tab order and you can't see a yellow rectangle anywhere.

(JavaScript) Accessible Compact Forms - cfleschhut

Thu, 25 Mar 2010 04:32:44 GMT

adopted from: http://www.alistapart.com/articles/makingcompactformsmoreaccessible/

(JavaScript) Accessible Dropdown Navigation (Handling Focus with jQuery) - chrisdpratt

Wed, 10 Feb 2010 05:20:43 GMT

Dropdown navigation is fairly inaccessible as it depends on hover events in 99.9% of cases. Tabbing through the navigation with the keyboard fails to reveal the dropdowns leaving those navigation items virtually inaccessible. Worse, each of the hidden anchors still take focus on tab, so the user is left blind until they've tabbed enough to get to the next top-level navigation item. The code below selects all the anchor elements in dropdown menus and adds focus and blur events to them. The focus event adds a class of `dropdown-visible` to the top-level list item that contains the dropdown menu in use at the moment (the same li that is used for styling the hover state to show the menu). It also adds a class of `focused` to the anchor that currently has focus. The blur event will need this to handle itself later. The blur event removes the `focused` class added earlier, and then checks for another anchor in its menu (indirect sibling) that has the `focused` class. If there's no indirect siblings with that class, it's safe to close the dropdown by removing the `dropdown-visible` class. Otherwise, the dropdown is still active and should not be closed (prevents flicker). With this code, you only need to edit your CSS to add the same styles already being applied to `li:hover` to `li.dropdown-visible`, so that the dropdown looks the same when focused as hovered. That's it. Pretty straight forward, but adds a heap of accessibility. Note: The code below assumes the following hierarchy: * div#top-nav * ul * li * a * ul * li * a Therefore, the selector '#top-nav ul ul a' selects the very last `a` element; adjust the selector as necessary to work with your situation.

(XHTML) Good-looking and Accessible Address Form Fields - chrisdpratt

Fri, 11 Sep 2009 12:37:46 GMT

(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

(jQuery) jquery accessible tabs - terrencewood

Wed, 11 Mar 2009 23:58:22 GMT

jquery ui/tabs initiation ensures screenreaders can focus content when selecting tabs. Tested using Jaws 8.

(JavaScript) JavaScript Minimum Font Size - DaveChild

Thu, 11 Sep 2008 11:20:39 GMT

Run on document load - script checks fonts are not too small and resizes to 10pt if they are.

(JavaScript) JavaScript ShortCut Keys - brent-man

Sat, 31 May 2008 12:14:37 GMT

HTML USAGE: < body onKeypress="ShortCutKey()" > ASCII REFERENCE: 09=Tab 11=Home 13=Enter 32=Space Bar 33=! 34=" 35=# 36=$ 37=% 38=& 39=' 40=( 41=) 42=* 43=+ 44=, 45=- 46=. 47=/ 48=0 49=1 50=2 51=3 52=4 53=5 54=6 55=7 56=8 57=9 58=: 59=; 60=< 61== 62=> 63=? 64=@ 65=A 66=B 67=C 68=D 69=E 70=F 71=G 72=H 73=I 74=J 75=K 76=L 77=M 78=N 79=O 80=P 81=Q 82=R 83=S 84=T 85=U 86=V 87=W 88=X 89=Y 90=Z 91=[ 92=\ 93=] 94=^ 95=- 96=` 97=a 98=b 99=c 100=d 101=e 102=f 103=g 104=h 105=i 106=j 107=k 108=l 109=m 110=n 111=o 112=p 113=q 114=r 115=s 116=t 117=u 118=v 119=w 120=x 121=y 122=z 123={ 124=| 125=} 126=~

(HTML) Accessible table - natalie

Wed, 28 Nov 2007 08:06:00 GMT

(Perl) insert ALT attribute into IMG tags that don't already have ALT attributes - noah

Tue, 03 Jul 2007 21:43:16 GMT

At one point I wanted to give every image on my site an ALT tag. I did, with some help from beginners@perl.org.

(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).