Opquast Digital Quality Best Practices

Canonical source: examples/OPQUASTDIGITALQUALITYBESTPRACTICES.md in mgifford/ACCESSIBILITY.md
This skill is derived from that file. When in doubt, the example is authoritative.

Apply the Opquast Digital Quality Checklist (Version 5, 2025-2030) when building or reviewing web projects. The framework contains 245 rules across 14 categories covering content, privacy, e-commerce, forms, accessibility, security, performance, and more.

Rules are published under Creative Commons BY-SA 4.0.
Agents may reference and cite rule text; attribute Opquast and respect the
ShareAlike licence — derivatives must use the same licence.
See opquast.com for the authoritative source.

Severity Scale (this skill)

Level	Meaning
Critical	Completely blocks access, purchase, or task completion for a user group
Serious	Significantly impairs access or usability; workaround unreasonable to expect
Moderate	Creates friction; workaround available but burdensome
Minor	Best-practice gap; marginal impact

Category-level severity guidance:

Security failures (HTTPS, headers, passwords): Critical to Serious
Forms failures (labels, error handling): Critical to Serious
Navigation failures (keyboard, focus): Critical to Serious
Images/Media missing alt/captions: Critical
Privacy policy missing: Serious
Presentation contrast: Serious; zoom blocked: Serious
Content, Links, Identification: Moderate to Minor in most cases
Server/Performance, Newsletter, Internationalisation: Minor in most cases

When to Use This Skill

Building a new website or web application
Reviewing or auditing an existing site for quality
Implementing accessibility, security, or privacy features
Creating e-commerce flows, forms, or navigation systems
Generating HTML/CSS code that must meet quality standards

Quick Reference by Category (245 rules across 14 categories)

Category	Rules	Key Requirements
Content	1–14	Metadata (description + OG tags), explicit dates, `<abbr>` for acronyms, data tables for charts, labelled ads, moderation/abuse-report mechanisms
Personal Data / Privacy	15–29	Privacy link in footer, documented data access/modification process, no third-party-only login, generic auth-failure messages, `Referrer-Policy`, HTTPS for sensitive data, no sensitive data in URLs
E-Commerce	30–68	No pre-checked opt-ins, availability/delivery time/cost before checkout, explicit pricing incl. tax, two+ payment methods, order confirmation email, invoices online
Forms	69–98	`<label for="...">`, format/case-sensitivity hints, required indicated in text, password strength + show/hide, `aria-invalid`, `aria-describedby`, preserve data on error, correct `input type`/`autocomplete`, paste not blocked, disabled buttons not `aria-hidden`
Identification	99–115	Unique page titles (`Page \	Site`),` lang` attribute, favicon, address/phone in footer, two+ contact methods, response-time/hours stated
Images/Media	116–127	Meaningful `alt`, empty `alt=""` for decorative, image-link alt describes destination, transcripts + synchronised captions, no autoplay, pausable media
Internationalisation	128–135	International dialling codes, country in addresses, `hreflang`/visible language indicator, `lang` on `<html>` and inline changes, translated-language link labels
Links	136–152	Descriptive anchor text (no "click here"), `tel:` protocol, new-tab warning, file type + size for downloads, no broken internal links
Navigation	153–172	Public content without forced login, no nav pop-ups, homepage link, breadcrumbs, consistent nav placement, visible icon labels, skip links, visible `:focus-visible`, logical tab order, internal search, sitemap
Newsletter	173–179	Confirmed opt-in, unsubscribe link, one-click unsubscribe, archives online, stated frequency
Presentation	180–196	Consistent visual identity, no colour-only info, contrast 4.5:1 normal / 3:1 large text, meaning survives with styles off, 24×24px+ touch targets, no zoom blocking, responsive layout, print styles
Security	197–217	HTTPS everywhere + HSTS, no mixed content, self-service password reset, no plain-text passwords, `X-Content-Type-Options`, `X-Frame-Options`/`frame-ancestors`, CSP, SRI on third-party scripts, no exposed server versions, SPF/DKIM/DMARC
Server/Performance	218–230	`robots.txt`, `sitemap.xml`, proper 404 status (not 200), custom error page with nav, gzip/Brotli, cache-control headers, minified CSS/JS
Structure/Code	231–244	Machine-readable dates (`<time datetime>`), UTF-8, unique IDs, no `meta refresh`, heading hierarchy `h1>h2>h3`, tagged (not scanned) PDFs, `<caption>`/`<th scope>` on data tables

