Accessibility wai-aria test

Developer
Tom Hermans
Size
8,599 Kb
Views
8,096
  1. Accessibility wai-aria test Previews
  2. Accessibility wai-aria test HTML Codes
  3. Accessibility wai-aria test CSS Codes
  4. Accessibility wai-aria test JS Codes

How do I make an accessibility wai-aria test?

Http://heydonworks.com/practical_aria_examples/#toolbar-widget. What is a accessibility wai-aria test? How do you make a accessibility wai-aria test? This script and codes were developed by Tom Hermans on 09 December 2022, Friday.

Accessibility wai-aria test Previews
IQ Test

Accessibility wai-aria test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>accessibility wai-aria test</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section id="toolbar-widget">	<h2>A simple toolbar widget</h2>	<p>A generic pattern for "toolbars" which offer buttons for manipulating content in some way. In this case, it's sorting a list.</p>	<div class="grey-box">	<h3>Sorting crab names</h3>	<div role="toolbar" aria-label="sorting options" aria-controls="sortable">	<button type="button" aria-pressed="true" data-sort="ascending">A to Z</button>	<button type="button" aria-pressed="false" data-sort="descending">Z to A</button>	</div>	<ul id="sortable" tabindex="-1">	<li>Fiddler crab</li>	<li>Hermit crab</li>	<li>Red crab</li>	<li>Robber crab</li>	<li>Sponge crab</li>	<li>Yeti crab</li>	</ul>	</div>	<h3>The HTML</h3>	<p>(ARIA and ARIA-related attributes in green as always)</p>
<pre>&lt;div <strong class="aria">role="toolbar"</strong> <strong class="aria">aria-label="sorting options"</strong> <strong class="aria">aria-controls="sortable"</strong>&gt; &lt;button type="button" <strong class="aria">aria-pressed="true"</strong> data-sort="ascending"&gt;A to Z&lt;/button&gt; &lt;button type="button" <strong class="aria">aria-pressed="false"</strong> data-sort="descending"&gt;Z to A&lt;/button&gt;
&lt;/div&gt;
&lt;ul <strong class="aria">id="sortable"</strong> tabindex="-1"&gt; &lt;li&gt;Fiddler crab&lt;/li&gt; &lt;li&gt;Hermit crab&lt;/li&gt; &lt;li&gt;Red crab&lt;/li&gt; &lt;li&gt;Robber crab&lt;/li&gt; &lt;li&gt;Sponge crab&lt;/li&gt; &lt;li&gt;Yeti crab&lt;/li&gt;
&lt;/ul&gt;
</pre>	<h4>A few notes</h4>	<p>This is all about providing context. When the toolbar is entered (from either direction) and one of the buttons is focused, we are told that we are in a "toolbar", then the label of "sorting options" is also announced. Then, it is confirmed that the button is a "toggle button". This described behavior is in JAWS and NVDA. In JAWS 15 or NVDA with Firefox, a button with <strong class="aria">aria-pressed="true"</strong> will be appended with the word "pressed" when announced.</p>	<p>Chromevox announces <strong class="aria">aria-pressed="true"</strong> as "button pressed" and <strong class="aria">aria-pressed="false"</strong> as "button not pressed". This is a good reason to toggle the attribute value rather than removing <strong class="aria">aria-pressed</strong> as a boolean.</p>	<p><strong>Update:</strong> This example now supports <a href="http://www.w3.org/WAI/PF/aria-practices/#toolbar">recommended keyboard navigation</a>. That is, tabbing into the toolbar focuses the first button; using the left and right arrow keys switches focus between buttons; pressing <kbd>TAB</kbd> while focused on a button moves focus out of the toolbar (in this case, onto the list so it may be read).</p>	</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Accessibility wai-aria test - Script Codes CSS Codes

