Michael Fairchild mfairchild365

Background videos (videos that are played in the background with no audio, usually with other content over it) are becomming more and more common. They also pose a problem for accessibility. For a primer on the issue see this great article: http://www.punkchip.com/accessible-html-video-as-a-background/

The one thing that the article does not address are problems with the markup of the video.

I'm curious what folks think of turning the video into an image for assitive technology (AT) via role="img". Of course, you would still want to create a stop button for the video.

The issue with just using a video is that a blind AT user might enounter the video and wonder why it is missing captions and/or a description track (alternative text).

By marking up the video as an image, we are essentially saying 'hey, this video is really just an animated gif but in video format. Here is some alt text provided with the aria-label attribute'.

Scenario: I want to tell the screen reader to use down arrow until it reaches the end of element x?

JAWS: has its own cursor stop and the end boundary AFTER the last list item and BEFORE following content NVDA: does NOT have its own cursor stop. It exits the list and announces "out of list "

Given this example HTML

content before

Nebraska.code a11y workshop

This is a copy of important code snippets from the outline

Y'all ready for this?

git clone https://github.com/AustinGil/accessiblitz.git && cd accessiblitz/react && npm install

	<div id="maincontent" class="wdn-main">
	<div id="pagetitle">
	<!-- InstanceBeginEditable name="pagetitle" -->
	<h1 class="wdn-text-hidden">Your Page Title</h1>
	<!-- InstanceEndEditable -->
	</div>
	<!-- InstanceBeginEditable name="maincontentarea" -->
	<div class="wdn-band">
	<img class="wdn-stretch" src="images/splash/splash-poster.jpg" alt="A description of what is in the image" />
	<div class="wdn-promo-container">

	//ga tracking code here

	//custom scroll depth tracking here
	require(['jquery', 'path/to/scrolldepth/jquery.scrolldepth.js'], function($) {
	$.scrollDepth({
	//options (see http://scrolldepth.parsnip.io/)
	});
	});

	<div id="lms-splash-alert-container"></div>
	<script>
	require(['jquery'], function($) {

	function showAlert(id, $container, noticeTitle, bodyHTML) {
	if(localStorage.getItem(id)) {
	//the notice has been hidden in this browser
	return;
	}

	<?php
	function getMessage($hello=false){
	return ($hello)?'hello':'bye';
	}

	//What happens in the following scenarios

	//scenario 1
	echo getMessage();

	<?php
	//What is happening in the following scenarios?

	//scenario 1
	echo $_GET['test'];

	//scenario 2
	echo $_POST['test'];

	let fs = require('fs');
	let moment = require('moment');
	let cheerio = require('cheerio');

	let currentDateString = moment().format('YYYY-MM-DD');
	let dataDir = __dirname+'/../data';

	const TEST_SHELL = {
	"type": "assertion",
	"title": "todo",