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 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 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
• Semantic concerns, such as:
  • <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
• 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?
• Some modern 'best practice' items that are frequently missed/incorrect:
  • 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?
• View the page without JS:

Responsive viewer

Available at ah1.ca/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.