<div dir="ltr">Thank you Michael.<div><br></div><div>Here is a little more information in case others have suggestions.</div><div><br></div><div><br></div><div><span id="gmail-docs-internal-guid-96be01f3-7fff-50ec-ae6a-e216de591ea4"><h2 dir="ltr" style="line-height:1.38;margin-top:18pt;margin-bottom:6pt"><span style="font-size:16pt;font-family:Calibri,sans-serif;color:rgb(0,0,0);background-color:transparent;font-weight:400;font-variant-numeric:normal;font-variant-east-asian:normal;font-variant-alternates:normal;vertical-align:baseline;white-space:pre-wrap">Salesforce Issues: Lightning Web Component 20230417</span></h2><br><h3 dir="ltr" style="line-height:1.38;margin-top:16pt;margin-bottom:4pt"><span style="font-size:14pt;font-family:Calibri,sans-serif;color:rgb(67,67,67);background-color:transparent;font-weight:400;font-variant-numeric:normal;font-variant-east-asian:normal;font-variant-alternates:normal;vertical-align:baseline;white-space:pre-wrap">Broken ARIA Menu - WAVE error</span></h3><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:11pt;font-family:Calibri,sans-serif;color:rgb(0,0,0);background-color:transparent;font-variant-numeric:normal;font-variant-east-asian:normal;font-variant-alternates:normal;vertical-align:baseline;white-space:pre-wrap">The Salesforce heading component is able to accommodate many menu elements in the top heading. When there are too many elements to display, it will create a 'More' entry and a drop down menu of the additional entries. Partial code to support this dynamic behavior is always generated and it includes the menu element for that future drop down menu; the menu element does not contain any menu items which raises the error 'Broken ARIA menu': there is a menu started but it doesn't have any items in it. </span></p><br><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:11pt;font-family:Calibri,sans-serif;color:rgb(0,0,0);background-color:transparent;font-variant-numeric:normal;font-variant-east-asian:normal;font-variant-alternates:normal;vertical-align:baseline;white-space:pre-wrap">Current heading navigation in the portal:</span></p><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:11pt;font-family:Calibri,sans-serif;color:rgb(0,0,0);background-color:transparent;font-variant-numeric:normal;font-variant-east-asian:normal;font-variant-alternates:normal;vertical-align:baseline;white-space:pre-wrap"><span style="border:none;display:inline-block;overflow:hidden;width:624px;height:100px"><img src="https://lh6.googleusercontent.com/GsoUPZaUm_UoLlZy65MX7FZEsRKOrH89B0qZqOk8LkOiimzr0sDkgNfqIDtjn3CXUMm42nMbwZSj2nlKCIiFoav6M1BikxL8WT6N6R63DZaCC2Q3Mg3TPgIcQ8mEhjLH0ySNGXWvBuocxL4R8PRbbdU" width="624" height="100" style="margin-left: 0px; margin-top: 0px;"></span></span></p><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:11pt;font-family:Calibri,sans-serif;color:rgb(0,0,0);background-color:transparent;font-variant-numeric:normal;font-variant-east-asian:normal;font-variant-alternates:normal;vertical-align:baseline;white-space:pre-wrap">WAVE error revealed with Styles turned off</span></p><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:11pt;font-family:Calibri,sans-serif;color:rgb(0,0,0);background-color:transparent;font-variant-numeric:normal;font-variant-east-asian:normal;font-variant-alternates:normal;vertical-align:baseline;white-space:pre-wrap"><span style="border:none;display:inline-block;overflow:hidden;width:624px;height:471px"><img src="https://lh5.googleusercontent.com/DfUMtWY7yZith6_RqVcvzRAgQc7y5JRA3q4OCBRcqr6nN_IML2LzV6HfO5WxfkS2muVgF9Qg2YJR1e7kHQwUjjA5lT1TfPTtmHrHBxZHsmK_sE53xpj-ea1xyeNQ1RgeSDHzkCoaKjlfGoFU0hXZs60" width="624" height="471" style="margin-left: 0px; margin-top: 0px;"></span></span></p><br><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:11pt;font-family:Calibri,sans-serif;color:rgb(0,0,0);background-color:transparent;font-variant-numeric:normal;font-variant-east-asian:normal;font-variant-alternates:normal;vertical-align:baseline;white-space:pre-wrap">Salesforce resolution to the case opened about this error: </span></p><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:11pt;font-family:Calibri,sans-serif;color:rgb(0,0,0);background-color:transparent;font-variant-numeric:normal;font-variant-east-asian:normal;font-variant-alternates:normal;vertical-align:baseline;white-space:pre-wrap">Upon further review, the ARIA menu issue is accessible and working as designed. Page navigation is using the standard out-of-box Jepson theme navigation header. I have attached a screen recording demonstrating the accessibility of page navigation using the JAWS 2023 screen reader." - Darrell Hilliker, Feb 1 2023</span></p><br><h3 dir="ltr" style="line-height:1.38;margin-top:16pt;margin-bottom:4pt"><span style="font-size:14pt;font-family:Calibri,sans-serif;color:rgb(67,67,67);background-color:transparent;font-weight:400;font-variant-numeric:normal;font-variant-east-asian:normal;font-variant-alternates:normal;vertical-align:baseline;white-space:pre-wrap">No Heading Structure Alert - WAVE Alert</span></h3><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:11pt;font-family:Calibri,sans-serif;color:rgb(0,0,0);background-color:transparent;font-variant-numeric:normal;font-variant-east-asian:normal;font-variant-alternates:normal;vertical-align:baseline;white-space:pre-wrap">The Support page has an H1 tag on the 'My Cases' text heading. Salesforce generates the HTML such that the My Cases H1 is nested within a DIV element that has an attribute 'tabindex="-1" which tells screen readers to skip the content. The development team was not able to find a way to eliminate this -1 tab index but did not consult with Salesforce as yet.</span></p><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:11pt;font-family:Calibri,sans-serif;color:rgb(0,0,0);background-color:transparent;font-variant-numeric:normal;font-variant-east-asian:normal;font-variant-alternates:normal;vertical-align:baseline;white-space:pre-wrap"><span style="border:none;display:inline-block;overflow:hidden;width:624px;height:263px"><img src="https://lh6.googleusercontent.com/PpPXXY6YRyNTa_MO1RM48Txbg5R8viMFNkr_91SfXRFxQTXid8uZNbzDVPHbZMka9BqSg7o3DReqDKGKddxgQ2A4dzkV4DYAD6TYlrVi9i32eo4J2xzu7EKpoo-uX0zp1qmGWsfraVYeLnqfWdCx3lI" width="624" height="263" style="margin-left: 0px; margin-top: 0px;"></span></span></p></span><br class="gmail-Apple-interchange-newline"><div><br></div><div><br clear="all"><div><div dir="ltr" data-smartmail="gmail_signature"><div dir="ltr"><div style="color:rgb(34,34,34)"><font face="arial, sans-serif">Respectfully, </font></div><div style="color:rgb(34,34,34)"><font face="arial, sans-serif"><b><br></b></font></div><div style="color:rgb(34,34,34)"><font face="arial, sans-serif"><b>Emily Singer Lucio She/Her/Hers</b></font></div><div style="color:rgb(34,34,34)"><font face="arial, sans-serif">ADA/504 Coordinator</font></div><div style="color:rgb(34,34,34)"><div><div><div><span style="font-family:"arial narrow",sans-serif">University of Maryland, College Park<br></span></div><span style="font-family:"arial narrow",sans-serif">Office of Diversity & Inclusion<br></span></div><div><div><span style="font-family:"arial narrow",sans-serif">3123 Susquehanna Hall</span></div><div><span style="font-family:"arial narrow",sans-serif">4200 Leigh Road</span></div></div><span style="font-family:"arial narrow",sans-serif">College Park MD 20742<br></span></div><span style="font-family:"arial narrow",sans-serif">Tel:301 405-2841 | Fax:301 314-9992 </span><br></div><div><div style="color:rgb(34,34,34)"><span style="color:rgb(0,0,0)"><span style="font-family:arial,sans-serif">Email: <a href="mailto:eslucio@umd.edu" target="_blank">eslucio@umd.edu</a></span></span></div><div><font color="#000000">Website: <a href="http://accessibility.umd.edu" target="_blank">accessibility.umd.edu</a></font><br></div></div><div><br></div><div><div>“Just because a man lacks the use of his eyes doesn’t mean he lacks vision.” — Stevie Wonder</div><div>Source: WeCapable</div></div></div></div></div><br></div></div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Mon, Apr 17, 2023 at 4:13 PM Vaughn, Michael <<a href="mailto:michael.vaughn@yale.edu" target="_blank">michael.vaughn@yale.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"><span style="font-size:11pt">Hi Emily,<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 don’t have ready access to a Salesforce instance to verify your findings, but we usually don’t fuss much about errors reported by automated tools that don’t have much or any impact on users. WAVE does report
errors in hidden content which is often not actually an issue. Presumably, the system would not expose the hidden content without first populating it with the missing child elements.<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">Also, a `tabindex=-1` attribute on a div does not cause the content to be skipped. It allows the element to be programmatically focused. If WAVE is reporting no heading structure, there must be some other
reason for it.<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">Thanks,<u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt">Mike<u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt"><u></u> <u></u></span></p>
<div>
<div>
<div>
<p class="MsoNormal"><span style="font-size:11pt">_____<u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt">Michael Vaughn (he/him/his)<u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt">Associate Director of Digital Accessibility<u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt">Yale University, Information Technology Services</span><span style="font-size:11pt"><u></u><u></u></span></p>
</div>
</div>
</div>
<p class="MsoNormal"><span style="font-size:11pt"><u></u> <u></u></span></p>
<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="font-size:12pt;color:black">From:
</span></b><span style="font-size:12pt;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 <<a href="mailto:eslucio@umd.edu" target="_blank">eslucio@umd.edu</a>><br>
<b>Date: </b>Monday, April 17, 2023 at 2:29 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] Salesforce Issues<u></u><u></u></span></p>
</div>
<div>
<div>
<p class="MsoNormal"><span style="font-size:11pt">Hello all.<u></u><u></u></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:11pt"><u></u> <u></u></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:11pt">We are working with the Salesforce team and their accessibility people. We continue to have two issues that are worrisome.<u></u><u></u></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:11pt"><u></u> <u></u></span></p>
</div>
<div>
<ul style="margin-top:0in" type="disc">
<li style="color:black;margin-top:0in;margin-bottom:0in;vertical-align:baseline;font-variant-numeric:normal;font-variant-east-asian:normal;font-variant-alternates:normal">
an error exposed by the <a href="https://wave.webaim.org/" target="_blank">WAVE tool</a> - Broken ARIA menu. This
<a href="https://docs.google.com/document/d/1wwhIinSurogPZqPHJAASzMMuBdSoUpUnJ8fGYfyN3uY/edit#bookmark=id.f3gwpm6bm9ni" target="_blank">
error</a> presents in the WAVE tool but not with a screen reader. Stub code is included by Salesforce for potential future use with the top level menu so that additional menu items can overflow into a dropdown menu. The unnecessary 'menu' placeholder is in
the Salesforce-generated code without any menu items, which breaks the ARIA rules. The Marketing and Communications team's assessment is that all WAVE errors should be removed. This error isn't identified by the screen reader because the parent element is
hidden but a future update could expose the error.<u></u><u></u></li></ul>
<div>
<p class="MsoNormal"><span style="font-size:11pt;color:black"><br>
<br>
</span><span style="font-size:11pt"><u></u><u></u></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:11pt">"Upon further review, the ARIA menu issue is accessible and working as designed. Page navigation is using the standard out-of-box Jepson theme navigation header. I have attached a screen recording demonstrating
the accessibility of page navigation using the JAWS 2023 screen reader." - Salesforce<span style="color:black"><br>
<br>
</span><u></u><u></u></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:11pt"><u></u> <u></u></span></p>
</div>
<ul style="margin-top:0in" type="disc">
<li style="color:black;margin-top:0in;margin-bottom:0in;vertical-align:baseline;font-variant-numeric:normal;font-variant-east-asian:normal;font-variant-alternates:normal">
An alert exposed by the WAVE tool - No heading structure. The alert presents in the WAVE tool but not with a screen reader. The H1 tag is on the 'My Cases' heading. A div six levels up from this H1 heading has tabindex="-1" which indicates that this div should
be skipped, thereby signaling to WAVE/screen readers that the div that contains the H1 should be skipped.
<u></u><u></u></li></ul>
</div>
<div>
<p class="MsoNormal"><span style="font-size:11pt"><u></u> <u></u></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:11pt"><u></u> <u></u></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:11pt">I would like to get collective input from this group. Have any of you had these issues?<u></u><u></u></span></p>
</div>
<p class="MsoNormal"><span style="font-size:11pt"><br clear="all">
<u></u><u></u></span></p>
<div>
<div>
<div>
<div>
<p class="MsoNormal"><span style="font-size:11pt;font-family:Arial,sans-serif;color:rgb(34,34,34)">Respectfully, </span><span style="font-size:11pt;color:rgb(34,34,34)"><u></u><u></u></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:11pt;color:rgb(34,34,34)"><u></u> <u></u></span></p>
</div>
<div>
<p class="MsoNormal"><b><span style="font-size:11pt;font-family:Arial,sans-serif;color:rgb(34,34,34)">Emily Singer Lucio She/Her/Hers</span></b><span style="font-size:11pt;color:rgb(34,34,34)"><u></u><u></u></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:11pt;font-family:Arial,sans-serif;color:rgb(34,34,34)">ADA/504 Coordinator</span><span style="font-size:11pt;color:rgb(34,34,34)"><u></u><u></u></span></p>
</div>
<div>
<div>
<div>
<div>
<p class="MsoNormal"><span style="font-size:11pt;font-family:"Arial Narrow",sans-serif;color:rgb(34,34,34)">University of Maryland, College Park</span><span style="font-size:11pt;color:rgb(34,34,34)"><u></u><u></u></span></p>
</div>
<p class="MsoNormal"><span style="font-size:11pt;font-family:"Arial Narrow",sans-serif;color:rgb(34,34,34)">Office of Diversity & Inclusion</span><span style="font-size:11pt;color:rgb(34,34,34)"><u></u><u></u></span></p>
</div>
<div>
<div>
<p class="MsoNormal"><span style="font-size:11pt;font-family:"Arial Narrow",sans-serif;color:rgb(34,34,34)">3123 Susquehanna Hall</span><span style="font-size:11pt;color:rgb(34,34,34)"><u></u><u></u></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:11pt;font-family:"Arial Narrow",sans-serif;color:rgb(34,34,34)">4200 Leigh Road</span><span style="font-size:11pt;color:rgb(34,34,34)"><u></u><u></u></span></p>
</div>
</div>
<p class="MsoNormal"><span style="font-size:11pt;font-family:"Arial Narrow",sans-serif;color:rgb(34,34,34)">College Park MD 20742</span><span style="font-size:11pt;color:rgb(34,34,34)"><u></u><u></u></span></p>
</div>
<p class="MsoNormal"><span style="font-size:11pt;font-family:"Arial Narrow",sans-serif;color:rgb(34,34,34)">Tel:301 405-2841 | Fax:301 314-9992 </span><span style="font-size:11pt;color:rgb(34,34,34)"><u></u><u></u></span></p>
</div>
<div>
<div>
<p class="MsoNormal"><span style="font-size:11pt;font-family:Arial,sans-serif;color:black">Email: <a href="mailto:eslucio@umd.edu" target="_blank">eslucio@umd.edu</a></span><span style="font-size:11pt;color:rgb(34,34,34)"><u></u><u></u></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:11pt;color:black">Website: <a href="http://accessibility.umd.edu/" target="_blank">accessibility.umd.edu</a></span><span style="font-size:11pt"><u></u><u></u></span></p>
</div>
</div>
<div>
<p class="MsoNormal"><span style="font-size:11pt"><u></u> <u></u></span></p>
</div>
<div>
<div>
<p class="MsoNormal"><span style="font-size:11pt">“Just because a man lacks the use of his eyes doesn’t mean he lacks vision.” — Stevie Wonder<u></u><u></u></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:11pt">Source: WeCapable<u></u><u></u></span></p>
</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>