90 likes | 180 Views
Survey Slider Question. Dennis Hume & Hannah Kim LIS490JG/CS398 – Jon Gunderson. Goals.
E N D
Survey Slider Question Dennis Hume & Hannah Kim LIS490JG/CS398 – Jon Gunderson
Goals • Qualtrics is a software company that enables users to create their own Web-based surveys to conduct statistical analysis. For our project we attempted to emulate the Qualtrics slider question while incorporating various accessibility features such as keyboard and screen reader support. • Here is an example of the slider question on Qualtrics: https://new.qualtrics.com/SE/?SID=SV_1yNmVy7Jo8XmkVS&Preview=Survey&BrandID=Qualtrics
Key Technologies • Javascript (main body of code is written in JS) • Jquery (for offset, etc) • ARIA (for screen reader support) • CSS (for the slider styling) • HTML (for the slider page) • Photoshop (to create the images, slider row and thumb)
Sample Code (makequestions) function makequestions(node, questions, gridlines, slidermin, slidermax, slidernow, id) { ……. html += questions[i]; html += " <div class='sliderrow'>"; html += " <div class='thumb'"; html += " role='slider'"; html += " aria-valuemin='"+ slidermin +"'"; html += " aria-valuemax='"+ slidermax +"'"; html += " aria-valuenow='"+ slidernow +"'"; html += " aria-labelledby='slider" + id + '_' + i + "_label'"; html += " tabindex='0'"; html += " >"; html += "  "; html += " </div>"; html += " </div>"; html += "</td>"; ……….
Sample Code (makelabels) function makelabels(node, labels) { var html=""; html += "<table class='labels'>"; html += "<thead>"; html += "<tr>"; html += "<th class='empty' width='200px'>"; //needs to be offset by this amount html += "<div class='WidthStrut' style='width: 200px;'>"; html += "</div>"; html += "</th>"; html += "<th class='LeftBorder'></th>"; html += "<th class='labeldescriptions'>"; html += "<table class='labeldescriptions'>"; //they use percentages here html += "<tbody>"; html += "<tr>"; for(vari=0; i<labels.length; i++) { html += "<td class='label' width='" + ((100)/labels.length) + "%'>" + labels[i] + "</td>"; } //end for html += "</tr>"; html += "</tbody>"; html += "</table>"; html += "</th>"; html += "<th class='rightborder'></th>"; //functions as right border html += "</tr>"; html += "<thead>"; html += "</table>"; $(node).append(html); //alert(node.className); } //end makelabels function
Sample Code (makeLabelDescriptions) function makeLabelDescriptions(slidermin, slidermax, labels) { varlen = 2*labels.length-1; var j = 0; var k = 0; var range = (parseInt(slidermax)-parseInt(slidermin))/len; var v = range; for(vari = 0; i<=len; i++){ var o = {}; if(i%2==0){ o.value=v; o.description=labels[j]+' range'; k=j+1; } else { o.value=v; o.description='between ' + labels[j] + ' and ' + labels[k] + ' range'; j++; } //end if-else label_descriptions.push(o); v=v+range; } //end for } //end makeLabelDecriptions
Biggest Challenges • Learning Javascript • Generating dynamic content • Adding accessibility features • Working with the screen readers • We tested NVDA, JAWS, MACOSX and NVDA worked best
Impact • Adding keyboard support to sliders will help those with visual impairments • It is also helpful to add aria-valuetext in general to know what range you are in when moving the slider • Hopefully this can help Qualtrics improve their site!
Demonstration • Today we are using NVDA and Firefox 4