Melanie Mazanec mmazanec22

Accessible Bar Chart Prototype

This is a quick and imperfect prototype to illustrate two ideas that might allow a blind or visually impaired user to experience a bar chart. One concept is using pitch to indicate the relative height of the different bars (building upon this gist: http://bl.ocks.org/aholachek/6e18a82c0f0ada144b854f788c07d7a4). To try this, any user may use the mouse or the arrow keys to navigate the bars.

The other idea is to apply aria labels and roles to make the different svg elements available to screen readers. To try this, turn on the screen reader (on a Mac, cmd + F5), tab your way into the chart, then use the arrow keys to navigate the bars. The screen reader will announce x and y values (the pitch will still sound as well-- in a real implementation, this should probably be turned off by default so as not to conflict with the screen reader).

Feedback and improvements are welcome!

***** UPDATE 11/29/2018: INTERCOM IS NOW ACCESSIBLE! *****

See this Tweet: https://twitter.com/destraynor/status/1067943722971672576

Read more details: https://www.intercom.com/help/faqs-and-troubleshooting/the-intercom-messenger/is-the-intercom-messenger-accessible

By default, Intercom is not accessible to people navigating with the keyboard or using screen readers. This little script is a stop-gap solution developed by the City of Asheville to comply with Section 508. It does the following:

	<!DOCTYPE html>
	<html>
	<head>

	<script src="https://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript" src='./tooltip.js'></script>
	<link rel="stylesheet" type="text/css" href="./styles.css">

	</head>
	<body>

	<!DOCTYPE html>
	<html>
	<head>

	<script src="https://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript" src='./updateHistogram.js'></script>
	<link rel="stylesheet" type="text/css" href="./styles.css">

	</head>
	<body>

	document.addEventListener('DOMContentLoaded', () => {
	const parentDiv = d3.select('.parent-div');
	const width = 960;
	const height = 500;

	const svg = parentDiv.append('svg')
	.attr('width', width)
	.attr('height', height);

	const options = {

	class WorldMap {

	constructor(parentElement, colorScheme = {land: '#787882', water: '#1a1c2a'}) {
	this.parentElement = d3.select(parentElement);
	this.width = this.parentElement.style('width').replace('px', '');
	this.height = this.parentElement.style('height').replace('px', '');
	this.remSize = parseFloat(getComputedStyle(d3.select('html').node()).fontSize);
	this.landColor = colorScheme.land;
	this.waterColor = colorScheme.water;
	this.currMapTranslate = [0, 0];

	class FlowGraph{

	constructor(parentElement, inputData = levelOne) {
	this.parentElement = d3.select(parentElement);
	this.width = this.parentElement.style('width').replace('px', '');
	this.height = this.parentElement.style('height').replace('px', '');
	this.verticalMargins = this.height * 0.015;
	this.horizontalMargins = this.width * 0.015;
	this.data = inputData;

	// Add in Default.master file-- also see changes in Google Sheet
	<script type="text/javascript">
	$(function () {
	$('font').attr('size', '')
	$('span').css('line-height', 'unset')
	.css('font-size', 'unset')

	$('theForm')
	.css('height', '100vh')
	.css('letter-spacing', '0.12em')

	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3-color.v1.min.js"></script>
	<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<script src="https://unpkg.com/[email protected]/dist/semiotic.min.js"></script>
	<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
	<style>
	body {