accessibility - How can I add JAWS-compatible HTML form labels to month and day dropdowns in jQuery UI 1.10.4 datepicker -

-

we using jquery 1.10.4 datepicker month , year dropdowns. unfortunately, these dropdowns not have html labels attached, need screenreader requirements. have been trying find workaround not involve editing jquery code directly (which take 2 minutes) don't forget next time upgrade our jquery version. lack of labels accessibility (a11y) issue, essential our site.

the html field looks this:

<label for="dateofbirth">birth date (mm/dd/yyyy) </label>  <input type="text" id="dateofbirth" name="dateofbirth" value="" class="datepick form-control form-text required hasdatepicker">

the setup datepicker looks this:

function setupcalendarmonthyearlabels() {     if ($("select.ui-datepicker-month").attr('id') !=  'ui-datepicker-month-select') {         $("select.ui-datepicker-month").attr('id', 'ui-datepicker-month-select');     }     if ($("select.ui-datepicker-month").attr('id') !=  'ui-datepicker-month-select') {         $("select.ui-datepicker-month").attr('id', 'ui-datepicker-month-select');     }     if ($("#ui-datepicker-month-select-label").length==0) {         $("<label for='ui-datepicker-month-select' id='ui-datepicker-month-select-label'>select month</label>").insertbefore("select.ui-datepicker-month");     }     if ($("#ui-datepicker-year-select-label").length==0) {         $("<label for='ui-datepicker-year-select' id='ui-datepicker-year-select-label'>select year</label>").insertbefore("select.ui-datepicker-year");      } }  $(function() {     $( ".datepick" ).datepicker({changemonth: true, changeyear: true,yearrange : '-80:+10'});     $( ".datepick" ).focus(setupcalendarmonthyearlabels);     $( ".datepick" ).click(setupcalendarmonthyearlabels);     $( "body" ).on("focusin click change", "#ui-datepicker-div select", setupcalendarmonthyearlabels); });

i can see labels right now, , ugly, i'm not concerned about jaws recognizing them. reads them when first open datepicker, on subsequent opens, reads label dateofbirth field, not dropdowns. additionally, can see labels added in developer tools, jaws isn't reading them.

if unfamiliar jaws, might me know how attach event datepicker gets fired right before gets rendered. wondering if familiar jquery ui know. more of back-end developer , jquery internals unfamiliar me.

jquery needs event delegation attach elements jaws persistently recognise them. way doesn't matter if add more stuff later on or take away, knows take fresh each time.


Comments

Post a Comment

Popular posts from this blog

html - Styling progress bar with inline style -

-
i trying set progress bar color red using inline style. need in way because have access <body> part of document. style need apply: progress { color: red } progress::-moz-progress-bar { background: red;} progress::-webkit-progress-value { background: red; } progress[aria-valuenow]:before { background: red; } i tried <progress style="background: red;"> incorrect effect, progress bar color turns blue red background. guide right direction desired style? thank in advance. here live example: https://jsfiddle.net/z36d3f6l/
Read more

java - Oracle Sql developer error: could not install some modules -

-
i have downloaded fresh copy of sqldeveloper ( sqldeveloper-4.1.3.20.78-no-jre ) oracle website. when unzip , lauch gui, keep getting following error message: warning - not install modules: dynamic module config - no module providing capability org.netbeans.netbinox found. my system: windows 7 32 bit hp probook. jdk 1.6 , 1.7, 1.8 available in java/jdk subdirectory. netbeans 8.0.2 installed finally got way out after dirty hours. extracted sqldeveloper zip in nested directory. i.e: e://a/b/c/sqldeveloper. starting sqldeveloper gui above directory threw erros. solution: go in c:\users**username**\appdata\roaming : delete sql developer , sqldeveloper folders extract sql developer zip in new non nested directory. i.e: e:// start , should work now reference: https://community.oracle.com/thread/3870680?start=0&tstart=0
Read more

How to use autoclose brackets in Jupyter notebook? -

-
this may sound silly question, how make use of autoclose brackets in jupyter notebook? example, when type print( jupyter notebook auto-closes brakets print() and places cursor inside. type argument, say print(1 + 1) now cursor between second 1 , right bracket ) . key navigate right of ) ? of course can press end or → or ) achieve this, not seem save time, purpose of brackets autoclose suppose? thanks in advance.
Read more