Does My Site Deserve Recognition?

Understanding the Question

Hoping to get an award? Recommended as a resource? Used as a case study in some important book?

Ask yourself, does my site deserve recognition? Further, if you are someone who is awarding sites or referencing them as great examples, then maybe you should ask yourself the same question as if you were the site owner.

This is the start of a baseline — a minimum — of what we should expect from any site that is awarded anything. Sites that either do not meet the goals below or do not have a reasonable exception should not be recognized as good examples. If anything, they are examples of missed potential.

Ensure the site…

  1. Passes the Web Content Accessibility Guidelines (WCAG) 2.0/2.1 AA.
    1. A great reference from the Web Accessibility Initiative (WAI) from the World Wide Web Consortium (W3C), How to Meet WCAG 2.0
    2. There are also a series of tools to help you perform some automated testing, knowing that no tool can capture all issues:
      1. W3C Nu HTML Checker
      2. Tenon
      3. aXe
      4. WAVE
      5. Pa11y
      6. tota11y
      7. Chrome Accessibility Developer Tools
      8. The W3C also maintains a Web Accessibility Evaluation Tools List, with some hits and misses
    3. Follows the P.O.U.R. principles behind WCAG 2.0:
      1. Perceivable - Information and user interface components must be presentable to users in ways they can perceive.
      2. Operable - User interface components and navigation must be operable.
      3. Understandable - Information and the operation of user interface must be understandable.
      4. Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
  2. Works in common screen readers.
    1. Enabling VoiceOver on OSX / MacOS
    2. Enabling VoiceOver on iOS
    3. Enabling Narrator on Windows
    4. Enabling TalkBack on Android
    5. Orca is available for GNOME
    6. Download NVDA for Windows for free (a small donation would be nice of you)
    7. JAWS is available as a free trial
    8. You can also get some basic screen reader commands for accessibility testing that covers JAWS, NVDA, Narrator, and VoiceOver
  3. Is usable in Windows High Contrast Mode.
    1. Enable Windows High Contrast Mode
    2. Media queries for detecting Windows High Contrast Mode
  4. Follows the Inclusive Design Principles.
    1. Provide a comparable experience for all users.
    2. Consider the user situation / context.
    3. Be consistent.
    4. Give control to your users.
    5. Offer choice for users to complete tasks.
    6. Prioritise content around key tasks, features, or information.
    7. Add value for users.
  5. Is resilient to resources failing to load (for when the connection drops, linked files are corrupt, there are bad headers, or the browser does not support the linked file format).
    1. Is still usable without images.
      1. Disable images in Firefox
      2. Data Saver mode in Android Chrome can degrade images
      3. Disable images in desktop Chrome
      4. Disable images in Internet Explorer
      5. Disable images in Opera
    2. Uses progressive enhancement to account for broken/missing libraries.
      1. Graceful degradation versus progressive enhancement
      2. Understanding Progressive Enhancement
      3. Progressive Enhancement: What It Is, And How To Use It?
      4. Progressive Enhancement is not about JavaScript availability
      5. Using progressive enhancement
    3. Is still usable without custom typefaces, which includes icon fonts.
  6. Accounts for multiple input types; assumes all or none are available at any given time.
    1. Keyboard
    2. Mouse
    3. Touch
    4. Stylus
    5. Voice
  7. Costs less than $0.20 in U.S. dollars (with reasonable exceptions).
    1. Use What Does My Site Cost? to test
    2. At the very least, follows a page budget based on good data for the audience.
  8. Has useful print styles.
    1. CSS Design: Going to Print
    2. How To Set Up A Print Style Sheet
    3. Make your website printable with CSS
    4. Designing For Print With CSS
  9. Has valid code, with justification for non-valid code (such as browser bugs).
    1. W3C Markup Validation Service
    2. W3C (X)HTML5 Validator
    3. W3C CSS Validation Service
  10. Works in multiple browsers that represent the market share of the audience.
    1. Don’t Use Global Browser Stats
    2. The Browser Statistics That Matter