are multi-level CSS drop-down menus a big 'no-no' for SEO purposes.
i've read mixed reviews. some say the links in the secondary navigation will not be crawled by search-engine spiders (because they're hidden) while the other say it is part of the HTML, so the spider will 'see' it.
any thoughts? thanks
As long as Google doesn't publish their indexing methods, we will never know for sure. But I very much doubt spiders will ignore links because they are in hidden elements. Text and keywords, yes. But links? No. In my experience, all bots are greedy to index as much of the internet as they can.
If you want to make really sure, consider having a second menu that is never hidden, and that shows the current page's "neighbor" links. Maybe have all the links of the current category as small links in the footer. That way, you can be sure every link will be visible on some page that is reachable from a level-1 link from another page.
Actually, I think I have seen sites doing that even though they had drop-down menus. Maybe that's the reason.
Depending on the number of links on your page, from what I understand you can be penalized if there are too many. With that in mind, how many are in the content, sidebar, etc. They add up fast - I don't use drop down because I did a test group and a large majority do not like sites with drop down menus.
IMHO will be seen. The search engines can not run all the javascript to figure out whether something MAY become visible during normal operations.
I've made sites using a drop down menu and they got spidered perfectly fine. As long as the links are in the HTML output (e.g. as an ordinary list) then the links will be seen.
Related
Above you se a typical breadcrumb.
Sometimes there are to many steps in that breadcrumb, so we have to shorten it by replacing some of the steps in the middle and display three dots instead
When a user clicks on the three dots, the entire breadcrumb is visible.
How would you handle the accessibility issues here?
We would like to show all the steps to our screen reader users so those users can tab trough the entire breadcrumb whiteout ever knowing about those dots.
All other users will only be able to see those tree dots.
We can accomplish this in a few ways:
Use display:none but this will hide the hidden content for all users, including screen readers
We can use the class.sr-only (since we're using Bootstrap) or something similar on those hidden links so only users with screen readers will se the hidden parts of the breadcrumb. This will work, but it will remove the hidden parts breadcrumbs from the tab order.
We can stick to #2 above and add taborder="0" to those hidden links in the breadcrumb, but then we also have to add taborder="0" to every single interaktive element on the entire site and that is NOT an option. :-)
Are there any other ways to include the hidden links in the tab order?
(Sure, one can discuss the UX aspect of abbreviating a breadcrumb, but that's perhaps another topic.)
(Sure, one can discuss the UX aspect of abbreviating a breadcrumb another topic.)
This is perfectly the topic.
Blind person are normal people who like simple things. If you think your breadcrumb is too long, give them the same functionalities :
<button aria-label="view full breadcrumb">...</button>
Breadcrumbs have not been invented for blind people. They are part of one technique in a WCAG AAA guideline which implies that : it's not mandatory, and that it concerns everybody.
If you include hidden links in the tab and speech order, you are sure that your website won't be accessible.
A near-blind person using a screenreader in support of his eyes won't be able to view a link on the screen while it's announced by the screenreader.
A person using a keyboard only system will focus an invisible link which will remove the predictability of the focus order.
Note that for 2/ and 3/ the sr-only does not remove the elements from the tabindex, so this will work as you would expect
It seems to be a well-worn truth in Captivate (I'm using v5) that no clickboxes or links are allowed on master pages, and that the only solution is to put them on each page.
I have 6 files with a total of 200 or more pages - I don't want to be pasting links laboriously to every page.
Is there a more efficient way to do that, a way around the "no clickboxes or links allowed on master pages" problem?
Answer available here:
http://forums.adobe.com/message/4078176#4078176
I don't this will work for click-boxes (at least not if you need to pause to give the user a chance to click them). But for links and for graphical elements, and for most any other sort of element, you simply add it to the first slide upon which it should appear, right-click it, and choose "display for rest of project."
I've just created a tshirt shop to put on my own website. A company called spreadshirt.co.uk (hereafter "SS") runs the shop. They allow me to embed their shop on my site via an iframe, and since they allow the CSS to be fully customisable through their admin panel I've got it looking pretty neatly integrated with my site.
The only catch is the iframe - I've set it to 2000 pixels high at the moment (just right for the longest pages). I'd rather have it resize for each page, but expect that to be "hard" so didn't bother.
Anyway, I've just put the page live, and put a test order through it. All is good, until....
...the "Verified by VISA" page. This motherhubbard turns up right at the end of the order process, and the HTML contained in it puts the little dialogue centred vertically in my iframe. I.e. nearly 1000 pixels down from the top - making less savy users think the page hasn't loaded (all they can see without scrolling down is a white background). I can't customise the CSS on this page like I can the SS pages, as this page isn't served up by SS.
Any clever ideas???
Many thanks people!
I'll put a link to my site if people want to see it, but assumed that might be seen as spammy and frowned upon.
I don't deal with iframes too much as i hate them, but i think you can still write to that document using javascript. Reason i say maybe is because its cross domain, but it should still work.
Check this post out
Resizing an iframe based on content
You could also check out
Resizing iframe to fit its content
and a jquery script:
http://www.lost-in-code.com/programming/jquery-auto-iframe-height/
Again, I really don't know if this will work on a cross-domain website.
OK that's the worst title I could ever possibly think up. But I'm not too sure how to phrase it!
What I mean is, is it inefficient for the browser, search engine optimisation, or any other important factors, if programmatically my float:righted sidebar appears in the markup before the main content div, which is set to float:left?
To the user, the main content appears on the left, and the sidebar on the right. In the source code it appears like so:
<div id="sidebar">This is where my sidebar goes </div>
<div id="content">This is where my content goes </div>
Will this affect SEO or other factors in my page?
Yes, put your content first.
WordPress has a nice discussion about content structure and SEO. You want to put content as close to the beginning of the served HTML file as possible. Robots and screen readers will get to what they want earlier, and I'd guess that the browser would start rendering content according to its place in the served file as well. CSS makes positioning things out of order more or less trivial, so why not give the HTML content all the help it can get?
You really can't say... but I suppose it won't since bots like Google's web crawler follow links and not text... but it might effect the SEO of images, since those are indexed by "surrounding content".
However, it is really the Right Thing to do, since people on "restricted devices"(really old cell phones) and people using screen readers will see your content in the correct order.
Search engines nowadays are smart enough to distinguish between a navigation and the main content. You can help by adding meaningful class names or ids. I’ve never seen any real impact on ranking by the order of both sections.
Whatever you do: add a skip link for keyboard users to jump to the other section. It should be visible on :focus. And hide the navigation in your print stylesheet. :)
I am developing a public website which is the front end to information about medical conditions.
After the user does a search (questionnaire based) they are presented with the results which are categorised in to sections and sub-sections.
Information items can be assigned to both sections and sub-sections.
At the moment sections are represented by tabs across the top and the screen and sub-sections by links in a sidebar. The links in the sidebar change depending on which section is selected.
The problem is the section names are quite long (several words) and as a result the combined length of the tabs is too wide for a standard screen resolution (1024 x 768). Therefore they wrap and break the page layout. We will also have to add additional tabs in the future.
With this problem in mind and the fact our target audience is quite wide, this is a public medical website, what options are there for presenting this kind of information in a way which is accessible and easy to navigate for an average user.
How long are the subsection names? Will they fit in the space for tabs? You’re likely to get better user performance if you put the section links on the side bar menu and the subsection links in the tabs, rather than the other way around. See http://www.usability.gov/pubs/040106news.html.
The other alternative is to put everything on the side bar menu. Subsection links can appear indented under their section links. You can also consider putting the subsection links in a column of their own to the right of the section column. This makes the section menu stable, but takes a lot of horizontal space that’s perhaps better used for content. In either case, proper attention to visual design will show the current section, subsection, and the link between them.
There shouldn’t be a problem with accessibility as long as you’re using links to navigate to each section/subsection (perhaps generated programmatically for each page based on a database relating links to pages).
Just brainstorming some ideas:
Use combo boxes to allow the user to select the (sub)sections, then display the appropriate information items.
Create separate pages for each section-level and provide a bread-crumb control to show the user where he / she is in the page hierarchy.
Create some sort of fold-out menus that automatically hide when the user reads an information item.
In another question on SO, I came across a link to Quince, perhaps you can find some inspiration there as well.
You could try:
An iPod-style menu (in which subsections are hidden pages that fly in from the right): http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/
Or as Daan has said:
Cascading drop-down boxes: http://www.asp.net/AJAX/AjaxControlToolkit/Samples/CascadingDropDown/CascadingDropDown.aspx
The downside with both of these (over a traditional tree view) is that the subsections aren't visible until you choose a section. If your users don't know the name of the subsection they're after, then either of these will be a good fit.
If, on the other hand, they do know the name of the subsection they're after, it's probably better to give them an auto-complete textbox so they can type a few characters and go directly to it.