April 3, 2017 at 8:09 am #351906
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 <button>). 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.April 7, 2017 at 1:50 pm #352606
Jennifer ValleyModerator105 pts@jvalley4735
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 🙂April 10, 2017 at 7:35 pm #352762
Laura SilverModerator21 pts@lsilver
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.April 10, 2017 at 10:07 pm #352785
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.
MathApril 12, 2017 at 9:06 am #352981
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.April 12, 2017 at 11:59 am #353019
Darrel SomozaMember171 pts@Klaatu
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.”April 12, 2017 at 3:58 pm #353071
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…
Attachments:April 12, 2017 at 10:34 pm #353084
@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.April 15, 2017 at 12:15 am #353307
@jason , thx… some things to fix after Easter. Let you know when its done…September 11, 2017 at 12:01 pm #370578
@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.October 8, 2017 at 10:01 am #373569
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.
MathOctober 9, 2017 at 11:13 am #373672
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.
You must be logged in to reply to this topic.