TW Blog :: Entries for Accessibility

GAWDS Cracks The Whip

Also relates to Web Standards

Yes, it is official! The Guild of Accessible Web Designers (GAWDS) makes its launch today, thanks to the dedicated work of Jim Bryne and the rest of the GAWDS members.

Accessibility goes far beyond preparing Web sites for disabled people. Accessibility is now shorthand for the adoption of core standards that benefit every user of the Internet and impact the bottom line of every business. GAWDS intends to promote these standards to instill in Web designers the high level of competence and professionalism required to unlock the full potential of the Internet. Jim Bryne, GAWDS Founder

While the public readily understands how inaccessible Web sites limit the flow of information to people with disabilities, many business owners fail to see the detrimental effects of inaccessible or non standards-based design on their bottom line. The number of user agents that still tolerate sloppy, invalid markup is shrinking. With the emergence of new technologies and devices, this means that client and consumer audiences are also shrinking for businesses that rely on old-style, idiosyncratic Web sites that make it difficult to parse content for re-use.Derek Featherstone, GAWDS Founding Member

Read the full press release to gain an insight into the objectives of GAWDS to bring Web Standards and Accessibility to the forefront of web design and development, and peruse the opinions of a number of members on the future and importance of accessibility. Then, once you have got a feel for the Guild, why not have a go at the site redesign competition to win a great prize and ultimate kudos!

Posted on May 26, 2004 at 04:00:33. [Comments for GAWDS Cracks The Whip- 0]

CSS Slide And Zoom

Also relates to CSS Design

Since first discussing CSS Zoom as an alternative technique for accessible design earlier in the year, it has become an integral part of my design methodology. While this technique does come with disadvantages, especially related to images, I like the ability to enlarge an entire page to very high screen resolutions and similarly shrink the page to display satisfactorily in 640 x 480 dpi, without the worry of text or form fields breaking their parent containers.

In the latest incarnation of the Still Stoked website I have juxtaposed CSS Zoom with Doug Bowman's Sliding Doors technique to de-table-ise the three column design. The new layout relies on an extended banner graphic at the top of the page that can slide in out as the page is resized without affecting the look and feel of the page, while all the internal columns and text can grow and shrink freely. Enhanced accessibility and improved SEO were also high priorities for the site, so absolute positioning is implemented on the menu and side columns to allow the actual page content to appear first in the document structure.

The only complication that arose was incorporating a fixed width on the right hand column to ensure the background graphics remained locked together. A wrapper container is used to declare borders to house the left and right columns, where the left column is relative and, as just stated, the right column is fixed. But since the wrapper element contains floating elements (the internal columns) it must also have a width declaration. The problem is clear - how to combine a relative width and fixed border within the CSS Box Model.

The solution was to balance out the fixed width border of the wrapper container with a padding in its parent container as follows:

#cont {
  position:relative;
	/* [..snip..] */
	width:50em;
	padding-right:99px;
} 
#wrap {
	position:relative;
	border:1px solid #83acd6;
	border-width:0 99px 0 8em;
	width:42em;
	margin:0 -99px 1px 0;
	padding:0;
} 

So the relative components of #wrap (left border and width) balances out the width of #cont, while a right padding in #cont creates space for the fixed width right border in #wrap. For FireFox, Mozilla and Opera that seems to be job done, but the additional negative right margin is required on IE6. Not too much of a challenge! But of course playing with the Box Model always heralds danger when our least favourite family of browsers are booted up!

As it happens, in this instance, the hack required to appease the IE5.x family is simple - just declare the same width for both #cont and #wrap. After all, this solution is simply a case of balancing the equations and for these legacy browsers borders and padding are declared internally to the width of the container. So if the containers have the same width the browsers should be happy. I like to keep legacy hacks as far away from the main CSS file as possible, so these equal width declarations were placed in a file called using the mid pass filter (along with a few other Lost Child hacks for IE5.0).

This implementation of the CSS Slide and Zoom technique seems to work effectively across the entire range of PC browsers, and ICapture gave positive feedback for Safari. Please let me know in the comments of any glitches are observed on other browsers (IE5 for Mac perhaps?).

Posted on May 09, 2004 at 14:53:29. [Comments for CSS Slide And Zoom- 0]