Design and Accessibility: Part V

Navigation, Usability, and Accessibility

In the previous article on Design and Accessibility, Linda demonstrated the importance of separating style from structure, or how to use CSS (Cascading Style Sheets) to replace some structural layout – like the use of tables – in HTML/XHTML documents. While some designers may fear how their designs might appear to viewers who access the Internet with older browsers, this fear is ungrounded; the trend today is to allow sites to degrade gracefully in older user agents. In other words, it’s ok to allow your site to appear as plain text to someone who hasn’t or who won’t upgrade their equipment, as this degeneration (read: simplification) allows users with disabilities as well as the general public to access your online content.

Although the user may be able to access your home page, will he or she have access to the rest of your site? Navigation is one link (no pun intended) which ties style to structure and content, so navigation and a comparison to architectural “wayfinding” methods are the topics for this week’s article. Navigation is tied to accessibility and usability as well, since sites aren’t navigable if they aren’t accessible or usable.

Design and Accessibility: Part IV

Tables to CSS and CSS Modifications: Design for Accessibility

In the previous article, Linda returned to presentation, or to the visual layout and design of a Website, to understand whether the Montrose Citizens for Responsible Growth site was available to as many users as possible. In that article, she showed how mismanaged code caused a lack of presentation, and that this mismanagement could affect blind as well as sighted readers in some browsers (no one can read a crashed site...). She also illustrated ways that structure and style could alter presentation across browsers and platforms, especially if the stylesheet is linked to the document file incorrectly.

In this article, Linda corrects those issues in the Montrose site. First, she eliminates tables in her document and replaces them with CSS based on the CSS Mastery tutorial. She then modifies her CSS so that users who utilize older user agents can gain access to the content within the site. This material is especially useful to WordPress blog managers, but anyone can learn how to eliminate tables from their sites with these tips. Linda also touches on issues about global structure management based on W3C (World Wide Consortium) guidelines.

Design and Accessibility: Part III

Structure, Presentation, and Accessibility

In the previous article, Linda wrote about separation anxiety, or about the definitions of content, structure, and presentation, and whether content can be separated from structure or even from presentation in Website designs. This debate sparked the famous “separation anxiety” issue and Linda added her two cents to this discussion. She stated that none of the above can be separated, and she used the Opera browser’s User Mode to support her viewpoint and also to illustrate a few ways that a person who suffers from low-vision impairments might visualize the Montrose Citizens for Responsible Growth site and Target’s site. In addition, she illustrated how to use the Worldwide Web Consortium’s (W3C) Cascading Style Sheet (CSS) validation service to check for CSS errors and warnings.

Now, Linda returns to presentation, or the layout and design of a Website, and how to visualize whether a Website’s page is available to as many users as possible – including people with normal sight and to those viewers who suffer from low-vision impairments and blindness. In this article, she shows how CSS links contained in HTML/XHTML documents can break a CSS2 presentation in older browsers and other ways that structure and style can alter presentation in various browsers and platforms. Why is this important, when some other designers have – for instance – more or less dropped issues like Netscape 4x presentation? Find out...

Design and Accessibility: Part II

Content, Structure, Presentation and Low-Vision Readers

In the first article in this Design and Accessibility series, Linda illustrated the importance of HTML and XHTML validation, the difference between the two documents, the importance of and the proper use of the DOCTYPE element in Website design, and the difference between usability and accessibility. That was quite a bit of information – but, there’s more...

In this article, you can learn about separation anxiety, or the definitions of content, structure, and presentation, and whether content can be separated from structure or even from presentation in Websites designs. This debate sparked the “separation anxiety” issue and Linda will add her own theory to this discussion. In addition, she’ll use the Opera browser to support her viewpoint and to illustrate how low-vision readers might visualize two sites which she used in the previous article – Montrose Citizens for Responsible Growth and Target.

Design and Accessibility: Part I

Accessibility Apathy: Are you guilty?

