[Athen] Org Chart

[Joshua Hori via athen-list]

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> on behalf of Emily Singer Lucio via athen-list <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>
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
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mailman12.u.washington.edu/pipermail/athen-list/attachments/20240626/bb3d67dd/attachment.html>