How do I get pickadate.js working with the JAWS screenreader? - javascript

I have an application that is in the late stages that uses pickadate.js. It's been reported to me that JAWS does not work with the date picker since the arrow keys are required to select a day and they are already mapped to something else in JAWS.
Is there a good way to get around this issue and still make the datepicker accessible for JAWS users? Any insight would be appreciated. Still learning about accessibility on the web.

If you are using pickadate.js version 3.5.5 then the arrow keys will work properly, however it is using aria-activedescendant to track the currently 'focusssed' date and this is not yet supported in all screen readers (does not work for example on OS X with VoiceOver and as far as I know also does not work with JAWS)
You could change the code https://github.com/amsul/pickadate.js of the datepicker to use ARIA live regions to announce the dates as the user uses the arrow keys. It is based on jQuery and there is a jQuery library that you could integrate to do this:
https://github.com/dylanb/a11yfy
You would essentially call jQuery.a11yfy.assertiveAnnounce(msg); every time the aria-activedescendant changed with the contents of that cell.

An alternate date picker is available here http://freqdec.github.io/datePicker/, it claims to be fully accessible but it also seems to suffer from the arrow keys not working (I tested in NVDA, I suspect JAWS will have the same issue).
However, Look at demo #9 here: http://freqdec.github.io/datePicker/demo/ it features a static date (not a popup) picker which does work with NVDA, it even dutifully announces each date as you use the arrow keys to navigate around the control.

Related

Usage of html5 <input type="month"> for different browsers

I would like to create an input field which lets the user select a month and a year. HTML5 introduced the input type "month" which suits my problem. It works fine in Chrome, Opera and Edge (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month).
If the user is using Firefox (or IE or any older Browser version), the input field doesn't show a date picker but instead expects a plain text input.
How can I implement my form in a way, that if the current browser supports input type="month", it shows the native browser datepicker, and if that's not the case, it shows a custom date picker? I expect the input type="month" to work in future Firefox versions and would like to automaticly use that functionality once it exists.
What would be the best way to implement a custom date picker?
I'm already using JQuery in my project. Furthermore I'm using Laravel, although I don't think that Laravel offers any utily in that regard.
Yes HTML5 elements are not supported on the old browsers. You can't expect new technologies to work on old systems. :)
So as you already know you can use a custom date picker. And I will recommend http://www.daterangepicker.com/, as I have been using it for some time now.Pretty stable.
Not recommending jQueryUI datepicker anymore, as it come with lot of other stuff as a bulk and it will slowdown your app loading time.
Give shot to daterangepicker it will solve your issue. ;)

Acrobat PDF-Form with Date Picker

I'm working with a programm in which some settings shall be imported by values set in an Pdf-form that is editable. Adobe Acrobat DC Pro is the program I use for creation of the Pdf-form. Problem is it just has controls like TextBox, ComboBox etc. but no DatePicker.
After I searched the internet I found the guys from Acroform and they have a Javascript that enables the use of a DatePicker inside of a Pdf-form. I downloaded their code from here and had no problem to get it running but the DatePicker starts with Sunday. I guess that is due to the fact that the Date Enumeration starts with 0 = Sunday, 1 = Monday etc. but I would like the change the DatePicker to start with Monday(the way Windows displays a DatePicker), problem is I have no experience in Javascript. I thought that if I just change all the Arrays of Days in the code to Sunday being at the end instead of the start would work but this just makes the dates for Monday-Saturday to be empty and then it starts with Sunday and paints on to the right where no Day-captions are anymore. Because I habe no experience in Javascript I cannot find out which code is responsible for this behaviour.
My questions are:
1) Does anyone have had a similar problem with a DatePicker in Javascript and found a solution he/she could share ?
2) Does anyone know a different Javascript DatePicker Example that can be used without having to buy it ?
The code has roughly 1200 lines of code so I will not post it here but it can be downloaded here.
Why not saying that you are talking of the FormRouter date picker (I guess they fixed the missing August 31 in the meantime). But then, you get what you pay…
Anyway, it is possible to create a date picker using the Dialog Object in Acrobat JavaScript. This then allows to freely configure the date picker whether to follow ISO standards (beginning the week with Monday), or USAn use (beginning the week with Sunday). It is essentially using the capabilities of the Date Object in JavaScript.
That date picker is available as developer toolkit. But not for free; creating smart and complex PDF applications is my business, and there is quite a bit of work behind that datepicker (however, if the datepicker is part of a project, it is not billed separately…). Feel free to contact me in private for further information an pricing (several customers told me that pricing is reasonable).
Anyway, studying the Date Object, understanding arrays, and grasp some knowledge about the Dialog Object would get you in the shape to create your own version.
The trick with the beginning of the week is indeed the enumeration of the day of the week. Add an offset, and you can set it to any day…
In short the answer to question 1: Yes; problem solvable and solved; to question 2: Yes, but No.

