apex4x
Version:
The Comprehensive ARIA Development Suite
323 lines (296 loc) • 10.2 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Apex 4X | Beginner Tutorial Introduction</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/_common/_doc_files/prism.css"
/>
<script src="../Templates/_common/_doc_files/prism.js"></script>
<style type="text/css">
.conclusion {
padding-top: 1em;
}
/*removing some of the Prism spacing as there is way tooo much padding amd margin space*/
.prism--restyling {
display: flex;
}
.prism--restyling > pre[class*="language-"] {
padding: 0 1em 1.5em 1em;
}
code[class*="language-"],
pre[class*="language-"] {
white-space: pre-line;
}
.prism--restyling > pre[class*="language-"] .token.punctuation {
opacity: 1;
}
p.prism--before {
margin-bottom: 0;
}
nav > ul > li > a[aria-current="page"] {
border-top: 2px solid var(--navLinkBackground);
}
.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 100%;
}
.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" aria-current="page"
>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"
>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>Beginner Tutorial — Introduction</strong></h1>
<section class="section--instructions">
<h2>4X</h2>
<p class="prism--before">
4X is a rendering API that includes a collection of powerful
ARIA-related functions for building feature-rich internet
applications that ensure accessibility for people with
disabilities.
</p>
<p>How to load:</p>
<div class="prism--restyling">
<pre><code class="language-markup">
<script src="4X/4X.js"></script>
</code></pre>
</div>
<p>
Once loaded, all the properties and methods documented within the
following Help subfolders at the root of this project are
available for immediate use:
</p>
<ul>
<li>Help/$A API</li>
<li>Help/ARIA Development</li>
<li>Help/DC API</li>
</ul>
<p>
If you haven't done so already, you should
<a
class="templatesLink"
target="_blank"
href="https://github.com/whatsock/apex"
>download Apex 4X</a
>. This will allow you to follow along with the referenced help
documents that are included within the tutorial.
</p>
<h3 id="WS">Local Webserver</h3>
<p>
If you don't already have a local webserver up and running, it is
important to do so before continuing with this tutorial. This will
ensure that all of the examples run correctly within the practice
sessions.
</p>
<p>
You can check this by looking at the address bar. If you see
"file://" at the beginning, then you are not running a local
webserver. You should see "localhost" at the beginning instead.
</p>
<p>
To install and run a local webserver, simply do the following.
</p>
<ol>
<li>
<a href="https://nodejs.org/en/download/" target="_blank"
>Install NodeJS.</a
>
</li>
<li>
Run the script file "WebserverInstall.sh" from the project root:
Installs a local webserver. (Need only be done once.)
</li>
<li>
Run the script file "WebserverRun.sh" from the project root:
Starts the local webserver.
</li>
<li>
After this is done, return to this page and
<a href="/Tutorials/Beginner-Introduction.htm#next"
>click here to refresh the page using the local webserver
before continuing</a
>.
</li>
</ol>
</section>
<nav aria-label="pagination" class="pagination">
<div class="flex-container-row">
<div class="flex-item"></div>
<div class="flex-item">
<a href="Beginner-Example-01.htm" id="next"
>Next example >></a
>
</div>
</div>
</nav>
</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>
</html>