Moar site testing

- Replace achecker flags with a config file
- Bring back webhint
- Amend check-whole-site so that it will deploy to staging if all checks
  pass, and then run webhint on every staging page.

.achecker.yml

@@ -0,0 +1,44 @@
+# optional - Specify the rule archive
+# i.e. For march rule archive use ruleArchive: 2017MayDeploy
+# Default: latest
+# Refer to README.md FAQ section below to get the rule archive ID.
+ruleArchive: preview
+
+# optional - Specify one or many policies to scan.
+# i.e. For one policy use policies: IBM_Accessibility_2017_02
+# i.e. Multiple policies: IBM_Accessibility_2017_02,IBM_Accessibility_BETA or refer to below as a list
+# Default: null (all policies)
+# Refer to README.md FAQ section below to get the policy ID.
+policies:
+    - IBM_Accessibility
+    - WCAG_2_1
+    - WCAG_2_0
+
+# optional - Specify one or many violation levels on which to fail the test
+#            i.e. If specified violation then the testcase will only fail if
+#                 a violation is found during the scan.
+# i.e. failLevels: violation
+# i.e. failLevels: violation,potential violation or refer to below as a list
+# Default: violation, potentialviolation
+failLevels:
+    - violation
+    - recommendation
+
+# optional - Specify one or many violation levels which should be reported
+#            i.e. If specified violation then in the report it would only contain
+#                 results which are level of violation.
+# i.e. reportLevels: violation
+# i.e. reportLevels: violation,potentialviolation or refer to below as a list
+# Default: violation, potentialviolation, recommendation, potentialrecommendation, manual
+reportLevels:
+    - violation
+    - potentialviolation
+    - recommendation
+    - potentialrecommendation
+    - manual
+    # - pass
+
+# Optional - In what format types the results should be output in (json, html)
+# Default: json
+outputFormat:
+    - json

.gitignore

@@ -13,3 +13,4 @@ public_*/
 csv/webrings.csv
 results/
 linter-configs/htmltest/
+public.eac

Makefile

