I am doing some VoiceOver experimentation with scrolling (the three-finger swipe up/down gesture).
My test page is at:
http://107.170.41.208/AccessibleHTML
There is a div with a scrollbar and lots of content (red background), and after that another div that is not scrollable with a lot of content (yellow background).
With the mouse I can scroll through the red background content, but using VoiceOver it skips that section.
How can I scroll through the red section content with VoiceOver?
A little late to the party but hopefully it's still useful to people.
Using position: absolute can sometimes cause some issues for screen readers as the DOM layout might not match the visual order. The VoiceOver can sometimes take the decision that it wouldn't make sense to read that first (or at all).
In that specific case you could just set the required height on the "red" <div> with overflow:scroll and it would be fine and should be readable and scroll-able.
As a more general rule, try and keep the visual order consistent with the DOM order, using float sparingly to change the layout slightly.
There obviously are rules somewhere dictating how and why this happens but they are tied up in Apple's code and very changeable between releases.
Related
I've integrated a Dash dashboard into a Flask application. Basically I've sticked to this medium and tailored it to my needs. Everything works as expected and the dashboard's content shows up as an iframe element. My problem is that the whole iframe situation feels a little hacky since the website has two scroll bars. The outer one for the main content and the inner one for the iframe. The UX is just not perfect as the iframe content sometimes starts scrolling before it's entirely visible.
There's one obvious solution to this problem that sadly isn't suitable for my dashboard. I could just increase the height of the iframe element until it fits the entire dashboard. That way I would get rid of the scrollbar. However, I have a sticky element in my dashboard that follows the user from a certain element onwards. Getting rid of the iframe's scrollbar would break the sticky element and I would really like to keep it.
Another solution I thought about that I'm just not capable of developing on my own is the following:
Enable main scrollbar and disable iframe scrollbar if the iframe element is not entirely visible. If the iframe element is entirely visible check if the iframe's scrollbar is at its topmost/bottommost position and enable upwards/downwards scrolling while disabling downwards/upwards scrolling.
I guess (hope) it's a lot harder to phrase than to actually code it. So I prepared some top-notch powerpoint visuals for easier understanding.
Blue background: main content
Red bordered rectangle: current view (scrollable)
Yellow rectangle: iframe (scrollabe)
Is there a way to achieve this behavior? I'm not particularly good at js & css so I would really appreciate if you could help me out.
Cheers
I want to do an independent scrolling between 3 columns on a Wordpress site, but I really don't know how can I do that, and what is the better langage to use (JS, CSS?).
I have two sidebar with content, you have to scroll to see the last content in the sidebars.
I have a container at the center with news and when you are at the bottom, you have an infinite loading.
What I want to do it's when user scroll on the page, the sidebars and the news content are scrolling, but, when there are no more contents in the sidebars, they become "fixed" and just the news container is scrolling.
Like this :
Can you help me please ?
All you'd simply have to do to create an independant scrollbar for each of these is to set an overflow: scroll; property on the right selectors however, the downside is that just setting overflow could potentially cause a horizontal scrollbar too.
There is an unstable yet broadly adopted alternative which is overflow-y - overflow-y works like overflow but only vertical.
So setting overflow-y: scroll; will allow at best a vertical scrollbar to appear.
Doing this with JS is not recommended as it will clog your scroll which CSS doesn't.
The reason JS clogs your scroll is because in JS you'll have to listen for a scroll event, when the user scrolls these are fired usually multiple times per second, and with 'multiple' I actually mean 10 to 100 times. So imagine executing even a little bit of code, if that code is bugged anywhere you can say goodbye to your users because they will have such slow scrolling.
The mechanism for having custom scrollbars on a page exists but it's not widely adopted either - just because of this reason. The concept was good but it was just detrimental to the end-user.
The downside for CSS scrollbars is that they will default to the browser scrollbar which will be different in every browser and unfortunately styling these is implemented differently across all of them and quirky at best.
NOTE
If your website is fullscreen and all three columns scroll independently the user will have to do 3 times the amount of scrolling before he or she sees ALL the content on the page, this might not be what you want. Also if you're stacking these constructions vertically on the same page you'll only be able to scroll down further once you've scrolled past the end of atleast one block of content.
This will agitate your users when they don't want to see the top content but just the bottom content for example.
IMO I wouldn't go for a solution like this if my website is full-width since it will annoy your users but then again, I do not know the entire context of what you're trying to achieve.
Good luck!
I am designing an interactive web game that takes place entirely in the browser. It uses html5, and everything (including the elements) is part of the game world. Since this is the case, I need some pretty strict control over the positioning of my elements, scroll position, zooming, etc.
One particular level requires that an element be placed off screen (just outside the viewport) so that the user must scroll the page to find it. Unfortunately, after scrolling, the page seems to record the new width of the page including the originally unseen element. When the page is refreshed, the zoom level is adjusted to fit the entire screen with the hidden element into the viewport. This gives away the puzzle and ruins the level.
I know that browsers store information like scroll position so that when a user revisits the page they can pick up right where they left off. This is great for some things, but bad for my purposes. Is there a way to prevent this caching behavior of my browsers? Is there a way to get or set the zoom level of a page using JavaScript?
Currently I am using the code below to reset the scroll position right before the user leaves the page. It works pretty well, but the user can see the page scroll right before leaving.
window.addEventListener("beforeunload",function(event_){
window.scrollTo(0,0);
/* What I would love is if there were a way to do this: */
// window.zoomTo(1.0);
/* But I'm sure that's asking for too much. */
});
I managed to fix my problem by keeping the hidden element out of the html flow all together by setting its css position property to fixed. I simulate page scrolling by changing the elements style.left value with some custom touch event handlers. The page has no need to resize or zoom with the addition of the off screen element because fixed position elements do not effect layout.
This doesn't answer my question about resetting the zoom level, however, and I would still appreciate any insight anyone may have.
I'm developing a web interface involving a JavaScript scrollbar restyling solution that attempts to hide the browser's default scrollbar behind an HTML/CSS replacement, while preserving support for the browser's default scrolling behavior, a feature many popular JS scrollbar plugins lack. The only issue I've encountered with this method is that some browsers insist on displaying the default scrollbar on top of the one created by the plugin, destroying the desired aesthetic altogether.
In an attempt to solve this problem, I tried wrapping the element containing the scrollbar in a div with overflow: hidden; and using JS to detect the width of the default scrollbar and position the element it controls so that it falls outside the clipping boundary of the parent div. However, as many of you probably know, Content that spans beyond the bottom or right boundary of an element with overflow: hidden can be accidentally scrolled into view during mouse dragging operations like text selection in which the course crosses the bottom or clipping boundary of the concealing parent element (i.e: dragging to the right would bring the default scrollbar back into view).
Luckily, though, this behavior does not occur when content extends beyond the top or left boundary in such a scenario. Knowing this, I'm considering continuing with the approach outlined above, but styling the scrolling element with direction: rtl to flip its scrollbar from right to left, and beyond the boundary of the concealing element, then applying direction: ltr to the child element containing all of its contents to negate the direction change for all of the actual content.
This technique produced the desired result in every test I've conducted thus far. However, I'm wondering if this solution is too good to be true, and I'm overlooking a fatal accessibility and/or compatibility issue with CSS direction for scrollbar placement that should prevent me from using this method.
TL;DR: Is using the CSS direction property to control the position of an element's scrollbar a bad idea?
In terms of correct usage of the property, it is a bad idea. direction: rtl is correctly used to flip the reading direction of text using alternate character encoding e.g. Arabic, Hebrew, etc. Try and find another way around the issue. Try taking a look at the source of some of the aforementioned popular JS scrollbar plugins to see how they do this.
I my working on the site that will have image gallery. Designer idea was to make buttons that switch photos be above the photos a bit.
Like this
Example http://img57.imageshack.us/img57/1253/showq.png
Currently I've made a javascript solution to this - it gets position of photo and applies absolute positioning to the button divs. There are some drawbacks - it works unstable in Opera and IE. Also I had to make some dirty haxx to make it stay in position after zooming. I wonder if there is a better way to do this, preferably without javascript.
you mean like here ? (dutch website, see photo browser in the center column at the top)
browser zooming works fine in browsers like firefox and safari because they zoom all the content and recorrect pixel-values. To make zooming work in ie(6) you'd need to style all in em's. But browser zooming is crappy for pixel data anyways…
Absolute positioning of the buttons (left 0 and right 0) is not a problem as long as the container element is positioned relative.
If I understand you correctly, you're trying to center those arrow buttons vertically in relation to the image. This is pretty easily accomplished with just CSS (no javascript required). Here's an example.
The basic idea is that you're using a couple of divs plus some absolute/relative positioning. There's an outer div that drops the top of the whole thing to the center of the parent element and then an inner div that pulls up your content so that the content is centered and not the top of the element.
A popular technique is to split the whole image into two huge (mostly transparent) links. The left half of the photo would take you to the previous image, the right to the next.
Of course you position you images of buttons appropriately and they would move around but I assume the problem you're finding is you have to keep moving your mouse to go through lots of images as the buttons move.... Well with this idea, you only need keep your mouse near the middle, and it should remain over the photo (and therefore a direction).
Example: http://gizmodo.com/photogallery/dreamhomespshop/1008251500
Mouse-over the image and you'll see it's active the complete way across. Not quite the same as your implementation, I'm sure, but the concept applies.