<div dir="ltr"><div class="gmail_default" style="font-family:arial,helvetica,sans-serif;color:#000000">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."</div><div class="gmail_default" style="font-family:arial,helvetica,sans-serif;color:#000000"><br></div><div><div dir="ltr" class="gmail_signature" data-smartmail="gmail_signature"><div dir="ltr">~jeanne<br></div></div></div><br></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Wed, Jun 26, 2024 at 3:22 PM Joshua Hori via athen-list <<a href="mailto:athen-list@u.washington.edu">athen-list@u.washington.edu</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div class="msg4180746691005185292">





<div lang="EN-US" style="overflow-wrap: break-word;">
<div class="m_4180746691005185292WordSection1">
<p class="MsoNormal"><span style="font-size:11pt">An interesting challenge. If it helps, there are 2 alternative ways to view org charts. Lists and Tables.  <u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt"><u></u> <u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt">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.  <u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt"><u></u> <u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt">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.
<u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt"><u></u> <u></u></span></p>
<table border="1" cellspacing="0" cellpadding="0" style="margin-left:30.2pt;border-collapse:collapse;border:none">
<tbody>
<tr>
<td width="467" colspan="6" valign="top" style="width:350.6pt;border:1pt solid windowtext;padding:0in 5.4pt">
<p class="MsoNormal" align="center" style="text-align:center"><span style="font-size:11pt">President (h1, group all columns, scope the columns)<u></u><u></u></span></p>
</td>
</tr>
<tr>
<td width="156" colspan="2" valign="top" style="width:116.8pt;border-right:1pt solid windowtext;border-bottom:1pt solid windowtext;border-left:1pt solid windowtext;border-top:none;padding:0in 5.4pt">
<p class="MsoNormal" align="center" style="text-align:center"><span style="font-size:11pt">VP Sales (h2, group 2 columns, scope the columns)<u></u><u></u></span></p>
</td>
<td width="156" colspan="2" valign="top" style="width:116.9pt;border-top:none;border-left:none;border-bottom:1pt solid windowtext;border-right:1pt solid windowtext;padding:0in 5.4pt">
<p class="MsoNormal" align="center" style="text-align:center"><span style="font-size:11pt">VP IT (h2, group 2 columns, scope the column)<u></u><u></u></span></p>
</td>
<td width="156" colspan="2" valign="top" style="width:116.9pt;border-top:none;border-left:none;border-bottom:1pt solid windowtext;border-right:1pt solid windowtext;padding:0in 5.4pt">
<p class="MsoNormal" align="center" style="text-align:center"><span style="font-size:11pt">VP Security & Privacy (h2, group 2 columns, scope the column)<u></u><u></u></span></p>
</td>
</tr>
<tr>
<td width="78" valign="top" style="width:58.4pt;border-right:1pt solid windowtext;border-bottom:1pt solid windowtext;border-left:1pt solid windowtext;border-top:none;padding:0in 5.4pt">
<p class="MsoNormal" align="center" style="text-align:center"><span style="font-size:11pt">Clients (h3, scope column)<u></u><u></u></span></p>
</td>
<td width="78" valign="top" style="width:58.4pt;border-top:none;border-left:none;border-bottom:1pt solid windowtext;border-right:1pt solid windowtext;padding:0in 5.4pt">
<p class="MsoNormal" align="center" style="text-align:center"><span style="font-size:11pt">Support (h3, scope column)<u></u><u></u></span></p>
</td>
<td width="78" valign="top" style="width:58.45pt;border-top:none;border-left:none;border-bottom:1pt solid windowtext;border-right:1pt solid windowtext;padding:0in 5.4pt">
<p class="MsoNormal" align="center" style="text-align:center"><span style="font-size:11pt">Desktop (h3, scope column)<u></u><u></u></span></p>
</td>
<td width="78" valign="top" style="width:58.45pt;border-top:none;border-left:none;border-bottom:1pt solid windowtext;border-right:1pt solid windowtext;padding:0in 5.4pt">
<p class="MsoNormal" align="center" style="text-align:center"><span style="font-size:11pt">Web (h3, scope column)<u></u><u></u></span></p>
</td>
<td width="78" valign="top" style="width:58.45pt;border-top:none;border-left:none;border-bottom:1pt solid windowtext;border-right:1pt solid windowtext;padding:0in 5.4pt">
<p class="MsoNormal" align="center" style="text-align:center"><span style="font-size:11pt">Security (h3, scope column)<u></u><u></u></span></p>
</td>
<td width="78" valign="top" style="width:58.45pt;border-top:none;border-left:none;border-bottom:1pt solid windowtext;border-right:1pt solid windowtext;padding:0in 5.4pt">
<p class="MsoNormal" align="center" style="text-align:center"><span style="font-size:11pt">Privacy (h3, scope column)<u></u><u></u></span></p>
</td>
</tr>
<tr>
<td width="78" valign="top" style="width:58.4pt;border-right:1pt solid windowtext;border-bottom:1pt solid windowtext;border-left:1pt solid windowtext;border-top:none;padding:0in 5.4pt">
<p class="MsoNormal" align="center" style="text-align:center"><span style="font-size:11pt">Staff 1<u></u><u></u></span></p>
</td>
<td width="78" valign="top" style="width:58.4pt;border-top:none;border-left:none;border-bottom:1pt solid windowtext;border-right:1pt solid windowtext;padding:0in 5.4pt">
<p class="MsoNormal" align="center" style="text-align:center"><span style="font-size:11pt">Staff 3<u></u><u></u></span></p>
</td>
<td width="78" valign="top" style="width:58.45pt;border-top:none;border-left:none;border-bottom:1pt solid windowtext;border-right:1pt solid windowtext;padding:0in 5.4pt">
<p class="MsoNormal" align="center" style="text-align:center"><span style="font-size:11pt">Staff 5<u></u><u></u></span></p>
</td>
<td width="78" valign="top" style="width:58.45pt;border-top:none;border-left:none;border-bottom:1pt solid windowtext;border-right:1pt solid windowtext;padding:0in 5.4pt">
<p class="MsoNormal" align="center" style="text-align:center"><span style="font-size:11pt">Staff 7<u></u><u></u></span></p>
</td>
<td width="78" valign="top" style="width:58.45pt;border-top:none;border-left:none;border-bottom:1pt solid windowtext;border-right:1pt solid windowtext;padding:0in 5.4pt">
<p class="MsoNormal" align="center" style="text-align:center"><span style="font-size:11pt">Staff 9<u></u><u></u></span></p>
</td>
<td width="78" valign="top" style="width:58.45pt;border-top:none;border-left:none;border-bottom:1pt solid windowtext;border-right:1pt solid windowtext;padding:0in 5.4pt">
<p class="MsoNormal" align="center" style="text-align:center"><span style="font-size:11pt">Staff 11<u></u><u></u></span></p>
</td>
</tr>
<tr>
<td width="78" valign="top" style="width:58.4pt;border-right:1pt solid windowtext;border-bottom:1pt solid windowtext;border-left:1pt solid windowtext;border-top:none;padding:0in 5.4pt">
<p class="MsoNormal" align="center" style="text-align:center"><span style="font-size:11pt">Staff 2<u></u><u></u></span></p>
</td>
<td width="78" valign="top" style="width:58.4pt;border-top:none;border-left:none;border-bottom:1pt solid windowtext;border-right:1pt solid windowtext;padding:0in 5.4pt">
<p class="MsoNormal" align="center" style="text-align:center"><span style="font-size:11pt">Staff 4<u></u><u></u></span></p>
</td>
<td width="78" valign="top" style="width:58.45pt;border-top:none;border-left:none;border-bottom:1pt solid windowtext;border-right:1pt solid windowtext;padding:0in 5.4pt">
<p class="MsoNormal" align="center" style="text-align:center"><span style="font-size:11pt">Staff 6<u></u><u></u></span></p>
</td>
<td width="78" valign="top" style="width:58.45pt;border-top:none;border-left:none;border-bottom:1pt solid windowtext;border-right:1pt solid windowtext;padding:0in 5.4pt">
<p class="MsoNormal" align="center" style="text-align:center"><span style="font-size:11pt">Staff 8<u></u><u></u></span></p>
</td>
<td width="78" valign="top" style="width:58.45pt;border-top:none;border-left:none;border-bottom:1pt solid windowtext;border-right:1pt solid windowtext;padding:0in 5.4pt">
<p class="MsoNormal" align="center" style="text-align:center"><span style="font-size:11pt">Staff 10<u></u><u></u></span></p>
</td>
<td width="78" valign="top" style="width:58.45pt;border-top:none;border-left:none;border-bottom:1pt solid windowtext;border-right:1pt solid windowtext;padding:0in 5.4pt">
<p class="MsoNormal" align="center" style="text-align:center"><span style="font-size:11pt">Staff 12<u></u><u></u></span></p>
</td>
</tr>
</tbody>
</table>
<p class="MsoNormal"><span style="font-size:11pt"><u></u> <u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt">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.  <u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt"><u></u> <u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt">I have nothing to provide towards the CSS, my apologies.
<u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt"><u></u> <u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt">Best, <u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt"><u></u> <u></u></span></p>
<div>
<div>
<p class="MsoNormal"><span style="font-size:11pt;font-family:Calibri,sans-serif">Joshua Hori<u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt;font-family:Calibri,sans-serif">Accessible Technology Coordinator<u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt;font-family:Calibri,sans-serif">Information Educational Technology<u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt;font-family:Calibri,sans-serif">Academic Technology Services<u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt;font-family:Calibri,sans-serif">50 Hutchison Dr.<u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt;font-family:Calibri,sans-serif">Davis, CA 95616<u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt;font-family:Calibri,sans-serif">530-752-2439 <u></u><u></u></span></p>
</div>
</div>
<p class="MsoNormal"><span style="font-size:11pt;font-family:Calibri,sans-serif"><a href="https://calendly.com/d/ytt-hsj-vbn" target="_blank"><span style="color:rgb(5,99,193)">Schedule a meeting via Calendly</span></a></span><span style="font-size:11pt"><u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt"><u></u> <u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt"><u></u> <u></u></span></p>
<div id="m_4180746691005185292mail-editor-reference-message-container">
<div>
<div style="border-right:none;border-bottom:none;border-left:none;border-top:1pt solid rgb(181,196,223);padding:3pt 0in 0in">
<p class="MsoNormal" style="margin-bottom:12pt"><b><span style="color:black">From:
</span></b><span style="color:black">athen-list <<a href="mailto:athen-list-bounces@mailman12.u.washington.edu" target="_blank">athen-list-bounces@mailman12.u.washington.edu</a>> on behalf of Emily Singer Lucio via athen-list <<a href="mailto:athen-list@u.washington.edu" target="_blank">athen-list@u.washington.edu</a>><br>
<b>Date: </b>Wednesday, June 26, 2024 at 12:16</span><span style="font-family:Arial,sans-serif;color:black"> </span><span style="color:black">PM<br>
<b>To: </b>Access Technology Higher Education Network <<a href="mailto:athen-list@u.washington.edu" target="_blank">athen-list@u.washington.edu</a>><br>
<b>Subject: </b>[Athen] Org Chart<u></u><u></u></span></p>
</div>
<div>
<p class="MsoNormal">Any suggestions for making an Org chart accessible so that it can be put on a website?<u></u><u></u></p>
<div>
<p class="MsoNormal"><u></u> <u></u></p>
</div>
<div>
<p class="MsoNormal">Thanks<u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><br clear="all">
<u></u><u></u></p>
<div>
<div>
<div>
<div>
<p class="MsoNormal"><span style="font-family:Arial,sans-serif;color:rgb(34,34,34)">Respectfully, </span><span style="color:rgb(34,34,34)"><u></u><u></u></span></p>
</div>
<div>
<p class="MsoNormal"><span style="color:rgb(34,34,34)"><u></u> <u></u></span></p>
</div>
<div>
<p class="MsoNormal"><b><span style="font-family:Arial,sans-serif;color:rgb(34,34,34)">Emily Singer Lucio She/Her/Hers</span></b><span style="color:rgb(34,34,34)"><u></u><u></u></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-family:Arial,sans-serif;color:rgb(34,34,34)">ADA/504 Coordinator</span><span style="color:rgb(34,34,34)"><u></u><u></u></span></p>
</div>
<div>
<div>
<div>
<div>
<p class="MsoNormal"><span style="font-family:"Arial Narrow",sans-serif;color:rgb(34,34,34)">University of Maryland, College Park</span><span style="color:rgb(34,34,34)"><u></u><u></u></span></p>
</div>
<p class="MsoNormal"><span style="font-family:"Arial Narrow",sans-serif;color:rgb(34,34,34)">Office of Diversity & Inclusion</span><span style="color:rgb(34,34,34)"><u></u><u></u></span></p>
</div>
<div>
<div>
<p class="MsoNormal"><span style="font-family:"Arial Narrow",sans-serif;color:rgb(34,34,34)">0112 Lee Building</span><span style="color:rgb(34,34,34)"><u></u><u></u></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-family:"Arial Narrow",sans-serif;color:rgb(34,34,34)">7809 Regents Drive</span><span style="color:rgb(34,34,34)"><u></u><u></u></span></p>
</div>
</div>
<p class="MsoNormal"><span style="font-family:"Arial Narrow",sans-serif;color:rgb(34,34,34)">College Park MD 20742</span><span style="color:rgb(34,34,34)"><u></u><u></u></span></p>
</div>
<p class="MsoNormal"><span style="font-family:"Arial Narrow",sans-serif;color:rgb(34,34,34)">Tel:301 405-2841 | Fax:301 314-9992 </span><span style="color:rgb(34,34,34)"><u></u><u></u></span></p>
</div>
<div>
<div>
<p class="MsoNormal"><span style="font-family:Arial,sans-serif;color:black">Email: <a href="mailto:eslucio@umd.edu" target="_blank">eslucio@umd.edu</a></span><span style="color:rgb(34,34,34)"><u></u><u></u></span></p>
</div>
<div>
<p class="MsoNormal"><span style="color:black">Website: <a href="http://accessibility.umd.edu" target="_blank">accessibility.umd.edu</a></span><u></u><u></u></p>
</div>
</div>
<div>
<p class="MsoNormal"><a href="https://mailchi.mp/97648624d43b/q07mkrxp6p" target="_blank">Subscribe to the ADA Newsletter</a><u></u><u></u></p>
</div>
<div>
<p class="MsoNormal">To schedule a training:  <span style="color:rgb(34,34,34)">You can fill out our </span><a href="https://diversity.umd.edu/training-education/training-consultation" target="_blank"><span style="color:rgb(17,85,204)">training form</span></a><span style="color:rgb(34,34,34)"> </span><u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><u></u> <u></u></p>
</div>
<div>
<div>
<p class="MsoNormal">“Just because a man lacks the use of his eyes doesn’t mean he lacks vision.” — Stevie Wonder<u></u><u></u></p>
</div>
<div>
<p class="MsoNormal">Source: WeCapable<u></u><u></u></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

_______________________________________________<br>
athen-list mailing list<br>
<a href="mailto:athen-list@mailman12.u.washington.edu" target="_blank">athen-list@mailman12.u.washington.edu</a><br>
<a href="http://mailman12.u.washington.edu/mailman/listinfo/athen-list" rel="noreferrer" target="_blank">http://mailman12.u.washington.edu/mailman/listinfo/athen-list</a><br>
</div></blockquote></div>