[Athen] Org Chart

[Jeanne Wielgus via athen-list]

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> 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> 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

>

> Website: 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

> 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/20240626/e68e8c0c/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: 2023-CDOT-Organizational-Chart_Final.pdf
Type: application/pdf
Size: 302760 bytes
Desc: not available
URL: <http://mailman12.u.washington.edu/pipermail/athen-list/attachments/20240626/e68e8c0c/attachment.pdf>