Day of week selector

The Web Content Accessibility Guidelines were developed through a Milestones process by W3C in cooperation with individuals and organizations around the world.

They have published a set of standards that all public serving institutions must follow when providing content to users via the internet.

At Skagit Valley College I was asked by the Disability Coordinator to come up with a solution for selecting the days of the week from a control on a page of the web application.

I came up with this day of week selector that lets the user choose the days that they need. I am able to use the standard labels and ID names to enable screen readers and other accessibility software to describe the content to the user in a beneficial manner that they could easily understand and interact with.

The ui is just an unordered list with the days of week as id.

<label for=”weekdays”>Day(s)</label>
<ul id=”weekdays”>
<li><a id=”Monday”>M</a></li>
<li><a id=”Tuesday”>T</a></li>
<li><a id=”Wednesday”>W</a></li>
<li><a id=”Thursday”>T</a></li>
<li><a id=”Friday”>F</a></li>
</ul>

Then I added the ability to select them by manipulating the class with jquery using a click event handler…

// make a days of week choice selector
$(“#weekdays a”).on(“click”, function(event){
$( this ).toggleClass(“success”);

});

Then, to gather the info and submit with the form, I select the li’s with the class identifier, and add them to a form variable as so…

var weekdays=$(“.success”);
var the_weekdays=””;
weekdays.each(function(){
if(the_weekdays!==””){the_weekdays=the_weekdays+” , “;}
the_weekdays=the_weekdays+$( this ).attr(“id”);
});
$(“input[name=the_weekdays]”).val(the_weekdays);

I have even thrown in some code to put a comma between multiple days if selected. The string that is submitted with the form  would look like this: Tuesday,  Thursday