Navigate through inner divs on iOS using VoiceOver by performing a 3-finger swipe up or down

I'm currently experimenting with VoiceOver and scrolling, specifically the three-finger swipe up/down gesture on my test page located at:

http://107.170.41.208/AccessibleHTML

The test page consists of a div with scrollable content (red background) followed by another non-scrollable div containing lots of content (yellow background).

While I am able to scroll through the red background content using a mouse, VoiceOver seems to be skipping that section.

Any suggestions on how I can navigate through the red section content using VoiceOver?

javascripthtmlioscssvoiceover

Answer №1

While I may be arriving a little tardy to the gathering, I hope my insights will still prove valuable to those in need.

The use of position: absolute can sometimes pose challenges for individuals relying on screen readers, as the structural order of the DOM may not align with the visual presentation. VoiceOver, for example, may opt not to read this content first or at all due to these discrepancies.

In such scenarios, one simple solution is to define the desired height on the "red" <div> and add overflow: scroll. This adjustment should ensure the content remains accessible, readable, and scrollable.

It is generally advisable to maintain consistency between the visual layout and DOM order, using float only sparingly for minor layout adjustments.

Although there are likely guidelines governing these behaviors, they often stem from Apple's codebase and may vary across software updates.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with sending AJAX error to client

I'm currently developing a node app and focusing on error handling. Using ajax, I send data from a form to my server for insertion into a postgresql database. One requirement is that the email address must be unique, or else an error will occur. While ...

javascriptjqueryajaxnode.js

Can JavaScript classes be used as Node modules?

Join me as I guide you through the process that sparked my inquiry. I'm currently developing a CLI app in node and utilizing objects to organize my business logic using this structure: // my-project/lib/widget/myobject.js var MyObject = function(x) ...

javascriptnode.js

Toggle the visibility of a div based on the selected value from a dropdown menu in AngularJS, including support

I just started learning AngularJS and I have successfully implemented a show/hide feature using a dropdown select. However, I am now struggling to display default values. Requirement : At the initial stage, I need to show the first option in the dropdown ...

javascripthtmlangularjshtml-select

The div does not show any effect when the data is retrieved from a JSON file with Ajax

I've managed to create an unordered list similar to the one shown in this example - DirectionAwareHoverEffect. To make things easier as I have a lot of content, I decided to automate the markup process by storing the content in a JSON file. The file ...

javascriptjqueryajaxjson

Ways to make the Select component in Material-UI lose its focus state once an item has been selected

Anticipated outcome: Upon selecting an item, the Menu list will promptly close, and the Select component will no longer display a focus state. The borderBottom will change to 1px solid, and the backgroundColor will turn to white. Current situation: Sele ...

cssreactjsfocusmaterial-uihtml-select

Show a message popup or view based on the validation of the model

Picture an online store with multiple steps to complete during the checkout process. Whenever the customer clicks the 'next' button, it triggers the corresponding 'Action' method. This method includes a validation check to ensure that t ...

javascriptjqueryajaxasp.net-mvc

Eliminating a TableView cell from a different ViewController by tapping on a UIButton in Swift: Guide

Within my app, I have 2 ViewControllers. The first ViewController contains a table with cells that display various information. When a cell is selected, the second ViewController is presented, showcasing details from the chosen cell along with a delete but ...

iosswift

What is the best method for integrating custom CSS into Extjs 6?

Transitioning from Extjs 4.2 to Extjs 6.2 has presented a challenge for me. In the past, I would include a custom css file in the head using a simple link placed after the Extjs inclusion. <link rel="stylesheet" href="/custom.css" type="text/css" chars ...

cssextjsextjs6

What is the best way to showcase a String variable with spaces in the value field of a form within JSP?

When working with a String variable in JSP and trying to display it in a form field, there might be an issue if the string contains spaces. Only the first word is displayed instead of the entire sentence. Below is the code snippet along with the resulting ...

javahtmlcssjsp

Arrange various sets of NSArrays using the same sequence

My application has multiple NSArray objects representing database table contents. I want to sort one array and have the rest sorted in the same order. For instance, I have NSArray objects for "name," "address," and "phone_number" that I want to sort by na ...

iossqlitesortingnsarray

"In a single line, add an item to an array based on a specified condition

I am trying to achieve something similar in JavaScript with a one-liner. Can this be done without using an if statement? // These versions add false to the array if condition = false let arr = await getArray(params).push(condition && itemToAdd); arr = awai ...

javascriptarrays

Receive a pair of distinct arrays through a text field submission

I have a form on my website with a single textarea input. Visitors can enter text in the textarea in the following format: 5x Blue Flower 2 Red Flower 3* Yellow Flower Purple Flower I need to extract two arrays from this input - one for the quantity an ...

phphtmlarraysformstextfield

When would it be advantageous to select sender: Any while setting up an @IBAction in Swift programming?

When using IB/storyboards in Xcode to create an IBAction linking an interface object (like a button) with a method in the code file, the sender type is automatically set to Any by default. Even though Xcode should already know the type of control being us ...

iosswiftxcodeinterface-builder

Is there a potential security flaw in jQuery when using $.get(code_url) to execute the returned code without relying on eval() or appending it to the DOM

As I was debugging my NodeJS application, I stumbled upon a surprising discovery: when using jQuery with a simple $.get(code_url) where code_url is a URL leading to server-side JavaScript code, the code gets executed. The expected behavior should be: $.g ...

javascriptjquerynode.jsgoogle-chromesecurity

How does an iOS device typically manage the :hover pseudo-class?

My div is designed to expand when clicked using jQuery $('.mydiv').click, and collapse with a second click. In addition, the same div showcases more information on hover due to CSS rules utilizing :hover. This feature works perfectly on a comput ...

javascriptioscsscss-selectorspseudo-class

The breakdown of an object literal in JavaScript

What is the reason that we cannot access the second item in the object literal the same way as the first? var foo = {a:"alpha",2:"beta"}; console.log(foo.a) -> printing 'alpha' correctly console.log(foo.2) -> Error: missing ) after argumen ...

javascripthtml

What steps should be taken to showcase user input in a newly created task?

I am struggling to display the user input list, but it seems like I might be missing something here: const createTask = () => { const id = createId() const task = elements.input.value; const date = elements.cal.value; if(!task && ...

javascript

Having trouble grasping the concept of padding in CSS when using percentage values

Is it silly of me to ask this question? I haven't found a satisfactory answer anywhere, so I'll ask anyway. I'm working on creating a responsive webpage where I need to set the padding of a div named content that contains another div called ...

htmlcss

JavaScript innerHTML not functioning properly when receiving a response from a servlet

Can someone help me troubleshoot the code below? I'm receiving a response from the servlet, but I can't seem to display it inside the div. Here is the response: lukas requests to be your friend &nbsp <button value="lukas"onclick="accfr(th ...

javascripthtml

The Kadwa font's right arrow character appears overly broad

I am having an issue with the Google Font Kadwa in InDesign, specifically when using it to generate a right arrow (→). After loading the font onto my website, I noticed that the arrow appears to be too wide for my liking. @import url('https://fo ...

csswebfontstypographygoogle-fonts