build/metalsmith/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>{{ pkg.name }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{websiteRoot}}assets/website.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.min.css" data-noprefix>
</head>
<body>
{{> site-header }}
<div id="wrapper">
<div id="navigation-column">
<nav id="table-of-contents">
<h1>On this page</h1>
<ul>
<li><a href="#what-ally-is">What is ally.js?</a></li>
<li><a href="#simple-API">Simple API</a></li>
<li><a href="#what-is-focusable">What is focusable?</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#what-people-say">What people say</a></li>
<li><a href="#supported-by">Supported by</a></li>
</ul>
</nav>
</div>
<main id="main" tabindex="-1">
<article class="what-ally-is">
<header>
<h1 id="what-ally-is">What is ally.js?</h1>
</header>
<section>
<img src="assets/ally-js-logo.png" class="logo" alt="ally.js logo - showing the United Nations Accessibility Logo on top of the JS logo">
<p>ally.js is a JavaScript library simplifying certain accessibility features, functions and behaviors. However, simply loading ally.js will not automagically make a web application accessible. The library provides certain standard functions the "web platform" should've provided itself, so JavaScript applications can be made accessible more easily.</p>
<p>ally.js has been tested on IE9+, Firefox, Chrome and Safari 9, as well as Mobile Chrome on Android 5.1 and Safari for iOS 9.</p>
</section>
</article>
<article class="getting-started">
<header>
<h1 id="simple-API">Simple API</h1>
</header>
<section>
<p>How would you prevent elements outside of your modal dialog or menu from receiving focus?</p>
<pre><code class="language-markup"><script src="path/to/ally.min.js"></script>
<script>
ally.maintain.disabled({
filter: '#my-dialog-element'
});
</script></code></pre>
</section>
<section class="example">
<a class="jsbin-embed" href="https://jsbin.com/qokupi/embed?output">ally.maintain.disabled Example on jsbin.com</a><script src="https://static.jsbin.com/js/embed.min.js?3.35.3"></script>
</section>
</article>
<article class="getting-started">
<header>
<h1 id="what-is-focusable">What is focusable?</h1>
</header>
<section>
<p>Do you know which elements are <em>focusable</em> or <em>tabbable</em>? ally.js does and does it's best to hide that complexity behind <a href="api/index.html#finding-elements">simple to use APIs</a>.</p>
<p><a href="data-tables/focusable.html"><img src="assets/home/focusable-crop.png" alt="image of focusable data-table"></a></p>
<p>See <a href="what-is-focusable.html">What does "focusable" mean</a>.</p>
</section>
</article>
<article class="getting-started">
<header>
<h1 id="features">Features</h1>
</header>
<section>
<ul>
<li>Identify and absorb browser differences regarding which elements are considered focusable</li>
<li>Query the DOM for all focusable or tabbable (keyboard focusable) elements</li>
<li>Trap focus navigation in a DOM sub-tree</li>
<li>Make DOM sub-trees inert (i.e. disable all element's from being focused or interacted with)</li>
<li>Identify focused elements and focus changes within ShadowDOM</li>
<li>Provide <code>:focus-within</code> (CSS Selectors Level 4) Polyfill</li>
<li>Determine how focus changed (keyboard, mouse, script) to apply different focus outline styles</li>
<li>Determine when an element is focusable and visible in the viewport to prevent browsers from scrolling the element into view upon focus</li>
</ul>
<p>Have a look at the <a href="api/index.html">API documentation</a>.</p>
</section>
</article>
<article class="what-people-say">
<header>
<h1 id="what-people-say">What people say</h1>
</header>
<section>
<blockquote>
<span>This is a fantastic piece of information and I'm utterly in love with the helper methods ally.js is offering to make this (usually painful) work nice and easy.</span>
<a href="https://twitter.com/ginader">Dirk Ginader</a>
</blockquote>
<blockquote>
<span>Wow, ally.js looks super useful! Glad to see it happen.</span>
<a href="https://twitter.com/robinberjon">Robin Berjon</a>
</blockquote>
<blockquote>
<span>I'm intrigued by how simple ally.js makes it for us to handle basic accessibility needs.</span>
<a href="https://twitter.com/asciidisco">Sebastian Golasch</a>
</blockquote>
</section>
</article>
<article class="supported-by">
<header>
<h1 id="supported-by">Supported by</h1>
</header>
<section>
<ul>
<li>
<a href="https://browserstack.com">BrowserStack</a> and <a href="https://saucelabs.com">SauceLabs</a>
provide VMs for automated testing - <em>free for open source projects.</em>
</li>
<li>
<a href="https://codeclimate.com/github/medialize/ally.js">Code Climate</a>
and <a href="https://coveralls.io/github/medialize/ally.js/">Coveralls</a>
provide us with automated code analysis and coverage reports -
<em>free for open source projects.</em>
</li>
<li>
<a href="https://travis-ci.org/medialize/ally.js">Travis CI</a> provides a build server -
<em>free for open source projects.</em>
</li>
</ul>
</section>
</article>
</main>
</div>
{{> site-footer }}
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js" defer></script>
<script src="{{websiteRoot}}assets/website.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js" defer></script>
{{> tracking }}
</body>
</html>