Accessible can be Beautiful

Posted by Andrew Faulkner on January 15th, 2008.

Andrew Faulkner is the admin at fadtastic. Andrew prides himself on standards-based, accessible web design in the city of Nottingham, UK. He believes in aesthetically pleasing accessible design and that 'standards compliant does not equal boring.'

http://fadtastic.net/

Andrew Faulkner has posted 211 articles.

RSS Feed for fadtastic.net RSS Feed for Andrew Faulkner

Full Profile →

I may be preaching to the choir in this post, but one can always use it as a reference to clients or colleagues.

Accessibility is one of my favourite aspects of web design. It’s also got a lot of hangups and myths associated with it. For example, it is not just for disabled users contrary to popular belief. I hope the linked article put that one to bed for a while.

My other favourite myth is the old-fangled “Accessible sites are boring.” Pah! Poppycock! It may be true that often accessible sites are created from a pool of fairly unimaginative templates (think the accessible template set from pre-Dreamweaver 8.) They don’t do anything wrong (except harm my case thus far) but they’re not exciting. They’re not really designed. I aim to show you examples of brilliant and accessible design, and show that it is all a myth after all. Accessibility and design are not mutually exclusive. They walk hand in hand.

Boring? Try Beautiful

Without inspiration such as a bunch of CSS galleries (nothing looked promising after searching for an accessible website showcase) I had to dig a little deeper this time. The following is the pick of the bunch from my search. Feel free to suggest a site if you think it fits the list.

For the record, the following are chosen based upon achieving WAI Priority 2 using the Cynthia Says accessibility tester for their homepage. I am fully aware that validation is not the be-all-and end-all of accessibility. I know accessibility goes beyond the homepage. I think this is the fairest and quickest (let’s be honest I don’t have that much free time!) way to put a benchmark on a site in this case. I’m not suggesting for a minute that this should be the benchmark to test all sites - this simply allows me to find sites of a certain standard. Anyway, on with the sites:

Clean and creative. Good use of space and typography to create a welcoming site.

Use of a flash element - passes the accessibility test. Nicely falls back to good old HTML.

Accessibility - not ’spoiling’ this textured design at all.

Bold, clean and simple.

Ultra-minimal portfolio. Mixed sans-serif font cases adds interest.

I hope to have shown with the aid of the preceding examples that accessibility doesn’t necessarily stunt great design. In fact using accessibility, usability and web standards as a ‘trinity’ one can often improve on their design skills. The examples above also illustrate that the code elements that increase a website’s accessibility do not often show on the design. The sites in question aren’t “littered with accessibility aids that most people don’t use” - another of my favourite statements I hear far too often.

Let me know your additions via a comment and I’ll add the best to the list, along with some link-love to the commenter if desired.

Share This

( 24 so far )

Comments RSS Feed

I like to think that my site is relatively beautiful. I’m no artist, so there aren’t any amazing illustrations, but it is a clean and pretty strict to a grid design.

Trevor Davis
January 16th, 2008
#

who says boring cannot be beautiful??? some simple colour designs can be really nice…

Jermayn Parker
January 16th, 2008
#

[…] Read more on fadtastic Bookmark to: […]

Accessible web design can be Beautiful at Candyjar - David Ward
January 16th, 2008
#

Nice post Andy - I think Fadtastic is a good example of beautiful and accessible!As time is going on we are seeing print design disciplines being applied in online design - if this is done to an accessible standard (which you’ve demonstrated it can be) then I think you have got a solid design which works visually and technically.

Matt Davies
January 16th, 2008
#

The winner of the Accessibility in Focus Award for Best Design 2007 is both beautiful and WAI compliant: http://www.accessibilityinfocus.co.uk/thewinners/jesusvelasco.html

Alex
January 16th, 2008
#

I think the following website is worth mentioning: http://www.gj-kleyne.nl/ The designer of it designed and made it with webstandards etc. It would be a nice addition.

Tim Pieters
January 16th, 2008
#

I am relatively new to web design, and accessibility standards in particular, but I found that designing with accessibility in mind has made my site significantly better overall. For example, we use a flash audio player and a javascript slideshow on our home page. By default, neither of these failed gracefully in browsers that don’t support the technology, so I had to come up with ways to ensure people with flash and javascript turned off would see something attractive and functional. This doesn’t just benefit disabled users, but looks good in search engines, and to people with iPhones (no flash), and plenty of other cases.Most of the other criteria used to grade the Cynthia Says report (which I hadn’t seen before, thanks) is just smart use of standards. I can think of several times during the web development process where I had to go and learn about the best way to do something that would work in a cross-platform, multi-device world, and standards and accessibility-based designs seems to be the most successful way of achieving that. Now I can even say that my site looks good on a Nintendo Wii!

