1 / 9

Survey Slider Question

Survey Slider Question. Dennis Hume & Hannah Kim LIS490JG/CS398 – Jon Gunderson. Goals.

kasen
Télécharger la présentation

Survey Slider Question

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Survey Slider Question Dennis Hume & Hannah Kim LIS490JG/CS398 – Jon Gunderson

  2. 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

  3. 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)

  4. 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 += " &nbsp"; html += " </div>"; html += " </div>"; html += "</td>"; ……….

  5. 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

  6. 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

  7. Biggest Challenges • Learning Javascript • Generating dynamic content • Adding accessibility features • Working with the screen readers • We tested NVDA, JAWS, MACOSX and NVDA worked best

  8. 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!

  9. Demonstration • Today we are using NVDA and Firefox 4

More Related