Explore the community Forums Lectora Lectora Questions & Answers Adding pages for popup Reply To: Adding pages for popup

#374253 Score: 1
Profile photo of Jason Dalrymple
Jason Dalrymple
Member
beginner
intermediate
profile
wise owl
curious george
contributor
friend finder
advanced
picture perfect
54 pts
@JasonADal

I do quite a bit of what Andy’s referring to, as accessibility is a must as a developer for government. One way I’ve worked through this, especially since I have a significant number of screens that change based on actions, is the use of Change Contents and aria to accomplish the goal that applies to new/changing text or new images.

I start with an empty text box either on the page if I wanted sighted users to read it or off the page if it’s for sight impaired users. On the button that triggers the change, I add a Change Contents to update the text in that block. There are three keys that make this work.

  1. Assign a class to the text block using the Description in the properties ribbon.
  2. Add a JavaScript that assigns attribute “aria-live” to any text block with the designated class at the page level.
  3. Use Change Contents that updates the text block to the button that has the “show” action.

This alerts screen readers that there has been a change to the text or the contents of a page. Screen readers do NOT read alt text for images that are initially hidden or shown through an action.

I posted an example in the Accessibility forum that uses an onClick to demonstrate. I haven’t tried it with an onShow of an element, but my expectation is that it would work the same. For what it’s worth, you can download the NVDA screen reader free for testing, which is what I use.

Using aria-live to announce changes

 

This post has received 1 vote up.