Log in   Register a New Account

Accessify Forum - Independent Accessibility Discussion Since 2003; Professional, Moderated, Web-based, Archived

New to the forum?

Only an email address is required.

Register Here

Already registered? Log In

New requests for site critiques have been disabled. You may reply to existing posts only. If you would like to apply to have your site critiqued here, please contact our administrator who will be happy to consider your request. Please bear in mind that critiques are strictly for accessibility reasons only.

Currently Online

No registered users are online.

WaSP's New "Best Practice" Curriculum

  • This topic is locked: you cannot edit posts or make replies.
Reply with quote WaSP announces "The Dawn of the Education Era". Wow! With a grandeurs title like that, this is gonna be epic! Right?

Well, not when it comes to the actual website. It's certainly good but the hype made me expect perfection! Here's what I found after a brief mosey through a few pages:
  1. For starters, focus states are completely hidden. Not only is the outline turned off, they don't even apply :hover styling in the :focus state. Ouch.
  2. It erroneously uses an XHTML doctype when it's a text/html resource. (Insert joke about it still being 2001 here.)
  3. Uses a fixed-width design which is too wide for 800px viewports. It also means line lengths don't expand for users who choose a wide viewport width. Longer lines are faster. Especially so for more literate users (that's the target audience of this material!) and for certain forms of reading disability.
  4. Unhelpfully uses <h1> for the website name instead of using <h1> for the start of main content. (Site name is already included at the end of <title>, so there's no need to mark it up as a heading afterwards.)
  5. While loading, the main content of Curriculum front page jumps around. This is because the decorative images are using <img> without width or height attributes.
  6. Speaking of which, it uses <dt><strong class="course-title"> for each of those course titles. Yuck! I suggest plain <dt> and apply this CSS:
    .course-list #content dt { font-weight: bold; }
  7. Main content uses heading links and title case, both of which are good. But the sidebar uses a non-linked heading, followed by non-linked text, followed by the rather messy oh-wait-we-need-a-link-for-this using text that is not front-loaded. I consider this design for sidebar items to be an anti-pattern.
  8. Search box doesn't have any visible text nearby saying "Search".
  9. It does respond very well to text sizing, though. Especially the way main navigation drops below the site logo; that's the effect I always try to get.
  10. URLs make sense. (Although using a subdomain instead of a folder is a bit odd.)
  11. There's a Masssive gap to the left of main content. The short and narrow list of social bookmarking sites in this vast space reminds me of how Hawaii looks in the Pacific! Very Happy
  12. The social bookmarking links are grey, while the main content links are green. This is inconsistent.
  13. Just above these links are a pair of rather inconspicuous links. The first one says "Framework" and is actually a link to the current page (bad).
  14. Links in the sidebar would have a bigger clickable area if they used display: block.
  15. The course framework starts with text link to a highly styled table in PDF. This is followed by a graphical link to the same table as a PNG. Finally, an HTML table is present but is much less highly styled.

    Since the text in the image link is too small to read, I'd provide a text link to it. Since the PDF looks the same as the PNG and the HTML already provides the content accessible, I'd remove the PDF version entirely. The table could be given the spacing between cells and colour-coded backgrounds via CSS, so only the rounded corners would be absent. Perhaps multiple CSS backgrounds, proprietary CSS and/or scripting would enable those as well, making both the PNG and PDF versions unnecessary.

    Incidentally, the table has such a simple arrangement that plain <th> and plain <td> should be adequate for all the relationships to be implied. Even <th scope="col"> seems excessive, as there aren't even any row headers!
  16. On the Roadmap page, there is a listing of the courses currently available. Surely these are the "contents", not the "roadmap"? Indeed, I was starting to wonder whether the site actually had any courses on it before I stumbled into this area!
  17. Opening paragraph on About Us is far too big. It's cool how everyone involved is listed and linked at the bottom, though.
  18. Some content headings are green while others are orange. Content links are already using green, so headings sometimes look like links. Look at the "Home" link at the start of the breadcrumb and the main heading using the same green just below it. They look the same, right?

    List items also use orange. Since orange is the stronger colour, those items looked like links to me. Indeed, orange is used by the clickable logo. Perhaps orange should be the link colour and green the heading colour?

    Either way, having one colour for "you can click this" and a different colour for "this is important but you can't click it" would make the distinction more predictable. (For me, at least!)
  19. On the Testimonials page, the opening and closing speech marks are outside of the <blockquote> which contains the content they are opening and closing. This is a presentational produced by scrambling the source order and semantics of the content!
  20. The citations for the above use <div class="author-citation"> after the <blockquote>. This is both divitis and classitis! A <p><cite> after each <blockquote> would suffice. Or an <address> after the closing speech mark inside the corresponding <blockquote>.
  21. Why is the testimonial from Shawn Lawton Henry right at the end? Saving the best to last is a nice sentiment but upside-down pyramid means the best should be first. Smile

Minutia of the website aside, the actual content is outstanding! The course developers are widely read. The assignment scoring is eminently logical, fair and detailed. (Scroll down to "Accessible Content Design and Test Lab Rubric".)

I love how the assignments involve blogging what you've learnt. This turns the assignments from routine exercises into a culture; a passion which can be shared and fostered by communities around the web.
Reply with quote
Ben Millard (Cerbera) wrote:
4. Unhelpfully uses <h1> for the website name instead of using <h1> for the start of main content. (Site name is already included at the end of <title>, so there's no need to mark it up as a heading afterwards.)

I've heard a lot of people take up this position recently, but I'm not fully convinced that it is de facto incorrect to use the h1 for the name of the site.

Clarification moved to this post.

Last edited by Jordan Gray on 17 Mar 2009 03:05 pm; edited 2 times in total
Reply with quote Please keep discussion of specific techniques to their respective threads. There is no facility for staff to Merge messages with existing threads.

Display posts from previous:   

All times are GMT

  • This topic is locked: you cannot edit posts or make replies.