Apathy about accessibility in Web site designs seems to be a common malady. Have you given up or do you compromise accessibility standards because they seem to whittle your design down to nothing? If you don’t comply with accessibility standards, does this mean that are you ignorant about these issues, or do you harbor malicious intent against people with disabilities? Or, have you developed apathy about accessibility because the issues seem obtuse or downright silly?

If the Web designer understands accessibility issues and applies them to design elements and principles, the incomprehensible may become understandable and usability of your site may come to life for many more readers. Plus, you could avoid legal issues and possibly increase profits. In this article, Linda Goin begins to address the difference between usability and accessibility and also begins to provide step-by-step solutions which can be addressed immediately as she analyzes a blog/CSS Website. Even if you are allergic to blog layouts, you’ll discover that the issues addressed here apply to all Website designs.

Who Needs to Be Concerned?

Frankly, my guilt and frustrations about Web accessibility issues drove me to write this article. First, I know that the sites which I design could and should be more accessible to a wider variety of users. Secondly, I know that “alt” tags should be utilized in my sites, but that’s about all I knew about the standards before I began my research. And, there were times when I wondered if I needed to be concerned, because my clients consist of small businesses, sole proprietorships, and start-ups. None of my clients are as large as Target, a company which the National Federation for the Blind has sued for the exclusion of “alt” tags in their mark-up.

Target’s code now includes some “alt” tags, at least on its homepage.

On 15 Feb 2006, Matt May commented on the Web Standards Project that the lawsuit against Target was a bit overworked, since other sites violate accessibility with a seeming vengeance. One example May used in comparison to Target was Costco, a bricks-and-mortar business which prides itself on its “outstanding business ethics.” While Costco may utilize these ethics in their physical location, their Website violates quite a few accessibility standards with excessive tables, JavaScript, and hidden subcategories.

Free! - Creating samples for your clients with Photoshop and Fireworks

If you have clients that you need to send site samples to, then you won't want to miss these 2 movie tutorials! I always do all my site designs in Fireworks. You can design multiple variations and even completely different designs by using the Frames panel in Fireworks.

Free! - Dynamic XML for Active Slideshow Pro

This tutorial shows you how to create dynamic XML that contains filenames stored in a database. The tutorial creates a dynamic XML file for Active Slideshow Pro and enables you to add images from a database.

Note: the generic method used here for creating Dynamic XML files with Dreamweaver apply actually for most database driven xml files. So you can use it not only for the Active Slideshow Pro but also for other xml driven applications like Flash Album Generator and Active Slideshow Basic.

Free! - Secure - Dreameaver Record Update Wizard

If you use the Dreameaver Record Update Wizard on a membership site - Look out!

Scenario, you have classified ads website where users can update their ads or their user profiles.

Dreamweaver uses a hidden form variable for associated Primary Key
Since it's a hidden variable:

• a user can download the page and change it.
• use Firefox with the Web Developer Toolbar and change it right on the site

 View

Size: 6.29

Date Created: 2006-01-08

Free! - Using the Web Accessibility Toolbar

Testing a website for accessibility can be a time-consuming and laborious process. The free Web Accessibility Toolbar can do most of the hard work for you though and is an indispensable tool for anyone interested in accessibility.

The toolbar is not an automated testing tool so does require manual work from you. It's therefore able to avoid the many problems with automated accessibility testing tools. It doesn't require any technical knowledge so even the biggest technophobe can check their website for accessibility!

Free! - DHTML Navigation Tree with PHP

Today we'll use the new table that we created in the previous tutorial, to create a navigation tree.    

Our goal is to convert this static this static tree to a database driven tree:

Need to create all kind of great web site navigation menus? Cascading Drop down Menus, Mega Menus, Popup or Context Menus. Menus that have great display animations, are CSS based and fully cross browser compatible, which makes them search engine friendly?

Then you need the Universal CSS Navigation Menu

< Here's the tutorial >

Free! - 8 guidelines for usability testing

In professional web design circles, the usability testing session has become an essential component of any major project. Similar to focus groups in brand development and product launches, usability testing offers a rare opportunity to receive feedback from the very people the website is aimed at - before it's too late to do anything about it.

But how can you get the most from these usability testing sessions?

Free! - User-centered design