E-mail List Archives
Thread: Organizational Charts
Number of posts in this thread: 23 (In chronological order)
From: Moore,Michael (DARS)
Date: Wed, May 06 2015 12:36PM
Subject: Organizational Charts
No previous message | Next message →
I recently recommended using either a nested list structure or a combination of properly nested headings and lists as an accessible alternative to an org chart. A search for "accessible org charts" on the web revealed that this is the standard approach and given that properly nested headings and list provide a very good method for conveying organizational structure I do not see another method that would provide an overview of the structure and relationships within.
Would use of lists and/or headings and lists still be considered a best practice for conveying the content of an org chart or is there something using more dynamic methods that would provide benefits that I am not considering.
Mike Moore
Accessibility Coordinator,
Texas Department of Assistive and Rehabilitative Services
(512) 424-4159 (Office)
(512) 574-0091 (Cell)
From: Olaf Drümmer
Date: Wed, May 06 2015 1:26PM
Subject: Re: Organizational Charts
← Previous message | Next message →
Wouldn't it be feasible to tag a graphically presented org chart as a nested list structure?
Olaf
On 6 May 2015, at 20:36, "Moore,Michael (DARS)" < = EMAIL ADDRESS REMOVED = > wrote:
> I recently recommended using either a nested list structure or a combination of properly nested headings and lists as an accessible alternative to an org chart. A search for "accessible org charts" on the web revealed that this is the standard approach and given that properly nested headings and list provide a very good method for conveying organizational structure I do not see another method that would provide an overview of the structure and relationships within.
>
> Would use of lists and/or headings and lists still be considered a best practice for conveying the content of an org chart or is there something using more dynamic methods that would provide benefits that I am not considering.
>
> Mike Moore
> Accessibility Coordinator,
> Texas Department of Assistive and Rehabilitative Services
> (512) 424-4159 (Office)
> (512) 574-0091 (Cell)
>
> > > >
From: Chagnon | PubCom
Date: Wed, May 06 2015 1:42PM
Subject: Re: Organizational Charts
← Previous message | Next message →
I agree that using a combo of headings and lists makes an organization chart accessible. Well, to those with vision disabilities.
However, that method impairs comprehension for sighted users whether they are disabled or not. From studying human behavior, comprehension, and design for umpteen decades, we know that a sighted reader comprehends the "big picture" of any graphic in .8 seconds...that's less than a second. No combo of headings and lists can give that amount of comprehension in a split second because it has to be read word-by-word, line-by-line. There's a lot of truth to the adage, a picture is worth a thousand words.
Are there solutions that accommodate all users without impairing others? Some ideas:
Have a LongDesc on the organization chart graphic that takes users to the Headings/Lists version.
Provide a link to a text version of the org chart.
Have both the graphic org chart as well as the Headings/List version on the page, side-by-side.
Would love to hear other ideas
--Bevi Chagnon
From: Moore,Michael (DARS)
Date: Wed, May 06 2015 1:43PM
Subject: Re: Organizational Charts
← Previous message | Next message →
The problem that I have with that approach is that it hides the list structure behind an image, unless I am missing something. So if I need to manipulate the text to make it more readable I don't have an option.
Mike Moore
Accessibility Coordinator,
Texas Department of Assistive and Rehabilitative Services
(512) 424-4159 (Office)
(512) 574-0091 (Cell)
From: Moore,Michael (DARS)
Date: Wed, May 06 2015 1:47PM
Subject: Re: Organizational Charts
← Previous message | Next message →
Sorry,
I did not mean to imply that the graphic representation of the org chart would be removed. What I have been recommending is a visible link to a text version of the org chart. Another approach might be to make the chart an image link that would toggle between the versions but many sighted users would likely miss the fact that the image was a link and I want to be able to retain the ability of a sighted user to manipulate the text to make it more readable. Not easy to do inside of a graphical org chart.
Mike Moore
Accessibility Coordinator,
Texas Department of Assistive and Rehabilitative Services
(512) 424-4159 (Office)
(512) 574-0091 (Cell)
From: Chagnon | PubCom
Date: Wed, May 06 2015 1:48PM
Subject: Re: Organizational Charts
← Previous message | Next message →
Using today's existing document technologies in Word, PowerPoint, and InDesign, that's not possible because the graphic will be a <FIGURE> tag. It would be extremely difficult and time consuming to try and get the graphics aligned into List tags, if at all.
In HTML, you could code CSS to box certain elements and position them, but the vertical connection lines aren't doable.
So, I doubt our current toolboxes can do this, however, I do see some emerging technologies on the horizon that might make this possible in a few years.
--Bevi Chagnon
From: Chagnon | PubCom
Date: Wed, May 06 2015 1:59PM
Subject: Re: Organizational Charts
← Previous message | Next message →
Toggling isn't an effective method; people just plain miss the toggle!
I highly recommend a combo of graphic and text presentation, either both separately or, if you have skilled designers, one item that does both. Especially if you have skilled designers using InDesign, they have enough visual and coding tools to do the job well.
And, it can look gorgeous while providing complete accessibility.
--Bevi Chagnon
From: Moore,Michael (DARS)
Date: Wed, May 06 2015 2:00PM
Subject: Re: Organizational Charts
← Previous message | Next message →
I have been thinking a bit about something that I read about future canvas accessibility either on this list or on twitter in the past couple of weeks but I can't seem to locate the article right now.
Mike Moore
Accessibility Coordinator,
Texas Department of Assistive and Rehabilitative Services
(512) 424-4159 (Office)
(512) 574-0091 (Cell)
From: Greg Gamble
Date: Wed, May 06 2015 2:01PM
Subject: Re: Organizational Charts
← Previous message | Next message →
If the org chart isn't to complex, what about a table structure?
Here is a very old one that is still in use: http://apps.sbctc.edu/orgchart/
Greg
From: Moore,Michael (DARS)
Date: Wed, May 06 2015 2:05PM
Subject: Re: Organizational Charts
← Previous message | Next message →
Bevi,
Can you send a link to an example of the integrated InDesign solution?
Mike Moore
Accessibility Coordinator,
Texas Department of Assistive and Rehabilitative Services
(512) 424-4159 (Office)
(512) 574-0091 (Cell)
From: Moore,Michael (DARS)
Date: Wed, May 06 2015 2:10PM
Subject: Re: Organizational Charts
← Previous message | Next message →
Thanks Greg,
That is very similar to a solution that we are currently using on our internal Sharepoint site. It is one version of our accessible alternative to the webpart that is generated from a Visio file.
Mike Moore
Accessibility Coordinator,
Texas Department of Assistive and Rehabilitative Services
(512) 424-4159 (Office)
(512) 574-0091 (Cell)
From: Olaf Drümmer
Date: Wed, May 06 2015 2:34PM
Subject: Re: Organizational Charts
← Previous message | Next message →
Hi Mike,
please check out this (admittedly hacked together) HTML example (just save the HTML portion as an HTML file and open in a decent browser).
Olaf
-----------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style type="text/css">
#org1{
width: 400px;
height: 200px;
background-color: silver;
padding-top: 30px;
}
#t1, #b1, #b2 {
background-color: #ff7;
margin : 5px;
list-style: none;
width:100px;
height:30px;
display:block;
text-align: center;
padding-top: 10px;
}
#t1{
position:relative;
top:0px;
left:105px;
}
#b1 {
position:relative;
top:25px;
left:-50px;
}
#b2 {
position:relative;
top:-20px;
left:175px;
}
</style>
</head>
<body>
<h1>Org Chart</h1>
<div id="org1" alt="Org Chart - visual graphical presetation from unordered nested list, with some SVG help">
<svg style='width: 400px; height: 200px; position: absolute;' alt="">
<line x1="70" y1="100" x2="200" y2="50" style="stroke:rgb(0,0,127);stroke-width:5"/>
<line x1="330" y1="100" x2="200" y2="50" style="stroke:rgb(0,0,127);stroke-width:5"/>
</svg>
<ul>
<li id="t1">Boss</li>
<ul>
<li id="b1">Secretary</li>
<li id="b2">Driver</li>
</ul>
</ul>
</div>
</body>
</html>
-----------------------------------
On 6 May 2015, at 21:43, "Moore,Michael (DARS)" < = EMAIL ADDRESS REMOVED = > wrote:
> The problem that I have with that approach is that it hides the list structure behind an image, unless I am missing something. So if I need to manipulate the text to make it more readable I don't have an option.
From: Chagnon | PubCom
Date: Wed, May 06 2015 2:44PM
Subject: Re: Organizational Charts
← Previous message | Next message →
Better yet, send me an org chart and I'll return the InDesign and PDF files.
--Bevi
From: Moore,Michael (DARS)
Date: Wed, May 06 2015 3:30PM
Subject: Re: Organizational Charts
← Previous message | Next message →
Thanks, I like this. Even works well in IE9
Mike Moore
Accessibility Coordinator,
Texas Department of Assistive and Rehabilitative Services
(512) 424-4159 (Office)
(512) 574-0091 (Cell)
From: Jim Allan
Date: Wed, May 06 2015 3:54PM
Subject: Re: Organizational Charts
← Previous message | Next message →
Mike,
check out aria-flowto
works in Jaws
Aria-flowto & aria-flowfrom
When the author defines these relationships on elements in a Web page, JAWS
will announce that the element has a "flows from" or "flows to"
relationship. The user can move to "flows to" elements using the *EQUALS*
Navigation Quick Key and to "flows from" using the *SHIFT+EQUALS*
Navigation Quick Key.
test page -
http://wps.pearsoned.com/wps/media/objects/8956/9171771/FlowToBasic.html
On Wed, May 6, 2015 at 4:30 PM, Moore,Michael (DARS) <
= EMAIL ADDRESS REMOVED = > wrote:
> Thanks, I like this. Even works well in IE9
>
> Mike Moore
> Accessibility Coordinator,
> Texas Department of Assistive and Rehabilitative Services
> (512) 424-4159 (Office)
> (512) 574-0091 (Cell)
>
>
>
From: _mallory
Date: Wed, May 06 2015 9:44PM
Subject: Re: Organizational Charts
← Previous message | Next message →
On Wed, May 06, 2015 at 08:00:24PM +0000, Moore,Michael (DARS) wrote:
> I have been thinking a bit about something that I read about future canvas accessibility either on this list or on twitter in the past couple of weeks but I can't seem to locate the article right now.
>
You might have heard of Doug Scheppers' SVGs? I can't find the web
page now with the demo but there's a YouTube https://www.youtube.com/watch?v=W1VUr544i84
_mallory
From: Moore,Michael (DARS)
Date: Thu, May 07 2015 8:07AM
Subject: Re: Organizational Charts
← Previous message | Next message →
I want to thank everyone for their contributions to this discussion. I particularly want to thank Bevi Changon and Olaf Drummer for their fantastic examples of how to achieve visual presentation of an org chart while maintaining text structure in PDF/inDesign and HTML with SVG. You guys are my WebAIM list heroes of the week.
Mike Moore
Accessibility Coordinator,
Texas Department of Assistive and Rehabilitative Services
(512) 424-4159 (Office)
(512) 574-0091 (Cell)
From: Moore,Michael (DARS)
Date: Thu, May 07 2015 8:29AM
Subject: Re: Organizational Charts
← Previous message | Next message →
Thanks Jim,
This would be a good enhancement to Olaf's example. It does not seem to be supported in IE9 but worked well in the current release of FF. I am using JFW16 with the current patch.
Mike Moore
Accessibility Coordinator,
Texas Department of Assistive and Rehabilitative Services
(512) 424-4159 (Office)
(512) 574-0091 (Cell)
From: Yamanishi, Evan
Date: Thu, May 07 2015 8:58AM
Subject: Re: Organizational Charts
← Previous message | Next message →
Ah, wish I had seen this thread sooner! I was toying around with this problem a while back, and came across thecodeplayer.com's example: http://thecodeplayer.com/walkthrough/css3-family-tree. I used that to attempt a quiz-like tree: http://codepen.io/sh0ji/pen/OPGGbG (admittedly still incomplete).
Visual richness and non-visual accessibility are hardly ever mutually exclusive with proper separation of data and presentation, and CSS is amazing for that.
Evan
From: Birkir R. Gunnarsson
Date: Thu, May 07 2015 8:32PM
Subject: Re: Organizational Charts
← Previous message | Next message →
aria-flowto is only supported in Jaws and FF (Jaws 14 and higher and,
I believe FF25 and higher) .. noother combination of browser and
screen reader that I have seen offer this functionality, sadly.
What about building an expandable tree widget?
(admittedly it takes quite a bit of coding).
You would start at the top, then use arrow keys to expand and
collapsae branches of the tree and arrow keys up and down to traverse
siblings.
Some ARIA trickery and JavaScript keyboard/focus management would make
this doable, admittedly it takes a developer more than an hour, or
two, maybe even 5, but it is quite doable.
Cheers
On 5/7/15, Yamanishi, Evan < = EMAIL ADDRESS REMOVED = > wrote:
> Ah, wish I had seen this thread sooner! I was toying around with this
> problem a while back, and came across thecodeplayer.com's example:
> http://thecodeplayer.com/walkthrough/css3-family-tree. I used that to
> attempt a quiz-like tree: http://codepen.io/sh0ji/pen/OPGGbG (admittedly
> still incomplete).
>
> Visual richness and non-visual accessibility are hardly ever mutually
> exclusive with proper separation of data and presentation, and CSS is
> amazing for that.
>
> Evan
>
>
From: Bourne, Sarah (ITD)
Date: Mon, May 11 2015 12:06PM
Subject: Re: Organizational Charts
← Previous message | Next message →
Coming to this thread late, but wanted to share a heading/nested list and CSS approach we took for org charts on Mass.Gov in 2008. We always meant to go back and make it prettier, but nobody ever complained, so, well, it might still be being used someplace in the budget office. Here's an example page. Note that the hyperlinks take you to child org units for more details.
http://www.mass.gov/bb/h1/fy2009h1/brec2_09/dpt09/hceqe.htm
Sarah E. Bourne
Director of IT Accessibility, MassIT
Commonwealth of Massachusetts
1 Ashburton Pl. rm 1601 Boston MA 02108
617-626-4502
= EMAIL ADDRESS REMOVED =
http://www.mass.gov/MassIT
From: Robert Fentress
Date: Fri, May 15 2015 2:27PM
Subject: Re: Organizational Charts
← Previous message | Next message →
I think aria-flowto would be the ideal solution, if it was better
supported. If the org chart is strictly hierarchical, then a nested lists
approach works, but if you have people in your organization who work across
groups, then you've got problems, don't you?
Here is another resource on aria-flowto:
http://www.3needs.org/en/testing/code/aria-flowto.html
Any way you could create some sort of shim for browsers/screen readers that
don't support this property?
The fact that you can't determine using JS if a particular attribute, role,
or property is supported is a big problem, as I see it. It makes creating
shims or polyfills more difficult and retards progress on adoption due to
the chicken-egg problem. Am I the only one who sees this as an issue? I
know there are privacy concerns, but couldn't screen readers simply
implement a do-not-track kind of feature to address this? What am I
missing?
On Mon, May 11, 2015 at 11:06 AM, Bourne, Sarah (ITD) <
= EMAIL ADDRESS REMOVED = > wrote:
> Coming to this thread late, but wanted to share a heading/nested list and
> CSS approach we took for org charts on Mass.Gov in 2008. We always meant
> to go back and make it prettier, but nobody ever complained, so, well, it
> might still be being used someplace in the budget office. Here's an
> example page. Note that the hyperlinks take you to child org units for more
> details.
>
> http://www.mass.gov/bb/h1/fy2009h1/brec2_09/dpt09/hceqe.htm
>
> Sarah E. Bourne
> Director of IT Accessibility, MassIT
> Commonwealth of Massachusetts
> 1 Ashburton Pl. rm 1601 Boston MA 02108
> 617-626-4502
> = EMAIL ADDRESS REMOVED =
> http://www.mass.gov/MassIT
> > > > >
--
Robert Fentress
Senior Accessibility Solutions Designer
540.231.1255
Technology-enhanced Learning & Online Strategies
Assistive Technologies
1180 Torgersen Hall
620 Drillfield Drive (0434)
Blacksburg, Virginia 24061
From: Keith Parks
Date: Tue, May 19 2015 2:03PM
Subject: Re: Organizational Charts
← Previous message | No next message
On May 6, 2015, at 12:48 PM, Chagnon | PubCom wrote:
> Using today's existing document technologies in Word, PowerPoint, and InDesign, that's not possible because the graphic will be a <FIGURE> tag. It would be extremely difficult and time consuming to try and get the graphics aligned into List tags, if at all.
>
> In HTML, you could code CSS to box certain elements and position them, but the vertical connection lines aren't doable.
Coming really late to this thread, but I beg to differ on the "vertical connections" aspect.
I put this together several years back. Headings and <ul> elements, CSS for arrangement. It's even moderately flexible for different font sizes.
<http://go.sdsu.edu/student_affairs/org-chart.aspx>;
******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
http://go.sdsu.edu/student_affairs/communications
http://kparks.deviantart.com/gallery
----------------------------------------------------------
(Objects on your screen may be closer than they appear)