mfairchild365

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

mfairchild365

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

mfairchild365

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",

mfairchild365

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

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

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

mfairchild365

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

//What happens in the following scenarios 

//scenario 1
echo getMessage();

mfairchild365

<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;
		}
		

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'.

mfairchild365

//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/)
  });
});

mfairchild365

<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">

mfairchild365

#main-page #pagetitle h1 {
  font-size: 0;
  width: 1px;
  height: 1px;
  display: inline-block;
  overflow: hidden;
  position: absolute!important;
  border: 0!important;
  padding: 0!important;
  margin: 0!important;