WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Org charts

for

Number of posts in this thread: 5 (In chronological order)

From: Thompson, Rachel
Date: Fri, Aug 19 2016 3:16PM
Subject: Org charts
No previous message | Next message →

Hi, all.

We have a large campus organization with lots of levels in their organization. They are building an org chart and want it to be accessible, web-based, not just an image or PDF. We suggested an unordered list, but it will likely have 5-6 levels of list hierarchy (does that make sense?) and they are concerned that it will be a jumbled mess for a screen reader user. Do you have any suggestions on good ways to do this? Any suggestions regarding how many list levels is acceptable?

Thanks!
Rachel

Dr. Rachel S. Thompson
Director, Emerging Technology and Accessibility
Center for Instructional Technology
The University of Alabama
123 Russell Hall
Box 870248
Tuscaloosa, AL 35487
Phone 205-348-0216
= EMAIL ADDRESS REMOVED = | http://accessibility.ua.edu

From: Jamous, JP
Date: Fri, Aug 19 2016 4:13PM
Subject: Re: Org charts
← Previous message | Next message →

How about using a nice treeview layout rather than lists.

With menu items you can code them so the screen reader can identify the hierarchical level. From there it becomes so easy to navigate through them using arrow keys.

You can create your treeview using lists. You just use JavaScript to code the expand and collapse mechanisms.

There are so many nice accessible samples on the web. They work out of the box without ARIA. I used a couple in the past. Unfortunately, I got rid of them because the ASP.NET treeview was all I needed.




**************************************************

Jean-Pierre Jamous
Digital Accessibility Specialist & Developer
UI Accessibility Team

The only limitations in life are those we set for ourselves

**************************************************

From: Angela French
Date: Fri, Aug 19 2016 4:53PM
Subject: Re: Org charts
← Previous message | Next message →

Perhaps this solution is an option: http://ung.edu/web-toolbox/web-accessibility/org-charts.php

Angela French

From: Angela French
Date: Fri, Aug 19 2016 4:56PM
Subject: Re: Org charts
← Previous message | Next message →

Wow! Look at this one: http://codepen.io/siiron/pen/aLkdE

From: Maraikayar Prem Nawaz
Date: Mon, Aug 22 2016 2:03AM
Subject: Re: Org charts
← Previous message | No next message

You can also try using SVG data points and tooltips.

On Sat, Aug 20, 2016 at 4:26 AM, Angela French < = EMAIL ADDRESS REMOVED = > wrote:

> Wow! Look at this one: http://codepen.io/siiron/pen/aLkdE
>
>