I have web page where backend polling call happens and update the content continuously for 2 minutes. As content on page updates screen reader finding the content as new and it is reading out but by the time it reads all previously updated content it is not getting enough to read the actual content and it is getting missed out. Is there any way can I use some aria attributes to Minimize it.
You might want to use a Live Region
This is practically adding ARIA attributes to the element that will contain your updating content.
<div role="region" aria-live="polite">
Related
I'm having a tough nut to crack here.
I have the following situation:
- in an iFrame (no way around it) I'm loading an external website/application.
- This iFrame is on one page and one page only.
- Whenever you visit the iFrame page the first time a certain load time is needed for the applicaton (about 5seconds on average).
- In the application you can change the view and parameters etc.
- When you leave that page and go to another, and return later on to the iFrame page the requirement is that there is no load, and the content of the iFrame is as you have left it earlier.
I know this can be done by using frames (which are so 90's) but I really don't want to do that. There has to be a more modern way of doing it.
Just to note, the website around the iFrame is using Sitecore, so this might be a limiting factor in some solutions.
The things I have thought of:
- use 2 frames, one for the header with navigation, and another for the content. In that way the iframe never has to reload and we have moved back in time... :(
- ever click is an Ajax call, the iFrame is in a div that is hidden until the right button is clicked.
And then I found something called BigPipe. I haven't found an ASP.NET implementation yet, but I was hoping someone already had some experience with this.
Anyone any better ideas?
Thx
If your iFrame is a control on a Sitecore sublayout or rendering (or can be moved to a rendering/sublyaout), you can check off the Cacheable option on the sublayout and set it to vary by content or device or whatever depending on what it is. Then you will have the content of that frame in Sitecore's cache, which is managed by Sitecore and it'll always render the cached version whenever possible and should basically solve your dilemma.
We're building a site for an academic institution. This institution offers many subjects, and we don't want to show all of them at once on the homepage. So we designed a homepage that shows the 2 main categories of studies, and clicking on a category will show a div with the list of subjects in that category.
Our client is worried SEO-wise about those div's being hidden on page-load. Is he correct in his concern?
It depends on how you hide them if you use a z-order or a far left off screen position they will still be read by the Google bot. if you use display none or hidden then it may have an effect on your SEO.
You're right to have concern. Google will count some of or significantly reduce content that isn't displayed on page load. I would recommend letting the text display at load, then setting it to display none via JavaScript. This way the search engine picks it up.
You can do so with a simple jQuery hide snippet like this:
<p class="remove">Text displayed on load.</p>
$j(document).ready(function(){
$('.remove').hide();
});
I read an article by Roger Johansson on this subject, and it seems that the conclusion is that as long as the intent isn't to show that content only to search engines, hiding is fine. I don't see any mention of preferring one method of hiding over the other.
In addition, in that post's comments there was a link to an answer by a Google worker that said:
Merely using display:none will not automatically trigger a penalty. The key is whether or not there is a mechanism - either automatic or one that is invoked by the user - to make the content visible
In my case of course there will be such a mechanism, because we want our users to see that content, just not at page-load...
I am building a portfolio page, which contains quite anumber of images. I am pulling the image url's from a database, and creating thumbnails from the original source, and the dispaying the thumbnails. When clicked on, displaying the original full size pic.
Loading times are obviuosly affected and the site take some time before displaying anything...
I have tried putting all this in Ajax, but it seems ajax is only reqally effective if the site has initially loaded. As it is now, the site "hangs" while it waits for the on form laod work to be done.
Any ideas on putting a "please wait while iamges laod" section into the container where the iamges will eb displayed?
Thanks in advance.
Typically you create an HTTP handler that your page sends the image IDs to, something like
<img src="image-handler.ashx?id=SOME_ID" alt="..." />
The key to performance here is that you can then cache the images from this handler. You can save the generated thumbnails to disk and check for existence, and if then use something like Response.TransferFile() to send the file (or actually create the thumbnail files on creation of images, not loading them), or even better, apply output caching on the handler, with vary by param to the id key.
For the full images also you can use the same techniques. You can also in addition have some hidden images you keep setting their URLs by AJAX before clicking thumbnails, so, they are ready when a thumbnail is clicked and a full image needs to be displayed.
Those are just high level thoughts as per the amount of detail I get from the question.
Not sure if this is a really obvious question or not, but I need to have an embedded music player continue playing while the user views the rest of the website (clicking links to view different pages, etc.). So basically splitting the page into different segments, that load seperately. Years ago I would have done this with the HTML frames but that's obviously not such a hot idea anymore.
Hopefully this makes sense, and thanks in advances for all responses.
Let's resolve the ambiguity in our use of the word 'frame'. While it is true that the <frame> tag will be discontinued in future versions of HTML, the <iframe> tag will continue to be supported, and it makes for an ideal solution to your problem. Your whole website will consist of two major elements in the body:
The music player, and
A nice big <iframe> to hold the navigable portion of your website.
This will allow the music player to play continuously while all the navigation occurs in a separate frame, effectively keeping the music player 'static', and the rest of the page dynamic. Best of all, once browsers begin to support HTML 5, you will be able to use the new seamless attribute to help integrate the frame into the look of your page. Until then, you will need to manually remove the border and scrollbars, to stay consistent across all browsers. You can achieve this with the following:
<iframe src="navigable_page.html"
frameborder="0"
scrolling="no"
marginwidth="0"
marginheight="0"
vspace="0"
hspace="0">
</iframe>
Remember to set the height using CSS. With this approach, you also have a lot of flexibility in your layout, and you don't have to redesign anything if you don't want to. Options include having the frame take up the whole webpage, with the music player in front of everything else, draggable, resizable, etc. Web designers would wonder how you created a music player that is independent of the rest of the changing content. You could also have a table that occupies the whole page, with two rows. The top row could have the music player, and the bottom row could contain the frame with height set to 100%. Use frames, as in iframes, and you won't be disappointed.
You'll have to use javascript to load each section upon user request if you don't want to use a frame. Use something like the jQuery library to make it easy on yourself, you can set it up so that all requests update certain containing DIVs based upon what was clicked.
The "hot" idea of today is to make everything become AJAX. All the navigation and stuff. It's technically thought of a bad thing but is used for the usage you describe in some big sites, namely Facebook (for chat, very similar to your case) and Twitter (for header and updates).
You'd give each page a URL like mysite.com/#some-folder/some-page/someQueryKey/someValue
Note that it is "#/" because all the pages will be only ajax calls in the same page.
Since it is the same page, you can leave the part you want unchanged when doing your AJAX transfers
For technical details on how to implement this, search for stuff about implementing hash bang AJAX (that's what it's called as the official format Google can index is called so, and the URLs usually an exclamation mark after hash sign "#!/".
It's not the easiest to implement though, and means re-design of the whole site, so, you may want to consider other options:
Pop-ups: They are not 100% dead yet, and "may" be suitable for your situation.
Reloading: Maybe just store in some cookie every short time (using JS) the data you want and check for it on page load to resume from where you ended, the user will get slight stop in between though. hence, It may not be for music player.
For the UI of the widget itself, if you need it to be in a certain place in the page regardless of the scroll or whatever (always visible) you can use CSS positioning:
.music-player
{
position:fixed;
bottom:5px;
right:5px;
}
I would like to know at which stage is it okay to start manipulating HTML elements/content using Javascript so as not to impair SEO?
I have read somewhere that HTML content that is hidden using the CSS property display:none is often penalized by Google crawlers, with good reason from what I'm led to believe...I ask this as I intend to have some div panels that are initially hidden, but shown once the user clicks on an appropriate link. My intention is therefore not to hide content from users entirely - just intially to give them a better user experience - I'm afraid Google may not see it that way!
My reason for doing this is to prevent the split second (or in some cases, a full 2 seconds) of ghastly unstyled html elements (positioning), before my Javascript comes in to position, hide and neaten everything up. So adding the display:none at the forefront, and then using Javascript to toggle visibility would have been ideal, but is apparently a no-no with Google Search Engine bot.
Do you experts have any advice? Thank you!
google can now crawl AJAX sites using a simple URL substitution trick; you might be able to take advantage of this to let googlebot see a plain html version of the page for indexing instead of your load-optimized page; see http://code.google.com/web/ajaxcrawling/docs/getting-started.html
If the content in question exists on the page in the html, and is accessible to the user by the time the page finishes loading initially, then you are okay. You want to make sure google can lead a user to your page and see the content in question without requiring further interaction. Adding new content to the html after the initial load (i.e. content from the server), can be problematic for SEO. However if all content is in the html by the end of the page load, then you shouldn't get docked. Keep in mind, good SEO strategy dictates using standard methods of usability so the web crawler can access your content.
Also, each page should follow a content theme. Example: Don't abuse users by hiding five different unrelated blocks of content "medical devices, kazoos, best diners, motorcycles, toxic waste" on one page. Theoretically you could take all of your site's content and lay it out on one page using javascript and 'display:none' waiting for an 'onClick', but that smells like spam.
EDIT, additional info as pertaining to the original question:
The search engine friendly way to display content dynamically is to load it, then hide it from the user.