<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 14 (filtered medium)"><style><!--
/* Font Definitions */
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
p.htmlexample, li.htmlexample, div.htmlexample
{mso-style-name:htmlexample;
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
span.EmailStyle18
{mso-style-type:personal-reply;
font-family:"Arial","sans-serif";
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;
font-family:"Calibri","sans-serif";}
@page WordSection1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.WordSection1
{page:WordSection1;}
--></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=blue vlink=purple><div class=WordSection1><p class=MsoNormal><span style='font-family:"Arial","sans-serif";color:#1F497D'>Brian and Ken,<o:p></o:p></span></p><p class=MsoNormal><span style='font-family:"Arial","sans-serif";color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span style='font-family:"Arial","sans-serif";color:#1F497D'>Thanks for your responses. I have forwarded your suggestions and comments to the web developer. I hope to hear back from him to see how they helped.<o:p></o:p></span></p><p class=MsoNormal><span style='font-family:"Arial","sans-serif";color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><span style='font-family:"Arial","sans-serif";color:#1F497D'>Dean<o:p></o:p></span></p><p class=MsoNormal><span style='font-family:"Arial","sans-serif";color:#1F497D'><o:p> </o:p></span></p><p class=MsoNormal><b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'>From:</span></b><span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'> athen-bounces@athenpro.org [mailto:athen-bounces@athenpro.org] <b>On Behalf Of </b>Brian Richwine<br><b>Sent:</b> Monday, September 13, 2010 4:26 PM<br><b>To:</b> Access Technology Higher Education Network<br><b>Subject:</b> Re: [Athen] Safari issues with skip to content link<o:p></o:p></span></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>How is the link coded? I'm wondering about the technique used to hide the link. If CSS is being used, and a "display:none" or "visibility:hidden" rule is being applied, then the link will be treated as if it does not exist.<br><br>This is how we usually recommend coding a skip navigation link in the HTML. We place it immediately after the body element to users don't have to hunt for it:<o:p></o:p></p><p class=MsoNormal><body><br><br><div id="skipnav"><a href="#startcontent">Skip to Content.</a></div><br><br><div id="row-top"><o:p></o:p></p><div><p class=MsoNormal><br>And this is how we code the CSS to go along with it. This method allows the link to become visible when it receives focus. This enables the skip navigation link to be visible to all keyboard only users (not just screen-reader users!): <o:p></o:p></p></div><blockquote style='border:none;border-left:solid #CCCCCC 1.0pt;padding:0in 0in 0in 6.0pt;margin-left:4.8pt;margin-right:0in'><p class=htmlexample style='margin-left:3.5pt'>/* Hide skip to content link */<o:p></o:p></p><p class=htmlexample style='margin-left:3.5pt'>#skipnav a, #skipnav a:hover, #skipnav a:visited {<o:p></o:p></p><p class=htmlexample style='margin-left:3.5pt'> position: absolute;<o:p></o:p></p><p class=htmlexample style='margin-left:3.5pt'> left:-9999px;<o:p></o:p></p><p class=htmlexample style='margin-left:3.5pt'> top:auto;<o:p></o:p></p><p class=htmlexample style='margin-left:3.5pt'> width:1px;<o:p></o:p></p><p class=htmlexample style='margin-left:3.5pt'> height:1px;<o:p></o:p></p><p class=htmlexample style='margin-left:3.5pt'> overflow:hidden;<o:p></o:p></p><p class=htmlexample style='margin-left:3.5pt'> }<o:p></o:p></p><p class=htmlexample style='margin-left:3.5pt'> <o:p></o:p></p><p class=htmlexample style='margin-left:3.5pt'>/* Make skip to content link visible when focused */<o:p></o:p></p><p class=htmlexample style='margin-left:3.5pt'>#skipnav a:active, #skipnav a:focus {<o:p></o:p></p><p class=htmlexample style='margin-left:3.5pt'> position:static;<o:p></o:p></p><p class=htmlexample style='margin-left:3.5pt'> color:#000000;<o:p></o:p></p><p class=htmlexample style='margin-left:3.5pt'> width:auto;<o:p></o:p></p><p class=htmlexample style='margin-left:3.5pt'> height:auto;<o:p></o:p></p><p class=htmlexample style='margin-left:3.5pt'> outline: thin dotted black;<o:p></o:p></p><p class=htmlexample style='margin-left:3.5pt'>}<o:p></o:p></p></blockquote><p class=MsoNormal style='margin-bottom:12.0pt'><o:p> </o:p></p><div><p class=MsoNormal>On Fri, Sep 10, 2010 at 2:53 PM, Brusnighan, Dean A. <<a href="mailto:dabrus@purdue.edu">dabrus@purdue.edu</a>> wrote:<o:p></o:p></p><div><div><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'>A web developer on our campus is instituting a skip to content link to get past repetitive navigation, but is having trouble when testing with the Safari browser on both PC and Mac. He says It never gets to any in-browser tabs. It bounces from URL to browser search to web page search to search button to radio button back to URL without ever hitting the skip to content link.<o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'> <o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'>Another developer suggested setting tab index to 1, and they had already done that. Still the same result.<o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'> <o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'>Any suggestions?<o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'> <o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'>Dean<o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'> <o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'>~~~~~~~~~~~~~~~~~~~<o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'>Dean Brusnighan<o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'>Assistive Technology Specialist<o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'>Purdue University, Young Hall<o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'>155 S. Grant Street<o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'>West Lafayette, IN 47907-2108<o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'>Phone: 765-494-9082<o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'><a href="mailto:dabrus@purdue.edu" target="_blank">dabrus@purdue.edu</a><o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'>~~~~~~~~~~~~~~~~~~~<o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto'> <o:p></o:p></p></div></div><p class=MsoNormal style='margin-bottom:12.0pt'><br>_______________________________________________<br>Athen mailing list<br><a href="mailto:Athen@athenpro.org">Athen@athenpro.org</a><br><a href="http://athenpro.org/mailman/listinfo/athen_athenpro.org" target="_blank">http://athenpro.org/mailman/listinfo/athen_athenpro.org</a><o:p></o:p></p></div><p class=MsoNormal><o:p> </o:p></p></div></body></html>