Detecting whether a browser supports auto-expanding select dropdowns?

In IE 6/7/8 a <select> element, if given a defined width, does not automatically expand once opened. With browser sniffing (jQuery example was to use $.browser.msie and $.browser.version) I could detect the current browser to a degree of certainty and, for the relevant browsers add in a custom handler for selects.
In jQuery 1.9 the $.browser object has been removed. I am still using an older version in production, and am able to browser sniff and show auto-expanding select menus accordingly; However, this isn't a long term solution if we're going to keep up with the later releases of jQuery.
I've had a look through the properties of select via for(var i in document.createElement('select')) { ... } but can't see anything obvious relating to whether or not the menu will automatically expand.
Is there such a thing? Ideally, I'm looking for a vanilla solution that doesn't require browser sniffing. An if(!property in document.createElement('select')) { ... } would be fantastic.
[Edit / Addition] I know about jQuery migrate and understand it will probably tide us over. I'm not overly keen to load in more things for one (at the moment) tiny inconvenience.
From the jQuery API of jQuery.browser:
We recommend against using this property; please try to use feature
detection instead (see jQuery.support). jQuery.browser may be moved to
a plugin in a future release of jQuery.
I investigated and found the jQuery Migrate Plugin which has the $.browser feature, the code is available at github.

Multi month selector

Does anybody know whats the name of the multi-month selector control used in Mint.com?
I have a video of it been used here. I've come across a lot of date picker and calendar controls but all of them are pretty much the same.
Preferably in jQuery
How about jQuery UI Datepicker? Its widely used and well tested.
It seems to me that this is a control from Qlik softwares (either Qlik Sense or QlikView) that allows users to do such selections. It can be embedded into Mint's solution.
Here's an example:
My Life in Data - Tab Running: https://eu-b.demo.qlik.com/QvAJAXZfc/opendoc.htm?document=qvdocs%2FMy%20Life%20in%20Data.qvw&host=demo11
Note that it is really hard to make sure as the video is not 'browsable'.

Tracking down display errors in IE, when everything looks good in firefox

I am a super newb at developing web pages. Especially pages that are created dynamically from javascript.
I have a page that I have worked on that uses some templates from prototype, and widgets from dojo, as well as plain old javascript. This page looks and acts perfectly in firefox.
It is basically adding rows to a table, and adding widgets to the cells.
The widgets basically seem like they are in the wrong column/wrong place.
Where do I start looking to figure out what the incompatibilities are between firefox and IE?
There are lots of sites that will give you information about compatibility. I'd check google. Also, you can download IETester which will allow you to see how your site looks in most IE versions (5.5+).
Take a look at: http://www.quirksmode.org/
I am currently trying to make a template that displays well with FF do the same in IE.
So far, I am breaking it down div by div with corresponding JS function.
Then it is easier to look up the specifics of that particular piece you are trying to make compatible.
For example, I was implementing the enter key and noticed it worked well in FF and not IE. After I looked at that specific input box in html and gathered there were no problems with it, I dove into that specific JS function. Inside I found that the currentTarget wasn't "working". I did a quick search on current target in IE and got all the info I needed to get it to work.
Get yourself a good JS debugger as well, FireBug works with both browsers.
There just aren't good web standards in the web industry right now. Everyone is doing their own thing, it is like the house and bank market. These guys are trying though.

Categories

Resources