Simian Design

Tony Stephens in his corner of the web.
minimize

508

Invasion of the Body Switchers

Posted in 508, Accessibility, CSS, Coding, HTML, Interaction Design, Javascript, Usability on January 18th, 2006 by Tony – Be the first to comment

The classic body switcher has been updated. By [Malarkey][1] and [Brothercake][2]. It is an efficient object-oriented style sheet switcher, which offers independent switching of multiple media types, and supports an unlimited number of options and controls. It works in all modern graphical browsers except Mac/IE5 (with javascript enabled), and is available in a range of modes and interfaces.

[1]: http://www.stuffandnonsense.co.uk/resources/iotbs.html
[2]: http://www.brothercake.com/site/resources/scripts/iotbs/
read more »

Great Accessibility Tool

Posted in 508, Accessibility, Usability, Web Standards on November 7th, 2005 by Tony – Be the first to comment

[TAW (Web Accessibility Test)][1] is a tool for the automatic analysis of Web sites, based on the [W3C - Web Content Accessibility Guidelines 1.0][2] (WCAG 1.0).

They have three different versions of TAW for your needs. A downloadable version, a web-based service, and a Firefox extension.

All three are free, all three complement each other, all three are very useful. All three pretty much rock.

[1]: http://www.tawdis.net/taw3/cms/en
[2]: http://www.w3.org/TR/WAI-WEBCONTENT/

FEMA Registration

Posted in 508 on September 7th, 2005 by Tony – 1 Comment

Doesn’t the fact that the [FEMA Registration Site][1] require me to use IE rather than Firefox, Safari or Opera break 508 rules? Isn’t FEMA under the government. I certainly can’t reach the information I want in the manner I want. It’s certainly not accessible. And it is a .gov domain.

UPDATE: [BoingBoing has much better coverage][2] on this issue.

[1]: https://www.disasteraid.fema.gov/RIWeb/browser.jsp
[2]: http://www.boingboing.net/2005/09/06/fema_to_mac_linux_us.html

Link Dump, Part III

Posted in 508, Accessibility, CSS, Coding, HTML, Javascript, Strategy on June 10th, 2005 by Tony – Be the first to comment

A more web-centric dump of links today.

#### JavaScript ####
* [domFunction][1] is one way to run scripts before `window.onload`. Useful, and slick. ([via][clag])
* It’s always good to have [generic, unobtrusive form validation][1] scripts at your disposal. A most excellent walkthrough of how and why he created this script. ([via][clag])
* Create [custom checkbox elements][7]. Nice, but it might be a little much. ([via][simion])
* [fadomatic][9] is a nifty little javascript class that provides cross-browser alpha-fade effects. Fun. ([via][simion])
* [Clear that event-cache][10]. It’s good for the memory. ([via][simion])
* There is a new, and super-simple, way to [clear floats][11]. PPK writes about this wonderful new method. `overflow: auto`. Wow. ([via][simion])
* [Zebra Tables][14] is a nice script to accompany data tables.
* This [Fluid Panel Layout][16] is just awesome. I so love it. The subtle wrapping of the inner, scrolling divs is sweet, as it the drop shadow. Seriously, this might be the __neatest link in this whole list__.
* The [minmax script][17] is pretty darn cool as well. Widths, heights, percentages, ems, pixels…it seems to have it covered.
* The [Multiple Text Applicator][18] is a different way to approach lists and a `textarea`, but it seems to work pretty OK. Basically it seems to create a list in a `textarea` that it then breaks apart and makes into a DOM-manipulated input list (create and delete rows of said list). Interesting.
* [Unobtrusive Dynamic Select Boxes][19], from Bobby van der Sluis. The semantic code behind it is quite nice.

