Archive for the ‘Accessibility’ Category

Improving the usability of building controls

Tuesday, August 14th, 2007

“This 12-month Carbon Trust-funded project seeks to produce best practice guidance and training material for manufacturers of controls. The aim is to improve the design and usability of controls, particularly controls provided for occupants of buildings. Building services designers and architects will also be targeted to improve the specifications for controls systems in ways that highlight usability as well as functionality. “

This is a quick overview of their upcoming survey and report on Improving the usability of building controls, and it’s intriguing.  A true inside-out view of usability, it focuses on user-design from the end-user view.

Design Links

Monday, March 27th, 2006

A bunch of design and development links for you today. The majority (90%?) of these links came from [etc][via] the past couple of months.

* [Create really cool new windows][1] using [prototype][1a]. You can then use [script.aculo.us][1b] to have the sexy effects on the window. You _must_ try the demos.
* [24ways][2] really deserves it’s own post. It’s got [24 great tutorials/posts][2] on how to do things. Things such as:
* [Swooshy Curly Quotes without Images][2a] is great for pullout quotes.
* [Improving Form accessibility with DOM Scripting][2b].
* [An explanation of ems][2c].
* Russ Weakley shows us how to create [simple, accessible external links][3]. He uses a class in this example, but I’ve seen the same thing done using a Regex parser to loop through all the links. But that’s probably a bit much.
* [Tagcloud lets you create and manage clouds][4] with content you are interested in, and lets you publish them on your own website.

[1]: http://blogus.xilinus.com/pages/javawin
[1a]: http://prototype.conio.net/
[1b]: http://script.aculo.us/
[2]: http://www.24ways.org/
[2a]: http://24ways.org/advent/swooshy-curly-quotes-without-images
[2b]: http://24ways.org/advent/improving-form-accessibility-with-dom-scripting
[2c]: http://24ways.org/advent/an-explanation-of-ems
[3]: http://www.maxdesign.com.au/presentation/external/
[4]: http://www.tagcloud.com/
[5]: http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star-rater-using-css/
[5a]: http://www.gr0w.com/articles/code/php_5_star_rating_system_using_hreview/
[6]: http://www.formarchitect.com/index.php
[7]: http://www.dragon-labs.com/articles/octopus/
[8]: http://www.skimcss.com/skimlist
[9]: http://www.smileycat.com/miaow/archives/comment-showcase.html
[10]: http://paularmstrongdesigns.com/weblog/css/navigation-magnification
[10a]: http://www.asktog.com/columns/044top10docksucks.html
[11]: http://print.wordpress.com/2006/02/22/css-beautifully-numbered-lists/
[12]: http://alltheheroesaredead.com/weblog/archives/2006/02/external-related-links-on-mt-blog
[13]: http://www.cssplay.co.uk/menus/dd_valid.html
[14]: http://www.mapsurface.com/
[15]: http://www.cssplay.co.uk/menu/one_page.html
[16]: http://pro.html.it/niftycube/
[16a]: http://www.cssplay.co.uk/boxes/snazzy.html
[16b]: http://www.spiffycorners.com/

[via]: http://www.fortysomething.ca/mt/etc/
(more…)

Grab Bag O’Links

Thursday, February 16th, 2006

