ARIA Tree Markup
A tree is a useful tool for displaying hierarchy relationships. For example, in Windows Explorer a tree is used to show the hierarchy of folders. Trees have been used in web applications for some time, but until recently there was not a good way to convey these to assistive technology such as a screen reader. The most common approach was to use unordered nested lists and the user would have to figure out relationships by keeping track of the nesting to get an understanding of the hierarchy. Which could become tedious and confusing quickly. In addition, if each item was activatable, e.g., was a link, the user would have to do a lot of tabbing to get to an item that was of interest, negating the convenience of expanding and collapsing branches to skip past groups of items that were not what was desired at the moment.
While keyboard handling could be implemented for expanding and collapsing tree items, assistive technology still could not track the items or convey the state of expansion because the user agent (browser) was not providing the information.
WAI-ARIA has an answer to these problems. By using it the role and state information that is needed by assistive technology can now be provided. Namely, the roles of tree for the container object; tree item for each branch or leaf of the tree; and group for groups of tree items that are contained at a level. For some additional discussion of ARIA see an earlier post “ARIA resources.”
To illustrate how ARIA markup for a tree is employed let’s walk through an example. In order to focus on the ARIA markup we will leave out details of implementing event handlers that would make the tree respond to user events. A browser that supports ARIA such as Firefox 3 will provide the accessibility information through MSAA though so you can check the results with a screen reader that support ARIA or with Microsoft’s MSAA Inspector tool.
The tree
Let’s consider the following tree represented by nested lists:
-
Item 1
- Item 1.1
- Item 1.2
- Item 1.3
-
Item 2
The HTML would be structured like this:
<li>Item 1
<ul>
<li>Item 1.1></li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>Item 2</li>
</ul>
To turn this into a functioning tree, links can be added to each item that call JavaScript functions to control the presentation of the tree such as hiding and showing the sub-lists.
Tell AT that this is a tree
Roles
In order to tell the browser and the assistive technology that this is a tree, ARIA markup needs to be added. Three roles are used in a tree:
- Tree
- Group
-
Treeitem
The tree role pertains to the container object, in other words the entire tree from the first item through the last item. Assigning the tree role to the unordered list that holds all of the stuff will do the trick for us:
<ul role=”tree”>
Each item in the tree, whether it is a root node, branch or leaf, is a treeitem. In our example each list item is defined as a treeitem, for example:
<li role=”treeitem”>Item 1.1</li>
Groups are used to define blocks of related items at the same level. For example, items 1.1 through 1.3 are in a group that expands from “Item 1″ in our example. This is defined using a role of group on the container for the group of items. In this example the nested unordered list is the container. The HTML looks like:
<ul role=”group”>
State
A treeitem is either expanded or collapsed. In a collapsed state the items that are children of the treeitem are not displayed. The state of an item is defined by using the aria-expanded attribute. It has two values: true, false.
TO convey that the “Item 1″ group in our example is expanded we add aria-expanded = “true” to the list item:
<li role=”treeitem” aria-expanded=”true”>Item 1
Focus
By default lists do not receive keyboard focus in HTML. However, since this is to be an interactive tree we need to define tabindex for the items in the tree. It is important to define a tabindex for each element in the tree that is wanted to gain keyboard focus, or is not wanted to in cases where it would by default, e.g., a link. (We do not want links that are used in the tree for actions to each individually appear in the tab order. Instead we want the tree to be navigatable with arrow keys after receiving keyboard focus via the tab key, and the next press of the tab key should move past the tree.)
In order to do this we need to use two values of tabindex: 0 and -1. A tabindex of 0 places the element into the tab order, allowing the browser to determine the tab order. A tabindex of -1 keeps an element out of the tab order, but allows it to receive focus programmatically.
In this example, the container list element that is now defined as a tree needs to be placed into the tab order. Thus add a tabindex of 0:
<ul role=”tree” tabindex=”0″>
Providing a name when focused upon
The tree itself should also be given a label so that it accurately conveys itself when the user tabs to it. If an element elsewhere on the page is the best label then use that. Otherwise we can use the first item in the tree as long as the item is sufficient enough to name the tree. This will ensure that screen readers will have something to say when focus lands on the tree.
To label the tree we use the “aria-labelledby” attribute to point to a HTML element that has the text for the name that we need. The “aria-labelledby” attribute is placed in the container element—the list element in this example. For example if we have a DIV of:
<div ID=”treename”>Table of contents</div>
We can point to this using
<ul role=”tree” tabindex=”0″ aria-labelledby=”treename”>
Putting it together - almost
Combining what we have discussed to this point we get the following HTML with ARIA markup defining the tree.
<div ID=”treename”>Table of contents</div>
<ul role=”tree” tabindex=”0″ aria-labelledby=”treename”>
<li role=”treeitem” aria-expanded=”true” tabindex=-1>Item 1
<ul role=”group”>
<li role=”treeitem” tabindex=”-1″>Item 1.1></li>
<li role=”treeitem” tabindex=”-1″>Item 2</li>
<li role=”treeitem” tabindex=”-1″>Item 3</li>
</ul>
</li>
<li role=”treeitem” tabindex=”-1″>Item 2</li>
</ul>
When this is presented in an ARIA aware browser such as Firefox 3, the tree is presented through the accessibility API to assistive technology such as Microsoft Active Accessibility (MSAA) on Windows. Tree items are conveyed with their names and there state information such as “expanded” for the “Item 1.”
However, at the moment there is a problem. Instead of showing that the name of the first item is “Item 1″ the entire contents of the nested items are also be returned as in “Item 1 Item 1.1 Item 1.2 Item 1.3″. At first this is a puzzling situation as it appears that the name of the first item in our tree is “Item 1″ and it is defined that way in the list item. On closer inspection we discover that the first list item actually encapsulates the group of sub items. Hence the entire contents between the <li>…</li> tags is being set as the name of the first treeitem. This is not what we want!
ARIA has a solution! It is possible to define the label for an element by using the aria-labelledby attribute in ARIA. For those familiar with explicit labeling used in HTML forms, this is a similar idea. It is more flexible in that any element containing text can be assigned, instead of just a Label element. To fix the problem we just need to explain to the browser and assistive technology that we only want “Item 1″ to be used as the name of the first node in the tree.
We can do this by using a Span element and setting it as the label for the treeitem:
<li role=”treeitem” aria-expanded=”true” aria-labelledby=”i1″ tabindex=-1><span id=”i1″>Item 1</span>
Final tree markup
The final markup for this tree using ARIA is now:
<div ID=”treename”>Table of contents</div>
<ul role=”tree” tabindex=”0″ aria-labelledby=”treename”>
<li role=”treeitem” aria-expanded=”true” aria-labelledby=”i1″ tabindex=-1><span id=”i1″>Item 1</span>
<ul role=”group”>
<li role=”treeitem” tabindex=”-1″>Item 1.1></li>
<li role=”treeitem” tabindex=”-1″>Item 2</li>
<li role=”treeitem” tabindex=”-1″>Item 3</li>
</ul>
</li>
<li role=”treeitem” aria-labelledby=”i2″ tabindex=”-1″><span id=”i2″>Item 2</span></li>
</ul>
Remember that when the tree is live and responding to user events that change the state of items such as expanding and collapsing branches, the ARIA information needs to be updated. For example, if “Item 1″ is collapsed the aria-expanded attribute needs to be set to “false”. Finally if the tree is very large and not all of it is loaded into the DOM at once additional management needs to be done such as using “aria-posinset.”
February 13th, 2009 at 3:53 pm
[...] Roth’s Weblog Sports, business, accessibility, and who knows?… « ARIA Tree Markup Programmatically Customizable GUI [...]
June 25th, 2010 at 5:41 pm
PillSpot.org. Canadian Health&Care.Special Internet Prices.No prescription online pharmacy.Pillspot.org. Herbal-supplements@buy.online” rel=”nofollow”>.…
Categories: Anxiety/Sleep Aid.Pain Relief.Stop SmokingVitamins/Herbal Supplements.Mental HealthAntidepressants.Mens Health.Antidiabetic.Eye Care.Antibiotics.Blood Pressure/Heart.Skin Care.Stomach.Anti-allergic/Asthma.Womens Health.Antiviral.Weight…
August 29th, 2010 at 2:38 am
r\x3dh http://AWESOMEBABYCLOTHES.INFO/tag/r\x3dh : r\x3dh…
uk MacBook Apple/…
August 29th, 2010 at 5:35 am
ieee http://nlancomezheqm.AUTOSECTIONS.INFO/tag/cavo+IEEE+ieee/ : ieee…
IEEE…
August 29th, 2010 at 4:27 pm
n http://ncygox-v7jq.AUTOSECTIONS.INFO/tag/review+n+2/ : review…
n…
August 29th, 2010 at 4:34 pm
From http://irecording2jhaoch.copious-systems.com/tag/From+Vcr+To+Dvd+VHS+dvd/ : To…
dvd…
August 29th, 2010 at 9:11 pm
for http://gbestlx0v.AWESOMEBABYCLOTHES.INFO/tag/Teeter+Tables+for/ : Teeter…
Tables…
September 14th, 2010 at 10:04 pm
Car http://dhy.6bf.201i.co : Car…
Shocks…
July 6th, 2011 at 11:15 pm
buy@viagra.online” rel=”nofollow”>……
Need cheap generic VIAGRA?…
July 29th, 2011 at 2:09 am
Order@Coral.Calcium.Online” rel=”nofollow”>..…
Buygeneric pills…
July 29th, 2011 at 7:20 pm
Purchase@Abilify.Without.Prescription” rel=”nofollow”>..…
Buygeneric meds…
July 29th, 2011 at 7:45 pm
Cheap@Generic.Abilify” rel=”nofollow”>..…
Buygeneric drugs…
July 29th, 2011 at 8:34 pm
Cheap@Abilify.5mg.10mg.15mg.20mg.30mg” rel=”nofollow”>..…
Buygeneric pills…
July 29th, 2011 at 9:00 pm
Buy@Abilify.5mg.10mg.15mg.20mg.30mg” rel=”nofollow”>..…
Buyno prescription…
July 30th, 2011 at 10:33 am
Order@Cheap.Acai” rel=”nofollow”>……
Buynow it…
July 30th, 2011 at 7:19 pm
Cheap@Acai.Online” rel=”nofollow”>……
Buynow…
July 31st, 2011 at 9:47 am
Cheap@Generic.Acai” rel=”nofollow”>..…
Buyit now…
July 31st, 2011 at 3:19 pm
Buy@Discount.Coral.Calcium” rel=”nofollow”>..…
Buywithout prescription…
July 31st, 2011 at 5:11 pm
Purchase@Cheap.Coral.Calcium” rel=”nofollow”>.…
Buynow it…
August 2nd, 2011 at 5:56 am
Purchase@Cheap.Coral.Calcium” rel=”nofollow”>……
Buywithout prescription…
August 2nd, 2011 at 12:11 pm
Purchase@Cheap.Abana” rel=”nofollow”>……
Buywithout prescription…
August 3rd, 2011 at 3:24 am
Cheap@Abilify.Online” rel=”nofollow”>..…
Buynow it…
August 3rd, 2011 at 3:50 pm
Buy@Cheap.Acai” rel=”nofollow”>……
Buygeneric drugs…
August 3rd, 2011 at 5:13 pm
Buy@Cheap.Acai” rel=”nofollow”>……
Buygeneric drugs…
August 3rd, 2011 at 7:13 pm
Order@Acai.Online” rel=”nofollow”>……
Buyit now…
August 3rd, 2011 at 8:56 pm
Order@Cheap.Acai” rel=”nofollow”>..…
Buynow it…
August 4th, 2011 at 8:25 am
Get@Acai.Online” rel=”nofollow”>……
Buygeneric drugs…
August 4th, 2011 at 2:00 pm
Buy@Acai.Without.Prescription” rel=”nofollow”>.…
Buygeneric drugs…
August 5th, 2011 at 2:54 am
Buy@Discount.Energy.Boost” rel=”nofollow”>.…
Buynow it…
August 5th, 2011 at 6:21 am
Order@Discount.Energy.Boost” rel=”nofollow”>.…
Buynow it…
August 5th, 2011 at 3:14 pm
Buy@Discount.Accupril” rel=”nofollow”>.…
Buyno prescription…
August 5th, 2011 at 11:41 pm
Cheap@Accupril.Online” rel=”nofollow”>.…
Buygeneric drugs…
August 6th, 2011 at 2:40 am
Buy@Accutane.Online” rel=”nofollow”>.…
Buygeneric drugs…
August 6th, 2011 at 5:58 am
Order@Cheap.Accutane” rel=”nofollow”>.…
Buygeneric drugs…
August 6th, 2011 at 11:06 am
Cheap@Accutane.Online” rel=”nofollow”>.…
Buygeneric meds…
August 8th, 2011 at 12:10 pm
Cheap@Aciphex.Without.Prescription” rel=”nofollow”>.…
Buynow it…
August 10th, 2011 at 7:29 pm
Buy@Generic.Actonel.35mg” rel=”nofollow”>.…
Buyno prescription luw…
August 10th, 2011 at 9:08 pm
Generic@Actonel.35mg.Without.Prescription” rel=”nofollow”>..…
Buygeneric pills zdg…
August 11th, 2011 at 12:28 am
Order@Cheap.Actoplus.Met” rel=”nofollow”>..…
Buygeneric drugs krg…
August 12th, 2011 at 1:56 am
Buy@Generic.Actos.15mg.30mg” rel=”nofollow”>..…
Buygeneric meds qmo…
August 12th, 2011 at 9:05 am
Cheap@Acular.Online” rel=”nofollow”>.…
Buygeneric drugs zfk…
August 12th, 2011 at 8:30 pm
Order@Cheap.Coral.Calcium” rel=”nofollow”>..…
Buygeneric drugs lzt…
August 13th, 2011 at 8:25 am
Order@Cheap.Abilify” rel=”nofollow”>……
Buywithout prescription xiu…
August 13th, 2011 at 6:54 pm
Buy@Abilify.5mg.10mg.15mg.20mg.30mg” rel=”nofollow”>..…
Buynow it vhx…
August 14th, 2011 at 12:13 am
Abilify@5mg.10mg.15mg.20mg.30mg.Without.Prescription” rel=”nofollow”>……
Buygeneric meds svb…
August 14th, 2011 at 2:30 am
Buy@Cheap.Acai” rel=”nofollow”>..…
Buyno prescription wkp…
August 14th, 2011 at 4:37 am
Order@Acai.Online” rel=”nofollow”>..…
Buyno prescription jui…
August 14th, 2011 at 5:40 am
Order@Cheap.Acai” rel=”nofollow”>..…
Buyno prescription gdt…
August 14th, 2011 at 11:16 am
Cheap@Acai.Online” rel=”nofollow”>……
Buyit now sge…
August 15th, 2011 at 4:19 pm
Purchase@Cheap.Energy.Boost” rel=”nofollow”>.…
Buyit now ojb…
August 16th, 2011 at 1:40 am
Order@Cheap.Accupril” rel=”nofollow”>.…
Buynow it fnp…
August 16th, 2011 at 8:38 pm
Buy@Cheap.Accutane” rel=”nofollow”>..…
Buyno prescription tao…
August 17th, 2011 at 12:42 am
Order@Discount.Accutane” rel=”nofollow”>.…
Buygeneric drugs mby…
August 17th, 2011 at 2:52 am
Purchase@Cheap.Accutane” rel=”nofollow”>……
Buywithout prescription ccw…
August 17th, 2011 at 10:01 pm
Cheap@Generic.Accutane.10mg.20mg” rel=”nofollow”>……
Buynow it zdg…
August 18th, 2011 at 12:11 am
Accutane@10mg.20mg.Without.Prescription” rel=”nofollow”>..…
Buygeneric drugs ajd…
August 18th, 2011 at 1:18 am
Buy@Aciphex.Online” rel=”nofollow”>.…
Buygeneric drugs itj…
August 19th, 2011 at 9:24 am
Aciphex@20mg.Without.Prescription” rel=”nofollow”>.…
Buynow it lmg…
August 19th, 2011 at 12:56 pm
Buy@Discount.Acomplia” rel=”nofollow”>..…
Buydrugs without prescription faj…
August 22nd, 2011 at 7:58 am
Order@Actonel.Without.Prescription” rel=”nofollow”>……
Buydrugs without prescription jlg…
August 23rd, 2011 at 12:09 am
Order@Advair.Online” rel=”nofollow”>..…
Buyit now irl…
August 23rd, 2011 at 10:57 am
Cheap@Advair.Online” rel=”nofollow”>.…
Buygeneric drugs nih…
August 24th, 2011 at 4:28 am
Buy@Advair.25mcg50mcg.25mcg125mcg.25mcg250mcg.50mcg500mcg.50mcg100mcg.50mcg250mcg” rel=”nofollow”>..< /blo…
Buygeneric meds dxy…
August 24th, 2011 at 5:43 am
Buy@Advair.25mcg50mcg.25mcg125mcg.25mcg250mcg.50mcg500mcg.50mcg100mcg.50mcg250mcg” rel=”nofollow”>…< /bl…
Buygeneric drugs vbr…
August 24th, 2011 at 3:40 pm
< a href=”http://trig.com/advair5771/biography/?ml=Advair-25mcg/50mcg-25mcg/125mcg-25mcg/250mcg-50mcg/500mcg-50mcg/100mcg-50mcg/250mcg-Without-Prescription Advair@25mcg50mcg.25mcg125mcg.25mcg250mcg.50mcg500mcg.50mcg100mcg.50mcg250mcg.Without.Pr…
Buydrugs without prescription ygy…
August 27th, 2011 at 1:57 am
advair@copd.advertising.campaign” rel=”nofollow”>..…
Buynow…
August 27th, 2011 at 7:14 pm
buy@amoxicillin.500mg” rel=”nofollow”>.…
Buynow it…
August 29th, 2011 at 9:40 am
arimidex@or.nolvadex.steriods” rel=”nofollow”>..…
Buywithout prescription…
September 22nd, 2011 at 5:01 pm
Download@pop.Rock” rel=”nofollow”>……
Search rock US Charts…
October 17th, 2011 at 1:08 pm
warfarin zoloft…
Buy_drugs without prescription…
October 17th, 2011 at 2:46 pm
do cats carry ringworm…
Buy_generic meds…
October 17th, 2011 at 7:47 pm
recent advances in cancer breast…
Buy_now…
October 19th, 2011 at 11:24 am
steroids abuse sexual dysfunction…
Buy_it now…
October 19th, 2011 at 1:05 pm
soft food diet ideas…
Buy_drugs without prescription…
October 19th, 2011 at 2:42 pm
hiv aids in california in 1997…
Buy_generic pills…
October 19th, 2011 at 4:22 pm
impact rating journal of clinical psychology…
Buy_now it…
October 21st, 2011 at 6:56 am
viagra in the uk…
Buy_no prescription…
October 21st, 2011 at 8:38 am
tuna during pregnancy…
Buy_generic meds…
October 22nd, 2011 at 3:18 pm
arimidex and marathon…
Buy_generic drugs…
October 24th, 2011 at 6:18 pm
adult circumcisions and complications…
Buy_generic meds…
October 25th, 2011 at 5:59 am
good and bad drugs…
Buy_without prescription…
October 25th, 2011 at 7:36 am
is hepatitis b contagious…
Buy_generic pills…
October 25th, 2011 at 9:21 am
gestational surrogacy…
Buy_now…
October 25th, 2011 at 12:39 pm
combination food diet…
Buy_drugs without prescription…
October 25th, 2011 at 2:17 pm
drug rehab center british columbia…
Buy_generic drugs…
October 26th, 2011 at 2:03 am
buying prescription drugs in mexico…
Buy_now it…
October 26th, 2011 at 1:40 pm
faye sick lung cancer…
Buy_drugs without prescription…
October 28th, 2011 at 10:35 am
terbutaline autism claim…
Buy_no prescription…
October 28th, 2011 at 12:15 pm
iv zofran…
Buy_drugs without prescription…
October 28th, 2011 at 6:55 pm
blood pregnancy test jacksonville fl…
Buy_generic meds…
October 30th, 2011 at 7:12 pm
does birth control control moods…
Buy_generic drugs…
October 30th, 2011 at 10:35 pm
chf vs pulmonary edema…
Buy_generic drugs…
October 31st, 2011 at 9:51 pm
weight loss tricks for 40 somethings…
Buy_drugs without prescription…
November 3rd, 2011 at 1:37 am
hypertension police ma…
Buy_drugs without prescription…
November 4th, 2011 at 6:47 am
psychostimulant treatment of depression…
Buy_drugs without prescription…
November 4th, 2011 at 10:08 am
copd lung sounds…
Buy_it now…
November 5th, 2011 at 3:46 am
canine medi cam rx…
Buy_generic drugs…
November 7th, 2011 at 12:25 pm
azithromycin doxycycline over the counter…
Buy_generic pills…
November 7th, 2011 at 2:05 pm
forensic drug test swab…
Buy_no prescription…
November 8th, 2011 at 1:46 am
social interaction anxiety…
Buy_without prescription…
November 11th, 2011 at 8:37 pm
how to make glucose water…
Buy_it now…
November 11th, 2011 at 10:18 pm
how can i lower my cholesterol…
Buy_generic drugs…
November 11th, 2011 at 11:57 pm
dr loss phil ultimate weight…
Buy_no prescription…
November 12th, 2011 at 4:37 pm
indomethacin opthalmic drops…
Buy_generic pills…
November 12th, 2011 at 7:57 pm
foods with triglycerides in them…
Buy_generic drugs…
November 13th, 2011 at 12:57 am
hormone shot for prostate cancer…
Buy_generic drugs…
November 13th, 2011 at 10:58 am
advisory group on hepatitis uk…
Buy_no prescription…
November 13th, 2011 at 5:37 pm
tobacco alternatives herbal…
Buy_generic drugs…
November 15th, 2011 at 2:56 pm
flat warts and probiotics…
Buy_generic drugs…
November 16th, 2011 at 4:08 am
medicare drugs covered…
Buy_generic meds…
November 16th, 2011 at 7:40 am
state of arizona ontiveros drug…
Buy_now it…
November 16th, 2011 at 10:55 am
black molley slang drug name…
Buy_generic drugs…
November 16th, 2011 at 7:14 pm
lexapro versus prozac differences…
Buy_without prescription…
November 17th, 2011 at 12:15 am
sample ncp for diabetes…
Buy_without prescription…
November 17th, 2011 at 6:59 am
what year was advil introduced…
Buy_now it…
December 8th, 2011 at 1:49 pm
Download@pop.Rock” rel=”nofollow”>.…
Buy rock US Charts…
December 9th, 2011 at 4:02 pm
depo@provera.bone.loss” rel=”nofollow”>……
Buygeneric drugs…
June 29th, 2012 at 2:22 pm
…
Purchase Quality Generic Drugs Now!…
July 20th, 2012 at 2:16 am
…
Check Quality Generic Pills Today!…
February 9th, 2013 at 2:01 pm
dallas tx…
Travis Roths Weblog » Blog Archive » ARIA Tree Markup…
March 13th, 2013 at 7:50 pm
bestininternetmarketing.com…
Travis Roths Weblog » Blog Archive » ARIA Tree Markup…
March 21st, 2013 at 3:05 am
mouse click the up coming webpage…
Travis Roths Weblog » Blog Archive » ARIA Tree Markup…
May 11th, 2013 at 10:49 pm
Find Out More…
Travis Roths Weblog » Blog Archive » ARIA Tree Markup…