Workflow

1. Identify Applicable Categories

Not all 14 categories apply to every project:

All web projects: Content, Forms, Identification, Images/Media, Links,

Navigation, Presentation, Security, Server/Performance, Structure/Code

Add if applicable: E-Commerce (online sales), Newsletter (email marketing),

Internationalisation (multi-language), Personal Data/Privacy (user accounts/data collection)

2. Consult the Full Rule Text

For the complete rule text, code examples, and rule numbers, consult the canonical Opquast guide or the official checklist directly — this skill summarizes the categories and highest-value patterns rather than reproducing all 245 rules verbatim.

3. Apply During Development

When generating or reviewing code, apply rules as implementation requirements:

HTML generation: Include metadata, semantic structure, accessible forms,

proper alt text

CSS generation: Ensure contrast ratios, focus styles, responsive layout,

print styles

Server configuration: Set security headers, enable compression, configure

caching

Content review: Check date formats, link text, abbreviation expansion

4. Validate

After implementation, verify against applicable rules. Common automated checks:

HTML validation and heading hierarchy
Colour contrast ratios (4.5:1 normal text, 3:1 large text)
Missing alt attributes
Missing form labels
Security headers present
Broken internal links

Essential Code Patterns

Page Template Minimum

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Page description here." />
  <meta property="og:title" content="Page Title | Site Name" />
  <meta property="og:description" content="Page description for sharing." />
  <title>Page Title | Site Name</title>
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
</head>
<body>
  <a href="#main" class="skip-link">Skip to main content</a>
  <nav aria-label="Main navigation"><!-- ... --></nav>
  <main id="main"><!-- ... --></main>
  <footer>
    <a href="/privacy">Privacy Policy</a>
    <a href="/terms">Terms of Use</a>
  </footer>
</body>
</html>

Accessible Form Field

Use native required on native inputs. aria-required is redundant when required is present and should be omitted to avoid accessibility tree noise (rule 98 principle: don't add ARIA states that duplicate native semantics). Use aria-required only on custom widgets (role="combobox" etc.). Also indicate required state in visible text — an asterisk alone is insufficient unless the convention is explained (rule 71).

<label for="email">
  Email address <span aria-hidden="true">*</span> <span class="hint">(required)</span>
  <span class="hint" id="email-hint">Example: [email protected]</span>
</label>
<input id="email" type="email" autocomplete="email"
  required aria-describedby="email-hint" />

Password Field (rules 75–76, 202–205)

<label for="password">Password</label>
<div class="password-wrapper">
  <input id="password" type="password" aria-describedby="password-hint" />
  <button type="button" aria-controls="password" aria-pressed="false">
    Show password
  </button>
</div>

Security Headers (Server Config)

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
Content-Security-Policy: default-src 'self';
Referrer-Policy: strict-origin-when-cross-origin

Do not expose server software versions in response headers (rule 213) — remove or obfuscate Server and X-Powered-By. Apply Subresource Integrity to third-party scripts/stylesheets (rule 214):

<script src="https://cdn.example.com/library.min.js"
  integrity="sha384-<hash>" crossorigin="anonymous"></script>

Focus and Contrast Styles

:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}
body {
  color: #1a1a1a; /* ~16:1 contrast on white */
  background: #ffffff;
}

Print Styles