html { font-family: sans-serif; }
a, a:visited {	color: #1928CF;	text-decoration: none;
}
a:hover {	color: #8187CF;
}
a:focus { outline: thin dotted; color: #8187CF; }
a:active {	outline: none;
}
p a { border-bottom: 1px solid }
p a:hover, p a:focus { border-bottom: 2px solid; outline: 0; }
p a:active { border-bottom: 3px solid }
/**
* Flow
----------------------------------------------------------------------
*/
body * + * {	margin-top: 1.5rem;
}
li, p + p, dt, dd {	margin-top: 0;
}
blockquote, figure {	padding: 1.5rem;
}
blockquote p {	font-size: 1.25em;	font-style: italic;	margin-top: 1.5em;
}
caption {	text-align: center;	padding: 0.75em;	padding-bottom: 0;
}
blockquote footer:before {	content: '\2014';	padding: 0 9px 0 0;
}
blockquote p:before, q:before { content: '\201C' }
blockquote p:after, q:after { content: '\201D' }
hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0;
}
/**
* Paragraphs and lists
----------------------------------------------------------------------
*/
p, li, dt, dd {	line-height: 1.5;
}
p {	text-align: justify;	-moz-hyphens: auto;	-webkit-hyphens: auto;	hyphens: auto;
}
p:only-child, p:only-of-type, header p {	text-align: left;	-moz-hyphens: none;	-webkit-hyphens: none;	hyphens: none;
}
p * { margin-top: 0 }
p + p { text-indent: 1.5em }
[role="main"] > div > p:first-child:first-letter { float: left; font-size: 3.66em; line-height: 1; vertical-align: super;
}
/* for introductory paragraphs belonging to major sections */
header p { font-size: 1.25em }
li { list-style: disc inside }
ol li { list-style-type: decimal }
dl {	font-size: 0;
}
dt, dd {	font-size: 1rem;	display: inline-block;	vertical-align: top;	width: 60%;	padding-top: 18px;
}
dt {	width: 30%;	text-align: right;	font-style: italic;	padding-right: 1.5em;
}
/**
*

Accessibility wai-aria test - Script Codes JS Codes

/* 2. Incrementer & decrementer
-----------------------------------------------------------------------------------------
*/
$('[aria-controls="number"]').on('click', function() { var button = $(this); $('#number').val(function(i, oldval) { return button.is('[title*="add"]') ? parseInt(oldval, 10) + 10 : parseInt(oldval, 10) - 10; });
});
/* 3. Progressive collapsibles
-----------------------------------------------------------------------------------------
*/
$('.collapsible h3').each(function() { var $this = $(this); // create unique id for a11y relationship var id = 'collapsible-' + $this.index(); // wrap the content and make it focusable $this.nextUntil('h3').wrapAll('<div id="' + id + '" aria-hidden="true">'); var panel = $this.next(); // Add the button inside the <h2> so both the heading and button semanics are read $this.wrapInner('<button aria-expanded="false" aria-controls="' + id + '">'); var button = $this.children('button'); // Toggle the state properties button.on('click', function() { var state = $(this).attr('aria-expanded') === 'false' ? true : false; $(this).attr('aria-expanded', state); panel.attr('aria-hidden', !state); });
});
/* 4. Tab Interface
-----------------------------------------------------------------------------------------
*/
// The class for the container div
var $container = '.tab-interface';
// The setup
$($container + ' ul').attr('role', 'tablist');
$($container + ' [role="tablist"] li').attr('role', 'presentation');
$('[role="tablist"] a').attr({ 'role': 'tab', 'tabindex': '-1'
});
// Make each aria-controls correspond id of targeted section (re href)
$('[role="tablist"] a').each(function() { $(this).attr('aria-controls', $(this).attr('href').substring(1));
});
// Make the first tab selected by default and allow it focus
$('[role="tablist"] li:first-child a').attr({ 'aria-selected': 'true', 'tabindex': '0'
});
// Make each section focusable and give it the tabpanel role
$($container + ' section').attr({ 'role': 'tabpanel'
});
// Make first child of each panel focusable programmatically
$($container + ' section > *:first-child').attr({ 'tabindex': '0'
});
// Make all but the first section hidden (ARIA state and display CSS)
$('[role="tabpanel"]:not(:first-of-type)').attr({ 'aria-hidden': 'true'
});
// Change focus between tabs with arrow keys
$('[role="tab"]').on('keydown', function(e) { // define current, previous and next (possible) tabs var $original = $(this); var $prev = $(this).parents('li').prev().children('[role="tab"]'); var $next = $(this).parents('li').next().children('[role="tab"]'); var $target; // find the direction (prev or next) switch (e.keyCode) { case 37: $target = $prev; break; case 39: $target = $next; break; default: $target = false break; } if ($target.length) { $original.attr({ 'tabindex': '-1', 'aria-selected': null }); $target.attr({ 'tabindex': '0', 'aria-selected': true }).focus(); } // Hide panels $($container + ' [role="tabpanel"]') .attr('aria-hidden', 'true'); // Show panel which corresponds to target $('#' + $(document.activeElement).attr('href').substring(1)) .attr('aria-hidden', null);
});
// Handle click on tab to show + focus tabpanel
$('[role="tab"]').on('click', function(e) { e.preventDefault(); // remove focusability [sic] and aria-selected $('[role="tab"]').attr({ 'tabindex': '-1', 'aria-selected': null }); // replace above on clicked tab $(this).attr({ 'aria-selected': true, 'tabindex': '0' }); // Hide panels $($container + ' [role="tabpanel"]').attr('aria-hidden', 'true'); // show corresponding panel $('#' + $(this).attr('href').substring(1)) .attr('aria-hidden', null);
});
/* 5. Alert! You're offline
-----------------------------------------------------------------------------------------
*/
// Function to run when going offline
var offline = function() { if (!$('#status').hasClass('offline')) { $('#status') .attr('class', 'offline') .text('There\'s no internets. Go to the pub!'); }
}
// Function to run when back online
var online = function() { if (!$('#status').hasClass('online')) { $('#status') .attr('class', 'online') .text('You are online.'); }
}
// Test by trying to poll a file function testConnection(url) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onload = function() { online(); } xmlhttp.onerror = function() { offline(); } xmlhttp.open("GET", url, true); xmlhttp.send(); } // Loop the test every ten seconds for "test_resource.html" function start() { rand = Math.floor(Math.random() * 90000) + 10000; testConnection('http://heydonworks.com/practical_aria_examples/test_resource.html?fresh=' + rand); setTimeout(start, 10000); } // Start the first test start();
/* 6. Warning dialog
-----------------------------------------------------------------------------------------
*/
$('[data-dialog-call]').on('click', function() { // define the dialog element var dialog = $('body > dialog'); // record the trigger element var trigger = $(this).attr('id') ? $(this).attr('id') : 'trigger'; // open dialog and add roles dialog.attr({ 'tabindex': '0', 'open': 'true', 'role': 'alertdialog', 'aria-labelledby': 'd-message' }); // retrieve custom close button wording, if any var closeText = $(this).attr('data-dialog-response') ? $(this).attr('data-dialog-response') : 'close'; // build the dialog markup dialog.wrapInner('<div><div><button role="button">' + closeText + '</button></div></div>'); // Insert the message held in the trigger's [data-dialog-msg] attribute $('<p id="d-message">' + $(this).attr('data-dialog-call') + '</p>') .insertBefore(dialog.find('button:first-of-type')); // hide and make unfocusable all other elements $('body > *:not(dialog)').addClass('mod-hidden'); // make last button in dialog the close button var close = dialog.find('button:last-of-type'); $(close).focus(); var closeDialog = function() { dialog.find('p').remove(); $('body > *:not(dialog)').removeClass('mod-hidden'); //set focus back to element that triggered dialog $('#' + trigger).focus(); // If we manufactured the ID, remove it if ($('#' + trigger).attr('id') === 'trigger') { $('#' + trigger).attr('id', null); } // remove dialog attributes and empty dialog dialog.removeAttr('open role aria-describedby tabindex'); dialog.empty(); $(dialog).off('keypress.escape'); } // run closeDialog() on click of close button $(close).on('click', function() { closeDialog(); }); // also run closeDialog() on ESC $(dialog).on('keypress.escape', function(e) { if (e.keyCode == 27) { closeDialog(); } }); $(close).on('keydown', function(e) { if ((e.keyCode || e.which) === 9) { dialog.focus(); e.preventDefault(); } });
});
/* 7. A toolbar widget
-----------------------------------------------------------------------------------------
*/
$('[role="toolbar"] [data-sort]').on('click', function() { if ($(this).attr('aria-pressed', 'false')) { var listToSort = $('#' + $(this).parent().attr('aria-controls')); var listItems = listToSort.children(); var array = []; for (var i = 0, l = $(listItems).length; i < l; i++) { array.push($(listItems[i]).text()); } if ($(this).attr('data-sort') === 'ascending') { array.sort(); console.log(array); } if ($(this).attr('data-sort') === 'descending') { array.sort(); array.reverse(); console.log(array); } for (var i = 0, l = $(listItems).length; i < l; i++) { listItems[i].innerHTML = array[i]; } $(this).siblings().attr('aria-pressed', 'false'); $(this).attr('aria-pressed', 'true'); }
});
$('[role="toolbar"] [data-sort]').on('keydown', function(e) { var $newButton; var $nextButton = $(this).next(); var $prevButton = $(this).prev(); var $listToSort = $('#' + $(this).parent().attr('aria-controls')); switch (e.keyCode) { case 37: $newButton = $prevButton; break; case 39: $newButton = $nextButton; break; default: $newButton = false; break; } if ($newButton.length) { $newButton.focus(); } if (e.keyCode === 9) { if (!e.shiftKey) { e.preventDefault(); $listToSort.focus(); } }
});
Accessibility wai-aria test - Script Codes
Accessibility wai-aria test - Script Codes
Home Page Home
Developer Tom Hermans
Username tomhermans
Uploaded December 09, 2022
Rating 3
Size 8,599 Kb
Views 8,096
Do you need developer help for Accessibility wai-aria test?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tom Hermans (tomhermans) Script Codes
Name
Simple circle cutout css
Tryout
Responsive Form
Bulleted list with font-icon snippet
CKEditor angular test
Portfolio box
Sticky Navigation
Taming data tables
CSS3 Shapes reference
Media object module
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!