<div dir="ltr"><div class="gmail_default" style="font-family:arial,helvetica,sans-serif;color:#000000">Thanks for that feedback about the DOT example. Good to know.<br><br>I am trying to get our organization to move to a list view, but acknowledging that indirect (dotted line) reports are harder to represent (maybe just making a note in parenthesis that that someone is an indirect report - thoughts on this?)</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 Thu, Jun 27, 2024 at 10:59 AM Stager, Catherine <<a href="mailto:Catherine.Stager@frontrange.edu" target="_blank">Catherine.Stager@frontrange.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>





<div lang="EN-US">
<div>
<p class="MsoNormal">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.
<u></u><u></u></p>
<p class="MsoNormal"><u></u> <u></u></p>
<p class="MsoNormal"><b>From:</b> athen-list <<a href="mailto:athen-list-bounces@mailman12.u.washington.edu" target="_blank">athen-list-bounces@mailman12.u.washington.edu</a>>
<b>On Behalf Of </b>Jeanne Wielgus via athen-list<br>
<b>Sent:</b> Wednesday, June 26, 2024 5:28 PM<br>
<b>To:</b> Joshua Hori <<a href="mailto:jhori@ucdavis.edu" target="_blank">jhori@ucdavis.edu</a>>; 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> Re: [Athen] Org Chart<u></u><u></u></p>
<p class="MsoNormal"><u></u> <u></u></p>
<p><strong><span style="font-size:10.5pt;font-family:Calibri,sans-serif;background:rgb(255,255,153)">EXTERNAL MAIL:
<a href="mailto:athen-list-bounces@mailman12.u.washington.edu" target="_blank"><span style="font-weight:normal">athen-list-bounces@mailman12.u.washington.edu</span></a>:</span></strong><span style="font-size:10.5pt;background:rgb(255,255,153)"> 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</span><u></u><u></u></p>
<div>
<div>
<p class="MsoNormal"><span style="font-family:Arial,sans-serif;color:black">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."<u></u><u></u></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-family:Arial,sans-serif;color:black"><u></u> <u></u></span></p>
</div>
<div>
<div>
<div>
<p class="MsoNormal">~jeanne<u></u><u></u></p>
</div>
</div>
</div>
<p class="MsoNormal"><u></u> <u></u></p>
</div>
<p class="MsoNormal"><u></u> <u></u></p>
<div>
<div>
<p class="MsoNormal">On Wed, Jun 26, 2024 at 3:22 PM Joshua Hori via athen-list <<a href="mailto:athen-list@u.washington.edu" target="_blank">athen-list@u.washington.edu</a>> wrote:<u></u><u></u></p>
</div>
<blockquote style="border-top:none;border-right:none;border-bottom:none;border-left:1pt solid rgb(204,204,204);padding:0in 0in 0in 6pt;margin-left:4.8pt;margin-right:0in">
<div>
<div>
<div>
<p class="MsoNormal">An interesting challenge. If it helps, there are 2 alternative ways to view org charts. Lists and Tables.  <u></u><u></u></p>
<p class="MsoNormal"> <u></u><u></u></p>
<p class="MsoNormal">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></p>
<p class="MsoNormal"> <u></u><u></u></p>
<p class="MsoNormal">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></p>
<p class="MsoNormal"> <u></u><u></u></p>
<table border="0" cellspacing="0" cellpadding="0" style="margin-left:30.2pt;border-collapse:collapse">
<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">
President (h1, group all columns, scope the columns)<u></u><u></u></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">
VP Sales (h2, group 2 columns, scope the columns)<u></u><u></u></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">
VP IT (h2, group 2 columns, scope the column)<u></u><u></u></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">
VP Security & Privacy (h2, group 2 columns, scope the column)<u></u><u></u></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">
Clients (h3, scope column)<u></u><u></u></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">
Support (h3, scope column)<u></u><u></u></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">
Desktop (h3, scope column)<u></u><u></u></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">
Web (h3, scope column)<u></u><u></u></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">
Security (h3, scope column)<u></u><u></u></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">
Privacy (h3, scope column)<u></u><u></u></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">
Staff 1<u></u><u></u></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">
Staff 3<u></u><u></u></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">
Staff 5<u></u><u></u></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">
Staff 7<u></u><u></u></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">
Staff 9<u></u><u></u></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">
Staff 11<u></u><u></u></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">
Staff 2<u></u><u></u></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">
Staff 4<u></u><u></u></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">
Staff 6<u></u><u></u></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">
Staff 8<u></u><u></u></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">
Staff 10<u></u><u></u></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">
Staff 12<u></u><u></u></p>
</td>
</tr>
</tbody>
</table>
<p class="MsoNormal"> <u></u><u></u></p>
<p class="MsoNormal">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></p>
<p class="MsoNormal"> <u></u><u></u></p>
<p class="MsoNormal">I have nothing to provide towards the CSS, my apologies.
<u></u><u></u></p>
<p class="MsoNormal"> <u></u><u></u></p>
<p class="MsoNormal">Best,
<u></u><u></u></p>
<p class="MsoNormal"> <u></u><u></u></p>
<div>
<div>
<p class="MsoNormal">Joshua Hori<u></u><u></u></p>
<p class="MsoNormal">Accessible Technology Coordinator<u></u><u></u></p>
<p class="MsoNormal">Information Educational Technology<u></u><u></u></p>
<p class="MsoNormal">Academic Technology Services<u></u><u></u></p>
<p class="MsoNormal">50 Hutchison Dr.<u></u><u></u></p>
<p class="MsoNormal">Davis, CA 95616<u></u><u></u></p>
<p class="MsoNormal">530-752-2439 <u></u><u></u></p>
</div>
</div>
<p class="MsoNormal"><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><u></u><u></u></p>
<p class="MsoNormal"> <u></u><u></u></p>
<p class="MsoNormal"> <u></u><u></u></p>
<div id="m_-7520888974505040328m_-1693881965362643692m_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</span><u></u><u></u></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><u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><span style="color:rgb(34,34,34)"> </span><u></u><u></u></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><u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><span style="font-family:Arial,sans-serif;color:rgb(34,34,34)">ADA/504 Coordinator</span><u></u><u></u></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><u></u><u></u></p>
</div>
<p class="MsoNormal"><span style="font-family:"Arial Narrow",sans-serif;color:rgb(34,34,34)">Office of Diversity & Inclusion</span><u></u><u></u></p>
</div>
<div>
<div>
<p class="MsoNormal"><span style="font-family:"Arial Narrow",sans-serif;color:rgb(34,34,34)">0112 Lee Building</span><u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><span style="font-family:"Arial Narrow",sans-serif;color:rgb(34,34,34)">7809 Regents Drive</span><u></u><u></u></p>
</div>
</div>
<p class="MsoNormal"><span style="font-family:"Arial Narrow",sans-serif;color:rgb(34,34,34)">College Park MD 20742</span><u></u><u></u></p>
</div>
<p class="MsoNormal"><span style="font-family:"Arial Narrow",sans-serif;color:rgb(34,34,34)"><a>Tel:301</a> 405-2841 | Fax:301 314-9992 </span><u></u><u></u></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><u></u><u></u></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>
<p class="MsoNormal">_______________________________________________<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" target="_blank">http://mailman12.u.washington.edu/mailman/listinfo/athen-list</a><u></u><u></u></p>
</div>
</blockquote>
</div>
</div>
</div>

</div></blockquote></div>