Brainstorms and Raves

Notes on Web Design, Development, Standards, Typography, Music, and More

Thu

12

OCT

2006

New Web Accessibility Articles, Accessible Style Switching

There are lots of great new and recent articles, tutorials, and tips about Web accessibility. Today’s post includes links to articles and tutorials on Web accessibility in general, accessible forms, accessible style switching, including a look at this site’s style switching, accessibility and the blind and low vision users, helpful accessibility tools for Web developers, and more.

Working with Others: Accessibility and User Research by Maurizio Boscarol, dated 09 October, 2006 for A List Apart provides fascinating and insightful findings regarding truly usable, accessible sites for the blind. For example, regarding the top-of-the-page title element and h1:

As I observed a blind web user navigate through a few pages, he reported that hearing the h1 content on top of the page was boring and redundant for him. Because his screen reader read the content of the title element first, the title element served as the actual title of the document for him, and the h1 - which merely repeated the content of the title element - was useless. Of course, this was only true when the title element contained useful and pertinent information.

Given this information, a good guideline might suggest that the title element contain basic orientation information, including the name of the site and of the specific page in the site. The h1 should then be preceded by links to the main areas of the document, like “go to: content, main navigation, secondary navigation, footer,” to allow blind users to skip potentially redundant information (a repetitive h1).

WCAG doesn’t explicitly say this; the guidelines say that “repeated groups of links” should present a skip link. This may be true, but it isn’t enough, and even very rudimentary user testing uncovers a need for more detailed guidelines in this area.

The article also covers placement of navigation on the page, low vision users and the need for larger and bolder text, and the need for far more accessibility research to be conducted and published.

The information about larger and bolder text inspired me to create another style sheet switching option for this website, which I began last night (it’s not online yet, as it’s not finished, and I need to also test it further).

  1. My current “Larger” style switch choice is aimed more for those who prefer slightly larger text, especially those over 45 with hyperopia, aka far-sightedness or presbyopia, which both result in difficulty focusing close-up.
  2. My current “Contrast” style sheet provides more contrast and has the same font sizing as the “Larger” switcher.
  3. I also want users to be able to retain their style switching choices from page to page, which currently isn’t possible working with the JavaScript script I’m using (a spin-off of Paul Snowden’s style switcher, modified by Dori Smith, JavaScript guru extraordinaire). Note 18 October, 2006: This script does have cookies with it to provide persistent style switching, and now it works properly, thanks to Dori Smith. In a nutshell, earlier I added two other onload scripts, which made the style switching cookie not work. See the comments for more on fixing the JavaScript onload conflicts.

So, since neither my current “Larger” or “Contrast” switch choices provide large enough or bold enough text everywhere as this new article testing suggests for low vision users, I’ll be adding that choice in the near future., and hopefully soon also coming up with a better solution than I’m currently using. It must be an accessibility-friendly, cross-browser solution that allows for multiple style sheets, preferably with cookies or something similar to keep the user choice from page to page. I’m currently looking at the following: In addition to Snowden’s JavaScript approach above, here are some newer style switching scripts:

Comment 28. 2006-08-24, 15.02 by nortypig and Comment 29. 2006-08-24, 15.11 by nortypig at Roger’s site mention a combination JavaScript/PHP approach, too. Interesting.

I do know a little PHP and a little JavaScript, but I don’t even want to attempt to create a script like this from scratch. If anyone knows of other available scripts please let me know either with the comments for this post if they’re still open, the contact form at this site, or privately if you know my email address. In a nutshell, I’m looking for something with these features: PHP, JavaScript, or both; user-friendly; cross-browser-friendly; widely accessible, accessibility-friendly, degrades gracefully; no security holes; allows for, provides ability for multiple style sheet switches (I want users to be able to change multiple font sizes, more contrast).

Web Standards Group Meeting Covering Blind Web Users, Mobile Web Content

If you’re in or near Sydney, Australia 19 October, 2006 there’s a Web Standards Group meeting with speakers on: The Web - A Blind Perspective (Lee Kumutat, Training and Braille Products Manager from Quantum Technology), and The Mobile Web - What You Need To Know Right Now (Dominique Lee, Online Producer at ABC and an active member of the Mobile Content Industry Development Group).

More New or Recent Accessibility Articles, Accessibility Tools, Low Vision and Blindness Information

Just a few new and recent articles, tutorials, blog posts, tips, and tools related to website accessibility:

