I am new to web accessibility and learning it based on Youtube videos. I watched this video:
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.
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:
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:
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.
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?
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
I have a component
If the component doesn’t has
this.props.children, I want to set the prop
isRequired, otherwise in can be optional. How do I do that?