Web Accessibility Blog | About Matt Bailey | Contact Form

«September 19, 2006»

Accessibility Blog’s New Design

Hello, Accessibility Blog readers! Matt has invited me to contribute to his Accessibility Blog, and today seems to be an appropriate occasion to introduce myself. I’m an accessible web designer based in Saint Paul, Minnesota. Although I do keep my own blog, Accessible Design, the opportunity to work with Matt and contribute here is a great opportunity for me.

You might have noticed a small change to this site over the last few hours. Well, the site’s had a bit of a facelift. But it’s more than just a facelift: I’m actually combing over the code with an eye to making this site as web accessible as we can. Some concessions have been made, but I hope they’re forgivable. Some mistakes have probably also been made - hopefully you’ll not only forgive those, but tell me about them and give me the chance to fix them!

Here are some of the changes I’ve made to aid accessibility:

  1. Skip Links

    The site now offers keyboard-accessible “Skip Links”, providing quick access to the content, sidebar, footer, and to the site’s accessibility statement.

  2. Script dependencies eliminated

    Certain features of this site used to depend on JavaScript - namely, the “email this post” functionality and the “print this post” functionality. These features have been kept, but the JavaScript aspects have been eliminated.

  3. Increased default font

    The site has always had a flexible font size: but now the default is noticeably larger than it once was.

  4. Valid XHTML

    The template, at least, now provides valid XHTML 1.0. Although, for now, this is no real promise for each and every page and post; it’s an important first step. Over the next few days, I will be going through the site and clearing up validation errors which are embedded in the site.

  5. Zoom Layout

    This was one of the more difficult decisions. This zoom layout, which is entirely built using ems for a text-size proportional layout, has a width of 60 ems. This width, at the default text width, is wider than an 800 pixel screen resolution. We agreed that this was an acceptable choice because the blog is principally targeted at a highly technical market. Statistics show that less than 1 percent of Accessibility Blog’s visitors are using a screen resolution of 800×600.

    Nonetheless, if our decision causes any of you problems, we do want to hear about it.

Simplicity was a critical factor in this redesign: Matt didn’t want anything complex. Hopefully, this redesign is sufficient to satisfy all visitors!

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • StumbleUpon
  • del.icio.us
  • digg
  • NewsVine
  • Reddit

Filed under: Announcements
Written by: Joe Dolson

7 Comments »

  1. Joe, this is fantastic news! My two favorite accessibility teachers working together. Perfect, and a brilliant idea. Viewing the changes from Firefox - no problems. Viewing it with my eyesight probs (various), good. Some colors tend to be “too bright” but I have two different contact lenses in my eyes, one being a bi-focal one and one that lets me drive a car. My brain works harder to intrepret the messages my eyes send. For some reason, I’ve become sensitive to bright colors, I noticed. (Just a little user feedback for ya.) Congratulations both of you!

    Comment by Kim Krause Berg (cre8pc) — September 19, 2006 @ 3:47 pm

  2. Thanks! I’m thrilled to be doing this with Matt, and I’m certainly glad to hear that other people like the idea too ;) !

    I’ve made a note of the sensitivity to bright colors issue - we were aiming for high contrast, but perhaps we overshot into “too high” contrast, instead…

    Thanks for the comments!

    Comment by Joe Dolson — September 19, 2006 @ 3:52 pm

  3. Overseeing the development of our new site, myself and our development team have been going deeper and deeper into accessibility as part of basic social responsibility. One issue, which i believe relates to the concept of design vs accessibility, which is affecting us relates to font size.

    Obviously, large fonts are more accessible than small fonts. But does that mean our design should use a font which is acceptable for good vision users (e.g. 12px) and allow scaling so that let low vision users can increase the size in their browsers. Or should we keep the site in 14px and automatically scale down for low resolution monitors that don’t have enough space for 14px text. (Note 4% of our users have an 800×600 resolution).

    The complication is that the immediate look of 14px is considered by most, including our entire development team, to be unprofessional. At the same time, however, there is issue of accessibility.

    Do you know of any corporate sites that have adopted large fonts? What can you recommend?

    Thanks

    Comment by Fahed Bizzari — June 29, 2007 @ 3:40 am

  4. Large fonts are easier to read in most cases — that’s true. However, it’s far more important that you make the font rescalable according to user preferences than that you make it larger.

    Most users who have a routine need for larger fonts no how to make that change in their browsers. This ability is built into the browser, and you should allow the user to maintain control over their experience.

    What you particularly need to avoid is using pixels or points to size text. Although pixels should be resizeable universally, they are not. IE6 doesn’t allow the user to change the size of text if it’s sized in pixels. Use ems or percentages, instead.

    Large fonts are not, in fact, absolutely more accessible than large fonts. For a bit more advice, I recommend reading Improving Accessibility Through Typography, an article I published recently at Accessites.org.

    Comment by Joe Dolson — June 29, 2007 @ 11:22 am

  5. Thanks for the link. I did manage to read that article in the last few days.

    We also came to unanimous agreement with what you’ve said. The base font has been set in em’s with 1em = 12px. The width of the site is also measured in em’s, whilst page structure is measured in percentages to give a zoom/scalable layout.

    On a 1024 resolution screen, the font can be resized to up to 15.5px without the bottom scroll bar kicking in and will grow/zoom as much as needed for larger resolution sizes.

    Whilst we were very concerned about the issue of mixing accessibility with design, the concept we took hold of was…

    Buildings allow wheel-chairs to enter using a ramp and that ramp should also be at the front of the building with the main stairs. To cater for wheel-chairs, it doesn’t mean we need to get rid of the stairs, we just need to make sure that people with wheel-chairs can enter the building as easily (so to say) as people without.

    Thanks again for your advice. It seems that, in many cases, accessibility has a lot of common sense - it just needs to be taken into consideration.

    Comment by Fahed Bizzari — June 30, 2007 @ 10:55 am

  6. Thanks again for your advice. It seems that, in many cases, accessibility has a lot of common sense - it just needs to be taken into consideration.

    Glad to help! You’ve pretty much hit it on the head, there: it’s mostly common sense. It’s just common sense which requires you to anticipate a lot of problems you personally may never encounter!

    Buildings allow wheel-chairs to enter using a ramp and that ramp should also be at the front of the building with the main stairs. To cater for wheel-chairs, it doesn’t mean we need to get rid of the stairs, we just need to make sure that people with wheel-chairs can enter the building as easily (so to say) as people without.

    Nice way of putting it. I may use that metaphor one of these days!

    Comment by Joe Dolson — June 30, 2007 @ 11:11 am

  7. I may use that metaphor one of these days!

    Lol! Don’t forget to cite us!

    Comment by Fahed Bizzari — June 30, 2007 @ 11:57 am

RSS feed for comments on this post. TrackBack URI

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>