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.
    4. Follows the Custom Control Accessible Development Checklist for any custom controls on the site:
      1. Can you get to the control via the keyboard?
      2. Can you use the control with the keyboard?
      3. Can you use the control with touch gestures? With assistive technology enabled?
      4. Can you operate the control using the standard keys and/or touch gestures for the control type?
      5. Can you easily see it when the control has focus?
      6. The control has a text label that is exposed as an accessible name in accessibility APIs.
      7. The control has an appropriate role exposed in accessibility APIs.
      8. The control has any UI states and properties that it has exposed in accessibility APIs.
      9. The control label/description/icon and its states are perceivable/usable for low vision users.
      10. The control is perceivable/usable when High Contrast Mode is enabled.
  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.
    4. Is still functional when common ad blocking tools are used.
  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. Works within target audience budgets.
    1. 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.
    2. Follows a performance budget, such as loading speed, HTTP requests, CPU load, and more.
      1. Page Speed Insights
      2. Performance Budget Calculator
      3. Webhint scanner
      4. Performance Budget at Webhint
      5. Setting a performance budget (2013)
      6. Setting and Calculating a Web Performance Budget (2017)
      7. Can You Afford It?: Real-world Web Performance Budgets (2017)
      8. The Ethics of Web Performance (2019)
  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