Jump to content
Sign in to follow this  
tandan

skip navigation

Recommended Posts

tandan

hi there, i found a way to easily embed skip navigation--or so i thought...but it keeps kicking me back to the home page. does any one out there have any out of the box ideas on how to make this work? i put this in each post/page using html view: and then for the menu tab i used: http://www.sitename.com/#maincontent the site i am trying to implement this on is: cabvi.mpwclient.com thanks! tan

Share this post


Link to post
Share on other sites
tandan

ok, so i've actually made some progress here and done this instead you can view it at: http://cabvi.mpwclient.com/ i created a content box above brand navigation. under the content box meta I added content box class: skip and then in the content box content, I added:

[/code]

	
	then i added this CSS to hide the text but it didn't work:
	
[code]#skip a {position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;} #skip a:focus {position:static; width:auto; height:auto;}

Does anyone have any trick on how to hide the text for this so that screen readers will read it but sighted users won't? display:none will not work because that also removes it from screen readers.... thanks for any advice!! tan

Share this post


Link to post
Share on other sites
catrina

Are you using a plugin that allows only certain readers to view certain content on your site or are you referring to users who are logged into your WordPress site?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
tandan

hi catrina, i am not using a plugin and the users don't have to be logged in at all. the skip navigation would just be used by screen readers (it reads the link that is still present though not viewable) since it's placed "off screen". if i use display: none it will not be read by screen readers either. more on that here under "Links that become visible with keyboard focus": http://webaim.org/techniques/skipnav/#focus that's what i tried to achieve using my code...but i may be doing something wrong? i know you're the CSS master so hope you have some ideas for me! :)

Share this post


Link to post
Share on other sites
tandan

hi catrina, what do you think if i just make the text white so it's "invisible." could you help me out with the code? i have problem with selectors even when i'm using firebug... :(

Share this post


Link to post
Share on other sites
Jenny

display:none; renders things invisible. You can also try text-indent instead of left.


Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
tandan

hi simple mama! i can't use display:none because it will also make it invisible to screen readers... in any case, i don't think i'm using the right selectors...can you help with that? it's not affecting the target area regardless of what i put in there... i've used (with your text-indent change suggestion):

#skip a #skip a:hover, #skip a:visited {position:absolute; text-indent:-10000px; top:auto; width:1px; height:1px; overflow:hidden;}
	#skip a:active, #skip a:focus {position:static; width:auto; height:auto;}
	

the site is http://cabvi.mpwclient.com and it's the "Skip to Main Content" in the upper left hand corner... i've tried firebug but it's just not that easy to find... thanks so much!! tan

Share this post


Link to post
Share on other sites
Jenny

You're missing a comma in

#skip a #skip a:hover
You also have your selectors in the wrong order. CSS a reference order DOES matter and will not work if they're not in the right order. The order is
a (or a:link)
	a:visited
	a:hover
	a:active


Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
tandan

hi simple mama! thanks for your advice! Is this what you mean?

#skip a, #skip a:visited, #skip a:hover {position:absolute; text-indent:-10000px; top:auto; width:1px; height:1px; overflow:hidden;}
	#skip a:active, #skip a:focus {position:static; width:auto; height:auto;}

i used that and it still didn't work. it's still appearing... thanks so much!

Share this post


Link to post
Share on other sites
Rob

Tan, Essentially, I believe this requires a set of conditionals that would show/display the link under certain circumstances, but not in others. Even if it were hidden only on a visibility level (like changing the text to white), it's still a conditional event. That's something I believe one of our Pros would be better helping you with than any of our team here in the forums. I'd suggest you visit: http://www.pagelines.com/pros/ and select one or more and request a quote. It's best to write clear specifications for your project. I'm confident one of them will give you a fair and reasonable quote.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
tandan

hi rangelone, i'm not exactly sure why this would require a pro. if the text were white i think that it would be fine to be there all the time. it doesn't have any condition. i used FB and i got the text to be white but when i put it in the CSS it didn't work. any help would be appreciated. thanks! tan

Share this post


Link to post
Share on other sites
Rob

Tan, You wrote "Does anyone have any trick on how to hide the text for this so that screen readers will read it but sighted users won't?" That's a conditional in which the constant is the screen reader, but the sited visitors don't. But I see your point about simply hiding it with white text. I'm not sure doing that will work as I believe other WordPress code may force any link to show up in the color predefined for links. I've tried changing link colors before on an individual basis and had no luck with it. However, if I may say, your site looks fantastic with the link at the top, and it's very professionally done. Personally, I don't know of any reason to hide such excellent work.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
tandan

Hi Rangelone, I ran it by the client and they're happy with that for now so I guess the workaround was good! Thanks for your help!

Share this post


Link to post
Share on other sites
gayatriom

For anyone who is still trying to find the answer to this. I had to remove a .main_nav ul li{text-align:right;} THEN the text-indent worked. Hope this helps someone out.

Share this post


Link to post
Share on other sites
gayatriom

Well I had to assign it something so I assigned text-align:left and it worked!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×