Beta WAI-ARIA based Accessibility Library

Demo
Screencast

Documentation

Note: For demonstration purpose these access.see.be based widgets can be viewed in all browsers. In fact they can only viewed in browsers that support WAI-ARIA, like Firefox 2+ and Internet Explorer 8+. You can also watch the main effect in the Link to the access.see.be screencast.


With access.see.be you can create one of the following accessible widgets. It is also listed which WAI-ARIA are supported. If you combine these widgets you are able to create full Rich Internet Applications like demonstrated in the showcase.

Embedding access.see.be

You just have to include two JavaScript-Files in the <head> area of your website. access.see.be needs Prototype, so be sure to include Prototype first. 

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="aria.js"></script>


Checkbox

Used WAI-ARIA Roles and States:

  • Roles: checkbox, presentation
  • States: checked
  • Control: Space-Choice
  • Parameters: format (default: Flash, if supported), width (default: 30), height (default: 30)


<input 
    class="access-see-be aCheckbox" 
    id="myCheckbox1" 
    type="checkbox" />
<label for="myCheckbox1">Checkbox</label>


Radio-Button

Used WAI-ARIA Roles and States:

  • Roles: radiogroup, radio, presentation
  • States: checked
  • Control: Space-Choice
  • Parameters: format (default: Flash, if supported), width (default: 30), height (default: 30)


<input 
    class="access-see-be aRadio" 
    name="radios" 
    type="radio" 
    id="myRadio1" />
<label for="myRadio1">Option 1</label>
<input 
    class="access-see-be aRadio" 
    name="radios" 
    type="radio" 
    id="myRadio2" />
<label for="myRadio2">Option 2</label>


Listbox

Used WAI-ARIA Roles and States:

  • Roles: listbox, option
  • States: expanded, activedescendant
  • Control: Arrows-Activated Option
  • Parameters: position (the position of the button, default: right)


Basic Version 

<select class="access-see-be aListbox" size="3">
    <option>Alpha</option>
    <option>Beta</option>
    <option>Cesear</option>
    <option>Delta</option>
    <option>Epsilon</option>
</select>


Advanced Version with Popup-Selection and Optgroups 

<select class="access-see-be aListbox">
    <optgroup label="Group 1">
        <option>Alpha</option>
        <option>Beta</option>
    </optgroup>
    <optgroup label="Group 2">
        <option>Cesar</option>
        <option>Delta</option>
        <option>Epsilon</option>
    </optgroup>
</select>


Slider

Used WAI-ARIA Roles and States:

  • Roles: slider
  • Optional Roles: button
  • States: valuemin, valuemax, valuenow
  • Control: Arrows-Position
  • Parameters: width (default: 10), height (default: 17), size (default: false), buttons (default: false)


Basic Slider 

<select class="access-see-be aSlider { buttons:false,size:200 }">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>


Advanced Slider with Buttons 

<select class="access-see-be aSlider { buttons:true,size:300 }">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>


Advanced Slider with Buttons and a Tooltip 

<select class="access-see-be aSlider { buttons:true,size:200,
    tooltip:{ 
        element:'tooltipMessage_1',
        margin:{ top:30,left:30 }
    } }">

    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<span id="tooltipMessage_1">Move the slider</span>

Move the slider


Tree-Navigation

Used WAI-ARIA Roles and States:

  • Roles: tree, treeitem, group
  • States: expanded
  • Control: Arrows-Navigation (OU), Open/Close (LR)
  • Parameters: format (default: Flash, if supported), width (default: 10), height (default: 10)


<ul class="access-see-be aTree demoTree">            
    <li>Item 1      
        <ul>
            <li>Item 1.1</li>
            <li>Item 1.2
                <ul>
                    <li>Item 1.2.1</li>
                    <li>Item 1.2.2</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Item 2</li>
    <li>Item 3
        <ul>
            <li>Item 3.1</li>
            <li>Item 3.2</li>
        </ul>
    </li>
</ul>

  • Item 1
    • Item 1.1
    • Item 1.2
      • Item 1.2.1
      • Item 1.2.2
  • Item 2
  • Item 3
    • Item 3.1
    • Item 3.2


Tab-Navigation

Used WAI-ARIA Roles and States:

  • Roles: tablist, tab, tabpanel
  • States: active
  • Optional States: disabled
  • Parameters:
    • in <ol> – buttons (default: false), focus (default: true)
    • in <li> – active (default: false), disabled (default: false)
  • Control: Arrows-Selection


<ol class="access-see-be aTablist demoTablist" id="myTabs1">
    <li class="demoTab { active:true }"><a href="/">Tab 1</a></li>
    <li class="demoTab"><a href="/">Tab 2</a></li>
    <li class="demoTab"><a href="/">Tab 3</a></li>
    <li class="demoTab"><a href="/">Tab 4</a></li>
    <li class="demoTab"><a href="/">Tab 5</a></li>
    <li class="demoTab"><a href="/">Tab 6</a></li>
</ol>

<div class="access-see-be aTabpanel">Content 1</div>
<div class="access-see-be aTabpanel">Content 2</div>
<div class="access-see-be aTabpanel">Content 3</div>
<div class="access-see-be aTabpanel">Content 4</div>
<div class="access-see-be aTabpanel">Content 5</div>
<div class="access-see-be aTabpanel">Content 6</div>

  1. Tab 1
  2. Tab 2
  3. Tab 3
  4. Tab 4
  5. Tab 5
  6. Tab 6
Content 1
Content 2
Content 3
Content 4
Content 5
Content 6


Tooltip

Used WAI-ARIA Roles and States:

  • Roles: tooltip
  • States: describedby


<input type="text" 
    class="access-see-be aTooltip { 
        element:'tooltipMessage_2',
        margin:{ top:30,left:30 } }"  />
<span id="tooltipMessage_2">Fill out the field</span>

Fill out the field


Used WAI-ARIA Roles and States:

  • Roles: menubar, menuitem, presentation
  • States: describedby


<ul class="access-see-be aMenu demoMenu">
    <li>
        <a href="/">Menu 1</a>
    </li>
    <li>
        <a href="/">Menu 2</a>
    </li>
    <li>
        <a href="/">Menu 3</a>
    </li>
    <li>
        <a href="/">Menu 4</a>
    </li>
</ul>


Landmark Role

Used WAI-ARIA Roles and States:

  • Roles: a specific Landmark Role


<span class="access-see-be aLandmark { role:'navigation' }">
    Navigation
</span>

Navigation


Categories

Archives

Syndicate

Networking


The diamond dogs logo

Further reading?

Who´s behind?

Who´s behind?