#### CSS ####
* We have fixed layouts. Fluid Layouts. [Elastic layouts][3]. But this latest addition to Elastic is cool, because it uses `ems` and the `max-width` property. “But `max-width` doesn’t work in IE” you say. “expressions” says I. Good article, good technique.
* [Scrolling drop shadows][6] is a decent concept. I’m not the biggest fan of the `fixed`-type elements, but this isnt’ bad.
* A nice and simple intro to [3-column layouts][8]. ([via][simion])
* [Taming the back button][12]. ([via][simion])
* An excellent write-up on the [various ways to style visited links][20]. Worth checking out.

#### Misc ####
* “It is quite possible, in fact could be preferable, to [manage content and distributed authorship without the use of a content management system][4]“. Process really is the most important thing.
* [Accessibility footnotes][5] is a very intruiging idea. The idea is that you use the `longdesc` attribute to link to a footnotes section, _on the same page_, which can be hidden if you choose.
* Tired of Lorem Ipsum? Want to use some real text? The [ungreek.toolbot engine gives you different texts from which you can generate greeking][13].
* Most [standards-based sites don't need to include tabindex][15]. This article also talks about where and when to use `tabindex`.

[1]: http://www.brothercake.com/site/resources/scripts/domready/
[2]: http://juicystudio.com/article/generic-form-validation.php
[clag]: http://www.clagnut.com/blogmarks/
[3]: http://www.456bereastreet.com/archive/200504/fixed_or_fluid_width_elastic/
[4]: http://www.7nights.com/asterisk/archive/2004/10/content-management-no-system
[5]: http://www.stuffandnonsense.co.uk/archives/accessibility_footnotes.html
[6]: http://zooibaai.nl/archives/2004/10/13/scrolling-drop-shadows/
[7]: http://slayeroffice.com/code/custom_checkbox/
[8]: http://joshuaink.com/blog/196/a-simple-guide-to-3-column-layouts
[9]: http://chimpen.com/fadomatic/index.html
[10]: http://novemberborn.net/javascript/event-cache
[11]: http://www.quirksmode.org/css/clearing.html
[12]: http://alex.netwindows.org/2005/03/in-defense-of-back-button.shtml
[simion]: http://simon.incutio.com/blogmarks/

[13]: http://ungreek.toolbot.com/?src=rubi&min_words=5&max_words=15&min_graf_len=2&max_graf_len=8&total_words=250&direction=forward
[14]: http://validweb.nl/artikelen/javascript/better-zebra-tables/
[15]: http://www.wats.ca/articles/keyboardusageandtabindex/62
[16]: http://experiments.mennovanslooten.nl/2005/FlexLayout/final.html
[17]: http://www.doxdesk.com/file/software/js/minmax.html
[18]: http://sparkcasting.com/assets/ajax/mta/
[19]: http://www.bobbyvandersluis.com/articles/unobtrusivedynamicselect.php
[20]: http://webdesign.maratz.com/lab/visited_links_styling/

Accessibility, early and often.

Posted in 508, Accessibility, Reference, Tip on January 20th, 2005 by Tony – Be the first to comment

Matt May has a new article over at Digital-Web worth checking out, entintled [Accessibility From The Ground Up][aURL1]. It’s quite the good intro/primer piece on accessibility. Worth the read. Even if you know accessibility, it’s good for material on why it’s good to build accessibile early and often.

[aURL1]: http://digital-web.com/articles/accessibility_from_the_ground_up/

Color Contrast Check.

Posted in 508, Accessibility, Cool, Design, Usability on January 18th, 2005 by Tony – Be the first to comment

This is cool. The [Color Contrast Check][cURL1] (I’m American, so I spell Color without the ‘u’, thanks.) is smart.

The Colour Contrast Check Tool allows to specify a foreground and a background colour and determine if they provide enough of a contrast

“when viewed by someone having color deficits or when viewed on a black and white screen.” [W3C]

Go play around with it. It’s great. Use the sliders, and it’ll tell you if it’s compliant, and to what degree.

This is SO much better than just relying on my own color-blindness to determine if something is compliant or not. Nice work Jonathan.

[cURL1]: http://www.snook.ca/technical/colour_contrast/colour.html