Accessible websites, more RFP ideas

A graphical depiction of a very simple css doc...

Image via Wikipedia

The example RFP for website construction posted last week mentioned a little about web standards and user agents, but after further reflection it seems we need to examine further the importance of an accessible and usable website and add a few more requirements to the proposal.

An accessible website is one that can be viewed on any browser and any platform by any person or script. A user agent is the combination of the browser and platform. For example, Internet Explorer 6 on Windows and Internet Explorer 7 on Windows are two different user agents. Firefox 3 on a Mac and Firefox 3 on Linux are two different user agents. on A website that can only be viewed on 90% of user agents is one that is not accessible. A website that looks differently on Linux than it does on Windows means that the designer did a poor job testing.

Flash is a great tool for delivering video on the Internet. It’s a bad tool for building websites. When used for websites, it’s most often a way to create animations or navigation. Animation should be avoided because motion that the user didn’t initiate usually annoys or confuses the user. Flash navigation is usually a drop-down or animated system, the down-sides to which we’ll cover shortly. A website built with Flash also requires the user have installed Flash. Many devices can’t install Flash. If Flash is used, the content must have an alternate delivery method in order to support devices that don’t support Flash. Building two versions of the site, one in Flash and one to support non-Flash user agents, is a waste of development time.

With the increased use of mobile devices comes an increased importance for websites to be viewable on those devices. As a Windows Mobile user, it’s very frustrating to visit a website and have to wait for a huge amount of data to load, only to realize that I have to scroll horizontally back and forth only to find that there is a JavaScript drop-down menu that I can’t use anyway because it’s not supported on Windows Mobile. While I acknowledge that great strides are being made on mobile devices to better display the real web, the sheer number of legacy devices as well as the ease that a standards compliant and accessible site can be created dictates that it simply doesn’t make sense to build a site that can’t be viewed on a mobile device.

How should this alternate display be accomplished? Mobile style sheets provide a quick and standards-compliant way to render content in an alternative manner on smaller screens. Since a standards-compliant site is built using style-neutral markup as the content source, a mobile style sheet can be written in addition to the normal style sheet. Where the normal style sheet might display a header that is 750 pixels wide, the mobile style sheet might specify that the header be only 240 pixels wide so as to fit on a mobile browser without horizontal scrolling. Mobile style sheets allow for a completely different arrangement of elements – the components of the page like images and blocks. Elements can be set to display or hide depending on which style sheet is used. With this approach, a single file can be used to completely change the layout to fit on a small browser without making changes to any of the content.

Also of importance is usability. A website with drop-down menus, or their cousin the menus that are hidden until the user clicks the little plus sign to expand a set of links, fails in the usability category. Drop-down menus are for applications to perform actions, like how the file menu in a word processor has the actions to open, save and exit. Drop-down menus don’t work well as natural navigational elements because a user should never have to perform an action to expose navigation. Instead, a site should use a well-defined, hierarchical arrangement of pages with links on each page to the parent and children pages.

Now that we’ve defined the need, here are the additional items for our example RFP.

  1. Website must display properly without Flash or JavaScript. Any use of Flash must be solely to deliver video content if applicable.
  2. Website must use a logical, hierarchical navigational system and must not use drop-down or fly-out menus.
  3. All pages must use mobile style sheets to render properly on Windows Mobile and other handheld browsers so that horizontal scrolling is not required on those devices.

Want to learn more about web standards? The best book on the subject is Designing with Web Standards by Jeffrey Zeldman.

Want to learn more about CSS or get a basic understanding of how to use them? Head on over to previously-mentioned W3 Schools for their section on cascading style sheets.

This entry was posted in design and tagged , , , , , , , . Bookmark the permalink.

Aaron Traffas, CAI, ATS, CES | |

Aaron Traffas, CAI, AMM, CES, is an auctioneer from Medicine Lodge, Kansas. He is currently community evangelist for Purple Wave in Manhattan, Kansas. Aaron serves as the current president of the Kansas Auctioneers Association and in the past has served on the National Auctioneers Association Education Institute Board of Trustees. He is a past instructor at CAI and co-wrote and instructed the ATS designation course from NAA. He currently instructs the Internet Auction Methods course offered by the NAA. An active contract bid caller, he has competed in multiple state auctioneer contests including placing twice within the top 5 in Kansas. During the summer, Aaron operates a farm in south central Kansas. Aaron is an active singer and songwriter and the Aaron Traffas Band's latest release, Enter: The Wind, can be found at iTunes, Amazon and Spotify.