accessibility-dynamic-regions

accessibility-dynamic-regions.markdown

accessibility-dynamic-regions

A Pen by Dhiraj Indurthy on CodePen.

License.

index.html

<section ng-app="template" ng-controller="templateController as main" class="app">
	<h3>Difference between <span class="tags">aria-live aria-atomic aria-relevant</span></h3>
		<ul>
			<li>aria-live : This will let the screen reader know there is a region which has live updates</li>
			<li>aria-atomic : This indicates it to not just read the updated content but read the whole section as in our case the updated content itself does not make ameaning but the whole section together does make a sentence.</li>
			<li>aria-relevant: This ensures it to read when some content is 'added' and as well as content is 'removed'</li>
		</ul>
	<br><br>
	<button aria-controls="dynamic-content" ng-click="main.toggleAddable()">Play Now</button>
<!-- 	<button aria-controls="dynamic-content" ng-click="main.addItem()">Add Now</button>
	<button aria-controls="dynamic-content" ng-click="main.removeItem()">Rem Now</button> -->
	<section id="dynamic-content" aria-live="assertive" aria-atomic="true" aria-relevant="all">
<!-- 		<p>Some of alcohols as follows:</p>
		<ul>
			<li ng-repeat="item in main.items">{{item}}</li>
		</ul> -->
		<p>Content that never changes but is part of the whole sentence which has</p>
		<p class="addable" >{{main.changingContent}}</p>
	</section><br>
	<p>Note: The NVDA screen reader has different behaviour in Firefox and Chrome due to the limitations of the screen reader with various browsers</p>
</section>

script.js

angular.module('template', [])
    .controller('templateController', ['$scope', function($scope) {
			this.items = ['Beer', 'Vodka', 'Scotch'];
			this.addItem =  function() {
				this.items.push('Whisky','Absinthe');
			}
			this.removeItem = function() {
				this.items.splice(1, 1);
			}
			
			this.toggleAddable = function() {
				if(this.addable===true) {
					  this.addable = false;
						this.changingContent = "content that is now hidden";
					 } else {
						 this.addable = true;
						 this.changingContent = "content that can be added and removed when some actions performed in the section";
					 }
			}
			
			
		}]);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.scss

body, section {
	margin: 0 auto;
	font-family:"Comic Sans MS", cursive, sans-serif;
}
ul {
	list-style:none;
	li {
		color: #00CED1;
	}
}
.addable {
	color: #00BFFF;
}
#error-message {
	padding: 1rem;
	padding-left:0;
	color: #D5685B;
}
.tags {
	color: #00FFFF;
}
fieldset {
	border:none;
}
.details {
	
}