search

humaan / Modaal

An accessible dialog window library for all humans.
http://humaan.com/modaal/
MIT License
2.72k stars 183 forks source link

How To: Inserting modal content further up the page #125

Closed darylknight closed 5 years ago

darylknight commented 5 years ago

I've been adding modal functionality to a site primarily aimed at blind users recently, and it's all working really well, except the client just tested it with a screenreader and it's not reading the modal content until it gets to the absolute end of the document, because that's where the .modaal-wrapper is being inserted.

They're trying to use this for a donation campaign where this modal opens automatically as soon as the page loads (which works) and reads it to the user before the other content. Is there a way to do this that I'm missing? I'm using this config:

$('.campaign-modal').modaal({
    content_source: '#inline-modal-content',
    start_open: true,
});
jesseyuen commented 5 years ago

G'day @darylknight

I've had a little look at this. I don't believe this sort of flexibility is baked into the current config options but have a look in the unminified js here: dist/js/modaal.js file - line 412.

Changing the method from append to prepend moves the modal content to the beginning of body rather than the end. A very quick test with Voice Over suggests you might have some success with this approach!

darylknight commented 5 years ago

Thanks for the quick reply! As it turns out, the JAWS tester was just using a lot of shortcuts and skipping the content, so it wasn't a thing in the Modaal that needed fixing. But I appreciate the detailed response.

danhumaan commented 5 years ago

thanks @darylknight and @jesseyuen - i hadn't yet had a chance to dive into investigating this issue, but thanks for returning to clarify the cause and outcome