* [Brett's Robot.txt Blog][1] might be the most innovative blog I’ve seen in a long, long time. The design is just so smart. I LOVE it.
* [The Making of Rudolph The Red-nosed Reindeer][2] is a fun read on a TV classic.
* [Babies in water][3]. [Some][3c] [great][3a], [great][3b] [photos][3d].
* I, for one, welcome our new [Alien Overlord Masters][4]
* The [John Singer Sargent] Gallery has some [very][5a] [nice][5c] [pieces][5b].

[1]: http://www.webmasterworld.com/robots.txt
[2]: http://www.tvparty.com/xmasrudolph.html
[3]: http://www.urchinrock.com/
[3a]: http://www.urchinrock.com/gallery_pages/image59.php
[3b]: http://www.urchinrock.com/gallery_pages/image19.php
[3c]: http://www.urchinrock.com/gallery_pages/image30.php
[3d]: http://www.urchinrock.com/gallery_pages/image64.php
[4]: http://ufocasebook.com/bestufopictures.html
[5]: http://www.jssgallery.org/index.htm
[5a]: http://www.jssgallery.org/Paintings/10195.html
[5b]: http://www.jssgallery.org/Paintings/10140.html
[5c]: http://www.jssgallery.org/Paintings/10195.html
[6]: http://ian-albert.com/misc/gamemaps.php
[6b]: http://ian-albert.com/dont_hotlink.php/0/misc/hw-zelda3-2.jpg
[7]: http://positioniseverything.net/articles/onetruelayout/
[8]: http://forums.mozillazine.org/viewtopic.php?t=327735
[9]: http://www.alistapart.com/articles/sensibleforms
[10]: http://24ways.org/advent/naughty-or-nice-css-background-images
[11]: http://www.nickfinck.com/stencils.html
[11b]: http://www.garrettdimon.com/resources/templates-stencils-for-visio-omnigraffle
[12]: http://www.cocomment.com/
[13]: http://www.muffinresearch.co.uk/archives/2006/02/7/CSS_Drop_Column_Layout.php
(more…)

Invasion of the Body Switchers

Wednesday, January 18th, 2006

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/
(more…)

Effective Search Engine Optimization

Tuesday, November 8th, 2005

[Andy Hagens][1] has written a great article over at A List Apart. [1High Accessibility Is Effective Search Engine Optimization][2] is just great.

> …high accessibility overlaps heavily with effective white hat SEO.

The title says is all. The quote above is DEAD-ON. If you want __good SEO then make your site accesible__. Just an excellent article.

[1]: http://alistapart.com/authors/h/andyhagans
[2]: http://alistapart.com/articles/accessibilityseo

Great Accessibility Tool

Monday, November 7th, 2005

[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/

Zooming and Line Lengths

Friday, July 22nd, 2005

[Zoom Layouts][1] were not invented by Joe Clark. But he did bring the idea to the masses. A [Zoom Layout][1] is an alternative layout that uses CSS to reformat pages for low-vision users. This is different than JAWS, as we’re talking about low-vision, not no-vision. What does this mean? In a sentance it means moving nav to top (simpler) larger fonts, and colors being light on dark. This [particular post][1] is usefaul as it collects information, articles and posts about Zoom Layouts elsewhere. It’s a good list. ([via][1v])

The second part of todays post is about [Online Line Length][2]. A study examined the effects of line length on reading speed, comprehension and satisfaction of online news articles. The end result? Either make it short, or long. Stay away from the middle. Of couse, this post falls in the middle realm. Nice job Tony.

Short meaning 35 characters per line (cpl). Long meaning 95cpl. People actually felt they read fast at 35cpl, when in fact they read slower. But the important thing is that they _felt_ better about it. The report is pretty dry, but has some good stuff in there. ([via][2v])

[1]: http://joeclark.org/access/webaccess/zoom/
[1v]: http://www.clagnut.com/blogmarks/

[2]: http://psychology.wichita.edu/surl/usabilitynews/72/LineLength.htm
[2v]: http://www.guuui.com/posting.php?id=1683

Tutorials, Best Practices, and A Thing I Want.

Thursday, July 14th, 2005

Couple of items today.

First is [Obsoletely Famous][1], which hopefully will fulfill it’s promise. It’s a [collection of good, up-to-the-date tutorials][1]. The idea here is to minimize and hide older cruft, and present the good stuff for our reference pleasure. I hope it works. Covering [JavaScript][1js], [CSS][1css], [HTML][1html] and [Accessibility][1ac].

Second is a new Official Best JavaScript Practice. It’s Official because it comes from [Peter Paul-Koch][2]. And it seems pretty dead-on. Basically there are two ways of changing the style of an element, through the `style` or the `className` element. The New Official Best Way To Do Things? [Change the `className` element][2].

And third. Someone buy me a [ZoHo Artform No. 1][3]. Please. I’m so in love with this. It’s just a thing of beauty. Go check ou the the photos. It’s got 920 parts, bronze and stainless steel, and it’s all wonderful. I really want one.

[1]: http://icant.co.uk/of/
[1js]: http://icant.co.uk/of/feeds.php?t=js
[1css]: http://icant.co.uk/of/feeds.php?t=css
[1html]: http://icant.co.uk/of/feeds.php?t=html
[1ac]: http://icant.co.uk/of/feeds.php?t=ac

[2]: http://www.quirksmode.org/blog/archives/2005/07/benchmark_tests.html

[3]: http://www.zoho.nl/zoho2.html

Accessibility, Long Descriptions and Captions.

Monday, June 20th, 2005

A very good question on [long descriptions][1] is asked. Are long descriptions the best answer to providing data about something like bar charts? The [WCAG recommends long descriptions][2], but it’s [been found][1] that the tools render these attributes differently (same window, popup window, etc).

So what is the best way to provide a long description? My answer to his quiz is really dependant upon users of the site. If I had access to users of the assistive technology, I’d go with E. If not, I’d go with A. (E with user-feedback/acceptance, A (traditional) otherwise.).

[1]: http://www.access-matters.com/2005/06/19/quiz-116-long-descriptions-redux/
[2]: http://www.w3.org/TR/2004/WD-WCAG20-HTML-TECHS-20041119/Overview.html#img-longdesc

Link Dump, Part III

Friday, June 10th, 2005

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/