@@ -43,6 +43,15 @@ lint-css: $(CSS_DIR)/*.css
 	pnpm -s dlx stylelint --config linter-configs/stylelintrc.json --di --rd --rdd $(CSS_DIR)/*.css
 	@#csslint --quiet $(CSS_DIR)
 
+# IBM Equal Access Accessibility Checker can't handle content-visibility,
+# so run it on a special version of the site without content-visibility.
+.PHONY: equal-access
+equal-access:
+	cp -r $(OUTPUT_DIR) $(OUTPUT_DIR).eac
+	find $(OUTPUT_DIR).eac -type f -name "*.html" | xargs -n1 sd 'content-visibility:auto;' ''
+	achecker $(OUTPUT_DIR).eac/
+	rm -rf $(OUTPUT_DIR).eac
+
 .PHONY: validate-json
 validate-json:
 	jq -reM '""' $(OUTPUT_DIR)/manifest.min.*.webmanifest 1>/dev/null

Makefile.online

@@ -17,7 +17,7 @@ CPU_SLOWDOWN=2.8
 LIGHTHOUSE_ARGS += --view --budget-path linter-configs/budget.json --output html --output json --output-file lighthouse-results --throttling.cpuSlowdownMultiplier=$(CPU_SLOWDOWN) --chrome-flags="$(CHROME_FLAGS)"
 
 hint-online:
-	hint --config linter-configs/hintrc -f codeframe $(URL)
+	hint --config linter-configs/hintrc $(URLS)
 lighthouse:
 	mkdir -p $(CHROME_PROFILE)
 	CHROME_PATH=$(CHROME_PATH) CHROME_PROFILE=$(CHROME_PROFILE) JS_FLAGS='' lighthouse $(URLS) $(LIGHTHOUSE_ARGS)
@@ -30,11 +30,7 @@ axe:
 	axe $(URLS) --chrome-options $(CHROME_FLAGS_COMMA) --chromedriver-path=$(CHROMEDRIVER_PATH) --show-errors
 axe-ff:
 	PATH=scripts/bin:$(PATH) axe $(URLS) -b firefox --show-errors
-equal-access:
+.PHONY: axe axe-ff
-	@echo $(URLS) | tr ' ' '\n' >urls.txt
-	achecker --reportLevels violation,recommendation,potentialrecommendation urls.txt
-	rm urls.txt
-.PHONY: axe axe-ff equal-access
 
 .validate-feed-main:
 	scripts/bin/validate-feed $(HUGO_BASEURL)atom.xml

content/meta/site-design.md

@@ -59,10 +59,13 @@ Finally, I supplement manual testing with the following automated tools:
 - [AInspector](https://github.com/ainspector/ainspector-for-firefox)
 - [WAVE Web Accessibility Evaluation Tool](https://wave.webaim.org/)
 - [ARC Toolkit](https://www.tpgi.com/arc-platform/arc-toolkit/)
+- [webhint](https://webhint.io/)
 
 WAVE reports no errors; AXE is unable to determine certain contrast errors, but it otherwise reports no errors; IBM Equal Access reports no errors but some items that need review.
 
-I regularly run axe-core and the IBM Equal Access Accessibility Checker on every page in my sitemap, and receive no errors.
+I regularly run axe-core, the IBM Equal Access Accessibility Checker, the Nu HTML Checker (local build, latest commit), and webhint on every page in my sitemap. After filtering out false-positives (and reporting them upstream), I receive no errors.
+
+Due to [issue 1008 in IBM Equal Access Checker](https://github.com/IBMa/equal-access/issues/1008), I remove all instances of `content-visibility` from my site's CSS before running `achecker` from the command line.
 
 Compatibility statement
 -----------------------

linter-configs/hintrc

@@ -19,7 +19,12 @@
 			"error",
 			{
 				"ignore": [
-					"filter"
+					"filter",
+					"contain",
+					"image-rendering: pixelated",
+					"contain-intrinsic-size",
+					"content-visibility",
+					"text-size-adjust"
 				]
 			}
 		],
@@ -30,27 +35,51 @@
 					"time",
 					"picture",
 					"meta[name=color-scheme]",
-					"img[decoding]"
+					"meta[name=theme-color]",
+					"img[decoding]",
+					"a[referrerpolicy]",
+					"code[translate]",
+					"a[translate]",
+					"span[translate]",
+					"samp[translate]"
 				]
 			}
 		],
 		"doctype": "error",
-		"highest-available-document-mode": "off",
 		"http-cache": [
 			"error",
 			{
-				"maxAgeTarget": 300
+				"maxAgeTarget": 600
 			}
 		],
 		"http-compression": "off",
 		"https-only": "error",
 		"manifest-file-extension": "error",
 		"manifest-is-valid": "error",
+		"meta-viewport": "error",
+		"no-bom": "error",
+		"no-p3p": "error",
+		"html-checker": "off",
+		"content-type": ["error", {
+			".*\\.svg": "image/svg+xml"
+		}],
+		"no-html-only-headers": [ "warning",
+			{
+				"ignore": ["content-security-policy"]
+			}],
 		"performance-budget": [
 			"error",
 			{
 				"connectionType": "3GSlow",
-				"loadTime": 5
+				"loadTime": 10
+			}
+		],
+		"stylesheet-limits": [
+			"error",
+			{
+				"maxRules": 100,
+				"maxSheets": 2,
+				"maxImports": 0
 			}
 		],
 		"ssllabs": "off"

package.json

@@ -1,14 +1,12 @@
 {
   "devDependencies": {
-    "@hint/formatter-codeframe": "^3.1.22",
+    "@hint/hint-doctype": "^3.3.20",
-    "@hint/hint-doctype": "^3.3.10",
+    "hint": "^7.1.0",
-    "@hint/hint-https-only": "^2.4.10",
-    "@hint/hint-performance-budget": "^2.4.10",
-    "hint": "^6.1.4",
     "stylelint": "^14.8.1",
     "stylelint-config-standard": "^25.0.0"
   },
   "dependencies": {
-    "stylelint-config-recommended": "^7.0.0"
+    "stylelint-config-recommended": "^7.0.0",
+    "typescript": ">=2.8.0"
   }
 }

scripts/bin/check-whole-site

@@ -62,5 +62,8 @@ base_url="${1-http://localhost:8089}"
 # HTML validation is already parallelized, so run that single-threaded.
 make -j1 HUGO_FLAGS=-DF HUGO_BASEURL="$base_url" clean hugo xhtmlize validate-html
 make -j "$jobs" -f Makefile.online HUGO_BASEURL="$base_url" all-extra URLS="$(curl -sSL "$base_url/sitemap.xml" | htmlq loc -t | rg -v '/search/$' | tr '\n' ' ')"
+make deploy-staging
+make -f Makefile.online hint-online URLS="$(curl -sSL --compressed https://staging.seirdy.one/sitemap.xml | htmlq loc -t | rg -v '/search/$' | sort | tr '\n' ' ')"
+# TODO: run lighthouse on every page in the sitemap.
 
 # vi:ft=sh