E-mail List Archives
Thread: Accessible Web Calendar
Number of posts in this thread: 9 (In chronological order)
From: JP Jamous
Date: Thu, Oct 06 2016 8:44AM
Subject: Accessible Web Calendar
No previous message | Next message →
Has anyone stumbled over a nice accessible calendar that can be used on a
web site?
I am looking for one that can be accessed through screen readers and liquid
based to expand and collapse if the browser is maximized or minimized.
Any references would be highly appreciated.
From: Angela French
Date: Thu, Oct 06 2016 9:40AM
Subject: Re: Accessible Web Calendar
← Previous message | Next message →
You might check out Trumba.com.
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of JP Jamous
Sent: Thursday, October 06, 2016 7:45 AM
To: 'WebAIM Discussion List'
Subject: [WebAIM] Accessible Web Calendar
Has anyone stumbled over a nice accessible calendar that can be used on a web site?
I am looking for one that can be accessed through screen readers and liquid based to expand and collapse if the browser is maximized or minimized.
Any references would be highly appreciated.
From: Mary Heid
Date: Thu, Oct 06 2016 9:46AM
Subject: Re: Accessible Web Calendar
← Previous message | Next message →
JP-
We have the same interest here at UNR. When I work with vendors and their calendars are not accessible, they often ask, "do you know of an accessible calendar we can look to for direction?" Below is what I've given to a few of them from a search I did about 6 months ago. I don't know if any of them found it helpful, but I share it here with you. I would really appreciate some feedback if these are or are not helpful resources and if you find anything in your search that I might be able to pass along to my vendors in the future.
Thank you,
-Mary
"As promised, here are some resources that may lead you in the right direction for an accessible calendar. Not being a developer myself, I would appreciate if you can let us know if you find any of these particularly helpful or not helpful so I can pass them along or not in the future. Thank you."
Looks like Stanford figured it out....
https://soap.stanford.edu/tips-and-tools/tips/wai-aria/wai-aria-widgets[soap.stanford.edu]
Follow the second link under Date Pickers to see one that may work.
ARIA information about a date picker
https://www.w3.org/TR/2009/WD-wai-aria-practices-20091215/#datepicker[w3.org]
Deque University HTML, JavaScript, CSS Source Code
https://dequeuniversity.com/library/aria/date-pickers/sf-date-picker[dequeuniversity.com]
jQuery UI DatePicker from 2013
http://www.deque.com/blog/accessible-jquery-ui-datepicker/[deque.com]
HTML code from 2007
http://www.catea.gatech.edu/scripts/calendar.html[catea.gatech.edu]
Mary Heid
System Administrator, Enrollment Services
Coordinator, Assistive Technology
University of Nevada, Reno
(775) 682-8038
http://www.unr.edu/general-information/accessibility
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela French
Sent: Thursday, October 06, 2016 8:40 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Accessible Web Calendar
You might check out Trumba.com.
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of JP Jamous
Sent: Thursday, October 06, 2016 7:45 AM
To: 'WebAIM Discussion List'
Subject: [WebAIM] Accessible Web Calendar
Has anyone stumbled over a nice accessible calendar that can be used on a web site?
I am looking for one that can be accessed through screen readers and liquid based to expand and collapse if the browser is maximized or minimized.
Any references would be highly appreciated.
From: Birkir R. Gunnarsson
Date: Thu, Oct 06 2016 10:02AM
Subject: Re: Accessible Web Calendar
← Previous message | Next message →
A few more
Whatsock datepicker:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Date%20Pickers/ARIA%20Date%20Picker%20(Basic)/demo.htm
It has good instructions on what it means to make a calendar
accessible (focus movements and keyboard operations).
For a simple date picker (one that does not have to list availability,
appointment schedule and such) I prefer the month and day dropdown
approach and an edit field for the year.
<fieldset>
<legend>Please select departure date</legend>
<label for="month">month</label>
<select id="month"
<option>January</option>
...
</select>
<label for="day">Day</label>
<select id="day">
<option>1</option>
<option>2</option>
...
</select
<label for="year">year (4 digits)</label>
<input type="text" id="year">
</fieldset>
Also, it is always useful to have a date input field as a fallback if
the calendar is not displaying.
Keep in mind that an input field is not a replacement for a clendar.
The calender has info on what day of the week a certain day is (if you
want to select the third Wednesday in December), and may have other
info such as unavailable dates, holidays, special promotion days etc.
That is info the user wouldn't know by interacting with a text field.
Cheers
-Birkir
On 10/6/16, Mary Heid < = EMAIL ADDRESS REMOVED = > wrote:
> JP-
> We have the same interest here at UNR. When I work with vendors and their
> calendars are not accessible, they often ask, "do you know of an accessible
> calendar we can look to for direction?" Below is what I've given to a few of
> them from a search I did about 6 months ago. I don't know if any of them
> found it helpful, but I share it here with you. I would really appreciate
> some feedback if these are or are not helpful resources and if you find
> anything in your search that I might be able to pass along to my vendors in
> the future.
>
> Thank you,
>
> -Mary
>
> "As promised, here are some resources that may lead you in the right
> direction for an accessible calendar. Not being a developer myself, I would
> appreciate if you can let us know if you find any of these particularly
> helpful or not helpful so I can pass them along or not in the future. Thank
> you."
>
> Looks like Stanford figured it out....
> https://soap.stanford.edu/tips-and-tools/tips/wai-aria/wai-aria-widgets[soap.stanford.edu]
> Follow the second link under Date Pickers to see one that may work.
>
> ARIA information about a date picker
> https://www.w3.org/TR/2009/WD-wai-aria-practices-20091215/#datepicker[w3.org]
>
> Deque University HTML, JavaScript, CSS Source Code
> https://dequeuniversity.com/library/aria/date-pickers/sf-date-picker[dequeuniversity.com]
>
> jQuery UI DatePicker from 2013
> http://www.deque.com/blog/accessible-jquery-ui-datepicker/[deque.com]
>
> HTML code from 2007
> http://www.catea.gatech.edu/scripts/calendar.html[catea.gatech.edu]
>
>
>
> Mary Heid
> System Administrator, Enrollment Services
> Coordinator, Assistive Technology
> University of Nevada, Reno
> (775) 682-8038
> http://www.unr.edu/general-information/accessibility
>
>
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf
> Of Angela French
> Sent: Thursday, October 06, 2016 8:40 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Accessible Web Calendar
>
> You might check out Trumba.com.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf
> Of JP Jamous
> Sent: Thursday, October 06, 2016 7:45 AM
> To: 'WebAIM Discussion List'
> Subject: [WebAIM] Accessible Web Calendar
>
> Has anyone stumbled over a nice accessible calendar that can be used on a
> web site?
>
>
>
> I am looking for one that can be accessed through screen readers and liquid
> based to expand and collapse if the browser is maximized or minimized.
>
>
>
> Any references would be highly appreciated.
>
> > > http://webaim.org/discussion/archives
> > > > http://webaim.org/discussion/archives
> > > > > >
--
Work hard. Have fun. Make history.
From: JP Jamous
Date: Thu, Oct 06 2016 10:32AM
Subject: Re: Accessible Web Calendar
← Previous message | Next message →
Mary,
If I land on any, I'll pass them to the list.
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Mary Heid
Sent: Thursday, October 6, 2016 10:47 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Accessible Web Calendar
JP-
We have the same interest here at UNR. When I work with vendors and their calendars are not accessible, they often ask, "do you know of an accessible calendar we can look to for direction?" Below is what I've given to a few of them from a search I did about 6 months ago. I don't know if any of them found it helpful, but I share it here with you. I would really appreciate some feedback if these are or are not helpful resources and if you find anything in your search that I might be able to pass along to my vendors in the future.
Thank you,
-Mary
"As promised, here are some resources that may lead you in the right direction for an accessible calendar. Not being a developer myself, I would appreciate if you can let us know if you find any of these particularly helpful or not helpful so I can pass them along or not in the future. Thank you."
Looks like Stanford figured it out....
https://soap.stanford.edu/tips-and-tools/tips/wai-aria/wai-aria-widgets[soap.stanford.edu]
Follow the second link under Date Pickers to see one that may work.
ARIA information about a date picker
https://www.w3.org/TR/2009/WD-wai-aria-practices-20091215/#datepicker[w3.org]
Deque University HTML, JavaScript, CSS Source Code https://dequeuniversity.com/library/aria/date-pickers/sf-date-picker[dequeuniversity.com]
jQuery UI DatePicker from 2013
http://www.deque.com/blog/accessible-jquery-ui-datepicker/[deque.com]
HTML code from 2007
http://www.catea.gatech.edu/scripts/calendar.html[catea.gatech.edu]
Mary Heid
System Administrator, Enrollment Services Coordinator, Assistive Technology University of Nevada, Reno
(775) 682-8038
http://www.unr.edu/general-information/accessibility
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela French
Sent: Thursday, October 06, 2016 8:40 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Accessible Web Calendar
You might check out Trumba.com.
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of JP Jamous
Sent: Thursday, October 06, 2016 7:45 AM
To: 'WebAIM Discussion List'
Subject: [WebAIM] Accessible Web Calendar
Has anyone stumbled over a nice accessible calendar that can be used on a web site?
I am looking for one that can be accessed through screen readers and liquid based to expand and collapse if the browser is maximized or minimized.
Any references would be highly appreciated.
From: Bryan Garaventa
Date: Thu, Oct 06 2016 11:38AM
Subject: Re: Accessible Web Calendar
← Previous message | Next message →
The code for the accessible datepicker plus all of the other accessible widget controls can also be downloaded from
https://github.com/accdc/tsg
All of the AccDC Technical Style Guide design patterns have been fully tested for maximum accessibility using all of the following combinations:
- Strictly from the keyboard with no mouse and no screen reader running.
- Using NVDA and JAWS 11+> in IE8 with Win XP.
- Using NVDA and JAWS 12+> in IE 11 with Win7.
- Using NVDA and JAWS 14+> in IE 11 with Win8+>.
- Using NVDA and JAWS 12+> in FF with Win XP, Win7, Win8, and Win10.
- Using Voiceover in Safari with iOS on the iPhone/iPad.
- Using Dragon Naturally Speaking in IE11 and FF with Win7, Win8, and Win10 via standard keyboard interaction commands.
This archive includes all of the following scalable component types, optionally powered by jQuery, Dojo, or MooTools.
ARIA and Non-ARIA Accordions
ARIA and Non-ARIA Tabs
ARIA Comboboxes
ARIA Data Grids
ARIA Date Pickers
ARIA Listboxes
ARIA Menus
ARIA Radio Buttons
ARIA Sliders
ARIA Toggles, Checkboxes, Links, and Buttons
ARIA Trees
Banners
Carousels, Slideshows, and Wizards
Drag and Drop
Footnotes
Inline Form Field Validation and Dynamic Help Tooltips
Modals
Popups
Progress Bars
Scrollable Divs
Tooltips
Web Chat and Dynamic Message Announcement
Best wishes,
Bryan
Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: Thursday, October 06, 2016 9:02 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Accessible Web Calendar
A few more
Whatsock datepicker:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Date%20Pickers/ARIA%20Date%20Picker%20(Basic)/demo.htm
It has good instructions on what it means to make a calendar accessible (focus movements and keyboard operations).
For a simple date picker (one that does not have to list availability, appointment schedule and such) I prefer the month and day dropdown approach and an edit field for the year.
<fieldset>
<legend>Please select departure date</legend>
<label for="month">month</label>
<select id="month"
<option>January</option>
...
</select>
<label for="day">Day</label>
<select id="day">
<option>1</option>
<option>2</option>
...
</select
<label for="year">year (4 digits)</label> <input type="text" id="year"> </fieldset>
Also, it is always useful to have a date input field as a fallback if the calendar is not displaying.
Keep in mind that an input field is not a replacement for a clendar.
The calender has info on what day of the week a certain day is (if you want to select the third Wednesday in December), and may have other info such as unavailable dates, holidays, special promotion days etc.
That is info the user wouldn't know by interacting with a text field.
Cheers
-Birkir
On 10/6/16, Mary Heid < = EMAIL ADDRESS REMOVED = > wrote:
> JP-
> We have the same interest here at UNR. When I work with vendors and
> their calendars are not accessible, they often ask, "do you know of an
> accessible calendar we can look to for direction?" Below is what I've
> given to a few of them from a search I did about 6 months ago. I don't
> know if any of them found it helpful, but I share it here with you. I
> would really appreciate some feedback if these are or are not helpful
> resources and if you find anything in your search that I might be able
> to pass along to my vendors in the future.
>
> Thank you,
>
> -Mary
>
> "As promised, here are some resources that may lead you in the right
> direction for an accessible calendar. Not being a developer myself, I
> would appreciate if you can let us know if you find any of these
> particularly helpful or not helpful so I can pass them along or not in
> the future. Thank you."
>
> Looks like Stanford figured it out....
> https://soap.stanford.edu/tips-and-tools/tips/wai-aria/wai-aria-widget
> s[soap.stanford.edu] Follow the second link under Date Pickers to see
> one that may work.
>
> ARIA information about a date picker
> https://www.w3.org/TR/2009/WD-wai-aria-practices-20091215/#datepicker[
> w3.org]
>
> Deque University HTML, JavaScript, CSS Source Code
> https://dequeuniversity.com/library/aria/date-pickers/sf-date-picker[d
> equeuniversity.com]
>
> jQuery UI DatePicker from 2013
> http://www.deque.com/blog/accessible-jquery-ui-datepicker/[deque.com]
>
> HTML code from 2007
> http://www.catea.gatech.edu/scripts/calendar.html[catea.gatech.edu]
>
>
>
> Mary Heid
> System Administrator, Enrollment Services Coordinator, Assistive
> Technology University of Nevada, Reno
> (775) 682-8038
> http://www.unr.edu/general-information/accessibility
>
>
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Angela French
> Sent: Thursday, October 06, 2016 8:40 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Accessible Web Calendar
>
> You might check out Trumba.com.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of JP Jamous
> Sent: Thursday, October 06, 2016 7:45 AM
> To: 'WebAIM Discussion List'
> Subject: [WebAIM] Accessible Web Calendar
>
> Has anyone stumbled over a nice accessible calendar that can be used
> on a web site?
>
>
>
> I am looking for one that can be accessed through screen readers and
> liquid based to expand and collapse if the browser is maximized or minimized.
>
>
>
> Any references would be highly appreciated.
>
> > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> >
--
Work hard. Have fun. Make history.
From: JP Jamous
Date: Thu, Oct 06 2016 12:13PM
Subject: Re: Accessible Web Calendar
← Previous message | Next message →
Thank you so much folks. Special thanks for you Bryan. I cannot wait for the weekend to check those out.
Again, thank you for helping us making the digital world a more accessible place. You folks rock. I am highly proud of being a member of this list.
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: Thursday, October 6, 2016 12:39 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Accessible Web Calendar
The code for the accessible datepicker plus all of the other accessible widget controls can also be downloaded from https://github.com/accdc/tsg
All of the AccDC Technical Style Guide design patterns have been fully tested for maximum accessibility using all of the following combinations:
- Strictly from the keyboard with no mouse and no screen reader running.
- Using NVDA and JAWS 11+> in IE8 with Win XP.
- Using NVDA and JAWS 12+> in IE 11 with Win7.
- Using NVDA and JAWS 14+> in IE 11 with Win8+>.
- Using NVDA and JAWS 12+> in FF with Win XP, Win7, Win8, and Win10.
- Using Voiceover in Safari with iOS on the iPhone/iPad.
- Using Dragon Naturally Speaking in IE11 and FF with Win7, Win8, and Win10 via standard keyboard interaction commands.
This archive includes all of the following scalable component types, optionally powered by jQuery, Dojo, or MooTools.
ARIA and Non-ARIA Accordions
ARIA and Non-ARIA Tabs
ARIA Comboboxes
ARIA Data Grids
ARIA Date Pickers
ARIA Listboxes
ARIA Menus
ARIA Radio Buttons
ARIA Sliders
ARIA Toggles, Checkboxes, Links, and Buttons ARIA Trees Banners Carousels, Slideshows, and Wizards Drag and Drop Footnotes Inline Form Field Validation and Dynamic Help Tooltips Modals Popups Progress Bars Scrollable Divs Tooltips Web Chat and Dynamic Message Announcement
Best wishes,
Bryan
Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: Thursday, October 06, 2016 9:02 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Accessible Web Calendar
A few more
Whatsock datepicker:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Date%20Pickers/ARIA%20Date%20Picker%20(Basic)/demo.htm
It has good instructions on what it means to make a calendar accessible (focus movements and keyboard operations).
For a simple date picker (one that does not have to list availability, appointment schedule and such) I prefer the month and day dropdown approach and an edit field for the year.
<fieldset>
<legend>Please select departure date</legend>
<label for="month">month</label>
<select id="month"
<option>January</option>
...
</select>
<label for="day">Day</label>
<select id="day">
<option>1</option>
<option>2</option>
...
</select
<label for="year">year (4 digits)</label> <input type="text" id="year"> </fieldset>
Also, it is always useful to have a date input field as a fallback if the calendar is not displaying.
Keep in mind that an input field is not a replacement for a clendar.
The calender has info on what day of the week a certain day is (if you want to select the third Wednesday in December), and may have other info such as unavailable dates, holidays, special promotion days etc.
That is info the user wouldn't know by interacting with a text field.
Cheers
-Birkir
On 10/6/16, Mary Heid < = EMAIL ADDRESS REMOVED = > wrote:
> JP-
> We have the same interest here at UNR. When I work with vendors and
> their calendars are not accessible, they often ask, "do you know of an
> accessible calendar we can look to for direction?" Below is what I've
> given to a few of them from a search I did about 6 months ago. I don't
> know if any of them found it helpful, but I share it here with you. I
> would really appreciate some feedback if these are or are not helpful
> resources and if you find anything in your search that I might be able
> to pass along to my vendors in the future.
>
> Thank you,
>
> -Mary
>
> "As promised, here are some resources that may lead you in the right
> direction for an accessible calendar. Not being a developer myself, I
> would appreciate if you can let us know if you find any of these
> particularly helpful or not helpful so I can pass them along or not in
> the future. Thank you."
>
> Looks like Stanford figured it out....
> https://soap.stanford.edu/tips-and-tools/tips/wai-aria/wai-aria-widget
> s[soap.stanford.edu] Follow the second link under Date Pickers to see
> one that may work.
>
> ARIA information about a date picker
> https://www.w3.org/TR/2009/WD-wai-aria-practices-20091215/#datepicker[
> w3.org]
>
> Deque University HTML, JavaScript, CSS Source Code
> https://dequeuniversity.com/library/aria/date-pickers/sf-date-picker[d
> equeuniversity.com]
>
> jQuery UI DatePicker from 2013
> http://www.deque.com/blog/accessible-jquery-ui-datepicker/[deque.com]
>
> HTML code from 2007
> http://www.catea.gatech.edu/scripts/calendar.html[catea.gatech.edu]
>
>
>
> Mary Heid
> System Administrator, Enrollment Services Coordinator, Assistive
> Technology University of Nevada, Reno
> (775) 682-8038
> http://www.unr.edu/general-information/accessibility
>
>
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Angela French
> Sent: Thursday, October 06, 2016 8:40 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Accessible Web Calendar
>
> You might check out Trumba.com.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of JP Jamous
> Sent: Thursday, October 06, 2016 7:45 AM
> To: 'WebAIM Discussion List'
> Subject: [WebAIM] Accessible Web Calendar
>
> Has anyone stumbled over a nice accessible calendar that can be used
> on a web site?
>
>
>
> I am looking for one that can be accessed through screen readers and
> liquid based to expand and collapse if the browser is maximized or minimized.
>
>
>
> Any references would be highly appreciated.
>
> > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> >
--
Work hard. Have fun. Make history.
From: Bryan Garaventa
Date: Thu, Oct 06 2016 12:31PM
Subject: Re: Accessible Web Calendar
← Previous message | Next message →
No problem, I also just added the ARIA 101 Self-Paced training guide within the download, which should help anybody learn how to better understand ARIA and how it works.
Best wishes,
Bryan
Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of JP Jamous
Sent: Thursday, October 06, 2016 11:13 AM
To: 'WebAIM Discussion List' < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Accessible Web Calendar
Thank you so much folks. Special thanks for you Bryan. I cannot wait for the weekend to check those out.
Again, thank you for helping us making the digital world a more accessible place. You folks rock. I am highly proud of being a member of this list.
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: Thursday, October 6, 2016 12:39 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Accessible Web Calendar
The code for the accessible datepicker plus all of the other accessible widget controls can also be downloaded from https://github.com/accdc/tsg
All of the AccDC Technical Style Guide design patterns have been fully tested for maximum accessibility using all of the following combinations:
- Strictly from the keyboard with no mouse and no screen reader running.
- Using NVDA and JAWS 11+> in IE8 with Win XP.
- Using NVDA and JAWS 12+> in IE 11 with Win7.
- Using NVDA and JAWS 14+> in IE 11 with Win8+>.
- Using NVDA and JAWS 12+> in FF with Win XP, Win7, Win8, and Win10.
- Using Voiceover in Safari with iOS on the iPhone/iPad.
- Using Dragon Naturally Speaking in IE11 and FF with Win7, Win8, and Win10 via standard keyboard interaction commands.
This archive includes all of the following scalable component types, optionally powered by jQuery, Dojo, or MooTools.
ARIA and Non-ARIA Accordions
ARIA and Non-ARIA Tabs
ARIA Comboboxes
ARIA Data Grids
ARIA Date Pickers
ARIA Listboxes
ARIA Menus
ARIA Radio Buttons
ARIA Sliders
ARIA Toggles, Checkboxes, Links, and Buttons ARIA Trees Banners Carousels, Slideshows, and Wizards Drag and Drop Footnotes Inline Form Field Validation and Dynamic Help Tooltips Modals Popups Progress Bars Scrollable Divs Tooltips Web Chat and Dynamic Message Announcement
Best wishes,
Bryan
Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: Thursday, October 06, 2016 9:02 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Accessible Web Calendar
A few more
Whatsock datepicker:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Date%20Pickers/ARIA%20Date%20Picker%20(Basic)/demo.htm
It has good instructions on what it means to make a calendar accessible (focus movements and keyboard operations).
For a simple date picker (one that does not have to list availability, appointment schedule and such) I prefer the month and day dropdown approach and an edit field for the year.
<fieldset>
<legend>Please select departure date</legend>
<label for="month">month</label>
<select id="month"
<option>January</option>
...
</select>
<label for="day">Day</label>
<select id="day">
<option>1</option>
<option>2</option>
...
</select
<label for="year">year (4 digits)</label> <input type="text" id="year"> </fieldset>
Also, it is always useful to have a date input field as a fallback if the calendar is not displaying.
Keep in mind that an input field is not a replacement for a clendar.
The calender has info on what day of the week a certain day is (if you want to select the third Wednesday in December), and may have other info such as unavailable dates, holidays, special promotion days etc.
That is info the user wouldn't know by interacting with a text field.
Cheers
-Birkir
On 10/6/16, Mary Heid < = EMAIL ADDRESS REMOVED = > wrote:
> JP-
> We have the same interest here at UNR. When I work with vendors and
> their calendars are not accessible, they often ask, "do you know of an
> accessible calendar we can look to for direction?" Below is what I've
> given to a few of them from a search I did about 6 months ago. I don't
> know if any of them found it helpful, but I share it here with you. I
> would really appreciate some feedback if these are or are not helpful
> resources and if you find anything in your search that I might be able
> to pass along to my vendors in the future.
>
> Thank you,
>
> -Mary
>
> "As promised, here are some resources that may lead you in the right
> direction for an accessible calendar. Not being a developer myself, I
> would appreciate if you can let us know if you find any of these
> particularly helpful or not helpful so I can pass them along or not in
> the future. Thank you."
>
> Looks like Stanford figured it out....
> https://soap.stanford.edu/tips-and-tools/tips/wai-aria/wai-aria-widget
> s[soap.stanford.edu] Follow the second link under Date Pickers to see
> one that may work.
>
> ARIA information about a date picker
> https://www.w3.org/TR/2009/WD-wai-aria-practices-20091215/#datepicker[
> w3.org]
>
> Deque University HTML, JavaScript, CSS Source Code
> https://dequeuniversity.com/library/aria/date-pickers/sf-date-picker[d
> equeuniversity.com]
>
> jQuery UI DatePicker from 2013
> http://www.deque.com/blog/accessible-jquery-ui-datepicker/[deque.com]
>
> HTML code from 2007
> http://www.catea.gatech.edu/scripts/calendar.html[catea.gatech.edu]
>
>
>
> Mary Heid
> System Administrator, Enrollment Services Coordinator, Assistive
> Technology University of Nevada, Reno
> (775) 682-8038
> http://www.unr.edu/general-information/accessibility
>
>
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Angela French
> Sent: Thursday, October 06, 2016 8:40 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Accessible Web Calendar
>
> You might check out Trumba.com.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of JP Jamous
> Sent: Thursday, October 06, 2016 7:45 AM
> To: 'WebAIM Discussion List'
> Subject: [WebAIM] Accessible Web Calendar
>
> Has anyone stumbled over a nice accessible calendar that can be used
> on a web site?
>
>
>
> I am looking for one that can be accessed through screen readers and
> liquid based to expand and collapse if the browser is maximized or minimized.
>
>
>
> Any references would be highly appreciated.
>
> > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> >
--
Work hard. Have fun. Make history.
From: JP Jamous
Date: Thu, Oct 06 2016 12:31PM
Subject: Re: Accessible Web Calendar
← Previous message | No next message
Mary,
Most of your links failed. Either 404 errors or wrong addresses.
I really like
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Date%20Pickers/ARIA%20Date%20Picker%20(Basic)/demo.htm
as it is an API that functions with multiple client-side languages.
I took the test and loved the heck out of it. Those guys did a very nice job at it.
Thanks to Birkir and Bryan.
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Mary Heid
Sent: Thursday, October 6, 2016 10:47 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Accessible Web Calendar
JP-
We have the same interest here at UNR. When I work with vendors and their calendars are not accessible, they often ask, "do you know of an accessible calendar we can look to for direction?" Below is what I've given to a few of them from a search I did about 6 months ago. I don't know if any of them found it helpful, but I share it here with you. I would really appreciate some feedback if these are or are not helpful resources and if you find anything in your search that I might be able to pass along to my vendors in the future.
Thank you,
-Mary
"As promised, here are some resources that may lead you in the right direction for an accessible calendar. Not being a developer myself, I would appreciate if you can let us know if you find any of these particularly helpful or not helpful so I can pass them along or not in the future. Thank you."
Looks like Stanford figured it out....
https://soap.stanford.edu/tips-and-tools/tips/wai-aria/wai-aria-widgets[soap.stanford.edu]
Follow the second link under Date Pickers to see one that may work.
ARIA information about a date picker
https://www.w3.org/TR/2009/WD-wai-aria-practices-20091215/#datepicker[w3.org]
Deque University HTML, JavaScript, CSS Source Code https://dequeuniversity.com/library/aria/date-pickers/sf-date-picker[dequeuniversity.com]
jQuery UI DatePicker from 2013
http://www.deque.com/blog/accessible-jquery-ui-datepicker/[deque.com]
HTML code from 2007
http://www.catea.gatech.edu/scripts/calendar.html[catea.gatech.edu]
Mary Heid
System Administrator, Enrollment Services Coordinator, Assistive Technology University of Nevada, Reno
(775) 682-8038
http://www.unr.edu/general-information/accessibility
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela French
Sent: Thursday, October 06, 2016 8:40 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Accessible Web Calendar
You might check out Trumba.com.
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of JP Jamous
Sent: Thursday, October 06, 2016 7:45 AM
To: 'WebAIM Discussion List'
Subject: [WebAIM] Accessible Web Calendar
Has anyone stumbled over a nice accessible calendar that can be used on a web site?
I am looking for one that can be accessed through screen readers and liquid based to expand and collapse if the browser is maximized or minimized.
Any references would be highly appreciated.