I am struggling to make the div with aria-label accessible. <main> <h1>Heading</h1> <input type="text" placeholder="text"> <p>Lorem ipsum dolor sit amet labore culpa! Ipsam.</p> <div role="region" aria-label="content summary"> summary </div> <button>Go back</button> </main> I tried aria-describedby and aria-labelledby, but those did…
I have this content (simplified): <div> $<span class="enlarged-text">245</span>.50 </div> And when I use CAPSLOCK + Right (read next element) with Voiceover on Safari (MacOS Monterey 12.7.1) it reads it out as "two hundred and forty five dollars and fifty cents",…
I'm updating a aria-label value method that's currently escaping the value to be safely used in a HTML element attribute. So it would convert <span> abc" to <span> abc", for example. The issue is that the JAWS reads it as…
I am working on accessibility and test the application by Axe Dev Tool i.e Google Chrome browser extension. I use a table to display content, where each row (each cell in the row) should be clickable by mouse click. and…
I was told by the accessibility team that there should be only one H1 on a single page. Ref on the internet: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#avoid_using_multiple_h1_elements_on_one_page Then I saw this implementation in one of our repos. <h1 tabindex=0 style="invisible">The website name</h1> <h1 tabindex=-1>form…
I have a form like so: <form {...props} tabIndex={0}> <ProgressBar /> <FormTitle /> props.questions.map(q => <Question {...q} />) </form> When the focus gets to the form element, screenreaders (e.g. VoiceOver on Mac) only seem to auto-read out the progress bar…
I am trying to make a toast message component accessible (to comply with WCAG 2.1 AA standards) in Angular. The toast message has 4 types (Success, Warning, Error, Info) and each type has a dynamic message. The html of the…
I have a bottom tab navigator from react navigation. Previously, when you had the screen reader on, both the text and the icon of each tab could be selected as one container. Here we see both the icon and label…
Currently have text we set to a field as "yes" or "no". But when it is set to "no", Talkback will read out "Number". If talkback is turned on in the same screen. Then "no" is being read out correctly.…
I need to know if I can use opacity: 0.01 for hiding my content visually. I need to fade in content on scroll, but if I add opacity: 0 I am not sure how this effects screen readers and SEO.…