ahandrewh tools for websitesfor testing websites

Introduction

The tools below are meant to help with checking for code issues in IAT-339 projects. They will not state your grade to you, though they will highlight concerns to help understand the issues further.

Code demos

For the purposes of explaining common HTML, CSS, JS questions I maintain a collection of CodePen demos. If you have questions or would like examples built please let me know through the course and I will happily add examples:

• HTML examples
• CSS examples
• JS examples

Code check assistant

This one is a 'bookmarklet' — a snippet of code put in a web browser bookmark that runs on the page you are viewing when selected.

Bookmark the Code Check Assistant link (right-click and hit 'Bookmark link' or copy the contents into the URL of a link) to run it on a given page. It may visually 'break' the page when run, so do not assess design after running it. Refresh the page to clear the overlays.

This assistant will help you review:

• Review alt attributes for images.
  • Provides overlay of alt attributes for images
  • Provides overlay asking about description of images in <a> elements
• Use of responsive units:
  • Does text use rem or em units?
  • Do media queries use rem or em units?
  • Do text-related margin or padding values use rem or em units?
• Semantic or 'best practice' items that are frequently missed/incorrect:
  • <br> elements used for spacing
  • <a> elements without text inside
  • Flag for review any multiple <nav> elements
  • Check if id attributes are unique
  • Check for gaps in heading levels
  • Checks for headings that appear too long to (semantically) be headings
  • Check for <label> elements being associated with form fields
  • Checks for <section> elements lacking a heading
  • Is inline styling used?
  • Have height and width attributes been set on <img> elements?
  • Check that <meta name="viewport"> has been set
  • Has the outline property been altered?

Responsive viewer

Available at ah.link/rv is the 'Responsive Viewer'. It will allow you to load SFU-based websites and compare how they render at a semi-random assortment of sizes between 320PX to 2560PX.

Colour viewer

Available at ah.link/cbv is the 'Colour Viewer'. It will allow you to load SFU-based websites and approximate how your website may be interpreted with different forms of colour blindness. Note that any such tool is an approximation and no replacement for actual user testing.

Advanced code validator

Available at ah.link/validate is the 'Advanced' code validator. It will check multiple pages worth of HTML and CSS for potential validity and accessibility concerns. Note that automated testing can only do so much with regards to finding problematic code.