Dalton
January 16th, 2008
#

[…] » Accessible can be Beautiful » fadtastic - a multi-author web design trends journal examples that accessibility doesn’t necessarily stunt great design (tags: accessibility design webdesign) […]

links for 2008-01-16 | Ed Tech Hacks
January 17th, 2008
#

Hi Andy, thanks for featuring my site.

For me, the increasing power of new mobile devices coupled with continually more affordable computers (allowing a wider range of the general public to own one) should dictate that accessibility must be a paramount concern for all web designers/developers.

I think if we want to continue reaching wider audiences, our sites not only need to degrade gracefully but should aim to take advantage of the unique features new platforms offer. Writing semantic code and having all XHTML/CSS validate is by no means the ultimate solution, but is certainly a solid base to start from.

Robbie Manson
January 17th, 2008
#

Some beautiful accessible css/xhtml sites can be found here http://www.cssartillery.com

CSSArtillery
January 17th, 2008
#

Nice write-up… I think I’ll start checking the Cynthia says checker for my sites.I about fell over when one of my sites actually passed.Great and practical examples.

tzTastic
January 17th, 2008
#

I am working on attempting to make mine both pleasing to the eye asthetically as well as accessible. It should pass validation.. but i’d apprecaite any comments on the asthetics!http://www.ericastjohn.com/

erica
January 18th, 2008
#

This is a very helpful article. IMO, accessibility is really a big factor in terms of getting into a great design layout for a site. And yes, simplicity and accessibility is really beautiful… But it doesn’t always mean that it’s boring.

Daphne
January 18th, 2008
#

[…] Accessible can be Beautiful […]

Trevor Davis | Blog | Weekly Link Round-Up #14
January 21st, 2008
#

[…] invito a que leais este artículo de Fastastic que viene a romper esta tencencia y nos ofrece una recopilación de sitios web excelentemente […]

RECURSOS FLASH » La accesibilidad puede ser bella
January 21st, 2008
#

[…] Accessible Can Be Beautiful […]

Max Design - standards based web design, development and training » Some links for light reading (29/1/08)
January 29th, 2008
#

I really like the look of the Pandora Books site. Unfortunately it fails my ten second accessibility test which is can you resize the text in Internet Explorer (v6). In this case no. It isn’t the most important thing as far as accessibility goes but as visual impairment does affect so many people, and the vast majority use IE 6.0 rather than other (better browsers) it is relevant.

Richard Morton - QM Consulting Ltd
January 29th, 2008
#

Accessites showcases beautiful and accessible web sites built with universality and standards in mind.

Mel Pedley
January 29th, 2008
#

Seems like Accessites need to work on their SEO a bit because it’s the first thing I thought and surprised it doesn’t show up in Google for your search.

John Faulds
January 29th, 2008
#

I think some of the best sites are accessible ones, they tend to keep things un-cluttered, simple and clean. By doing this they are easy to use and beautiful and not dull at all. I feel over complicated, cluttered and busy sites are hard to use, read and annoying. Our whole ethos at <a href="http://www.rayfields.co.uk/">Rayfields Accessibility Consultancy</a> is that Stylish and Exciting Web Design can be Accessible.Good article and some good examples to illustrate the argument.

Adrian
January 31st, 2008
#

Is it just my IE browser or are the background colour and the text colour so close on theis page as to make it almost unreadable! Please fix…

Brian
February 4th, 2008
#

[…] Dabei hat die Optik mit der darunter liegenden Technik nichts zu tun. Bei Fadtastic gibt es eine nette Auswahl schöner Seiten, die zumindest einen automatisierten Test (Cynthia Says) sehr gut passieren. Der Autor weist darauf […]

F-LOG-GE » Blog Archive » Zugänglichkeit muss nicht häßlich sein
March 25th, 2008
#

Zugänglichkeit kann schön sein…

Bei Jens stieß ich auf dieses Posting: accessible can be beautiful. Der Autor hat einige Beispiele an schön gestalteten Websites zusammengestellt und demonstriert damit, dass zugängliche, barrierearme Seiten durchaus auch schön auss…

mehralstext:jobblog
March 26th, 2008
#

Thank you for this article about "Accessible can be beautiful" to get new ideas to improve webdesign Ralph

Ralph
March 28th, 2008
#

↑ Jump up to the comment form

The above post has obviously kept you amused. Why not discover similar material:

The posts 38 Beautiful Websites, 5 Accessible and pretty CSS tips, IBM helps blind ’see’ web video, Accessible tabbed interfaces, Design View / Andy Rutledge, are related to this post.

Or why not take time out to find out about the author of the post.