<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<meta name="Generator" content="Microsoft Word 15 (filtered medium)">
<style><!--
/* Font Definitions */
@font-face
{font-family:Wingdings;
panose-1:5 0 0 0 0 0 0 0 0 0;}
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:"Calibri Light";
panose-1:2 15 3 2 2 2 4 3 2 4;}
@font-face
{font-family:"Aptos Display";}
@font-face
{font-family:Aptos;}
@font-face
{font-family:"Noto Sans Symbols";}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
font-size:11.0pt;
font-family:"Calibri",sans-serif;
mso-ligatures:standardcontextual;}
h2
{mso-style-priority:9;
mso-style-link:"Heading 2 Char";
margin-top:2.0pt;
margin-right:0in;
margin-bottom:0in;
margin-left:0in;
page-break-after:avoid;
font-size:13.0pt;
font-family:"Calibri Light",sans-serif;
color:#2F5496;
font-weight:normal;}
h3
{mso-style-priority:9;
mso-style-link:"Heading 3 Char";
margin-top:8.0pt;
margin-right:0in;
margin-bottom:4.0pt;
margin-left:0in;
page-break-after:avoid;
font-size:14.0pt;
font-family:"Aptos",sans-serif;
color:#0F4761;
mso-ligatures:standardcontextual;
font-weight:normal;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:#467886;
text-decoration:underline;}
p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph
{mso-style-priority:34;
margin-top:0in;
margin-right:0in;
margin-bottom:0in;
margin-left:.5in;
font-size:11.0pt;
font-family:"Calibri",sans-serif;
mso-ligatures:standardcontextual;}
span.Heading2Char
{mso-style-name:"Heading 2 Char";
mso-style-priority:9;
mso-style-link:"Heading 2";
font-family:"Calibri Light",sans-serif;
color:#2F5496;
mso-ligatures:none;}
span.Heading3Char
{mso-style-name:"Heading 3 Char";
mso-style-priority:9;
mso-style-link:"Heading 3";
font-family:"Aptos",sans-serif;
color:#0F4761;}
p.xmsonormal, li.xmsonormal, div.xmsonormal
{mso-style-name:x_msonormal;
margin:0in;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
span.EmailStyle22
{mso-style-type:personal-compose;
font-family:"Aptos",sans-serif;
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;
mso-ligatures:none;}
@page WordSection1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.WordSection1
{page:WordSection1;}
/* List Definitions */
@list l0
{mso-list-id:625505708;
mso-list-template-ids:350622270;}
@list l0:level1
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l0:level2
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:1.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l0:level3
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:1.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l0:level4
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:2.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l0:level5
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:2.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l0:level6
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:3.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l0:level7
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:3.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l0:level8
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:4.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l0:level9
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:4.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l1
{mso-list-id:1433890014;
mso-list-template-ids:-2066161626;}
@list l1:level1
{mso-level-start-at:0;
mso-level-number-format:bullet;
mso-level-text:\25CF;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;
mso-ascii-font-family:"Noto Sans Symbols";
mso-fareast-font-family:"Noto Sans Symbols";
mso-hansi-font-family:"Noto Sans Symbols";
mso-bidi-font-family:"Noto Sans Symbols";
color:black;
mso-ansi-font-weight:bold;}
@list l1:level2
{mso-level-number-format:bullet;
mso-level-text:o;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;
mso-ascii-font-family:"Courier New";
mso-fareast-font-family:"Courier New";
mso-hansi-font-family:"Courier New";
mso-bidi-font-family:"Courier New";}
@list l1:level3
{mso-level-number-format:bullet;
mso-level-text:\25AA;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;
mso-ascii-font-family:"Noto Sans Symbols";
mso-fareast-font-family:"Noto Sans Symbols";
mso-hansi-font-family:"Noto Sans Symbols";
mso-bidi-font-family:"Noto Sans Symbols";}
@list l1:level4
{mso-level-number-format:bullet;
mso-level-text:\25CF;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;
mso-ascii-font-family:"Noto Sans Symbols";
mso-fareast-font-family:"Noto Sans Symbols";
mso-hansi-font-family:"Noto Sans Symbols";
mso-bidi-font-family:"Noto Sans Symbols";}
@list l1:level5
{mso-level-number-format:bullet;
mso-level-text:o;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;
mso-ascii-font-family:"Courier New";
mso-fareast-font-family:"Courier New";
mso-hansi-font-family:"Courier New";
mso-bidi-font-family:"Courier New";}
@list l1:level6
{mso-level-number-format:bullet;
mso-level-text:\25AA;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;
mso-ascii-font-family:"Noto Sans Symbols";
mso-fareast-font-family:"Noto Sans Symbols";
mso-hansi-font-family:"Noto Sans Symbols";
mso-bidi-font-family:"Noto Sans Symbols";}
@list l1:level7
{mso-level-number-format:bullet;
mso-level-text:\25CF;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;
mso-ascii-font-family:"Noto Sans Symbols";
mso-fareast-font-family:"Noto Sans Symbols";
mso-hansi-font-family:"Noto Sans Symbols";
mso-bidi-font-family:"Noto Sans Symbols";}
@list l1:level8
{mso-level-number-format:bullet;
mso-level-text:o;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;
mso-ascii-font-family:"Courier New";
mso-fareast-font-family:"Courier New";
mso-hansi-font-family:"Courier New";
mso-bidi-font-family:"Courier New";}
@list l1:level9
{mso-level-number-format:bullet;
mso-level-text:\25AA;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;
mso-ascii-font-family:"Noto Sans Symbols";
mso-fareast-font-family:"Noto Sans Symbols";
mso-hansi-font-family:"Noto Sans Symbols";
mso-bidi-font-family:"Noto Sans Symbols";}
@list l2
{mso-list-id:1736048652;
mso-list-template-ids:-323347678;}
@list l2:level1
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l2:level2
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:1.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l2:level3
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:1.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l2:level4
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:2.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l2:level5
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:2.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l2:level6
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:3.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l2:level7
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:3.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l2:level8
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:4.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l2:level9
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:4.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l3
{mso-list-id:1808039379;
mso-list-type:hybrid;
mso-list-template-ids:-563559572 1577095756 67698691 67698693 67698689 67698691 67698693 67698689 67698691 67698693;}
@list l3:level1
{mso-level-start-at:0;
mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;
font-family:Symbol;
mso-fareast-font-family:Aptos;
mso-bidi-font-family:Calibri;
color:windowtext;}
@list l3:level2
{mso-level-number-format:bullet;
mso-level-text:o;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;
font-family:"Courier New";}
@list l3:level3
{mso-level-number-format:bullet;
mso-level-text:\F0A7;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;
font-family:Wingdings;}
@list l3:level4
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;
font-family:Symbol;}
@list l3:level5
{mso-level-number-format:bullet;
mso-level-text:o;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;
font-family:"Courier New";}
@list l3:level6
{mso-level-number-format:bullet;
mso-level-text:\F0A7;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;
font-family:Wingdings;}
@list l3:level7
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;
font-family:Symbol;}
@list l3:level8
{mso-level-number-format:bullet;
mso-level-text:o;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;
font-family:"Courier New";}
@list l3:level9
{mso-level-number-format:bullet;
mso-level-text:\F0A7;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;
font-family:Wingdings;}
ol
{margin-bottom:0in;}
ul
{margin-bottom:0in;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang="EN-US" link="#467886" vlink="#96607D" style="word-wrap:break-word">
<div class="WordSection1">
<p class="MsoNormal"><span style="font-size:12.0pt">Hello accessibility minded friends and colleagues,<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:12.0pt"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:12.0pt">Please join us this Thursday at 10 AM for another exciting, informal, and friendly Web Accessibility/Usability meet-up.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:12.0pt"><o:p> </o:p></span></p>
<h2>Agenda<o:p></o:p></h2>
<h2><o:p> </o:p></h2>
<h3>UW Create new website accessibility review<span style="mso-ligatures:none"><o:p></o:p></span></h3>
<p class="MsoNormal"><span style="color:black">create.uw.edu is the main website for UW CREATE, a research center that focuses on building accessible technology and building technology to make the world accessible. So now that we've launched on the updated
UW Wordpress website, we need a thorough review! Of greatest concern is the pages under the People menu. We use portfolios to build and list
</span><a href="https://create.uw.edu/people-of-create/" title="https://create.uw.edu/people-of-create/">faculty members and leadership</a><span style="color:black">. There are design and technical challenges with portfolios – but are they accessible? </span><span style="font-size:12.0pt"><o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:12.0pt"><o:p> </o:p></span></p>
<h3>Card design pattern and accessibility<o:p></o:p></h3>
<p class="MsoNormal"><span style="font-size:12.0pt">We receive regularly questions about card accessibility and we decided to start a conversation on card accessibility with different implementations. There are many implementations of cards out there and some
of you might be using it too. Please send your card examples to the list for review in our upcoming meet-up. In the meantime, here’s a couple of card examples developed by Jeane and Terrill:<o:p></o:p></span></p>
<ul style="margin-top:0in" type="disc">
<li class="MsoListParagraph" style="color:black;margin-left:0in;mso-list:l3 level1 lfo3">
<span style="color:windowtext"><a href="https://urldefense.com/v3/__http:/terrillthompson.com/tests/cards.html__;!!K-Hz7m0Vt54!kU8iGNT5-fx8u7luaTpzm6P_ZNq5H2cEJNhZxrvW_LTLeeGZuTljHHcdmXvtLGH6Jf1gGCQD$" title="http://terrillthompson.com/tests/cards.html">Flip
Cards Demo</a></span>, a test page that Terrill created for the 2020 Presidential Election.<o:p></o:p></li><li class="MsoListParagraph" style="color:black;margin-left:0in;mso-list:l3 level1 lfo3">
<span style="color:windowtext"><a href="https://urldefense.com/v3/__https:/uw-ats.github.io/jeanem-demos/cards/__;!!K-Hz7m0Vt54!jjh7VLfbTFB7adJ_CYbqcLmLlHIC0hl5hUgIKKvk1QxV36p7j-weXAMWKiVWfOGzC6KM7uDFIg$" title="https://uw-ats.github.io/jeanem-demos/cards/"><span style="font-family:"Arial",sans-serif">Card
demo page</span></a></span><span style="font-family:"Arial",sans-serif">, An example page developed by Jeane.<o:p></o:p></span></li></ul>
<h3>Follow-up question about card <span style="font-family:"Aptos Display",sans-serif;color:#0A2F40">
<o:p></o:p></span></h3>
<p class="xmsonormal"><span style="color:black">Tyler Preder of UW-IT Telecom attended the Meetup in the past and the group provided feedback on the
<a href="https://tel.washington.edu/help" title="https://tel.washington.edu/help">
UW-IT Telecom Help Form</a>. He has one specific follow-up question: Should the cards be navigable with arrow keys in addition to (or instead of) the tab key? And if so, two more follow-up questions: (1) Should the right arrow wrap to the next row if the
cards are presented in multiple rows? and (2) If there's an extra card in the top row (e.g., 5 cards in Row 1, 4 cards in Row 2), what should the down arrow do if the user's focus is on the extra card? </span><o:p></o:p></p>
<p class="xmsonormal"><span style="color:black"> </span><o:p></o:p></p>
<h2>Meeting info<o:p></o:p></h2>
<ul style="margin-top:0in" type="disc">
<li class="MsoNormal" style="color:black;mso-list:l1 level1 lfo6"><span style="font-size:12.0pt">What: Monthly Web Accessibility/Usability Meetup<o:p></o:p></span></li><li class="MsoNormal" style="color:black;mso-list:l1 level1 lfo6"><span style="font-size:12.0pt">When: Thursday July 11, 2024 10-11 AM PT<o:p></o:p></span></li><li class="MsoNormal" style="color:black;mso-list:l1 level1 lfo6"><span style="font-size:12.0pt;color:windowtext">Where:
</span><span style="color:windowtext"><a href="https://urldefense.com/v3/__https:/washington.zoom.us/my/hadirangin__;!!K-Hz7m0Vt54!kA6E7qgn0GM6P5WvM9v0nKxjTwnOdgcuCctzitw0ihqa29dhxLQOtdI6Crv1C-9gEFG3atM56Q$"><span style="font-size:12.0pt">https://washington.zoom.us/my/hadirangin</span></a></span><span style="font-size:12.0pt"><o:p></o:p></span></li><li class="MsoNormal" style="color:black;mso-list:l1 level1 lfo6"><span style="font-size:12.0pt">Meeting ID: 206 221 1532<o:p></o:p></span></li></ul>
<p class="MsoNormal" style="margin-left:.5in"><span style="font-size:12.0pt;color:black"><o:p> </o:p></span></p>
<h2>About Monthly Web Accessibility/Usability Meet-up<o:p></o:p></h2>
<p class="MsoNormal"><span style="font-size:12.0pt;color:black">The Monthly Web Accessibility/Usability meet-up is a place for accessibility minded colleagues to casually reviewing and discussing your projects. This generally includes lots of hands-on testing
and code review. If you are working on a project and would like to get accessibility feedback from your peers, please let us know and we will add it to the agenda. We always encourage you to bring your own sites and topics, as it is a great learning experience
for everyone.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="color:black"><o:p> </o:p></span></p>
<h2>How to Join the Mailing List<o:p></o:p></h2>
<p class="MsoNormal"><span style="font-size:12.0pt">We send our announcements typically a week prior to the meetup through various internal mailing lists, including the accessibleweb mailing list - which is open to the public. Please subscribe to that list
to receive the announcements if you haven’t already done it yet. You can do so by accessing this link:
<o:p></o:p></span></p>
<p class="MsoNormal"><a href="https://mailman11.u.washington.edu/mailman/listinfo/accessibleweb"><span style="font-size:12.0pt">https://mailman11.u.washington.edu/mailman/listinfo/accessibleweb</span></a><span style="font-size:12.0pt">.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:12.0pt"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:12.0pt;color:black">Thanks, and looking forward to another engaging and fruitful discussion.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:12.0pt;color:black"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:12.0pt;color:black">Hadi Rangin (he/him)<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:12.0pt;color:black">IT Accessibility Specialist<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:12.0pt;color:black">Access Technology Center/ATS/UW-IT<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:12.0pt;color:black">(206) 685-4144<o:p></o:p></span></p>
<p class="MsoNormal"><a href="mailto:hadir@uw.edu"><span style="font-size:12.0pt">hadir@uw.edu</span></a><o:p></o:p></p>
<p class="MsoNormal"><span style="font-family:"Aptos",sans-serif"><o:p> </o:p></span></p>
</div>
</body>
</html>