Recent Articles, Tutorials on Accessible Forms
  • Awesome Form v2
    “Using simple and semantic HTML, this method uses comprehensive CSS to create visually pleasing and extremely accessible web page forms for all purposes.” You can download and use all the markup, CSS, and documentation for use at your own sites or to use as a learning tool to create your own accessible forms. Dated 22 June 2006, by Paul Armstrong, Paul Armstrong Designs.
  • Prettier Accessible Forms
    How to create portable, accessible forms that can be the basis for any project’s forms. Also explains the use of the fieldset, legend, label elements, and more. Uses no CSS floats. Also explains a Mozilla bug with inline-block, how to allow for it within your markup or use JavaScript and DOM for the fix to maintain clean markup. Be sure to also check out the comments on Prettier Accessible Forms, as there are many viewpoints about the use of JavaScript for this purpose. Good discussion, interesting approach. Whether you choose to try this approach or not, it’s good reading and good discussion. By Nick Rigby, dated 20 June, 2006 for A List Apart.

More on Web Accessibility

There are plenty more, too. Here are a few helpful resources for more on Web accessibility:

Updated 18 October, 2006 11:15am, pdt

Comments

Comments, Trackbacks: 6 so far. Add yours!

  1. Not sure how much this will help, but you might want to have a glance through Generating Dynamic CSS with PHP over at Digital Web.

    06:51 pm, pdt12 October, 2006Comment by Douglas Clifton

    comment #1 permalink ·

  2. Hi, Douglas,

    Ah, yes, I’m glad you mentioned your tutorial over at Digital Web. I remember reading it when it first came out, so thanks for the reminder about it. I’ve left the window tab open in my browser, and I’ve read through it again tonight.

    I really like the PHP approach that you’ve done for this one. I’ll give it a try.

    I really want to add cookies or whatever needed to remember the user’s choice from page to page, though, so I need to learn more about how to add that so it works well and doesn’t have any security holes.

    Thanks again for mentioning your tutorial, Douglas.

    09:38 pm, pdt13 October, 2006Comment by Shirley Kaiser

    comment #2 permalink ·

  3. I just looked at your code, and it appears that it’s still using my stuff, and my stuff has always had persistent cookies that work on each page—compare your JS code with the JS code on our blog.

    My coding style has changed some over the years; the most current example of that script can be found here.

    My guess, without doing a lot of digging into your site, is that one of the many .js files loaded on each page is overwriting the window.onload handler. That’s keeping the cookie from being read, and so, the style isn’t updated when new pages load. If this is something you’d like me to take a look at, drop me a line.

    03:53 pm, pdt14 October, 2006Comment by Dori

    comment #3 permalink ·

  4. Hi, Dori,

    Ah, fabulous! I see the cookie stuff in there now that I look for it. That is GREAT news, as that was my main reason for thinking I needed to try a different script or maybe try PHP. I think that the persistence from page to page matters. So now to just figure out why it’s not working at my site like it does for yours.

    I’ll email you about all this. Thanks so much, Dori!

    05:21 pm, pdt14 October, 2006Comment by Shirley Kaiser

    comment #4 permalink ·

  5. As a follow-up to this post, big thanks to Dori Smith for her insight and scripting to get my JavaScript scripts straightened out. Now the style switching choices are persistent from page to page since the cookie (via JavaScript) actually works again.

    In a nutshell, I had two JavaScript onload functions within my body element tag (not related to the style switching), which resulted in a conflict that prevented the cookie part of the style sheet switching script from working. Dori kindly gave me alternatives that are now in my external JavaScript file.

    That also means no more onload <body onload ... > goodies in my page markup either. Cleaner, leaner, much improved all the way around.

    Thanks again to Dori!

    05:23 pm, pdt17 October, 2006Comment by Shirley Kaiser

    comment #5 permalink ·

  6. Informative, do you know how to implement this feature into wordpress? I want to built in this feature into my site.

    01:59 am, pdt29 October, 2006Comment by milo

    comment #6 permalink ·

This discussion has been closed. Thanks to all who participated.

top


Visit iStockPhoto - Royalty-free stock images. Click Upload Earn, Click Download Create 

I Wrote a Book

Deliver First Class Web Sites: 101 Essential Checklists  Via amazon.com: Deliver First Class Web Sites: 101 Essential Checklists, by Shirley Kaiser. SitePoint Books (July 2006). 

Available now via: SitePoint Books, Amazon.com, Amazon.ca (Canada), Amazon.co.uk (UK), Amazon.fr (France), Amazon.de (Germany), Amazon.co.jp (Japan), Tower Books U.S. and elsewhere! You'll also help support this site and its owner if you purchase via any of these links.

Learn more at SKDesigns - Deliver First Class Web Sites and via SitePoint Books.

Recommended Books

 More Eric Meyer on CSS, by Eric Meyer. Published by New Riders, 2004. 

Build Your Own Web Site the Right Way Using HTML & CSS, by Ian Lloyd. SitePoint (May 2, 2006) 

Hand-picked best book recommendations for Web site design, CSS, graphics, Photoshop, color, accessibility, more

In association with
 In Association with Amazon.com 
http://brainstormsandraves.com/archives/2006/10/12/accessibility/
Page last modified 14 July, 2007 - 10:19pm PDT Page load time: 0.011003 seconds.