E-mail List Archives
Thread: more Info buttons
Number of posts in this thread: 2 (In chronological order)
From: Jonathan Cohn
Date: Sat, Mar 03 2018 10:20AM
Subject: more Info buttons
No previous message | Next message →
I am working with an application that has "More Info" buttons near several form fields that can provide additional information about the acceptable input. The more info "slides out a div marked with role="region" and label "More Info" with a client configurable content.
In terms of accessibility, I am considering having the "More Info" button have an aria-describedby attribute pointing to the DIV. This certainly seems an efficient way to get explanations to a screen reader without having to Open / Close the slide out panel. Though I am worried if a client decides to place several paragraphs that this will be overwhelming.
Also, I have a JavaScript issue with the button. The keyboard interactions are working correctly except in Microsoft based browsers. (IE11 / Edge) Any idea what could be causing the click action to not be accepted on these browsers? Seems to be a query v3 library with event handlers added at the end of the HTML code.
Best wishes,
Jonathan Cohn
From: Morten Tollefsen
Date: Sun, Mar 04 2018 6:19AM
Subject: Re: more Info buttons
← Previous message | No next message
Hi.
I'm working in a project with similar info-buttons. We have tested different solutions (including aria-describedby. After user testing with combinations of browsers, screen readers and different user needs (e. g. deafblind/braille only) our conclusion is:
- info-buttons marked with aria-expanded (true/false)
- The expanded content is shown directly below the info-button. The expanded content is marked with aria-live and we use aria-controls
The behaviour is slightly different with different configurations but works ok with all puite new browsers and screenreaders (we focus on Jaws, NVDA and Voiceover for iOS and Mac). In our mobile testing we also use Samsong with Voice Assistant.
FÃ¥ Outlook for iOS<https://aka.ms/o0ukef>
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of Jonathan Cohn < = EMAIL ADDRESS REMOVED = >
Sent: Saturday, March 3, 2018 6:20:55 PM
To: WebAIM Discussion List
Subject: [WebAIM] more Info buttons
I am working with an application that has "More Info" buttons near several form fields that can provide additional information about the acceptable input. The more info "slides out a div marked with role="region" and label "More Info" with a client configurable content.
In terms of accessibility, I am considering having the "More Info" button have an aria-describedby attribute pointing to the DIV. This certainly seems an efficient way to get explanations to a screen reader without having to Open / Close the slide out panel. Though I am worried if a client decides to place several paragraphs that this will be overwhelming.
Also, I have a JavaScript issue with the button. The keyboard interactions are working correctly except in Microsoft based browsers. (IE11 / Edge) Any idea what could be causing the click action to not be accepted on these browsers? Seems to be a query v3 library with event handlers added at the end of the HTML code.
Best wishes,
Jonathan Cohn