Jump to content


Photo

Trouble with "Skip to Main Content"

responsive accessibility html

  • Please log in to reply
12 replies to this topic

#1 ve3oat

ve3oat

    Forum Newcomer

  • Members
  • Pip
  • 31 posts
  • Gender:Male
  • Location:eastern Canada
  • Experience:Beginner
  • Area of Expertise:I'm Learning

Posted 12 July 2017 - 03:02 AM

Trying to make my website (ve3oat.ca) more responsive, I include the usual "skip to main content" link near the top of each of my pages.  However, when tested with the tool at varvy.com, my pages always fail due to "No 'skip to main content' link". 

 

I use

<a href="#content">&nbsp; &nbsp;Skip to main content</a>

in the header, and

<div class="content" id="content"> 

as the target below the header and the top-navigation bar. 

 

It works in Firefox and MS-IE, but always fails the Varvy test.  Could someone please tell me something simple in html (I don't use Java any other scripts on my site) that will both work for users of screen readers and that will pass the Varvy test??  Thanks. 

 



#2 ve3oat

ve3oat

    Forum Newcomer

  • Members
  • Pip
  • 31 posts
  • Gender:Male
  • Location:eastern Canada
  • Experience:Beginner
  • Area of Expertise:I'm Learning

Posted 12 July 2017 - 07:03 AM

Sorry, realized too late that I should have posted to the CSS, XHTML/HTML area.  Perhaps a moderator would like to move my query ...

 


#3 BrowserBugs

BrowserBugs

    Unhinged

  • Privileged
  • PipPipPipPipPip
  • 2,105 posts
  • Gender:Male
  • Location:Surrey, UK
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 12 July 2017 - 09:50 AM

Ahoy. Sounds like you want to look into tabindex, see https://developer.mo...ibutes/tabindex.

<header>
<a href="#content" tabindex="0">Skip to Main Content</a>
<nav>
<ul>
<li><a href="/page1">Page One</a></li>
<li><a href="/page2">Page Two</a></li>
</ul>
</nav>
</header>
<main id="content" tabindex="-1">
<h1>Main Section</h1>
</main>


#4 ve3oat

ve3oat

    Forum Newcomer

  • Members
  • Pip
  • 31 posts
  • Gender:Male
  • Location:eastern Canada
  • Experience:Beginner
  • Area of Expertise:I'm Learning

Posted 12 July 2017 - 06:59 PM

Thanks, BrowserBugs, but adding tabindex values didn't solve the Varvy test failure problem.  There must be something else. 

 

I like your idea of putting the <nav> section inside the <header>, though.  Not sure why I didn't do that in the beginning.  Might make some of my CSS easier down the road. 



#5 BrowserBugs

BrowserBugs

    Unhinged

  • Privileged
  • PipPipPipPipPip
  • 2,105 posts
  • Gender:Male
  • Location:Surrey, UK
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 13 July 2017 - 08:15 AM

Thanks, BrowserBugs, but adding tabindex values didn't solve the Varvy test failure problem.  There must be something else.

 

No idea then matey, not really sure what their criteria is. I don't normally use Varvy, I did spot they have under accessibility criteria "No empty alt links" which is a bit confusing as alt is not a link and images without completed alt attributes are ok if they serve no purpose.

 

Wikipedia: "Every image should have an alt attribute to be accessible, but it need not contain text. It can be an empty or null attribute."

Myth 4. Every Image Needs Alt Attributes: "Many images do not need alternative attributes. If your site uses spacer, line, bullet and other purely design-oriented images, do not use alt attributes in those image tags."



#6 david19922

david19922

    Forum Newcomer

  • Members
  • Pip
  • 7 posts

Posted 13 July 2017 - 09:51 AM

.skip {
position: absolute;
top: -1000px;
left: -1000px;
height: 1px;
width: 1px;
text-align: left;
overflow: hidden;
}

a.skip:active,
a.skip:focus,
a.skip:hover {
left: 0;
top: 0;
width: auto;
height: auto;
overflow: visible;
}



#7 BrowserBugs

BrowserBugs

    Unhinged

  • Privileged
  • PipPipPipPipPip
  • 2,105 posts
  • Gender:Male
  • Location:Surrey, UK
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 13 July 2017 - 04:36 PM

.skip {
position: absolute;
top: -1000px;
left: -1000px;
height: 1px;
width: 1px;
text-align: left;
overflow: hidden;
}

a.skip:active,
a.skip:focus,
a.skip:hover {
left: 0;
top: 0;
width: auto;
height: auto;
overflow: visible;
}

 

That would work, but so would my option, I think the OP just wants to know why it doesn't pass the Varvy test rather than how to make a skip link. 



#8 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,511 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 14 July 2017 - 06:03 AM

On the other hand - the varvy.com results aren't that useful. It's supposed to be an SEO tool but it most of the advice has nothing to do with SEO.

 

If you want to pass the test you need to make the link visible. But as it's a hobby site I wouldn't bother to add the link. Google doesn't care if you have it or not and your site has very little code before the main content so its value is negligible.



#9 ve3oat

ve3oat

    Forum Newcomer

  • Members
  • Pip
  • 31 posts
  • Gender:Male
  • Location:eastern Canada
  • Experience:Beginner
  • Area of Expertise:I'm Learning

Posted 14 July 2017 - 08:37 AM

Well, visibility may be one of Varvy's criteria but I have tried several different scheme's, some visible and some not, and all of them failed Varvy's test.  The last one I tried was the suggestion by David19922, both as he quoted and as modified to make the link visible again -- neither passed. 

 

All of the visible methods I have tried worked for me -- click the link and the screen jumps down past the header and navigation bar.  None passed the Varvy test.  Is there some special CSS code that is needed to enable a screen reader? 

 

I have not tried any method that uses Java.  So far I have avoided using any script at all on the site, except for some PHP to run the e-mail "contact me" function, and I would like to keep it that way. 

 

Web Guru is right that mine is only a hobby site and my economic well-being doesn't depend on it.  Still, it would be nice to get a good rating by Varvy.  Are you sure that Google doesn't count it?  I used to receive a lot of questions about my family history DNA projects and radio frequency measurement activities.  Not so many lately. 

 

At the moment I am stumped.  Please feel free to play with my html and CSS.  (I apologize that some of it is not very elegant.) 



#10 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,511 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 14 July 2017 - 12:09 PM

Are you sure that Google doesn't count it? 

Yes.

 

Most of the varvy stuff has nothing to do with SEO. They have mixed accessibility with SEO with old out of date concepts.

 

If you really want to see what Google thinks of the site try this: https://developers.g...espeed/insights

 

You score 44/100 on mobile and 54/100 on desktop.



#11 ve3oat

ve3oat

    Forum Newcomer

  • Members
  • Pip
  • 31 posts
  • Gender:Male
  • Location:eastern Canada
  • Experience:Beginner
  • Area of Expertise:I'm Learning

Posted 14 July 2017 - 02:39 PM

Thanks, fisicx, very helpful.  (Sorry for the missed name.)  What you say about varvy.com would explain why so many apparently very successful sites fail so many parts of the Varvy test when I try them. 

 

The Google PageSpeed site seems busy right now so I couldn't try it myself, but their scores you quote for my site do seem low.  In your experience, what kind of numbers should I be shooting for? 



#12 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,511 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 14 July 2017 - 02:59 PM

Yours is a very simple site so a score in the 90s is easily achievable

 

Also try these tools:

https://tools.pingdom.com/

https://gtmetrix.com/



#13 ve3oat

ve3oat

    Forum Newcomer

  • Members
  • Pip
  • 31 posts
  • Gender:Male
  • Location:eastern Canada
  • Experience:Beginner
  • Area of Expertise:I'm Learning

Posted 15 July 2017 - 08:28 PM

Thanks for those links, fisicx. 

 

When the servers at my hosting service are behaving themselves (not all of the time, it appears), my pages load very quickly so page speed does not seem to be a problem, normally.  As you observed, my site is simple.  So it meets most, though not all, of the other criteria for accessibility and mobile-friendliness, and I am not too worried.  I will keep looking for ways to improve it. 

 

As fisicx has suggested, the test at varvy.com does not seem all that credible anymore. 

 

I have adopted a simple "skip to main content" solution and am now looking to test it on an actual screen reader.  I think that will be the proof of the pudding, regardless of what Varvy says. 

 

Thanks to fisicx, BrowserBugs, and david19922 for your ideas and help with this -- very enlightening!  This has been a learning experience for me from the start, for sure.  Thanks again. 







1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users