Explore the community Forums Lectora Lectora Suggestions aria-live option on text boxes

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #351906 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    21 pts
    @JasonADal

    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.

    #352606 Score: 0
    Profile photo of Jennifer Valley
    Jennifer Valley
    Moderator
    contributor
    beginner
    friend finder
    advanced
    lectora beginner
    verified member
    wise owl
    profile
    picture perfect
    curious george
    106 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 🙂

    #352762 Score: 0
    Profile photo of Laura Silver
    Laura Silver
    Moderator
    junior moderator
    verified member
    beginner
    intermediate
    contributor
    wise owl
    friend finder
    advanced
    curious george
    Group Member
    21 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.

    #352785 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    72 pts
    @mnotermans5114

    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

    #352981 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    21 pts
    @JasonADal

    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.

    #353019 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    153 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.”

    #353071 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    21 pts
    @JasonADal

    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…

    #353084 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    72 pts
    @mnotermans5114

    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…

    #353214 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    21 pts
    @JasonADal

    @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.

    #353307 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    72 pts
    @mnotermans5114

    @jason , thx… some things to fix after Easter. Let you know when its done…

    #370578 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    21 pts
    @JasonADal

    @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.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.