Skip to content

Commit

Permalink
update a11y views to new prototype, phetsims/a11y-research#66
Browse files Browse the repository at this point in the history
  • Loading branch information
@zepumph
zepumph committed Dec 12, 2017
1 parent 1c40926 commit a50d674
Showing 1 changed file with 56 additions and 124 deletions.
180 changes: 56 additions & 124 deletions john-travoltage-a11y-view.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,12 @@
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="phet-sim-level" content="production">

<!--have to scroll right and left! allows to resize also-->
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>John Travoltage A11y View</title>

<style>
Expand All @@ -18,52 +20,37 @@

body {
display: block;
margin: 1em auto 2em;
width: 95%;
margin: 1em 1em 2em;
width: 100%;
background: #ccc;
}

div.simulation_frame {
float: left;
width: 47%;
background: #ccc;
.left{
position:fixed;
width:47%;
}

/* This class was found online as a way to preserve an iframe aspect ratio, see https://fettblog.eu/blog/2013/06/16/preserving-aspect-ratio-for-embedded-iframes/*/
/* This class was found online as a way to preserve an iframe aspect ratio,
see https://fettblog.eu/blog/2013/06/16/preserving-aspect-ratio-for-embedded-iframes/*/
.aspect-ratio {
position: relative;
width: 100%;
height: 0;
padding-bottom: 72%;
height: 100%;
padding-bottom: 67%;
}

.aspect-ratio iframe.fixed {
width: 44.8%;
height: 100%;
iframe {
width: 43%;
height: 30vw;
max-height: 30vw;
margin: 7px auto 7px auto;
position: fixed;
left: 0;
top: 0;
overflow: hidden;
border: 0;
margin-left: 2.4vw;
margin-top: 3.5vh;
}

.aspect-ratio iframe.not-fixed {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow: hidden; /* Prevents a scrollbar, and clips content. */
border: 0;
}

div.right {
background: #ccc;
float: right;
width: 50%;
width: 47%;
overflow: auto;
}

Expand All @@ -82,7 +69,7 @@
}

p.alert_copy {
min-height: 2em;
min-height: 5em;
}

div.dom_copy_container {
Expand All @@ -97,7 +84,7 @@

div.wrapper {
height: auto;
width: 100%;
width: 95%;
margin-bottom: 2em;
}

Expand All @@ -111,58 +98,51 @@
<body>

<div class="wrapper">
<div id="intro">
<h1>John Travoltage A11y View: Visual and Described content side by side</h1>
<p>
The accessible version of John Travoltage is embedded in the iframe below. As you interact with the visual sim
in the
iframe with either a keyboard or mouse, the descriptions for the sim automatically update on the right in a
structured Parallel Document Object Model, or PDOM. Interactive Alerts (in orange) announce key changes of what is
happening during interaction, while the dynamic descriptions (in green) automatically update in the background,
maintaining an up-to-date description of the state of the sim and all its objects. Static descriptions (in blue)
identify regions and objects and do not change.
</p>
</div>

<div id="content">
<div class="simulation_frame" id="simulation-frame">
<h2>John Travoltage in iframe</h2>
<div class="left">
<h3>John Travoltage in iframe</h3>

<div class="aspect-ratio">
<iframe id="iframe" class="not-fixed" allowfullscreen title="Interact with John Travoltage"></iframe>
<iframe id="iframe" allowfullscreen title="Interact with John Travoltage"></iframe>
</div>
</div>

<!--The PDOM copy will be placed in this container, along with a section just for alerts -->
<div class="pdom_copy" id="pdom-copy">
<h2>John Travoltage descriptions structured in a Parallel DOM</h2>
<h3>Interactive alerts</h3>
<div id=alert-copy-container class=alert_copy_container>
<div id='assertive-element-container'>
<p class='alert'>&#10092;assertive update&#10093;</p>
<p class='alert_copy' id="assertive-element-copy"></p>
</div>
<div id='polite-element-container'>
<p class='alert'>&#10092;polite update&#10093;</p>
<p class='alert_copy' id="polite-element-copy"></p>
</div>
<div id='assertive-alert-element-container'>
<p class='alert'>&#10092;assertive alert update&#10093;</p>
<p class='alert_copy' id="assertive-alert-element-copy"></p>
</div>
<div id='polite-alert-element-container'>
<p class='alert'>&#10092;polite status update&#10093;</p>
<p class='alert_copy' id="polite-status-element-copy"></p>
<div id="alerts">
<h3>Interactive alerts</h3>
<div id=alert-copy-container class=alert_copy_container>
<div id='polite-element-container'>
<p class='alert_copy' id="polite-element-copy"></p>
</div>
</div>
</div>
<h3>Static and Dynamic Descriptions</h3>
<div id=dom-copy-container class="dom_copy_container"></div>
</div>

<!--clear the blocks after the float effect-->
<div class="clearfix"></div>

<!--The PDOM copy will be placed in this container, along with a section just for alerts -->
<div class="right">
<div id="intro">
<h1>John Travoltage A11y View: Visual and Described content side by side</h1>
<p>
The accessible version of John Travoltage is embedded in the iframe below. As you interact with the visual
sim
in the
iframe with either a keyboard or mouse, the descriptions for the sim automatically update on the right in a
structured Parallel Document Object Model, or PDOM. Interactive Alerts (in orange) announce key changes of what
is
happening during interaction, while the dynamic descriptions (in green) automatically update in the background,
maintaining an up-to-date description of the state of the sim and all its objects. Static descriptions (in blue)
identify regions and objects and do not change.
</p>
</div>
<h2>John Travoltage descriptions structured in a Parallel DOM</h2>
<h3>Static and Dynamic Descriptions</h3>
<div id="dom-copy-container" class="dom_copy_container"></div>
</div>

<!--clear the blocks after the float effect-->
<div class="clearfix"></div>
</div>

</div>

<script type="application/javascript">

Expand All @@ -178,8 +158,8 @@ <h3>Static and Dynamic Descriptions</h3>
var noPostMessage = simulationQueryString.indexOf( 'postMessageOnLoad&postMessageOnError' ) === -1;
var noAccessibility = simulationQueryString.indexOf( 'accessibility' ) === -1;

noPostMessage && (simulationQueryString += 'postMessageOnLoad&postMessageOnError&');
noAccessibility && (simulationQueryString += 'accessibility');
noPostMessage && ( simulationQueryString += 'postMessageOnLoad&postMessageOnError&' );
noAccessibility && ( simulationQueryString += 'accessibility' );
document.getElementById( 'iframe' ).setAttribute( 'src', 'john-travoltage_en.html' + simulationQueryString );
</script>

Expand All @@ -203,7 +183,7 @@ <h3>Static and Dynamic Descriptions</h3>

// searching for the HTML element nodes (NOT Scenery nodes)
if ( children[ i ].nodeType === Node.ELEMENT_NODE ) {
linearDOM[ i ] = (children[ i ]);
linearDOM[ i ] = ( children[ i ] );
}
}
return linearDOM;
Expand All @@ -224,23 +204,14 @@ <h3>Static and Dynamic Descriptions</h3>
var pDOMCopy = pDOM.cloneNode( true );

// get the alert dom elements from the iframe's pDOM
var assertiveElement = innerDoc.getElementById( 'assertive' );
var politeElement = innerDoc.getElementById( 'polite' );
var assertiveAlertElement = innerDoc.getElementById( 'assertive-alert' );
var politeStatusElement = innerDoc.getElementById( 'polite-status' );

// get the alert dom elements from the pDOM copy
var assertiveElementCopy = document.getElementById( 'assertive-element-copy' );
var politeElementCopy = document.getElementById( 'polite-element-copy' );
var assertiveAlertElementCopy = document.getElementById( 'assertive-alert-element-copy' );
var politeStatusElementCopy = document.getElementById( 'polite-status-element-copy' );

// strip the styling from the copied DOM elements
pDOMCopy.removeAttribute( 'style' );
assertiveElementCopy.removeAttribute( 'style' );
politeElementCopy.removeAttribute( 'style' );
assertiveAlertElementCopy.removeAttribute( 'style' );
politeStatusElementCopy.removeAttribute( 'style' );

// strip style from all elements in the DOM
getAllDOMElementsAsLinear( pDOMCopy ).forEach( function( element ) {
Expand All @@ -249,10 +220,7 @@ <h3>Static and Dynamic Descriptions</h3>

// get the parent container for the parallel DOM copy and the alert content
var copyContainer = document.getElementById( 'dom-copy-container' );
var assertiveElementContainer = document.getElementById( 'assertive-element-container' );
var politeElementContainer = document.getElementById( 'polite-element-container' );
var assertiveAlertElementContainer = document.getElementById( 'assertive-alert-element-container' );
var politeStatusElementContainer = document.getElementById( 'polite-status-element-container' );

// add the copies to the outer document
copyContainer.appendChild( pDOMCopy );
Expand Down Expand Up @@ -322,10 +290,7 @@ <h3>Static and Dynamic Descriptions</h3>
mutations.forEach( function( mutation ) {

// remove all other aria-live content
assertiveElementCopy.textContent = '';
politeElementCopy.textContent = '';
assertiveAlertElementCopy.textContent = '';
politeStatusElementCopy.textContent = '';


// update the text content of the copied element to match the element in
Expand All @@ -337,45 +302,12 @@ <h3>Static and Dynamic Descriptions</h3>
liveObserver.observe( originalElement, config )
}

addLiveObserver( assertiveElementContainer, assertiveElement, assertiveElementCopy );
addLiveObserver( politeElementContainer, politeElement, politeElementCopy );
addLiveObserver( assertiveAlertElementCopy, assertiveAlertElement, assertiveAlertElementCopy );
addLiveObserver( politeStatusElementContainer, politeStatusElement, politeStatusElementCopy );

// set focus to the loaded ifram
document.getElementById( 'iframe' ).focus();
}
} );
</script>
<script>
/*
Update the css of the iframe so that it will scroll with you as you look at the pDOM
*/
var iframe = document.getElementById( 'iframe' );

// keep track of the scrollY when we first fix the iframe so that we can unfix when we scroll back up to it.
var scrollYWhenFixed = null;

var transitionThreshold = window.screen.height * .035; // vh as a percent, should match the top-margin of the fixed iframe class

window.addEventListener( 'scroll', function() {

// swap to the fixed class when the top of the iframe is within the threshhold
if ( iframe.classList.contains( 'not-fixed' ) && findTop( iframe ) < transitionThreshold ) {
iframe.classList.remove( 'not-fixed' );
iframe.classList.add( 'fixed' );
scrollYWhenFixed = window.scrollY;
}
else if ( window.scrollY < scrollYWhenFixed && iframe.classList.contains( 'fixed' ) ) {
iframe.classList.remove( 'fixed' );
iframe.classList.add( 'not-fixed' );
}
} );

function findTop( element ) {
var rec = element.getBoundingClientRect();
return rec.top;
}
</script>
</body>
</html>

0 comments on commit a50d674

Please sign in to comment.