Working together for standards The Web Standards Project

As reported on Accessify and Matt Bailey’s accessibility blog, news reaches us of a novel way of teaching web design, that being with accessibility very much at the forefront, rather than the bolt-on affair that it often is in web design.

His paper proposes an “accessibility first” pedagogy for web design, developed at Hamilton, in which the course is organized around the requirement of implementing web pages accessible to visually impaired computer users, as opposed to the traditional method of teaching accessibility only after students have already learned web design.

It’s an interesting way of approaching things. For many seasoned (and professional) web developers/designers, accessibility is not something that we necessarily have to make a special effort to add on at the end, it’s just something that we do, something that we consider an integral part of the whole design process. For learners, however, the issues surrounding web accessibility are not immediately obvious and very few books or courses teach this from the outset – it usually ends up as an appendix or even a follow-on book (that many won’t get round to reading). So it’s great to hear of a course that places such importance on accessibility.

More information about Brian Rosmaita’s paper ‘Accessibility First: A New Approach to Web Design‘ can be found here.

On a related note, at this year’s South by Southwest conference I had a conversation with someone who is currently working on a site redesign that is aimed very much at people with visual impairments, and he was telling me that they are not going to design anything visual at all to begin with. Basically, they’re concentrating on the content, the IA/navigation and semantics first and then ensuring the site works really well in screen readers. Only when that milestone is reached will they think about adding the presentational layer. I found that to be a brave way of approaching things and turns web design as many people know it on its head. Can anyone else recall similarly designed sites? If so, I’d be intrigued to know how they ended up looking.

Your Replies

#1 On March 20th, 2006 8:14 am Jon Tan replied:

That seems like a refreshing way to approach teaching. My own view is that accessibility and Semantic Information Design Ethics are a baseline from which good design layers should spring.

FWIW, the beta version of our slide show application is being developed that way exactly – semantics, accessibility and UI first, design touches last – Scooch will be live shortly. I’ve found it a much more satisfying way of working for me personally.

However, as most clients sign off on a visual design first it may be problematic to try and work that way with *some* customers. The best compromise I’ve found when the inital focus is on visual deisgn is to design layout proposals with accessibility, semantics and any CSS limitations firmly in mind as an absolute baseline. Standards and accessibility education naturally follows as part of the project management then hopefully, if I do my job right, the design becomes more an issue of what is does rather than just how it looks for the client.

#2 On March 20th, 2006 8:40 am Jake Archibald replied:

I designed a large image gallery website for a university project in a way similar to this.

The site was created initially in XHTML only, it had to be fully functional and usable in this form.
Then CSS was then added. Some of the XHTML was altered to add class names and some additional containers, but nothing to affect the usability of the site without CSS.
Then JavaScript was added in places to enhance some features (like comment editing with xmlhttp). But once again, this was an addition, nothing that effected the usability without JavaScript and/or CSS.

It actually made development much faster and produced a much cleaner & compliant site.

However, when it comes to working with clients they tend to want designs before they hand over the bulk of content. Some will even ask for templates so they can ruin the usability themselves :)
Once you’ve done the design, it’s difficult not to write the HTML with that in mind.

Jake.

#3 On March 20th, 2006 11:38 am Juan Carlos replied:

I would argue that even seasoned designers do not really design with accessibility in mind. That is, they may be truly standards compliant, progressive enhancements, all the good web 2.0 stuff, but you try resizing the text on some popular web sites, or disabling css and try to make head or tales of those list of links without any context (i.e. without hidden headings), etc… :)

#4 On March 20th, 2006 4:35 pm Brian replied:

I do find it interesting that education doesn’t represent itself fully in the leading edge of this aspect of authoring the Internet, but I think it more interesting that most designers, as sighted individuals, are oblivious to their sighted status. It’s almost like a hidden predjudice that we can’t even perceive. (yes – I’m in this group :)

What I found interesting about this post was that it seemed to view accessibility as a design underpinning up until the last sentence. Even in the end – we’re still more interested in how it looks, than how it works:

…I’d be intrigued to know how they ended up looking.

P.S. I’m not trying to be critical of Mr.Lloyd, just making an observation that I think is telling.

#5 On March 20th, 2006 4:53 pm Jonathan Worent replied:

Lets not forget about the developer. We have to be just as careful about how we “spit out” the content as the designer. Jake You mentioned about templates, if developers know how to implement accessability, they can take an accessable template and keep it keep it accessable even after we have chopped and disected it.

Forgive me if I’m way off base here, I am but a humble student.

#6 On March 20th, 2006 5:56 pm Jake Archibald replied:

