16 lines
897 B
HTML
16 lines
897 B
HTML
---
|
|
template: "example.html"
|
|
title: "Accessibility example"
|
|
shortdesc: "Example of an accessible map."
|
|
docs: >
|
|
<p>This page's <code>map</code> element has its <code>tabindex</code> attribute set to <code>"0"</code>, that makes it focusable. To focus the map element you can either navigate to it using the "tab" key or use the skip link. When the <code>map</code> element is focused the + and - keys can be used to zoom in and out and the arrow keys can be used to pan.</p>
|
|
<p>When clicked the "Zoom in" and "Zoom out" buttons below the map zoom the map in and out, respectively. You can navigate to the buttons using the "tab" key, and press the "enter" key to trigger the zooming action.</p>
|
|
tags: "accessibility, tabindex"
|
|
---
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<a class="skiplink" href="#map">Go to map</a>
|
|
<div id="map" class="map" tabindex="0"></div>
|
|
</div>
|
|
</div>
|