Using aria-labelledby to refer to self and others IDs is not working
I am new to web accessibility and learning it based on Youtube videos. I watched this video:
wai-aria
Prevent jaws from reading “password” twice in password-type input fields
I have a password field that is reading out “password : password” by JAWS screen reader. I want to change that so it only reads out “password” once. I tried various things such as using an aria-hidden tag or aria-label=" " but I still get the same results. There was an identical question asked 5 years ago, however there was never a perfect answer given as the one marked still had its issues. Link to that here.
Colons after labels; any accessibility concerns?
I like having a colon after labels but for form-building components I like not having to specify them. Thus I have CSS like this:
How to properly use aria selectors for definition lists in puppeteer
I’m writing some UI functional tests using puppeteer. After discovering the “Puppetaria” article, I decided that whenever it’s possible, I want to use aria selectors. This has been working OK in many cases, but I’m struggling to figure out how to properly do this using a <dl/> definition list. I’m using a <dl/> to show details about an object in the hopes that it’s an accessible way to present things. For example:
How to properly handle inline error messages while the user is typing (ARIA)?
We have a form on our website containing fields that are validated with JavaScript as the user types (onChange event). The error messages are shown below the field inputs in red text.
Accessibility: adding visual labelling to a dropdown menu with a trigger button
I am building a user form that contains a date input field and a time dropdown picker. It needs to be accessible and compliant with the WCAG.
I think it’s more intuitive for sighted users if we have a visual label to accompany the form controls.
In order for screen reader users to have access to the content in the visual labels, I need to explicitly link the labels to the form controls.
How to make interactive flipcards accessible to screen readers with ARIA?
My school is using the W3Schools flip card code for interactivity on our class pages, with some added JavaScript to keep the cards flipped when clicked or tapped. However, I don’t think they are accessible for screen readers. It seems like they need some ARIA code, and I am very new to ARIA. How can I make sure students using screen readers can use the flip cards?
How to hide a text and make it accessible by screen reader?
I have a simple text that gets updated on an action and I want that to be announced by the screen reader. But I don’t want that text to be visible on the web page. I tried display: none and visibility: hidden, but seems like they are not accessible by the screen reader softwares. I found a way to make this work – that is by absolute positioning the element all the way with negative 999999 value which will make it off screen and hidden from the webpage. I am not really a fan of this solution. Is there a more elegant way to achieve this?
What’s the difference between HTML ‘hidden’ and ‘aria-hidden’ attributes?
I have been seeing the aria attribute all over while working with Angular Material. Can someone explain to me, what the aria prefix means? but most importantly what I’m trying to understand is the difference between aria-hidden and hidden attribute.
React props – set isRequired on a prop if another prop is null / empty
I have a component <Button>.
If the component doesn’t has this.props.children, I want to set the prop ariaLabel as isRequired, otherwise in can be optional. How do I do that?