WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: more Info buttons

for

From: Morten Tollefsen
Date: Mar 4, 2018 6:19AM

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 REMOVED> > on behalf of Jonathan Cohn < <EMAIL 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