This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Highlight images and alike while making the rest of content barely visible. | |
* | |
* Useful for accessibility audits (RGAA / WCAG) to help distinguish visually HTML images from background images, icon fonts, etc | |
* Performance isn't good (not that bad either). Scrolling is kind of sluggish in taaaall pages with dozens of images (bursts of | |
* 100% CPU time with a Ryzen 5 laptop). Initial execution time is OK. | |
* Pure CSS solution with `rgba(0,0,0, 0.2)` is way better. | |
* | |
* This script: | |
* - gets the position and dimensions of each images, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Bookmarklet "Isolate images" (unescaped and beautified code below) | |
// It's part of many other (stellar) bookmarklets "A11y Tools" | |
// Author: Lloydi | |
// Source: https://a11y-tools.com/bookmarklets/#isolateimages | |
(function () { | |
'use strict' | |
function isolateImages() { | |
const els = document.querySelectorAll('*'); | |
const page = document.querySelector('body'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# In a directory full of SVG files, extract and display values of their viewBox | |
# 1/2 Rough display | |
grep -H -o -i --color -E 'viewbox="([0-9. ]+)?"' *.svg | |
# Output: | |
# uEA01-arrow-down.svg:viewBox="0 0 50 50" | |
# uEA02-arrow-left.svg:viewBox="0 0 50 50" | |
# 2/2 Better display (no more color highlighting with Git Bash on Win 10 though) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ==UserStyle== | |
@name Language indications | |
@namespace github.com/openstyles/stylus | |
@version 0.1.0 | |
@description Displays page language and highlights changes of languages in content for 2 dozens of lang codes. Display total number of changes. | |
@author Philippe Vayssière | |
==/UserStyle== */ | |
/* Count of [lang] in the sidebar is adapted from a Stylus script made by Access42. Hat tip to them! */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ==UserStyle== | |
@name Highlight links and some indications | |
@namespace github.com/openstyles/stylus | |
@version 0.1.0 | |
@description Links are highlighted with their title and aria-label/labelledby attributes | |
@author Philippe Vayssière | |
==/UserStyle== */ | |
/* | |
TODO: counting links (with title, aria-label and aria-labelledby) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ==UserStyle== | |
@name Headings: display and count | |
@namespace github.com/openstyles/stylus | |
@version 0.1.0 | |
@description Highlight headings h1 to h6 plus role="heading". Count total number and also each level and role. | |
@author Philippe Vayssière | |
==/UserStyle== */ | |
/* Counting elements is adapted from a Stylus script made by Access42. Hat tip to them! */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ==UserStyle== | |
@name Empty elements | |
@namespace github.com/openstyles/stylus | |
@version 0.1.0 | |
@description Highlight and count empty elements (and blank ones only in Firefox) | |
@author Philippe Vayssière | |
==/UserStyle== */ | |
:root { | |
--white: white; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Dépendance : ce script doit être concaténé à | |
https://github.com/WhatSock/w3c-alternative-text-computation/tree/master/docs/Sample%20JavaScript%20Recursion%20Algorithm | |
qui calcule le nom accessible d'un élément. | |
Description: | |
Title attribute in links must contain link content | |
Display in *browser console* all links having a title and whether there's an error or if it's OK. | |
Date: September 2022 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// @NOTE Chrome version may vary (was chosen arbitrarily between "recent" versions) | |
// @NOTE Fx42 is also current ESR version | |
// @NOTE Android version may be 4.4.4 instead of 4.4 | |
var browsersList = ['IE >= 10', 'Edge >= 12', 'Chrome >= 42', 'Firefox >= 42', 'Firefox ESR', 'Safari >= 8', 'ios_saf >= 8', 'Android >= 4.4']; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Encodes SVG to suitable string for CSS inlining | |
# Usage in terminal: sed -f svg-encode-inline.sed your-minified-with-svgomg-icon.svg > your-encoded-icon.svg | |
# Then paste result in your CSS as `background-image: url("data:image/svg+xml,PASTE");` | |
# | |
# Equivalent to | |
# .replace(/"/g, '\'') | |
# .replace(/%/g, '%25') | |
# .replace(/#/g, '%23') <-- hex colors | |
# .replace(/{/g, '%7B') | |
# .replace(/}/g, '%7D') |
NewerOlder