aria-live option on text boxes
April 3, 2017 12:00 AM
I have another suggestion for an improvement to the accessibility options. One major barrier when it comes to show/hide text is the inability of a screen reader to see and read text when it goes from initially hidden to visible. My current solution involves first creating a transparent empty text box that has a ChangeContents on a trigger element (i.e. OnClick undefined). With JS, I add a "setAttribute" to objects with a specific CSS class (i.e. feedback or description).
Doing this allows me to work around the show/hide for a text box that is initially hidden and accommodate learners using a screen reader. It would also open the door for other uses on images or other elements that are initially hidden so developers can use the same method to add audio descriptors to objects beyond alt-tags.
If it's helpful to create a sample page, I'm happy to do so.
Discussion (12)
I'll bring this to the development teams attention. Please provide a sample if you're able @JasonADal as that will help speed up the recreation process :)
Yes, I second Jennifer's suggestion to post a sample page @JasonADal. I'd be very interested in learning more about your approach. Thanks for your feedback.
Another approach on this might be.
Setting the color of the text to the background color of the page its on, and then when you want to show it change/tween the color of that text to the needed color. Allthough this will not work for images i just realise.. mmmm.. working on a project where accessibility is important atm, i have some hurdles to take i see.
For images an approach might be.
Setting the z-index to be lower then a possible background. Then making them invisible, and bringing them to the a higher z-index ( after you know its loaded and available for any screenreader ). Because i do have a project where accessibility is important, and a lot of elements fading and showing in the design... i do have to find a way to make this work easily. Will share it when i figured out a good reusable option.
Math
For text, initially position it offscreen and if you want sighted users to view it, reposition. You can also try to use the 'speech' media query but since Lectora doesn't use standard media queries and CSS I do not know how much of a nightmare it would be to implement.
As a side note, according to caniuse, "Support for ARIA is rather complex and currently is not fully supported in any browser."
I do have a RunJS that changes the background of the text box onClick (you could use onHover, but onHover isn't a good practice when it comes to accessibility in my opinion). I use .style.background and set the rgb value. This could be applied for any style value, background, size, etc. I haven't tested to see if the aria live would work to read the alt-text of an image, though. I'm really buried at the moment, but will try and get a sample out soon.
Here's a sample with a few different pages as examples of how I'm using the aria-live tag, along with an explanatory page at the beginning. I also included my solutions for the background style changes, which I think could pretty readily adapted to change other style tags on the text box.
Math - I was brainstorming the same kind of things, as I have the same scenario with screen shots from the software appearing that have information important to the context of the learning. I was planning on using a text box at the bottom most layer to change when the image is shown on the screen...It comes down to how the aria-live affects reading order, too.
I've already run into/accidentally discovered a place where aria-live does behave differently in different browsers, specifically on text that's initially hidden. You can still set the aria-live region on an initially hidden text box and have it alert onShow, except I only got it to work in IE, not Chrome or Firefox...which personally, I think is weird - most of the time it's things that work in FF or Chrome that break in IE...
Thx Jason. Working atm at a pilot for a project where accessibility is important. What i do now ( still have to test it though because i am not sure it works for screenreaders ) is showing all images. Not setting them invisible in Lectora at start. With Javascript ( GSAP ) i immediately set them invisible when the page loads. Apparently that is quick enough so it doesnot show or blink on the page. Then i can trigger and show it when and where needed. As said, i dont know yet whether this will work for accessibility and screenreaders. First getting this pilot done designwise, then i go test and doublecheck the accessibility. Will share what i made at some point...
@mnotermans - If you can publish to HTML/SCORM Cloud, I'd be happy to take a look and see what it does with NVDA - I may also be able to look at it with JAWS if I can get one of our temporary licenses.
@Jason , thx... some things to fix after Easter. Let you know when its done...
@mnotermans - I thought I'd check in and see how things went with your project and if you had a chance to do any screen reader testing. I can still test with NVDA if you need the help there.
Thx Jason. Pilot was successfull... just finished another project ( us.gov ) that needed to be fully 508.
Managed to pull that off succesfully too in 2 weeks !!! 2 courses, quite a lot of pages , and a really hard tough deadline.
One thing i learned from that.. marketing agencies and design companies seldom know what is needed for 508 and responsive courses. Yep fully responsive too ;-)
So im now working on a setup to help esp. design companies to get a grasp of whats needed to get courses like this done properly. Making it easier for us to quickly deliver prototypes and a final product.
Regards,
Math
Glad to hear it! 2 weeks is a tough deadline. I haven't delved into any responsive design and can't begin to imagine how different it must be. My courses really don't lend themselves to responsive design, nor do I think any software simulation would ever do so.
It may be some time before I even look at responsive, so I may tap you on the shoulder for knowledge about 508, WCAG and responsive design.
Cheers!
Discussions have been disabled for this post