Yes, but in my experience templates are usually used by non-developer (or a poor developer) and a copy of FrontPage :(

Of course, my experience might not be represent the usual abuse of templates.

Jake.

#7 On March 20th, 2006 6:13 pm BlindSurfer blogt » Accessibility First replied:

[...] Accessibility First Geschreven door Roel om 0u11 Gelezen op de vernieuwde website van The Web Standards Projects. [...]

#8 On March 20th, 2006 6:16 pm WaSP Member lloydi replied:

Just to reply to Brian about the visual aspect. My point really was that having the design ethic turned on its head and the visual element added last, there is every good chance that it may not look all that great. And I strongly believe – as do many others – that we need *more* examples of fully accessible sites that look the business. So I really hope that taking this approach of making it work fantastically with screen readers first and then styling it last works well. I am not sure if I can name the site, unfortunately, nor who’s behind it. Sorry about that.

#9 On March 20th, 2006 10:09 pm Geoff Pack replied:

This is not new. Back in the old days we used to call these ‘white-sites’. We’d mock up the site in plain html and get the navigation and all the includes working, then we’d work on the layout templates while the server-side guys got the back-end sorted.

Very accessible. But then we’d bugger things up with table layouts, font tags, and image rollovers and headings

Nowadays we just slap on a few wrapper divs and ids, and write the CSS instead, and avoid the buggering-up bit.

#10 On March 21st, 2006 3:16 am Keri Henare replied:

I thought that this was a common idea?
Accessibility and Semantics are such basic concepts that they’re the perfect way to introduce people to webdesign.

The idea of learning to do everything one way, then un-learning all that and re-learning everything a different way… it never made sense to me. People seem to accept this method because it’s how most of us learnt, but it’s not the most logical way to learn.

We want to make it as easy for people to learn webstandards as humanly possible. If we teach them one way, then tell them that everything that they know is wrong, you will loose some to ‘the dark side’.

Make it easy and make it quick. Teach accessibility and semantics as the foundations off all webdesign courses.

#11 On March 21st, 2006 3:41 am WaSP Member lloydi replied:

@Keri – Common approach? Well, it depends who you ask. I sometimes start with photoshop and then move to CSS, sometimes it’s a side-by-side approach ( a bit of CSS layout, some graphical additions, more CSS tweaks etc), but I’ve never built an entire site without having some design element at the start. Geoff mentioned ‘white sites’ and I’ve done something similar before by using basic wireframe-style sites and the final polish is added later. This I think is much more common, but the point here is that all development on the site I’m referring to is being carried out almost as if the screen doesn’t exist – no UI distractions, get it working for screen reader users first (the whole site) and later deal with the visuals. I don’t think there are many people who develop to that extreme.

#12 On March 21st, 2006 7:20 am Richard Morton replied:

I would agree with Keri Henare that these are such basic concepts that they ought to be the only way of starting out design and development. Unfortunately, it isn’t the common approach that it should be.

One of my bugbears is that schools and colleges etc. don’t seem to have grasped this idea yet (and that is the ideal place to start if change is going to filter through).

Does anyone have examples of Schools or Colleges where they do work with web standards, and accessibility in mind?

#13 On March 22nd, 2006 1:36 am Bruno Girin replied:

In my experience, it depends on the purpose of the web site or web application and to a certain extent the technology used.

For instance,the area I work in is primarily web enabled applications. 90% of the work is Java server code (J2EE) that needs to connect to any number of back-end systems. The web interface is only one channel among many to access the system (others can include web services, messaging systems such as MQ-Series, file upload, etc.) As a result, when we come to the web interface, we are building a view that can represent and update the data we have in the system. And that data can be structured in extremely complex ways. So it is natural for us to design the interface around semantic data markup and efficient navigation. The design can come later and that design usually has to abide by very strict rules and cannot mess with the markup. At the end of the day, if it’s not visually pretty, it doesn’t matter, we’re talking banking applications after all. So in practice, the typical approach, as I am doing on my current project, is to start by producing a front-end that only has little or no styling. In my case, I currently have 5 rules in my CSS: one for the body tag and one for each of the 4 structural div tags to define their positionning. Once the most complicated screens work as expected, we can start thinking about real styling.

This sounds like an ideal situation to take into account accessibility and standards from the very beginning of a project. And I am hoping to do so on the current one. The caveat though is that in most situations, the developers on a project like this are Java/J2EE developers who only have a vague notion of HTML and are not aware of front-end issues. So, if the person who builds the front-end is one of the back-end developers, you usually end up with HTML tag soup; if the front-end is produced by web designers, they usually have a very hard time getting up to speed with all the custom tags required by the JSP/Struts/JSF pages they are dealing with that hook up the front-end to the back-end processes and you end up with designs that break when the back-end system unexpectedly returns data that is unusually complex.

Now, I can also see why you would design a web site the other way round: starting with the visuals and fitting in semantics as an afterthought. I reckon this is more typical of sites that deal with unstructured data, such as weblogs, news or marketting sites. The main problem with that sort of sites is that the data you are trying to display has little structure or has a structure that is subjective and depends on who is writing the content. For instance, two people writing a news article will have a different style and a different way to structure the data contained in their article. As a result, it can be difficult to build semantics that will ensure good accessibility.

All this to say that teaching wanabee web developers about semantics of the data they want to display before letting them loose on Photoshop is a good idea. In the long run, this should produce better designs because they will be based on an understanding of the data rather than a partial view of it. As someone famous said before me: the map is not the terrain, it is only a visual representation of it. If you understand the terrain (data and its semantics), you will be able to produce a better map (visual representation) of it.

#14 On March 23rd, 2006 3:12 pm Krishan Patel replied:

I don’t see what is new in this… part of developing with standards is the approach of graceful degredation or progressive enhancement — i.e. design your HTML (linear flow etc) first, then add CSS, and then add JavaScript…

So, why is this revelation new???

#15 On April 29th, 2006 12:29 am Max Design - standards based web design, development and training » Blog Archive » Some links for light reading (21/3/06) replied:

[...] Accessibility First – A Novel Teaching Method [...]

Post a Reply

Comments are closed.