I've run into the following issue on Chrome (v. 85.0.4183.102) on macOS (10.15.5):
Occasionally, when I select a div using VoiceOver, it will read out everything contained in the div. For instance, a div with role="main" might have a header, a few paragraphs, and some links. VoiceOver will read out all of those items when the parent div is selected. I can then press VO Next to advance to the first element within the parent div and it will read that item out individually.
I cannot reproduce this in Safari. When I select the main div, it simply reads "main". I can press VO Next and it will read out the elements individually, as one would expect.
Any idea why VO is doing this only in Chrome?
Related
I have a container div whose first child element is another div which acts as a button. The container has one or more additional child elements.
The inner button div is always in the tab order. Our application has a "screen reader mode", and when that is enabled, we also include the outer container div in the tab order. The motivation for this is that we want screen reader users to be able to tab to the whole container, and hear all of the contents read out in order.
The problem is - if the user tabs to the container div and presses the spacebar, the screen reader moves the focus to the child button div, and executes the click action. This happens whether or not the button div has a role of "button". (I'm seeing this happen with JAWS and NVDA. It only happens when the screen reader is running).
Suffice it to say -- we have a complicated UI, and this introduces problems that we'd like to avoid.
Why is this happening? Is there anything I can do to prevent it from happening? I'm open to hacky workarounds.
<div class="container" tabindex="0">
<div role="button" title="tooltip" sys:command="command" tabindex="0">
//Main Content
</div>
<div tabindex=0>
//Secondary Content
</div>
</div>
You need not and must not set the tabindex on this div. Screenreaders have other shortcuts than the tab key (which normally read through focusable elements only) to read non focusable elements.
For instance the description of the browse mode states that
In browse mode, the screen reader cursor can be placed on every element on a website, even on those which aren't inherently focusable, for example headings (<h1>, <h2>, etc.) or paragraphs (<p>).
This wasn't happening previously for me, but I updated to iOS 9.3 two weeks ago and now hidden elements on my web page are hidden when the keyboard is displayed or another input is selected.
Annoyingly a top fixed element is only hidden if the page is scrolled, and the bottom is always hidden. This seems to be a way to 'solve' the issues encountered with fixed elements being left in random positions on the screen when the keyboard is displayed, but now I've got a situation where the elements don't reappear reliably, meaning I lose my main navigation bar for my app.
Is there any way to disable this auto-hiding behaviour? I've created a barebones page that shows the behaviour here: http://128.199.171.247/test.html
Situation:
iOS 7.1
VoiceOver is Enabled
Hyperlink (<a href="#content">) points to:
target element on the page (<div id="content">page contents</div> or <a id="content"></a>)
URL I'm investigating: http://www.yooralla.com.au/whats-on/yooralla-media-awards/yooralla-media-awards-judges-pack
What happens:
Select and activate the link
A border appears on the target element (which is halfway down the screen)
The page scrolls so that the target element is at the top of the screen, but the border stays halfway down the screen.
The closest element to the border is then selected and bordered, so reading starts halfway down the page instead of at the target element.
Closest reference that I can find to this issue is item 1 here, so maybe it is fixed in iOS 8.
But I'm trying to work out why it's happening and how to avoid it on as many devices possible. I've tried linking both to the main content div (which fills most of the page), and inserting an empty a tag, both of which behave the same.
EDIT:
I've tried to force the reading position by setting focus or scrolling with JavaScript, but VoiceOver still ignores this and reads from the wrong place.
I'm having these troubles since almost 2 full days now and see this as my last chance to get a neat solution of my 2-page-editor before giving up.
Please use Firefox first and have a look at:
http://twopageeditor.bastianschulz.com/
STEPS:
set the caret into the last row "Exiles, similes, and reviles;"
press the "down arrow" key
RESULT: the caret is in the first row on page 2
Short explaination about the implementation:
- The editor contains two separate contenteditable DIV elements.
- In case of leaving a page by moving with the cursor within an contenteditable DIV element, we just swap the places and positions of the DIV elements but the caret stays in the same DIV element. The page 2 which is on the left side, is still the same DIV element that was on the right side when we were still on page 1.
- When changes to the text are done, the unselected DIV element is blurred out because it might be out-of-date. When the selected DIV element is deselected again, its content is fully copied into the other DIV element so that all changes that have been done are kept and therefore synchronized with the other DIV element.
Now use Chrome or Safari (IE not at all, that will be my next issue...)
STEPS:
set the caret into the last row "Exiles, similes, and reviles;"
press the "down arrow" key
RESULT: the caret is in the first row 1 on page 2
BUT: this row is not visible. Press down arrow key again and it appears in the second row of page 2. When you press the arrow up key now, the content moves again, the caret is in row 1 and page 2 is displayed as it should (and like Firefox does it correctly).
REASON: right after you pressed the down arrow key on the first page you will see for a part of a second that content in this DIV is automatically scrolled by the browser so that the position of the caret is still visible. This causes a displacement of the DIV element by 20px of its CSS top attribute. When setting thereafter the new absolute value of top:-520px e.g. (the height of the page / viewport is 520px) this weird shifting of 20px is still there.
I haven't figured out a way how to stop this automatic scrolling of the content when its not visible anymore. Or at least to be able to kind of reset the contenteditable DIV back to its normal state.
Anyone ideas?
Cheers!
I am building a custom rich text editor. And in its current use, it inserts itself- a div- before a text area that is nested in a div.
This container div is supposed to start out with a top margin that lowers it down on the page, and then the text editor div then sits inline with that.
The problem I am having is, in IE 9, when the editor div gains focus it immediately shifts itself so that its margin-top is 0px. This therefore occurs on the page loading, but also if the user clicks anywhere in the content editable div.
The caret remains at the correct location, but the editor div plus its container have scrolled upward so the editor div has no margin.
This works correctly in IE 8 for some reason.
Without seeing the code, I'm not sure, but have you tried it in quirks mode? There has probably been a fix to make the code work more along standards that doesn't work with IE9. You can either use the built in tools in IE9 to try to identify the problem, or change the DTD and see what happens.
W3 DTD List