In previous posts in this series, I've looked at home page content from a number of different perspectives (navigation, page dimensions, page elements). This time, I wanted to look at the structure of content from a more semantic perspective.
HTML coders (the good ones, anyway) are obsessed with good semantic code; nice hierarchical structures, valid XHMTL, etc. But you can have a well-formed, semantically perfect page that is an incomprehensible, poorly organized and impossible to use site.
The goal is to have good semantics and good organization. If you do that, the odds are that you'll also have good accessibility as well.
Methodology
As usual for this series, I victimized my usual 18 standard sites.
For this analysis, I turned off all CSS and and replaced all images with ALT text using the Web Developer Toolbar in Firefox. This provided me with a semantic view of each page, stripped of the fancy graphics and colors designed to fool me into wanting to attend their school.
I ended up looking at pages like this:
Why would I look at pages like this? A couple of reasons. First, to be able to see the real organization of information on the page, and second (and more importantly) because disabled users using screen readers and users on cell phones often access your pages just like this.
Results
I saw a lot of variations in page organization, and a variety of good and bad practices.
Only two sites used table-based layouts. Yea!
Eight sites had some sort of "Skip to..." navigation at the top of the page, though NC State kind of went overboard with six different "Skip to..." links at the top of the page. "Skip to Content" was the most popular, with "Skip to Navigation" a close second.
A couple of sites put all their links at the bottom of the page. This might have been deliberate in order to focus on the content, but home pages tend to be portal pages, so navigation should be prominent and easily accessible.
Search boxes tended to be toward the top of the page, but not always. I think for disabled users, search boxes must be very difficult to find on most Web pages.
Semantically, sites were all over the map. Some sites, like UT Knoxville and Loyola Marymount, followed valid heading organization. Other sites, used a mix of only H4 and H5 tags, all H3 tags, etc., etc. Some used no headings at all.
There were also a few pages (e.g., University of St. Thomas) appeared to be all links and little content.
Recommendations and Best Practices
Based on my examination of the 18 home pages, I came up with a list of best practices to look for:
- Complete separation of content and presentation (via CSS-based design)
- This includes CSS-based layout instead of table-based layouts
- Semantic HTML
- Based on properly ordered and nested heading tags (H1, H2, etc.)
- Presence of descriptive ALT tags for all non-content free images
- Images that are just pretty pictures can have empty ALT tags
- Presence of navigational shortcuts at the top of each page
- e.g., "Skip to Content" links
- Reasonable mix of content and navigation
- Who wants a page that's nothing but links? It makes your home page look like a link farm.
- Prominent placement of search box
- Typically very near the top of the page, or the placement of a navigational shortcut to the search box at the top
- Prominent placement of the name of the institution
- This should be your H1 tag (ya think?)
Sample Page:
Content
News & Announcements
News Item 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam suscipit, tortor quis sollicitudin porttitor, diam metus aliquam ante, ut sodales felis purus ac quam. Mauris ut erat in ipsum laoreet lacinia. More...
News Item 2
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec varius tempus urna. Phasellus porta blandit lacus. Nunc nec arcu et metus sodales ullamcorper. Mauris vitae leo id sapien sagittis lacinia. More...
More News...
Events Calendar
February 14, 2008
Valentine's Day Massacre - Have a bang at the SMC Cartage Garage!
February 20, 2008
Integer mattis dolor vel felis. Aliquam viverra nunc eget leo. Pellentesque interdum urna non purus.
1 comment:
Fabulous tips! Thank you so much for the information.
Post a Comment