@media print {
  nav, header, footer, .sidebar, .no-print { display: none; }
  body { font-size: 12pt; color: #000; }
  a[href]::after { content: " (" attr(href) ")"; }
}

Accessible Data Table (rules 242–243)

<table>
  <caption>Quarterly revenue by region (USD thousands)</caption>
  <thead>
    <tr><th scope="col">Region</th><th scope="col">Q1</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">North America</th><td>1,200</td></tr>
  </tbody>
</table>

WCAG Relationship

Opquast complements WCAG 2.2 rather than replacing it. Key mappings:

Opquast Rules	WCAG Criteria
116 (decorative images `alt=""`)	1.1.1 Non-text Content (A)
117-118 (meaningful alt text)	1.1.1 Non-text Content (A)
121-122 (transcripts, captions)	1.2.2, 1.2.3, 1.2.5
124-127 (no autoplay, pausable)	1.4.2, 2.2.2
131-132 (lang attribute)	3.1.1, 3.1.2
164 (skip links)	2.4.1 Bypass Blocks (A)
165 (focus visible)	2.4.7, 2.4.11 Focus Visible/Appearance
166 (keyboard operable)	2.1.1 Keyboard (A)
167 (logical tab order)	2.4.3 Focus Order (A)
181 (not colour alone)	1.4.1 Use of Color (A)
182 (contrast)	1.4.3, 1.4.6, 1.4.11 Contrast
186 (touch targets 24×24px min)	2.5.8 Target Size Minimum (AA, WCAG 2.2)
193 (no zoom block)	1.4.4 Resize Text (AA)
69-70 (labels, instructions)	1.3.1, 3.3.2
79-80 (error identification)	3.3.1, 3.3.3

Use Opquast as a holistic quality baseline and layer WCAG testing for full accessibility compliance.

Sustainability Connection

Several Opquast categories directly align with SUSTAINABILITY.md and the Web Sustainability Guidelines:

Server/Performance (rules 226-230): compression, caching, minification —

directly reduce data transfer and energy per page view

Presentation (rule 193): not blocking zoom; (rule 194): responsive layout —

reduce need for separate mobile sites

Structure/Code (rule 239): no meta refresh — avoids unnecessary page reloads

When applying Opquast Server/Performance rules, cross-reference with SUSTAINABILITY.md for additional guidance on carbon-aware delivery and asset optimisation.

Definition of Done Checklist

Apply to every project; skip categories not in scope:

Content & Identification

<meta name="description"> and OG tags on every page
Unique <title> in Page | Site format
<html lang="..."> present and correct
<link rel="icon"> present
Privacy policy linked from footer
At least two contact methods available

Forms

Every field has programmatically associated <label>
Native required used; aria-required omitted on native inputs
Required state indicated in visible text, not asterisk/colour alone
aria-invalid="true" set on invalid fields
Error messages associated via aria-describedby; prior data preserved on error
Correct input type and autocomplete values
Paste not blocked; disabled buttons not hidden via aria-hidden

Images & Media

Decorative images have alt=""
Informative images have descriptive alt; image links describe the destination
All video has synchronised captions
All audio has text transcript
No autoplay (audio or video); all media pausable

Navigation & Keyboard

Skip link present and functional
:focus-visible styles defined; outline: none not used without replacement
All content keyboard operable; logical tab order
Breadcrumbs or equivalent location indicator present

Presentation

Contrast ≥ 4.5:1 for normal text; ≥ 3:1 for large text and UI components
Information not conveyed by colour alone
user-scalable=no and maximum-scale not used
Touch targets ≥ 24×24px (44×44 recommended)
Print styles hide navigation; reveal link URLs

Security

HTTPS on all pages; HTTP redirects to HTTPS; no mixed content
HSTS header present
X-Content-Type-Options: nosniff present
X-Frame-Options or CSP frame-ancestors present
CSP header present
SRI on all third-party scripts/stylesheets
Server/framework version headers not exposed

Server/Performance

robots.txt present; sitemap.xml present
Proper 404 status for missing pages (not 200)
Compression enabled (gzip or Brotli)
Cache-control headers on static assets
CSS and JS minified

Structure/Code

<meta charset="UTF-8"> in every <head>
No duplicate id attributes within a page
No <meta http-equiv="refresh">
Heading hierarchy correct (h1 > h2 > h3, no skips)
Data tables have <caption> and <th scope="...">
Internal PDFs are tagged (selectable text), not scanned images

Key WCAG Criteria

See WCAG relationship table above. Opquast covers all of WCAG 2.2 AA and extends well beyond it into security, privacy, e-commerce, and performance.

References

Full best practices guide
Opquast Digital Quality Checklist — CC-BY-SA 4.0; rule text may be cited with attribution
opquast.com — authoritative source, training, certification
TRUSTEDSOURCES.yaml — id: opquast, id: opquast-checklist

SUSTAINABILITY.md — Server/Performance rules align with WSG

Standards horizon: These rules target WCAG 2.2 AA alongside Opquast v5
(2025-2030). WCAG 3.0 is in development.
Monitor: <https://www.w3.org/TR/wcag-3.0/>;

opquast-digital-quality

Installation

Summary

Similar popular skills

Also in this package

Agent compatibility

Repository health

Package contents

History

SKILL.md