Zoë Bijl ZoeBijl

CSUN 2016 was fun. A lot of fun.

Mostly because of the people I got to hang out with for a week. Thinking about it, I can't really come up with anything I didn't like. Which is good.

What I took away from CSUN '16:

Getting a local AT&T sim card is really useful to be able to SMS, call and tweet. It makes synchronising get-togethers a breeze.
#a11y people like to party.
Sign language karaoke is a thing. See above.

Practical ARIA Tabs

This is a small guide to marking up fully accessible tabs. Consider using PostHTML ARIA Tabs as a practical solution.

The Rules

Add tablist role to the <ul> to indicate it contains tabs.
Add presentation role to each <li> to bypass its list item state.
Add tab role to each <a> to incidate it is an actual tab.
Add href and aria-controls to each <a> to reference its tab panel.

(as a reply to: https://css-tricks.com/svg-use-with-external-reference-take-2/)

While I love SVG (sprites) there are a lot of issues to take into account.

Advocating The Most Accessible Markup

UPDATE: you should take a look at https://dl.dropboxusercontent.com/u/145744/accessible-svg-icon/test.html which seems a simpler and more robust approach

Another thing: since people copy-paste our code examples it would be great if we could advocate the most robust and accessible markup IMO. I am no a11y expert, but in my understanding we could/should take some extra steps to make out SVG sprite icons more accessible.

A messy intro into VoiceOver - OS X's built-in screen reader

Browsers

works best with Safari!

Getting Started

cmd+f5 to turn on
Remember the "VoiceOver Key" (VO) opt + control
To navigate into a page, VO + shift + down arrow
To navigate all page links, hit tab throughout


	var sectioningSelector = 'article,aside,main,nav,section'

	var map = {
	'A': (el) => {
	return el.hasAttribute('href') ? 'link' : undefined
	},
	'AREA': (el) => {
	return el.hasAttribute('href') ? 'link' : undefined
	},

	# jekyll-readtime
	# 2015 Ron Scott-Adams, Licensed under MIT:
	# https://tldrlegal.com/license/mit-license
	# Original work: https://gist.github.com/zachleat/5792681

	# Outputs the estimated time the average person might take to read the content.
	# 200 is a round figure based on estimates gathered from various studies.
	# http://www.ncbi.nlm.nih.gov/pubmed/18802819

	# Usage: {{ page.content \| readtime }}

	<!DOCTYPE html>
	<html>
	<head>
	<title>iOS6 Safari Photo Capture Demo</title>

	<script type="text/javascript">
	window.onload = function() {
	var input = document.getElementById("input");
	input.addEventListener("change", handleFile);
	}