Skip to content

Instantly share code, notes, and snippets.

Avatar
🌴
On vacation until December 14th

Scott Vinkle svinkle

🌴
On vacation until December 14th
View GitHub Profile
@svinkle
svinkle / a11y-react-live-coding-notes-links.md
Created Oct 17, 2018
Creating accessible React apps — a11yTOConf 2018 — Notes and Links
View a11y-react-live-coding-notes-links.md
View safari-keyboard-navigation.md

Safari Keyboard Navigation

In order to allow for full keyboard navigation of all element in Safari on macOS, make sure the following options are enabled.

All Controls in macOS

In the macOS settings, allow "All Controls" to be keyboard accessible. Enable this feature by going to:

  1. Settings
  2. Keyboard
@svinkle
svinkle / video-toggle.html
Created Sep 5, 2017
HTML to toggle a video play/pause control.
View video-toggle.html
<!-- Untoggled state -->
<button class="toggle-button player-button font-bold" aria-pressed="false" aria-label="Pause video">
<span class="close-icon font-bold" aria-hidden="true">×</span>
</button>
@svinkle
svinkle / popup.css
Last active Jun 17, 2017 — forked from davatron5000/popup.css
Universal Popup Control
View popup.css
[aria-hidden="true"] {
display: none;
}
@svinkle
svinkle / screencast-with-voiceover.md
Last active Jun 22, 2020
Screencast with VoiceOver
View screencast-with-voiceover.md

Screencast with VoiceOver

Here’s a quick how-to on recording your Mac desktop while using the VoiceOver screen reader. With this setup you’ll be able to capture both video and internal audio at the same time, and hear the audio output while recording.

Setup

For this setup we’ll be on OS X El Capitan and use QuickTime to capture the video and audio. The only extra thing required is the iShowU Audio Capture driver.

Steps

View a11y.md

a11y

The following covers developing for accessibility and keyboard/screen reader users. There is much, much more to making everything accessible for all people. More to be added soon.

Screen reader A11Y from a development perspective

“WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.” - https://www.w3.org/WAI/intro/aria

The first rule of using ARIA is not to use it. Only use it if absolutely necessary. It at all possible, use native HTML elements. Native controls have keyboard interactions and accessibility baked in from the start. Using these will save lots of time and make for way less code, making your application smaller and more manageable.

Test with a keyboard

@svinkle
svinkle / getting-started-with-nvda.md
Last active Aug 29, 2015
Getting started with NVDA
View getting-started-with-nvda.md

Getting started with NVDA

NVDA is a free and open source screen reader from NVAccess. It is available for the Windows operating system and officially supports Internet Explorer, Firefox, and Chrome web browsers. There is also a ton of braille display support!

NVDA is available for download here: http://www.nvaccess.org/download/

After everything is installed you can press Ctrl + Alt + n to start NVDA. Quitting NVDA is done by pressing NVDA + q, then enter at the prompt.

The NVDA Modifier Key

Each screen reader has a special key or key combination to perform tasks. NVDA’s default keyboard modifier key is the insert key. So, for example, to start reading a web page, you could press insert + down arrow. As an option, if you are using a laptop you can also use the caps lock key as a modifier. This can be set in the Preferences > Keyboard settings... menu.

View common-web-accessibility-issues.md

Common Web Accessibility Issues

I was once asked to come up with a short list of common accessibility issues. Here are some points I came up with. Please comment if anything is incorrect or you feel might be missing.

Color contrast

Test color contrast to make sure text is readable. Use a tool like this Color Contrast Calculator to test: http://leaverou.github.io/contrast-ratio/ Also test in High Contrast mode: https://twitter.com/svinkle/status/563405596699795456

Anchor Vs. Button Vs. Span Vs. Div

It is important to know when to use the appropriate element for a page action. The following is a basic overview of when to use/attach an event to which element:

@svinkle
svinkle / gist:7872301
Created Dec 9, 2013
Using Browser Sync with Yeoman Webapp -- Full Gruntfile.js
View gist:7872301
// Generated on 2013-12-06 using generator-webapp 0.4.4
'use strict';
// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// use this if you want to recursively match all subfolders:
// 'test/spec/**/*.js'
module.exports = function (grunt) {
@svinkle
svinkle / gruntfile.js
Created Jun 13, 2013
Small gruntfile.js example on copying files to another server via mapped Windows drive. https://npmjs.org/package/grunt-contrib-copy
View gruntfile.js
module.exports = function(grunt) {
// main config
grunt.initConfig({
copy: {
main: {
files: [
{src: ['css/main.css'], dest: 'Z:/www/css/main.css', filter: 'isFile'},
{src: ['js/main.js'], dest: 'Z:/www/js/main.js', filter: 'isFile'}
]
You can’t perform that action at this time.