Questions tagged [accessibility]

The objective of accessibility is to ensure that an application or website can be used by all individuals, regardless of any disabilities they may have such as visual, auditory, ambulatory, or cognitive impairments. However, please refrain from using this tag for programming tasks involving concurrent thread access, object manipulation within a class, network resource utilization, etc. Also, responsive design topics should only be included if there are specific concerns related to accessibility.

The importance of accessibility features in Dropdown and Select menus

On a website dedicated to sports, I have three dropdown menus that allow users to make selections for different events and sports. Currently, the code is using buttons and anchor tags instead of the select/option or datalist elements. When selecting optio ...

reactjsdrop-down-menuaccessibilityhtml-selecthtml-datalist

In Firefox, the focus outline is not shown on a div that has a mask-image CSS rule applied to

In my code, I have multiple div elements that have the mask-image and -webkit-mask-image CSS rules applied to them. These divs are being used as UI slider components, so I want keyboard users to be able to tab between them and use the arrow keys to adjust ...

cssfirefoxaccessibility

The screen reader is unable to interpret the text that is visible within the anchor tag

I have an Angular application with a dropdown menu implemented as shown below. When using the NVDA screen reader to navigate, only the content inside the aria-label attribute is being read when tab focused. However, I want it to also read the content (&ap ...

htmlaccessibilityanchorscreen-readers

The toggle-input component I implemented in React is not providing the desired level of accessibility

Having an accessibility issue with a toggle input while using VoiceOver on a Mac. The problem is that when I turn the toggle off, VoiceOver says it's on, and vice versa. How can I fix this so that VoiceOver accurately states whether the toggle is on or off ...

javascriptreactjstypescriptnext.jsaccessibility

Ways to display title attributes when focused using jQuery?

Typically, title attributes in all browsers only appear when the mouse hovers over them. I am looking to also display them when users are focused on them via keyboard navigation. Unfortunately, without using JavaScript, this cannot be achieved solely throu ...

jquerycssxhtmlaccessibility

How can you combine accessibility with absolute positioning?

Have you seen our unique hamburger design? https://i.stack.imgur.com/AmT6P.png A simple click will reveal a neat popup (the class "open" is added to a div). https://i.stack.imgur.com/yPydJ.png This cool effect is achieved using fixed positioning, but i ...

htmlcssaccessibilitywcagwcag2.0

The input range in ChromeVox is behaving incorrectly by skipping to the maximum value instead of following the correct step value

Attempting to get an input type="range" element to function correctly with ChromeVox has presented me with a challenge. Here's what I'm facing: When I press the right arrow key to move forward, it instantly jumps to the maximum value of 100 in my case. O ...

htmlaccessibilityvoice-recognition

In what ways can the accessibility of a website be impacted by using CSS

After reading numerous articles on Google and Stack Overflow, I have decided to ask my question straightforwardly in the hopes of receiving a clear and direct answer. Adding another layer to the discussion about whether Does opacity:0 have exactly the sam ...

cssaccessibilityopacitywai-aria

Set HTML form elements to be shown in 'display only' mode, without any interactivity

In the process of developing a dynamic form builder, I am allowing users to add various blocks of content like buttons, text inputs, paragraphs of text, and images to a page. They can later publish this as a simple HTML form for their use. When it comes t ...

htmlaccessibilitywai-aria

Navigational assistance on the keyboard - Improving Accessibility

My situation involves selecting an option from a dropdown menu on X-page, which triggers the opening of Modal-1 while disabling the background. If a selection is made within Modal-1, it leads to Modal-2. I am facing two issues/questions: Upon opening Moda ...

htmlcssangularaccessibility

Upcoming accessibility challenges in MUI components

I'm currently in the process of developing a react application using MUI (Core & X) and encountering some challenges with WCAG Accessibility. Although I am utilizing various components provided by MUI, I am facing issues specifically with the data grid, se ...

reactjsmaterial-uiaccessibilitywavewcag

Jaws reading out a modal message for accessibility purposes

Hey there! I am currently working on a modal using jQuery UI, but I am facing challenges in making it accessible for JAWS users. Below is the code snippet, and I need the text to be read out when the modal pops up after being triggered by a click on the ma ...

jquerymodal-dialogaccessibility

Axe developer tool alert: The <ul> and <ol> elements should only have direct child elements that are <li>, <script>, or <template>

Check out this code snippet. The Li element is built into the <b-navbar> component, but I'm not sure where to locate it in the HTML. <div> <b-navbar type="light" variant="light"> <b-nav-form> <b-in ...

vue.jsvuejs2accessibilityaxe

What enhancements does HTML5 provide for accessibility?

In what ways does HTML5 improve accessibility compared to HTML 4.01 or XHTML 1.0 Strict? ...

xhtmlhtmlaccessibility

Do flexible layouts require more effort and time to create and upkeep compared to fixed width layouts?

Are flexible layouts more challenging to create and maintain than fixed width layouts, and do they take longer to design? Does a flexible layout only involve setting the width, height, and font size in em or %? What are the main advantages of using a fle ...

cssxhtmlusabilityaccessibility

Are background images covering hidden text detrimental to accessibility?

Is there a way to display images of text instead of actual text for my menu? I have implemented spans within each menu link. These spans have specific dimensions, block display properties, the text is indented to be hidden, and the background image is set ...

htmlcssaccessibility

Disabling Angular routerlink tabindex additions can be done by modifying the application's

While the angular guide to accessibility covers many important topics, it fails to address the issue of preventing tabindex from being added on every button with a routerlink. This has resulted in my app having tabindex="0" on buttons throughout. ...

angularaccessibility

How can jQuery be used to display the size and type of linked files in title attributes?

For instance: Prior to <a target="_blank" href="http://www.adobe.com/devnet/acrobat/pdfs/reader_overview.pdf"> Adobe Reader JavaScript specification </a> As the file is in PDF format, the title should read title="PDF, 93KB, opens in a new ...

jquerycssxhtmlaccessibility

The webpage contains duplicate ID attribute value "x" that has been identified

In my Angular 7 project, three components (a, b, c) all use an input element with the same id of "x". However, component b has 4 input elements all using the id "x" as well. This poses Accessibility Issues as ids must be unique. The test cases utilize &apo ...

javascripthtmlcssaccessibilityangular7

Learn how to utilize Selenium in Java to access properties such as Role:img

Upon inspection, a list of properties can be found in the Accessibility section of the webpage for the element under evaluation: Computed Properties Name: "" `aria-labelledby`: Not specified `aria-label`: Not specified `title`: Not specified Rol ...

javagoogle-chromeselenium-webdriveraccessibility

A solution for optimizing accessibility by concealing anchor outlines in Internet Explorer and Firefox

Initially, I want to clarify that I acknowledge the fact that removing outlines impairs keyboard navigation. In contrast to Internet Explorer and Firefox, Google Chrome handles this issue by displaying outlines exclusively when the user interacts with the ...

cssinternet-explorerfirefoxfocusaccessibility

What are some ways to ensure keyboard accessibility for a CSS drop-down menu?

I have come across some solutions, but I am struggling to incorporate them into my code as some require elements that are not compatible with my project. Let's get to the question: I need help making an existing CSS drop-down menu accessible for keyboard ...

htmlcssdrop-down-menuaccessibilitykeyboard-navigation

What is the best way to apply focus to a list element using Javascript?

I recently created code to display a list of elements on my webpage. Additionally, I implemented JavaScript functionality to slice the elements. Initially, my page displays 5 elements and each time a user clicks on the "show more" link, an additional 5 ele ...

javascripthtmlaccessibility

The Wave tool is experiencing an accessibility issue related to the absence of a form label in TablePagination-MUI

"How can I resolve the accessibility issue of 'Missing form label' in the Wave tool when utilizing Table pagination?" <TablePagination ref={paginationComponentRef} ActionsComponent={PaginationActionsComponent} compo ...

material-uiaccessibility

The inner DIV cannot be accessed using document.getElementById due to its limited scope

Here is the HTML code below: <Div id="one"> <Div id="two"> </Div> </Div> When trying to access div "two" using "document.getElementById("two")", it returns null. ...

htmlaccessibility

How to create a CSS-only dropdown menu for IE 6 without relying on JavaScript?

While browsing different sites, I came across numerous css/js menu scripts that function well in browsers such as FF, IE7, Safari, and Opera when JavaScript is enabled. However, they do not work properly in IE 6 without a small JS file added to support t ...

cssaccessibility