Accessibility Automation
![](http://www.weapons-universe.com/AXE-1A-Viking-Bearded-Carbon-Steel-Red-Sandalwood-Axe.jpg)
@phenomnominal 2019
![](https://cdn11.bigcommerce.com/s-w3u6iwh84c/images/stencil/1280x1280/products/40987/2195/FR-24inch-and-19inch-Axe-0843__28177.1526531209.png?c=2&imbypass=on)
Is HArd, yes?
@phenomnominal 2019
![](https://www.medievalcollectibles.com/wp-content/uploads/2019/04/LARP-Axes.png)
Static ANalysis
@phenomnominal 2019
Lighthouse
![](https://qtoptens-com.exactdn.com/wp-content/uploads/2017/08/SteelWarAxe-e1501586542830.png?strip=all&lossy=1&w=480)
@phenomnominal 2019
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/6466047/Screen_Shot_2019-08-22_at_19.04.24.png)
@phenomnominal 2019
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/6466050/Screen_Shot_2019-08-22_at_19.05.06.png)
@phenomnominal 2019
@phenomnominal 2019
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/6466070/Screen_Shot_2019-08-22_at_19.10.55.png)
Colour
@phenomnominal 2019
![](https://i.pinimg.com/originals/27/ac/1d/27ac1ddf0f60e5af6970a453e0c47186.png)
@phenomnominal 2019
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/6466101/Screen_Shot_2019-08-22_at_19.23.27.png)
@phenomnominal 2019
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/6466122/Screen_Shot_2019-08-22_at_19.30.50.png)
@phenomnominal 2019
Content
![](http://qtoptens-com.exactdn.com/wp-content/uploads/2017/08/NordicWaraxe.png)
@phenomnominal 2019
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/6466112/Screen_Shot_2019-08-22_at_19.27.42.png)
![](https://www.medievalcollectibles.com/wp-content/uploads/2019/04/Double-Headed-Battle-Axes.png)
AXE
@phenomnominal 2019
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/6466060/Screen_Shot_2019-08-22_at_19.07.19.png)
@phenomnominal 2019
@phenomnominal 2019
AXE + PUPPEteer
![](http://www.hbforge.com/images/products/380-001.png)
@phenomnominal 2019
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/6466130/Screen_Shot_2019-08-22_at_19.37.02.png)
@phenomnominal 2019
const { AxePuppeteer } = require("axe-puppeteer");
const puppeteer = require("puppeteer");
(async () => {
const browser = await puppeteer.launch({
headless: false
});
const page = await browser.newPage();
await page.setBypassCSP(true);
await page.goto("https://open.spotify.com");
const results = await new AxePuppeteer(page).analyze();
console.log(results);
await page.close();
await browser.close();
})();
@phenomnominal 2019
AXE + PUPPEteer + JEST
![](http://qtoptens-com.exactdn.com/wp-content/uploads/2017/08/ebonywaraxe.png)
@phenomnominal 2019
![](https://s3.amazonaws.com/media-p.slid.es/uploads/319854/images/6466133/Screen_Shot_2019-08-22_at_19.38.24.png)
@phenomnominal 2019
const { AxePuppeteer } = require("axe-puppeteer");
const puppeteer = require("puppeteer");
test(`accessibility hasn't got worst`, async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setBypassCSP(true);
await page.goto("https://open.spotify.com");
const results = await new AxePuppeteer(page).analyze();
const violations = results.violations.map(violation => {
delete violation.nodes;
return violation;
});
expect(violations).toMatchSnapshot();
await page.close();
await browser.close();
});
@phenomnominal 2019
PUPPEteer + JEST + Keyboard
![](https://cdn.shopify.com/s/files/1/1641/2457/products/hults-bruk-bjork-splitting-axe-20932962822_05bf5d59-2350-4052-a6bd-0f52a0e0aff2.png?v=1556075751)
@phenomnominal 2019
const puppeteer = require("puppeteer");
test(`can search with keyboard`, async () => {
jest.setTimeout(30000);
const browser = await puppeteer.launch({
headless: false
});
const page = await browser.newPage();
await page.setBypassCSP(true);
await page.goto("https://open.spotify.com");
await page.keyboard.press("Tab");
await page.keyboard.press("Tab");
await page.keyboard.press("Tab");
await page.keyboard.press("Tab");
await page.keyboard.press("Tab");
await page.keyboard.press("Tab");
await page.keyboard.press("Enter");
await page.keyboard.type("Propagandhi", { delay: 200 });
await page.keyboard.press("Enter");
await page.keyboard.press("Tab");
await page.keyboard.press("Tab");
await page.keyboard.press("Tab");
await page.keyboard.press("Tab");
await page.keyboard.press("Tab");
await page.keyboard.press("Tab");
await page.keyboard.press("Tab");
await page.keyboard.press("Enter");
await page.close();
await browser.close();
});
@phenomnominal 2019
PUPPEteer + JEST + VOICEOVER + SPEECH-To-TEXT
⛏
@phenomnominal 2019
require("dotenv").config();
const util = require("util");
const path = require("path");
const exec = util.promisify(require("child_process").exec);
const recorder = require("node-record-lpcm16");
const fs = require("fs");
const speech = require("@google-cloud/speech");
const puppeteer = require("puppeteer");
async function voiceover() {
const outputPath = path.join(__dirname, "./output.wav");
const file = fs.createWriteStream(outputPath, {
encoding: "binary"
});
const recording = recorder.record({
sampleRate: 44100
});
recording.stream().pipe(file);
const toggleVoiceoverScriptPath = path.resolve(
__dirname,
"./toggle-voiceover.scpt"
);
try {
await exec(`osascript ${toggleVoiceoverScriptPath}`);
const browser = await puppeteer.launch({
headless: false
});
const page = await browser.newPage();
await page.setBypassCSP(true);
await page.goto("https://open.spotify.com/show/54XPfcl9oJdktfD1lT5V2N");
await page.keyboard.press("Tab", { delay: 0 });
await page.keyboard.press("Tab", { delay: 15000 });
await page.keyboard.press("Tab", { delay: 2000 });
await page.keyboard.press("Tab", { delay: 2000 });
await page.keyboard.press("Tab", { delay: 2000 });
await page.keyboard.press("Tab", { delay: 2000 });
await page.close();
await browser.close();
await exec(`osascript ${toggleVoiceoverScriptPath}`);
recording.stop();
const speechClient = new speech.SpeechClient();
const file = fs.readFileSync(outputPath);
const audioBytes = file.toString("base64");
const audio = {
content: audioBytes
};
// The audio file's encoding, sample rate in hertz, and BCP-47 language code
const config = {
sampleRateHertz: 44100,
languageCode: "en-US"
};
const request = {
audio,
config
};
// Detects speech in the audio file
speechClient
.recognize(request)
.then(data => {
console.log(data[0].results[0].alternatives[0].transcript);
})
.catch(err => {
console.error("ERROR:", err);
});
} catch (e) {
console.log(e);
}
}
voiceover();
@phenomnominal 2019
What ELSE?
@phenomnominal 2019
![](http://resources.mynewsdesk.com/image/upload/t_next_gen_logo_limit_x2_png/gejept5mm8gonmqmqeb2.png)
Captions?
Animations?
@phenomnominal 2019
![](https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/d6fbf323-e851-46cf-b254-8afccbf57c30/d4ram10-987c1bae-f663-4ed0-a330-83d7135d6113.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2Q2ZmJmMzIzLWU4NTEtNDZjZi1iMjU0LThhZmNjYmY1N2MzMFwvZDRyYW0xMC05ODdjMWJhZS1mNjYzLTRlZDAtYTMzMC04M2Q3MTM1ZDYxMTMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.NXV5uLF3Ctr0GZ7TK_uplxWu0HT_pMU1jjBWKrOf1UI)
Questions?
@phenomnominal 2019
Fin.
![](https://re-allians.se/wp-content/uploads/2019/03/SKV_RGB_st-444x321.png)
![](https://i.pinimg.com/originals/f7/59/0f/f7590feeb191af8308a8606697c73acd.png)
![](https://www.stickpng.com/assets/images/5848083dcef1014c0b5e48e6.png)
![](https://www.pngarts.com/files/4/Drax-Transparent-Background-PNG.png)
Accessibility Automation
By Craig Spence
Accessibility Automation
- 2,706