[Athen] Org Chart

[Stager, Catherine via athen-list]

It is a very interesting approach – unfortunately the move to next heading (H) only works if you are using a screen reader so the alt text is a bit misleading. With read aloud you do get the alt text but you do not get the functionality.

From: athen-list <athen-list-bounces at mailman12.u.washington.edu> On Behalf Of Jeanne Wielgus via athen-list
Sent: Wednesday, June 26, 2024 5:28 PM
To: Joshua Hori <jhori at ucdavis.edu>; Access Technology Higher Education Network <athen-list at u.washington.edu>
Subject: Re: [Athen] Org Chart


EXTERNAL MAIL: athen-list-bounces at mailman12.u.washington.edu<mailto:athen-list-bounces at mailman12.u.washington.edu>: Do not click links or open attachments unless you recognize the sender and know the content is safe. Please contact your college IT Help Desk if you have any questions
The Colorado Department of Transportation approached this in an interesting way (see attached PDF). The Alt text for each box is: "The following org chart uses heading levels to indicate who supervises whom. Each supervisor is indicated as a heading level. Their direct reports are represented as a list. Press H to move to the next supervisor or shift plus H to move to the previous."

~jeanne


On Wed, Jun 26, 2024 at 3:22 PM Joshua Hori via athen-list <athen-list at u.washington.edu<mailto:athen-list at u.washington.edu>> wrote:
An interesting challenge. If it helps, there are 2 alternative ways to view org charts. Lists and Tables.

There’s a few jQuery plug-ins that can simplify the process which I found online, but I have issues navigating some org charts once it starts getting into the third and fourth levels. It starts using column labels but doesn’t allow for scope to be applied to the list columns.

An alternative would be to make a table and hide the table with CSS. You can group columns, scope the columns so they makes sense to screenreaders, and then apply CSS to make it a visual org chart.

President (h1, group all columns, scope the columns)
VP Sales (h2, group 2 columns, scope the columns)
VP IT (h2, group 2 columns, scope the column)
VP Security & Privacy (h2, group 2 columns, scope the column)
Clients (h3, scope column)
Support (h3, scope column)
Desktop (h3, scope column)
Web (h3, scope column)
Security (h3, scope column)
Privacy (h3, scope column)
Staff 1
Staff 3
Staff 5
Staff 7
Staff 9
Staff 11
Staff 2
Staff 4
Staff 6
Staff 8
Staff 10
Staff 12

It’s the one time using a table for layout makes sense. I see more work in converting list formats into org charts, but I don’t see how you can make that accessible once it gets down to that “Staff” area unless in table format. There’s absolutely no way to perform that with lists without separating them and making the content messy. Or maybe you could create the messy lists and combine/organize it with CSS and classes.

I have nothing to provide towards the CSS, my apologies.

Best,

Joshua Hori
Accessible Technology Coordinator
Information Educational Technology
Academic Technology Services
50 Hutchison Dr.
Davis, CA 95616
530-752-2439
Schedule a meeting via Calendly<https://calendly.com/d/ytt-hsj-vbn>


From: athen-list <athen-list-bounces at mailman12.u.washington.edu<mailto:athen-list-bounces at mailman12.u.washington.edu>> on behalf of Emily Singer Lucio via athen-list <athen-list at u.washington.edu<mailto:athen-list at u.washington.edu>>
Date: Wednesday, June 26, 2024 at 12:16 PM
To: Access Technology Higher Education Network <athen-list at u.washington.edu<mailto:athen-list at u.washington.edu>>
Subject: [Athen] Org Chart
Any suggestions for making an Org chart accessible so that it can be put on a website?

Thanks

Respectfully,

Emily Singer Lucio She/Her/Hers
ADA/504 Coordinator
University of Maryland, College Park
Office of Diversity & Inclusion
0112 Lee Building
7809 Regents Drive
College Park MD 20742
Tel:301 405-2841 | Fax:301 314-9992
Email: eslucio at umd.edu<mailto:eslucio at umd.edu>
Website: accessibility.umd.edu<http://accessibility.umd.edu>
Subscribe to the ADA Newsletter<https://mailchi.mp/97648624d43b/q07mkrxp6p>
To schedule a training:  You can fill out our training form<https://diversity.umd.edu/training-education/training-consultation>

“Just because a man lacks the use of his eyes doesn’t mean he lacks vision.” — Stevie Wonder
Source: WeCapable
_______________________________________________
athen-list mailing list
athen-list at mailman12.u.washington.edu<mailto:athen-list at mailman12.u.washington.edu>
http://mailman12.u.washington.edu/mailman/listinfo/athen-list
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mailman12.u.washington.edu/pipermail/athen-list/attachments/20240627/bc9e32d4/attachment.html>