Skip to content

Instantly share code, notes, and snippets.

Avatar

Nick Freear nfreear

View GitHub Profile
@nfreear
nfreear / accessibility.iet-contrast-fix.css.html
Last active Apr 21, 2021
Demo of colour contrast fixes for IET home-page / 19-April-2021.
View accessibility.iet-contrast-fix.css.html
<!doctype html><html lang="en"><meta charset=utf-8 ><title> IET contrast fixes demo </title>
<style>
:root {
--grid: 35rem;
--fix-a-opacity: 0.52;
--fix-b-link-color: #44B4F8;
}
body { margin: 1rem auto; max-width: var(--grid); }
View accessibility.wai-aria.ajax-loading-demo.js.html
<!doctype html><html lang="en"><meta charset="utf-8">
<title> "More" button loading demo (WAI-ARIA) </title>
<style>
body { margin: 1rem auto; max-width: 35rem; padding: .5rem; }
main { font: 1rem/1.5 sans-serif; position: relative; }
/* Accessibility / Usability - visually indicate new content.
@nfreear
nfreear / accessibility.sr-only.css.html
Created Apr 20, 2021
Accessibility - "sr-only" / "visually-hidden" - Hide SMALL amounts of additional information from all BUT screen reader users.
View accessibility.sr-only.css.html
<!doctype html><html lang="en"><meta charset="utf-8"> <title> "sr-only" demo </title>
<style>
body { margin: 1rem auto; max-width: 35rem; }
pre { background: #f8f8f8; border: 1px solid #ccc; margin: 2rem 0; padding: .7rem; }
/* Accessibility.
Hide from all BUT screen reader users - Aka "visually-hidden".
View interactiveaccessibility.com--keyboard-trap-example.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
SOURCE :~ https://interactiveaccessibility.com/education/training/ex7.1.html
-->
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Training Examples - Keyboard Traps</title>
<link rel="stylesheet" href="css/formee-structure.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/formee-style.css" type="text/css" media="screen" />
@nfreear
nfreear / npm-outdated-filter-wanted.js
Last active Mar 3, 2021
NPM: outdated filter "wanted" (Node / Javacript utility)
View npm-outdated-filter-wanted.js
/**
* NPM-Outdated-filter-wanted.js
*
* @author NDF, 02-Mar-2021.
*/
const exec = require('child_process').exec;
exec('npm outdated --json', (err, stdout, stderr) => {
if (err instanceof Error && !stdout) {
@nfreear
nfreear / php-license-report-csv.js
Last active Feb 25, 2021
Parse PHP composer.json and composer.lock files to extract license information.
View php-license-report-csv.js
/**
* Work-in-progress!
*
* Parse PHP composer.json and composer.lock files to extract license information.
*
* OUTPUT: CSV output to standard error.
*
* @author Nick Freear, 24-Feb-2021.
*/
View covid-widget-banner.html
<!doctype html> <title> COVID widget / banner </title>
<style>
#covid-widget-nhs {
position: relative;
max-width: calc( 800px - ( 30px * 2 ) );
height: 450px;
}
#covid-widget-nhs iframe {
position: absolute; height: 100%; width: 100%; border: 2px solid #015eb8;
View admin.onlinesurveys.ac.uk--nick-admins-link-demo-1.json
@nfreear
nfreear / webchat.suggested-actions.css.html
Last active Dec 4, 2020
Usability and accessibility fixes using `flex-wrap` for "Suggested action" buttons / BotFramework-WebChat.js.
View webchat.suggested-actions.css.html
<!doctype html> <title> *Suggested action buttons </title>
<style>
body { margin: 1rem auto; max-width: 35rem; }
button {
background: rgb(182, 14, 1);
border: 2px solid rgb(182, 14, 1);
color: #fff;
font-size: 1.1rem;
padding: 1.25rem;
@nfreear
nfreear / ignore-colors.js.html
Last active Nov 26, 2020
Ignore colors / colours Javascript
View ignore-colors.js.html
<!doctype html> <meta charset=utf-8 /> <title> *Video test / Ignore colours </title>
<style>
.X.body > div { background: #eee; color: #333; }
</style>
<div>
<h1> Ignore colours </h1>
<p> This Javascript works in Windows <q>High Contrast</q> mode, but not in Mac OS <q>Invert Colors</q> mode. </p>