Skip to content

Instantly share code, notes, and snippets.

View SteveBarnett's full-sized avatar

Steve Barnett SteveBarnett

52 followers · 10 following
View GitHub Profile
@SteveBarnett
SteveBarnett / characters.txt
Created December 11, 2023 20:20
Quick check: legibility of a font
I1l0Oij
Eye one ell zero Oh eye jay
@SteveBarnett
SteveBarnett / Alternative text.html
Created November 9, 2023 18:38
Does an automated accessibility test catch it?
<!-- Missing text alternative -->
<!-- 🤖 caught by automated test -->
<img src="pup.jpg">
<!-- Bad text alternative -->
<!-- Not actually an alternative -->
<!-- 🧐 not caught by automated test -->
<img src="pup.jpg" alt="dog">
<!-- Great text alternative -->
@SteveBarnett
SteveBarnett / algorithm.md
Last active October 15, 2023 22:09
Accessibility audit terminology: issue severity
  1. Is it Critical?
    • Does it stop someone doing a thing? Can they do the thing some other way?
  2. If it's not Critical, how bad is it?
    • Is it part the core task flow?
    • Will the user encounter the error frequently?
    • How much will it slow them down?
  • Is the error in lots of places?
@SteveBarnett
SteveBarnett / notes.md
Last active October 6, 2023 01:45
OBS dual wield / dual video and audio

Send a second video using Full-screen Projector

  • Right click on the Preview, "Full-screen Projector (Preview)" menu item.
  • Choose the second screen from the list.

Send a second audio using Monitor

  • Go Settings > Audio. In Advanced, set the Monitoring Device to the second screen.
  • Go to Advanced Audio Properties (in the Audio mixer panel click the Cog, or the three dots button next to an audio source).
  • Choose "Monitor and Output" in the Audio Monitoring column for the correct audio source.
@SteveBarnett
SteveBarnett / Accessibility-OKRs.md
Created June 14, 2023 23:20

Accessibility OKRs

Process

  • Every design change or new item has been reviewed using the UX a11y summary.
  • Every code change or new component is "axe clean" (no errors when running the axe browser extension)
  • Updating the ACR is part of the release cycle (maybe as part of the changelog process?)
  • Create, gather, and report on metrics (have a dashboard?).
  • Write some new behat tests that cover keyboard usage, aria attributes, and more. (Note! Writing and running behat is slow and jest is fast. But! Behat tests the rendered HTML directly and is framework-independent.)
  • No tickets with WCAGFail label by [date]
@SteveBarnett
SteveBarnett / buttons.md
Last active March 12, 2020 00:21
Link and Button examples 
<!-- yes! -->
<button type="button">Show messages</button>
<button type="button">Show messages <img src="/icons/messages.png" alt="" /></button>
<button type="button"><img src="/icons/messages.png" alt="Show messages" /></button>
<button type="button" disabled aria-describedby="id-of-a-paragraph-explaining-why">Show messages</button>

<!-- please no -->
<button type="button"><img src="/icons/messages.png" /></button> <!-- no accessible name -->
Show messages
@SteveBarnett
SteveBarnett / steps.md
Last active January 31, 2020 01:08
How to show current step accessibily

The way I think about it: what's the text version of this? It's a list, with the status in brackets after the step name.

<ul>
	<li><img src="blop.svg" alt="Step 1 (complete) - The long bit of text that describes step 1" /></li>
	<li><img src="blop.svg" alt="Step 2 (complete) - The long bit of text that describes step 2" /></li>
	<li><img src="bleep.svg" alt="Step 3 (current) - The long bit of text that describes step 3" /></li>
	<li><img src="blorp.svg" alt="Step 4 - The long bit of text that describes step 4" /></li>
@SteveBarnett
SteveBarnett / index.html
Created January 30, 2020 21:12
H5BP short
<!doctype html>
<html lang="en">
<head>
<title>Testing</title>
</head>
<body>
</body>
@SteveBarnett
SteveBarnett / keybase.md
Created September 16, 2019 12:41
keybase.md

Keybase proof

I hereby claim:

  • I am stevebarnett on github.
  • I am stevebarnett (https://keybase.io/stevebarnett) on keybase.
  • I have a public key ASDrGc9Di9id_mzJFCpGdTPEs41CYd5K9O8elJRaPxrTCwo

To claim this, I am signing this object:

@SteveBarnett
SteveBarnett / talk-blurb.md
Created February 1, 2019 14:29
"How to make your team FED up" talk blurb

How to make your team FED up

Making software for the web is tricky. The more directly everyone on the team works with the materials of the web (HTML, CSS, and JavaScript), the more informed our design and development decisions can be. One of the best ways to do this is to have a team of T-shaped people (deep knowledge in one area, shallow knowledge in many others). Does that mean designers should learn to code? Nope. 🙅‍♀️ Does it help if they know a little about code? Yes! 🎉

We’ll look at a couple of tiny case studies of a Front-End Developer (me. Hi there! 👋) working with UI designers, UX designers, and Back-End Developers across different teams. We’ll see how sharing the FED love led to more accessible designs, more realistic prototypes, and cleaner front-end code. And since “front-end developer” can mean a lot of things these days, we’ll also look at various flavours of FEDs and why they are all delicious.