i want to use page break in html that means the reader cannot scroll down further until he select a link for it.
<SPAN id=title><A name=BdToc_1 external=yes><h1 id="BookTitle" align="center"><font color="#B90000"><b>Choose Subject</b></font></h1>
</A>
</SPAN>
<p>
Contents....
</p>
I want a page break before and after this. Please help me
Forgive me for pointing out the obvious, but page breaks are used to separate distinct pages. Each HTML document is a distinct "page". "select[ing] a link" traditionally loads a new page. So.... why don't you just load the next page when they click on this link?
You can specify where page breaks occur using CSS properties page-break-after, page-break-before. Of course, this works only when printing the web page. As far as I know, these properties are correctly implemented in all major browsers including IE6+. Additionally, you can also state that page break should not occur inside an element using page-break-inside.
If you want paging per se, you need to have HTML for each page and interlink these pages. Or you can fetch contents of each page using AJAX dynamically, which of course involves scripting.
It's not quite possible in HTML. You could try makeing something in Javascript, but anyone can dissable javascript.
Why would you want something like this?
You can use onscroll in javascript to control the scrolling. The onscroll event can determine the current position and there is a function to scroll up if the user is too far down.
Then, when the user clicks the link, you set a flag (scrollok=1). The onscroll checks the flag and now permits scrolling.
If you want to defeat people who have deactivated javascript, just make the content invisible until they click using stylesheets: visibility=none.
Then, when they click the link, you enable scrolling via the flag, and make the content visible.
If you don't know how to do these things, just leave a comment and I can be more precise.
Related
I know that one type of link you can have is to a place within the page, using <a href="#id_here">.
I recently came across a carrd website, where clicking any of the links appears to take you to a new page, but I believe it's actually linking to an id (after clicking a link, you can see it's /#id rather than /someaddress). But it appears like a separate page, because you can't just scroll back up like usual when you use a link to an id.
I'm wondering how this works; I haven't been able to find anything on Google.
(edit: grammar)
Go to the site, click on the Who can use item in the menu on the 'front page' and have a look at the code through your browser's dev tools (not the source, the elements).
You'll see there are several sections looking like this sort of thing:
<section id="sources-section" class="inactive" style="display: none;">
but the one you clicked looks like this:
<section id="who-section" class="active" style="">
and in that section you'll see the text you can see on the screen.
Basically what they are doing is listening for clicks, and when they get one, use Javascript to set all sections to inactive class and display none style (I don't know why they need both) and set the one clicked to active class and remove the display none.
If you use your dev tools to unset the display none/inactive in another section you'll see that section's text displayed.
They're listening for the navigation to the bookmark in JS. From there, they dynamically set the display value on the other section tags on the page. In other words, this is done with JS and isn't a normal function of the bookmarks feature. If you want to do this, you'd need to make a JS script that hides the rest of the page when you jump to a bookmark.
I am new to accessibility of web pages. I have an application where the content of the body changes based on the header link clicks in an ajax call without page refresh. So the HTML content inside the body gets updated for each link click with different page content (table + button + information text).
My requirement here is the screen reader should announce the information text each time when the page gets loaded. Here the container is body (or an immediate div inside body) for all pages. So I have made it aria-live="polite", but every time page loads it is announcing the whole page content but I want to make it announce only the information text. Other elements of the page should be announced on focus/visit. I hope I can apply aria-live="off" for all other elements but I'm looking for any ideal solution for this. I cannot change the layout of the application.
Can some one help me on this. Thanks in advance.
SPA pattern best practices
You are essentially following a Single Page Application pattern. As such the method recommended for handling navigation is actually quite straight forward with two steps.
tell a user that navigation is about to occur (before navigation)
let a user know that loading is complete (after navigation).
before navigation (link click)
You need to signal to a user that a page is loading if you are using a SPA pattern (and therefore interrupting normal navigation). e.g. I click your link, you need to let me know that an action is being performed (loading.....) as you intercept the normal browser behaviour with e.preventDefault() or equivalent.
The simplest way is to use aria-live=assertive on a region that explains the page is loading. You can Google how to implement that correctly but essentially you would update the content of a hidden div (<div aria-live="assertive" class="visually-hidden">loading</div> with some loading message the second a link is clicked.
This should be done before any AJAX calls are made.
after navigation (new content loaded)
When the new page loads you need to manage focus.
The best way to do this is to add a level 1 heading (<h1>) to each page that has tabindex="-1". By using tabindex="-1" it means that the heading won't be focusable by anything other than your JavaScript so won't interfere with the normal document flow.
Once the page loads and the content has been populated fully the last action you perform in your JavaScript navigation function is to place the focus onto this heading.
This has two benefits:
it lets the user know where they are now
it also lets them know when the page load is complete (as AJAX navigation doesn't announce when the page is loaded in most screen readers).
At this point you may also want to clear the <div aria-live="assertive"> contents so that it is ready for further navigation.
Have you tried to wrap the "live zones" - where updates happen in div with aria-live="polite". Then screen reader will announces only these zones on updates.Don't wrap whole page or div in aria-live="polite".
<div aria-live="polite">
<p id="errorText">Announced on update</p>
</div>
<div>
other page sections..
</div>
I'm curious what's the proper way to push the screen read to read <span>read me on load</span> first (it's in the middle of the html page) when the page is loaded?
Even
role="rude"
doesn't help for some reason.
Thank you.
What you are using is not part of ARIA live regions. You want either role=alert or aria-live=assertive (though in an early draft "assertive" was originally "rude").
Now, that being said, live regions are intended for use on an already-loaded page. If you are making a dialog, then your HTML might look like this:
<div role="alert" aria-live="assertive">
Anything in here will be announced as soon as it changes.
</div>
If you want the dialog to be announced at page load, then consider hiding its contents and then using script to display its contents once the page has finished loading.
If you need to make it announce as soon as the page loads and it is not a dialog, consider moving focus to the element at page load using script. By placing focus, the browser will announce whatever it is.
For this to work, however, you cannot just place focus on a <span> as it is not interactive content. You can make it interactive by adding a tabindex attribute. If you do that, then you will need to add a role describing what the element does (you can use role=region if you are stuck) so that the screen reader can announce what it is instead making the user think she has landed on a control or otherwise expect to be able to take an action.
If you are moving focus to the element for users without screen readers, or if the very first thing the page displays at page load is an alert of some sort, then this should be fine.
However, since you have provided no context and no examples, and given all the ways this can be done that are far worse than doing nothing, please ask yourself this:
Is the thing you want to announce…
…an alert or dialog?
…a control that already can receive keyboard focus?
…going to be given focus for all users, not just those with screen readers?
If you end up saying no twice then you should not do this.
If you can provide an example URL that shows what you want to do, then I am happy to help you get it working. Otherwise I fear you may be coding something that ends up creating a trap or barrier for screen reader users.
Currently trying to make a section of a site more readable to screen readers (Jaws, MacVoice over, ect). One of the buttons on the page generates a popup that in turn the user will need to be notified of, the problem is this popup is generated at the bottom of the DOM meaning that the user would have to navigate to the bottom of the dom (tabbing through) in order to even know the page is there. Does anyone know a possible way around this?
You can try removing it from the generated place with javascript and append it to a more convienant/logic place for the user. The code should be something like:
$('#amoreconvenientplaceforthebuttonID').append($('#mybuttonID'));
$('#mybuttonID').remove();
Is there a way to make it so the page doesn't shoot to the top of the site when clicking different links in the navigation bar?
e. So say I'm browsing my site and I'm scrolled down a little bit. Then I click on a link that navigates to a different page on my site. It automatically scrolls to the top. Is there a way to make it not do that.
instead of simply linking to a page, you could link to an anchor on that page using
link text
if that anchor is placed properly on the target page, you will not experience the jump back to top every time you link to another page. hope this helps
If this is the problem I'm picturing:
Change your links to point to <a href="#"> or <href="javascript:void(0);">
If you're going to different pages, you can use a link like:
My Link
Down in the page:
<div id="Section5">
Stuff!
</div>
This is the way that the web works. But still you can do a few work a rounds but each one will take a little work.
First option:
When you click on any link on the page, get the margin of the link from the top, then add it as a parameter to this link, and only then do the navigation. (the format of the line will be like page.html#margin-from-top).
Then in the new loaded page, you can look for this value and do the scroll. (I prefer the scrolling with a little duration).
Second option:
Another idea is to stay always on the same page and only change the content of it. you can do that with a little effects too.
It seems, too, like you might want to use a mooTools ScrollTo affect or possibly even invoke an AJAX method like SWFAddress.
Depending on exactly what you're trying to do, you may be able to accomplish it without using any fancy javascript, but it will depend on the inclusion of labels/etc. on your target page (as has been mentioned before).