I have an iframe on a landing page and I want to break the frame upon the viewers submit. When the viewer goes to the second page the frame cuts the image on the page is there a way to break, if I don't control the iframed page submit button. Could i frame my own button over the existing and have it scripted to "push" both buttons one to break the frame and the other to carry to the second page? I would prefer to have script to break on submit but how would the page know when the button is pushed?
Unless you control both the framed page and the page that contains the frame, and they're both within the same domain, you're probably not going to be able to do this.
Related
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>
When a link is clicked and the browser redirects to another page the highlighting is maintained when revisiting the original page. This allows the user to know which links she has clicked even after they have left the page. Is it possible to apply this same functionality to a button?
I embedded a <iframe> in the middle of my web page. However, there is a input field in that <iframe>, and every time I open the page it will automatically scroll/jump to that input field, which is at the middle of the page. That is annoying. Is there a way to fix this?
Inside of a page, there are 2 iframe buttons (external, not from the same origin as my site) next to each other that grab the focus when a keyboard user focusses to them.
I need to style them (for accessibility reasons) when the user is focussed on them. Since iframes grab the focus, the page has no control over the focus styles inside the iframes so i have made custom borders to go around the iframe when the main window loses focus. [The first iframe has an indicator, yay!]
BUT I realized when you are tabbing BETWEEN the 2 iframes (from the first to the second), the browser cannot detect that action. It is as if it skips form one iframe to the next without notifying the main window of anything. Therefore, I can never style the next iframe and unstyle the first...
I have tried everything even down to using the sandbox attribute to force same origin, which ends up causing issues with these social media iframes (i am warned in the console that they will not pass the iframe to me within a sandbox, once again... rightfully so). Anyone have any ideas?
I have a web-page and withing that page I am using an iFrame. this iFrame contains two buttons previous & next. On next button click I change the source of iFrame to lets say page2.html and on previous button click i change the source back to page1.html. Issue is when i click the browser back and forward buttons it causes the iFrame to navigate (depicting the functionality of those above buttons). How can I avoid this, that is on browser back button click previous page should be loaded (of browser's rather iframe's).
Thanks
I got the solution to the problem. I have to replace the url of the frame by window.location.replace(newurl).
in this case it doesn't add into browser history.