apex4x
Version:
The Comprehensive ARIA Development Suite
343 lines (320 loc) • 11.1 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
Apex 4X Beginner Tutorial | Example 2 - ARIA Button Rendering (Using Core
Functions)
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
type="text/css"
href="../Templates/_common/_doc_files/css/global.css"
/>
<link
rel="stylesheet"
type="text/css"
href="../Templates/_common/_doc_files/css/components-style.css"
/>
<link
rel="stylesheet"
type="text/css"
href="../Templates/Buttons/Standard/css/buttons.css"
/>
<link
rel="stylesheet"
type="text/css"
href="../Templates/_common/_doc_files/prism.css"
/>
<script src="../Templates/_common/_doc_files/prism.js"></script>
<script src="../4X/4X.js"></script>
<script src="../4X/Standard/Min/Beep.js"></script>
<style type="text/css">
a.templatesLink:focus,
a.templatesLink:hover {
text-decoration: none;
}
textarea {
min-width: 90%;
}
nav > ul > li > a[aria-current="page"] {
border-top: 2px solid var(--navLinkBackground);
}
.btn--example {
margin: 1em 0;
background: var(--whatsock-orange-main);
border: 2px solid #774b04;
border-radius: 0.5em;
padding: 0.5em 1em;
font-weight: 700;
font-size: 1rem;
}
@media (min-width: 400px) {
.btn--example {
font-size: 1.2rem;
}
}
.btn--example:focus {
outline: 5px solid var(--whatsock-red);
}
.render--aria-button {
margin-top: 1em;
background: var(--whatsockBeige);
width: 10em;
padding: 0.5em 1.3em;
text-align: center;
font-weight: 700;
border: 3px solid var(--whatsock-red);
border-radius: 1em;
}
.render--aria-button:focus {
outline: 4px solid #262626;
}
.pagination .flex-container-row {
display: flex;
flex-flow: row wrap;
justify-content: center;
margin: auto;
padding: 1em;
}
.pagination .flex-container-row .flex-item {
flex: 1 0 auto;
}
.pagination .flex-container-row .flex-item:nth-child(2) {
text-align: right;
}
@media (min-width: 70em) {
.pagination .flex-container-row .flex-item {
flex: 1 0 0;
text-align: left;
}
.pagination .flex-container-row .flex-item:nth-child(2) {
text-align: right;
}
}
</style>
</head>
<body>
<div class="outer-wrapper">
<header class="header">
<div class="logo">
<a href="https://whatsock.com">
<img
alt="WhatSock : Changing the world one step at a time"
src="../Templates/_common/_doc_files/img/whatsock.svg"
/>
</a>
</div>
<nav aria-label="main" class="navigation--parent">
<ul>
<li><a href="../Templates/index.htm">Widget Templates</a></li>
</ul>
<h2 class="parent--page">Steps</h2>
<ul>
<li><a href="Beginner-Introduction.htm">Introduction</a></li>
<li>
<a href="Beginner-Example-01.htm"
>1. Form Rendering (Using Core Functions)</a
>
</li>
<li>
<a href="Beginner-Example-02.htm" aria-current="page"
>2. ARIA Button Rendering (Using Core Functions)</a
>
</li>
<li>
<a href="Beginner-Example-03.htm"
>3. DC Objects (Converting Elements)</a
>
</li>
<li>
<a href="Beginner-Example-04.htm"
>4. Date Picker (Using Modules)</a
>
</li>
<li>
<a href="Beginner-Example-05.htm"
>5. Menu Module (Dynamic Loading)</a
>
</li>
<li><a href="Beginner-Conclusion.htm">Beginner Conclusion</a></li>
</ul>
</nav>
</header>
<div class="wrapper">
<main id="main" class="main">
<h1>
<strong
>Example 2 — ARIA Button Rendering (Using Core
Functions)</strong
>
</h1>
<div class="section--instructions">
<section class="preamble">
<p>
This is another basic example that uses a core 4X method to
convert a static element into a fully accessible one for both
screen reader and sighted keyboard-only users.
</p>
<p>
After the simulated button is rendered, activate Visual ARIA to
observe how the accessibility mapping for the element has
changed, plus use the keyboard by pressing Tab to navigate to
the button and see how this now works.
</p>
</section>
<section>
<h2>Example 2 — Coding Sandbox</h2>
<p>
Using core 4X features to add keyboard support and accessible
role information to a simulated active element for assistive
technology users.
</p>
<textarea title="Example 2 markup" id="example2.1">
<div class="example2 render--aria-button">
What?
</div>
</textarea
>
<div>
<textarea title="Example 2 JS" id="example2.2">
// Convert the DIV tag into a keyboard accessible button that is accessible to screen reader users.
// Help/ARIA Development/SetKeyboardA11Y
$A.setKBA11Y("div.render--aria-button", "button",
function(ev) {
alert("ALRIGHT!");
}
);
</textarea
>
</div>
<div>
<button class="btn--example">Render Example 2</button>
<div id="example2"></div>
<script>
(function () {
var markup = $A.get("example2.1"),
js = $A.get("example2.2"),
div = $A.get("example2");
$A.on("button.btn--example", "click", function (ev) {
try {
div.innerHTML = markup.value;
var f = new Function("window,document,$A", js.value);
f.call(window, window, document, $A);
$A.beep();
} catch (e) {
throw e;
}
});
})();
</script>
</div>
</section>
<nav aria-label="pagination" class="pagination">
<div class="flex-container-row">
<div class="flex-item">
<a href="Beginner-Example-01.htm"
><< Previous example</a
>
</div>
<div class="flex-item">
<a href="Beginner-Example-03.htm">Next example >></a>
</div>
</div>
</nav>
</div>
</main>
</div>
<footer class="footer">
<div class="flex-container-row">
<div class="flex-item">
<h2>License</h2>
<p>
Apex 4X including all template design patterns is distributed
under the terms of the Open Source Initiative OSI - MIT License,
and may be freely used for any purpose within any web technology.
</p>
</div>
<div class="flex-item">
<h2>Resources</h2>
<ul>
<li>
<a target="ext" href="https://github.com/WhatSock/apex"
>Apex 4X on GitHub</a
>
</li>
<li>
<a
target="ext"
href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
>Visual ARIA Bookmarklet</a
>
</li>
<li>
<a
target="ext"
href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
>Visual ARIA Chrome Extension</a
>
</li>
<li>
<a
target="ext"
href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
>Visual ARIA Firefox Extension</a
>
</li>
<li>
<a target="ext" href="https://github.com/AccDC/visual-aria"
>Visual ARIA on GitHub</a
>
</li>
<li>
<a target="ext" href="https://whatsock.com/training/matrices/"
>ARIA Role Conformance Matrices</a
>
</li>
<li>
<a target="ext" href="https://whatsock.com/training/"
>Accessibility Tree Training Guide</a
>
</li>
</ul>
</div>
<div class="flex-item">
<h2>Acknowledgements</h2>
<ul class="list--horizontal">
<li>
Author and developer:
<a target="ext" href="https://www.linkedin.com/in/bgaraventa"
>Bryan Garaventa</a
>
</li>
<li>
Website designer:
<a target="ext" href="https://gericci.me/">Angela Ricci</a>
</li>
<li>
Style and markup editor:
<a
target="ext"
href="https://www.linkedin.com/in/laurence-lewis-77520365/"
>Laurence Lewis</a
>
</li>
</ul>
</div>
</div>
</footer>
</div>
</body>
<script
async
src="https://api.whatsock.com/accdc-updates.js?4x=template"
></script>
<script src="../Templates/_common/_doc_files/autosize.js"></script>
<script>
autosize($A.query("textarea"));
</script>
</html>