Critical Thinking Exercise - Answers
Posted on June 22, 2006 | Leave a Comment | No TrackBacks
A few days ago I posted a "critical thinking exercise" which was designed to help you learn the type of things you should be looking for when you do a code review.
As promised here are the answers:
- The <html> element should specify lang="en" xml:lang="en". (WCAG - Priority 1)
- There are no comments documenting any of the code.
- CSS styles should be stored in an external style sheet.
- There should ideally be a separate print style sheet.
- The <title> tag should be more descriptive than just the company name.
- A <meta> description tag should be provided as this is often what search engines will display in their listing.
- There is no favicon image present.
- There is no mechanism to skip repetitive navigation elements. (Section 508)
- <img> alt attributes should be used properly. Tags such as "Blue Divider Line" are not useful and should be replaced with alt="".
- Semantic header tags should be used at all times. <p> tags with CSS classes such as "headertext" should not be used when an <h1-7> tag will work.
- This page has an XHTML doctype. Therefore all tags must be lowercase. <P> is not valid.
- This page has an XHTML doctype. Therefore all tags must be self-closing. <br> and <img src=""> should be replaced with <br /> and <img src="" />.
- In the footer... adjacent links must be separated by more than just white space. (WCAG - Priority 3)
- Hyperlinks should be descriptive so search engines pick up on the keywords. "Click here" links should be avoided. This is also for accessibility as some screenreaders will read the links out of context. (WCAG - Priority 2)
- Font sizes should be specified using relative units such as ems or percentages. Fixed sizes such as px cannot be resized by the user in many browsers. (WCAG - Priority 2)
- All form elements should have associated label controls.
- This page is for laptops but the selected class on the nav is on the printers tag
- "in the green box below" - Color and spatial directions are not 508 compliant because they can't be interpreted by a user with visual impairments.
- The word computers is misspelled as "copmuters" in the copy
- Flash objects should be embedded via Javascript to fix the Microsoft/Eolas problem and also provide an alternative to users without the flash plugin
- td.divider { padding: 8px 0 0; } - The padding attribute must contain either 1, 2, or 4 elements... 3 elements is not valid
- <h2>For all your PC Needs</h3> - Tag opens with h2 but closes with h3
- The Accessories subnav on the left is improperly nested. Nested <ul> tags must reside inside a parent <li>. I.e.:
<ul>
<li>Parent List Item
<ul>
<li>Nested List Item</li>
</ul>
</li>
</ul> - No visited link color is defined. This is helpful so users can remember where they've been.
- Tables should be used only for the purpose of displaying tabular data and not for creating design/structure. CSS should be used instead.
