<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:"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:Verdana;
panose-1:2 11 6 4 3 5 4 4 2 4;}
@font-face
{font-family:Cambria;
panose-1:2 4 5 3 5 4 6 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:#0563C1;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:#954F72;
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;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
p.msonormal0, li.msonormal0, div.msonormal0
{mso-style-name:msonormal;
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
span.EmailStyle19
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:windowtext;}
span.EmailStyle20
{mso-style-type:personal;
font-family:"Cambria",serif;
color:#1F3864;}
span.EmailStyle21
{mso-style-type:personal;
font-family:"Verdana",sans-serif;
color:windowtext;}
span.EmailStyle23
{mso-style-type:personal-reply;
font-family:"Cambria",serif;
color:#1F3864;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;}
@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:857889649;
mso-list-type:hybrid;
mso-list-template-ids:1900870426 67698703 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;}
@list l0:level1
{mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l0:level2
{mso-level-number-format:alpha-lower;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l0:level3
{mso-level-number-format:roman-lower;
mso-level-tab-stop:none;
mso-level-number-position:right;
text-indent:-9.0pt;}
@list l0:level4
{mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l0:level5
{mso-level-number-format:alpha-lower;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l0:level6
{mso-level-number-format:roman-lower;
mso-level-tab-stop:none;
mso-level-number-position:right;
text-indent:-9.0pt;}
@list l0:level7
{mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l0:level8
{mso-level-number-format:alpha-lower;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l0:level9
{mso-level-number-format:roman-lower;
mso-level-tab-stop:none;
mso-level-number-position:right;
text-indent:-9.0pt;}
@list l1
{mso-list-id:1113404839;
mso-list-template-ids:2788638;}
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="#0563C1" vlink="#954F72"><div class=WordSection1><p class=MsoNormal><span style='font-size:14.0pt;font-family:"Cambria",serif;color:#1F3864'>You can use columns, section breaks and column breaks to get the same effect and a logical reading order.<o:p></o:p></span></p><p class=MsoNormal><span style='font-size:14.0pt;font-family:"Cambria",serif;color:#1F3864'><o:p> </o:p></span></p><p class=MsoNormal><span style='font-size:14.0pt;font-family:"Cambria",serif;color:#1F3864'>I have an example that I use for my Tables and Columns tutorial that I’ve attached. The sample is also an attachment to the PDF. <o:p></o:p></span></p><p class=MsoNormal><span style='font-size:14.0pt;font-family:"Cambria",serif;color:#1F3864'><o:p> </o:p></span></p><p class=MsoNormal><span style='font-size:14.0pt;font-family:"Cambria",serif;color:#1F3864'>Cheers, Karen<o:p></o:p></span></p><p class=MsoNormal><span style='font-size:14.0pt;font-family:"Cambria",serif;color:#1F3864'><o:p> </o:p></span></p><div><div style='border:none;border-top:solid #E1E1E1 1.0pt;padding:3.0pt 0in 0in 0in'><p class=MsoNormal><b>From:</b> athen-list <athen-list-bounces@mailman12.u.washington.edu> <b>On Behalf Of </b>Joseph Sherman<br><b>Sent:</b> Friday, September 20, 2019 4:17 PM<br><b>To:</b> 'Access Technology Higher Education Network' <athen-list@u.washington.edu><br><b>Subject:</b> Re: [Athen] Keyboard focus and layout tables<o:p></o:p></p></div></div><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal><span style='font-family:"Verdana",sans-serif'>In lieu of a table, what is the best way to format instructions where it has two columns of text and the text is meant to be read across and then down? Something like:<o:p></o:p></span></p><p class=MsoNormal><span style='font-family:"Verdana",sans-serif'><o:p> </o:p></span></p><p class=MsoNormal><span style='font-family:"Verdana",sans-serif'><o:p> </o:p></span></p><table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 style='border-collapse:collapse'><tr><td width=312 valign=top style='width:233.75pt;border:solid windowtext 1.0pt;padding:0in 5.4pt 0in 5.4pt'><p class=MsoNormal><span style='font-family:"Verdana",sans-serif'>Step One<o:p></o:p></span></p></td><td width=312 valign=top style='width:233.75pt;border:solid windowtext 1.0pt;border-left:none;padding:0in 5.4pt 0in 5.4pt'><p class=MsoNormal><span style='font-family:"Verdana",sans-serif'>Do This stuff<o:p></o:p></span></p><p class=MsoNormal><span style='font-family:"Verdana",sans-serif'>here<o:p></o:p></span></p></td></tr><tr><td width=312 valign=top style='width:233.75pt;border:solid windowtext 1.0pt;border-top:none;padding:0in 5.4pt 0in 5.4pt'><p class=MsoNormal><span style='font-family:"Verdana",sans-serif'>Step Two<o:p></o:p></span></p></td><td width=312 valign=top style='width:233.75pt;border-top:none;border-left:none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;padding:0in 5.4pt 0in 5.4pt'><p class=MsoNormal><span style='font-family:"Verdana",sans-serif'>Do This stuff<o:p></o:p></span></p><p class=MsoNormal><span style='font-family:"Verdana",sans-serif'>Here<o:p></o:p></span></p><p class=MsoNormal><span style='font-family:"Verdana",sans-serif'>and this too<o:p></o:p></span></p></td></tr><tr><td width=312 valign=top style='width:233.75pt;border:solid windowtext 1.0pt;border-top:none;padding:0in 5.4pt 0in 5.4pt'><p class=MsoNormal><span style='font-family:"Verdana",sans-serif'>Step Three<o:p></o:p></span></p><p class=MsoNormal><span style='font-family:"Verdana",sans-serif'>and Four<o:p></o:p></span></p></td><td width=312 valign=top style='width:233.75pt;border-top:none;border-left:none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;padding:0in 5.4pt 0in 5.4pt'><p class=MsoNormal><span style='font-family:"Verdana",sans-serif'>Do This stuff<o:p></o:p></span></p><p class=MsoNormal><span style='font-family:"Verdana",sans-serif'>here<o:p></o:p></span></p></td></tr></table><p class=MsoNormal><span style='font-family:"Verdana",sans-serif'><o:p> </o:p></span></p><p class=MsoNormal><span style='font-family:"Verdana",sans-serif'>Columns do not really work since it is meant to read across and then down. Perhaps you could use column breaks and section breaks for each step? That seems like a lot of code, and I am not sure it would work.<o:p></o:p></span></p><p class=MsoNormal><span style='font-family:"Verdana",sans-serif'><o:p> </o:p></span></p><div><p class=MsoNormal><span style='font-family:"Verdana",sans-serif'><o:p> </o:p></span></p><p class=MsoNormal><span style='font-size:9.0pt;font-family:"Verdana",sans-serif'>Joseph<o:p></o:p></span></p></div><p class=MsoNormal><span style='font-family:"Verdana",sans-serif'><o:p> </o:p></span></p><div><div style='border:none;border-top:solid #E1E1E1 1.0pt;padding:3.0pt 0in 0in 0in'><p class=MsoNormal><b>From:</b> athen-list <<a href="mailto:athen-list-bounces@mailman12.u.washington.edu">athen-list-bounces@mailman12.u.washington.edu</a>> <b>On Behalf Of </b>Karlen Communications<br><b>Sent:</b> Wednesday, September 18, 2019 8:51 AM<br><b>To:</b> 'Access Technology Higher Education Network' <<a href="mailto:athen-list@u.washington.edu">athen-list@u.washington.edu</a>><br><b>Subject:</b> Re: [Athen] Keyboard focus and layout tables<o:p></o:p></p></div></div><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal><span style='font-size:14.0pt;font-family:"Cambria",serif;color:#1F3864'>Tables should NEVER be used for design layout.<o:p></o:p></span></p><p class=MsoNormal><span style='font-size:14.0pt;font-family:"Cambria",serif;color:#1F3864'><o:p> </o:p></span></p><p class=MsoNormal><span style='font-size:14.0pt;font-family:"Cambria",serif;color:#1F3864'>The first problem is that those of us who use screen readers have different keyboard commands for the text layer of the document and for tables. When our adaptive technology comes across a table, it thinks it is going to read data. If there are parts of the document that are normally in the text layer of the document, the screen readers often get confused. As someone who uses a screen reader, if there is a list and a paragraph in a single table cell, I can read all of the cell contents or none of the cell contents by default. If I then try to use my text layer keyboard commands to go paragraph by paragraph or list item by list item, often the first line in the cell is repeated, lines and list items are skipped over, my screen reader will go silent in protest and I am unable to read in a natural flow of content or in any meaningful manner, the content in that cell. Also, if the contents of one cell do not fit on one page, the content should not be in a table.<o:p></o:p></span></p><p class=MsoNormal><span style='font-size:14.0pt;font-family:"Cambria",serif;color:#1F3864'><o:p> </o:p></span></p><p class=MsoNormal><span style='font-size:14.0pt;font-family:"Cambria",serif;color:#1F3864'>Even people without disabilities find that tables for design layout lack one specific element…design.<o:p></o:p></span></p><p class=MsoNormal><span style='font-size:14.0pt;font-family:"Cambria",serif;color:#1F3864'><o:p> </o:p></span></p><p class=MsoNormal><span style='font-size:14.0pt;font-family:"Cambria",serif;color:#1F3864'>Often people are taught that the only way to “design” a document is to immediately put it in a table. WRONG! We need to use the tools we have in the authoring tools to create more accessible documents.<o:p></o:p></span></p><p class=MsoNormal><span style='font-size:14.0pt;font-family:"Cambria",serif;color:#1F3864'><o:p> </o:p></span></p><p class=MsoNormal><span style='font-size:14.0pt;font-family:"Cambria",serif;color:#1F3864'>The other problem with using tables for design layout is that Headings in documents are navigational points. If we “navigate” to a table cell, we have to then figure out where the actual associated content begins. For example, if there is a Heading in cell B1, does the content begin in cell C2 or B3? What is the logical reading order of the content? Is that logical reading order consistent throughout the “table/document”?<o:p></o:p></span></p><p class=MsoNormal><span style='font-size:14.0pt;font-family:"Cambria",serif;color:#1F3864'><o:p> </o:p></span></p><p class=MsoNormal><span style='font-size:14.0pt;font-family:"Cambria",serif;color:#1F3864'>Another problem with using tables for design layout happens when you have a table in the document. Do you then split, merge, delete columns to accommodate the data table or do you nest the table. Either method is confusing to someone using a screen reader or Text-to-Speech tool. Additionally, if the table is nested, the screen reader or Text-to-Speech tool can only deal with one table at a time. It can’t stand back and say “OK, this table still needs to use some of the column and row titles from the larger table so that’s what I’ll do.” The adaptive technology can only look at, deal with one table at a time so if there is any relationship between the nested table and the larger table, it is lost which again affect the ability to understand what we are reading and where we are in the document.<o:p></o:p></span></p><p class=MsoNormal><span style='font-size:14.0pt;font-family:"Cambria",serif;color:#1F3864'><o:p> </o:p></span></p><p class=MsoNormal><span style='font-size:14.0pt;font-family:"Cambria",serif;color:#1F3864'>I do have a tutorial with an example of a 68 page document that I had to remediate so anyone can try to read it with a screen reader or Text-to-Speech tool. As part of that Tables and Columns tutorial document, I also have the same document laid out without tables so that you can see the difference. <o:p></o:p></span></p><p class=MsoNormal><a href="https://urldefense.proofpoint.com/v2/url?u=https-3A__www.karlencommunications.com_adobe_TablesAndColumnsOptimizeWordDocuments.pdf&d=DwMFAg&c=mRWFL96tuqj9V0Jjj4h40ddo0XsmttALwKjAEOCyUjY&r=NS7sMOEYVINwm3e4REboGQG-NnI841o0NWYqtIwWJ4U&m=3qyGbABG_uktBcGwge7IWwObGyfBS-rT1mtBZJzxypw&s=c9gD9QJhU1i7OTYvhorRXOjbAC_pim7vL2KQnRFhN3I&e="><span style='font-size:14.0pt;font-family:"Cambria",serif'>https://www.karlencommunications.com/adobe/TablesAndColumnsOptimizeWordDocuments.pdf</span></a><span style='font-size:14.0pt;font-family:"Cambria",serif;color:#1F3864'><o:p></o:p></span></p><p class=MsoNormal><span style='font-size:14.0pt;font-family:"Cambria",serif;color:#1F3864'><o:p> </o:p></span></p><p class=MsoNormal><span style='font-size:14.0pt;font-family:"Cambria",serif;color:#1F3864'>It is an accessible PDF with the sample documents attached/under the paperclip.<o:p></o:p></span></p><p class=MsoNormal><span style='font-size:14.0pt;font-family:"Cambria",serif;color:#1F3864'><o:p> </o:p></span></p><p class=MsoNormal><span style='font-size:14.0pt;font-family:"Cambria",serif;color:#1F3864'>Tables for design layout…just say NO!<o:p></o:p></span></p><p class=MsoNormal><span style='font-size:14.0pt;font-family:"Cambria",serif;color:#1F3864'><o:p> </o:p></span></p><p class=MsoNormal><span style='font-size:14.0pt;font-family:"Cambria",serif;color:#1F3864'>Cheers, Karen <o:p></o:p></span></p><p class=MsoNormal><span style='font-size:14.0pt;font-family:"Cambria",serif;color:#1F3864'><o:p> </o:p></span></p><div><div style='border:none;border-top:solid #E1E1E1 1.0pt;padding:3.0pt 0in 0in 0in'><p class=MsoNormal><b>From:</b> athen-list <<a href="mailto:athen-list-bounces@mailman12.u.washington.edu">athen-list-bounces@mailman12.u.washington.edu</a>> <b>On Behalf Of </b>Khoa Pham<br><b>Sent:</b> Tuesday, September 17, 2019 6:22 PM<br><b>To:</b> Access Technology Higher Education Network <<a href="mailto:athen-list@u.washington.edu">athen-list@u.washington.edu</a>><br><b>Subject:</b> [Athen] Keyboard focus and layout tables<o:p></o:p></p></div></div><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Hello everyone,<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>My apologies if these questions have already been asked.<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><ol style='margin-top:0in' start=1 type=1><li class=MsoNormal style='mso-list:l0 level1 lfo3'>What are the standard or criteria for an acceptable visible keyboard focus indication?<o:p></o:p></li><li class=MsoNormal style='mso-list:l0 level1 lfo3'>Should tables be used to for page content layout such as in Canvas, word documents, and PDFs regardless of the number of table cells used?<o:p></o:p></li></ol><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>I’ve found that some keyboard focus indications are clear and very easy to see when navigating with the keyboard, while other makes me wonder if they are sufficient enough to be considered accessible. Please see the attached images for examples.<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>For table layouts, I’ve seen a few being used with a minimum of two cells to provide an image of an instructor adjacent to the cell that contains their information. Would this be acceptable?<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Thanks in advance,<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Khoa<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal><o:p> </o:p></p></div></body></html>