I'm working on a project with Twitter Bootstrap and playing around the JavaScript components using a screen reader.
When I trigger the modal dialog, Jaws skips the modal going to the next link in the page.
Is there a way to implement a accessible modal?
Another solution that I think is to make a static page to the functionality of the modal, and redirect to this page when the user use a screen reader. Can I detected somehow if the user are using a screen reader?
EDIT 2019: N. Hoffmann wrote and maintains an accessible modal component both in vanilla JS (along other components in its van11y project) and jQuery.
Behavior and styles are easily modified via data-* attributes and classes.
It's been tested in way more conditions (screen readers, etc) that what you'd do with your own script ;-)
Also Bootstrap 4 has a fairly accessible modal and Bootstrap 3 in its latest versions (much or all of the Paypal Bootstrap accessibility plugin was backported to 3.3.x).
Modern ressources: Access & Use european initiative details a lot of interesting aspects in a simple manner and points to other resources, including the latest ARIA Deisgn Pattern.
Here's an accessible modal dialog: http://hanshillen.github.com/jqtest/#goto_dialog
Once the modal is activated, keyboard navigation is trapped inside the dialog till it's explicitly closed by the user.
http://irama.org/web/dhtml/lightbox/ details such an accessible implementation (there's little difference between a lightbox and a modal dialog, the important thing is the modal part and keyboard management).
You can also read in Unofficial copy of the DHTML Style Guide the dialog modal part and W3C/WAI-ARIA Making a Dialog Modal.
J. Wajsberg wrote a jQuery plugin able to trap the keyboard input inside a DOM element if you need a more DIY approach.
i don't know any solution to detected automatically if user using a screen reader. but there is the google solution to hide a link at the begining of the page (with left:-1000em and position:absolute) that can be activate if you use keyboard and display a "special mode".
Screen reader users, click here to turn off Google Instant.
for your modal dialog try to use aria and aria-atomic="true" aria-live="assertive" attribute on the dialog html div. it should announce the content of you dialog box.
Related
I have laravel project with react components.
There is a form on one page and I want to have a modal window displayed with "Save changes Yes/No" message, while user is closing the page.
As soon as I know this can be done in two ways:
By using Prompt from react-router package, but it seems that this won't work for me since I connect react component inside the laravel blade template, thus I don't use react-router.
By using the "beforeunload" event. Modern browsers don't support adjustable messages for the confirmation window and I need to display the adjustable message ("Save changes?").
Does anybody know another way how to track the page closing (or switching to another page) and display a popup window with custom text? Is that possible to display a custom modal window instead of the default confirmation one?
Pressing Back button in Google Plus will show this nice Div, instead of the ugly alert box, how is this achievable? Notice the URL has not change when press 'Back'.
Thanks.
Edit:
I should be more specific in my question. I am not interested at how sexy the pop-up modal, but I am looking for method or API to hijack the back button behavior.
Google uses their own material design for all their products, its nothing but a simple dialog box with material design css.
some third party websites offer this design for free, in that http://getmdl.io has all type of components for any design
Check the Dialog here and here
<!-- http://codepen.io/... -->
I'm using SweetAlert to display a success or error for a structured JSON result. The swal call is made from actions the users takes against a modal window already on top of the document window. From a UX perspective, it is expected that SweetAlert would gray-out the modal window, however, because SweetAlert (and the calling Javascript) resides at the document level, the document window (and not the modal window) is grayed by SweetAlert.
Not only is it preferable to gray-out the modal window because this is where the action originated, but having the gray-mask applied to the element/container directly behind the SweetAlert allows it to stand out from the rest of the page. In the picture below, you can see how the SweetAlert blends into the page without the gray-mask properly applied to whatever container is behind it.
(It should not matter, but to stem the inevitable question: the modal window is created using the Kendo UI Window widget)
I do not see any configurable options in the SweetAlert API which would allow me to pass in an optional container for gray-masking. Is there any known way to tell SweetAlert which container it should use to gray-mask?
I'm using the Ace Editor with autocompletion turned on. The editor appears in a modal frame on the page.
If the modal frame is closed (i.e. the editor is removed from the DOM) while an autocomplete popup is open, the popup gets stuck and can't be closed. What's the right way to destroy the popup?
The best I've found so far is
editor.completer.detach();
This seems to work, but it's undocumented and I don't know if there are any side-effects or concerns. Is there a better option?
detach is the right method, since it is what is called when pressing esc key see https://github.com/ajaxorg/ace/blob/60c639a34bc4a44ec84484f99bdd879177179b87/lib/ace/autocomplete.js#L207
I'm want to use the mobiscroll selector (demo | source) on my (desktop oriented) website. I've got a basic version working here. The way that works is that when you click the input at the top, it loads the (enormously sexy) spinner as an overlay with a dark layer over the rest of the site (try it out).
What I would rather have instead of this behaviour though, is that on my desktop website it shows this spinner instead of the input. So not as an overlay, but integrated with the rest of the design without needing to click to bring it up. That way the user is saved one click and it is immediately clear what's expected of him or her.
Does anybody know how I would be able to use this spinner instead of the input, so that it integrates nicely with the rest of my page instead of working as some sort of pop-up/overlay?
All tips are welcome!
You can use it display: 'modal' on mobile and use it in display: 'inline' on desktop. You'll find more info about the display option that you can pass on init in the documentation.
Now you just need to detect if your users are browsing from a mobile device or a desktop. You have a couple of options there, this would be one approach.