Centered styled checkbox cannot be checked with TalkBack or VoiceOver enabled

I am currently testing the accessibility of a mobile web app I developed and have encountered an issue with checkboxes while using TalkBack on Android or VoiceOver on iOS.

The problem arises from hiding the actual checkbox and presenting a styled label that mimics its behavior.

Below is a snippet of the CSS used to hide the checkbox:

.input-tick {
    position: absolute;
    left: -999em;

For the full HTML and CSS example, you can visit it on JSFiddle.

TalkBack and VoiceOver attempt to outline both the hidden checkbox and the label:

When trying to interact with the checkbox, the x and y coordinates of the click fall outside the label's boundary due to how VoiceOver and TalkBack operate. This results in the checkbox not getting checked.

Is there a way to modify VoiceOver and TalkBack so they only interact with the label? Are there any alternative solutions to address this issue?

androidhtmlioscssaccessibility

Answer №1

I believe I have stumbled upon a resolution to the issue at hand. While exploring alternative methods for styling checkboxes, it appears that many recommend utilizing display: none or visibility: hidden, yet this may compromise some of the checkbox's functionalities (such as tabbing to focus and using spacebar to toggle).

However, there exists another approach to concealing the checkbox. Instead of the previous method:

.input-tick {
    position: absolute;
    left: -999em;
}

We can implement the following:

.input-tick {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

Discovered here:

Given that the styled checkbox is larger than the actual checkbox, the latter remains unseen. This leads to the anticipated outcome when deploying TalkBack or VoiceOver:

Answer №2

One interesting approach is to utilize the checkbox ARIA role on a custom element and dynamically set the aria-checked attribute using JavaScript

<div id="customcheckbox" tabindex="0" aria-role="checkbox"
     class="checked" aria-checke="true">This is checked</div>

... transforms into ...

<div id="customcheckbox" tabindex="0" aria-role="checkbox"
     class="unchecked" aria-checke="false">This is not checked</div>

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

Certain devices may encounter an "end of input at character 0" error

I am encountering an issue with the code snippet below, where I am making an API call using PHP. The API returns JSON data, which I am storing in a stringBuilder object. The problem arises as it works fine on some carriers and devices, but throws a JSONExc ...

javaandroidjsonnetwork-programming

Enhancing the appearance of child elements using CSS modules in Next.js

My Countdown component implementation includes: import styles from "./Countdown.module.scss"; import React from "react"; import useTimer from "hooks/useTimer"; import cn from "classnames"; function Countdown({ date, ...

cssreactjsnext.jscss-modules

Having trouble loading .css and image files in Django

There seems to be an issue with loading images and css files in Django, even though everything is set up correctly in settings.py and the home.html file. What could be causing this problem? Within the static folder, there are folders named template, css, ...

pythonhtmlcssdjango

What is the best way to dynamically link an Angular Material table with information pulled from the backend server

I am attempting to connect a mat-table with data from the backend API following this Angular Material Table Dynamic Columns without model. Below is the relevant content from the .ts file: technologyList = []; listTechnology = function () { ...

javascripthtmlangularangular-material

Updating backgroundPosition for dual background images within an HTML element using Javascript

Issue at Hand: I am currently facing a challenge with two background images positioned on the body tag; one floating left and the other right. The image on the left has a padding of 50px on the left side, while the image on the right has a padding of 50px ...

javascriptcss

Combining ASP.NET MVC with HTML5 for dynamic web development

We are in the process of planning a new project and are interested in utilizing ASP.NET with the MVC pattern. Additionally, we want to incorporate the new features of HTML5. However, we have been having trouble finding sufficient information or connecting ...

asp.net-mvchtml

Styling Images in HTML with Text Overlays and Buttons using CSS

Hello everyone, I am new to this and struggling with formatting text over an image using a CSS button. I need the code to be responsive for mobile devices as well. Any help or advice on this would be greatly appreciated. Thanks in advance, Johnny_P This ...

htmlcssbuttonformatting

One way to change the cursor CSS property is by dynamically altering it based on scrolling behavior. This involves modifying the cursor property when scrolling

I'm attempting to adjust the cursor property within an Angular function. The issue I'm facing is that when I begin scrolling the webpage, the cursor changes to a pointer, but when I stop scrolling, it remains as a pointer. I've attempted to ...

javascripthtmlcssangularjsangular

Unity: Encountering issues with Resources.Load functionality

string filePath = "hfba_25"; TextAsset textAsset = Resources.Load(filePath) as TextAsset; string fileString = textAsset.text; I'm struggling to understand why the resources aren't loading, both in the editor and on an Android device. The file hf ...

c#androidunity-game-engineresourcesassets

Visual Studio is refusing to highlight my code properly, intellisense is failing to provide suggestions, and essential functions like go to definition are not functioning as expected

Due to a non-disclosure agreement, I am unable to share any code. However, I am experiencing an issue with Visual Studio not highlighting my code or allowing me to utilize its built-in tools. While I can rebuild the project, I cannot edit or access any fil ...

htmlangulartypescriptidevisual-studio-2022

Converting CGImage to PNG in SWIFT version 3

I am attempting to utilize a color mask to create transparency in a specific color within a JPG image. I have come across information stating that color masks only work with JPG images. The code works fine when I apply the color mask and save the image as ...

iosswiftswift3cgimage

Optimizing web layouts to fit on a single page is the most effective

Struggling to create a print layout for my web page that seamlessly transitions from the digital realm to the physical world. Utilizing HTML and CSS has presented challenges in aligning the "digital" design with a "real printable" page due to uncertainties ...

htmlcssprinting

"Seamlessly transition between items in a ng-repeat loop

My list of names in the scope is pretty straightforward: $scope.friends = [ {name:'John'}, {name:'Jessie'}, {name:'Johanna'}, {name:'Joy'}, {name:'Mary'}, {name:'Peter'}, ...

cssangularjsng-animate

The <HTML> element is just a bit too big for the screen

When viewing my webpage on mobile, the video background does not fit the screen properly (it fits in landscape orientation). Here is the video tag I am using: <video autoPlay loop muted playsInline className='absolute w-full h- ...

htmlcssreactjsmobiletailwind-css

Creating a row in a list with multiple buttons using SwiftUI

Is there a way to distinguish which button is tapped without the entire row highlighting when I have a List and two buttons in one row? When either button in the row is tapped in the sample code below, the action callbacks for both buttons are invoked: // ...

iosswiftswiftui

The combination of the card hover effect and the bootstrap modal creates complications

Hey there! I'm in the midst of crafting a webpage using Bootstrap and EJS. My aim is to craft a modal window that pops up when a specific button is clicked to display extra information, and upon clicking an X or "close" button, the modal should disapp ...

javascriptcssbootstrap-5

mqt_native_modules encountered a JavascriptException: TypeError stating that the object is undefined when trying to access 'w.default.chapterContent[c].content'

A problem arises in my React Native app when I navigate to a new view, causing it to crash. The interesting part is that the stack trace does not provide any clues related to my code, leaving me unsure of how to proceed with debugging. Can someone offer gu ...

androidreactjsreact-native

Is it possible to securely share login details on the internet?

I'm currently brainstorming different ways to securely display FTP, database, and hosting information for website projects on my project management site. One potential solution I'm considering is encrypting the passwords and developing an applica ...

phpmysqlhtml

Find all the terms enclosed by the HTML tags <h3></h3>

Looking for a query that can search for a specific word enclosed between two tags like: <h3>ali</h3> hasan ali <h3>ali kamali</h3> When a user searches for "ali," I want the output to be: <h3>ali</h3> <h3>ali k ...

androidsqlsqlite

How can I customize the pull-down menu options depending on the selected checkbox setting?

Here are the menu options I have defined: <label><strong>Release #1:</strong></label> <select id="selectedBaseRelease"> <option value="/~releases/file2">ICC2_O-2018.06</option> <option v ...

javascripthtml