1 / 9

Enhancing Slider Questions in Qualtrics with Accessibility Features

This project aims to replicate the slider question functionality of Qualtrics while integrating essential accessibility features such as keyboard navigation and screen reader support. Developed using HTML, CSS, JavaScript, and jQuery, the custom slider allows for precise user input through visual sliders and accessible labels. We've conducted testing with screen readers like NVDA and JAWS to ensure compatibility, ultimately making the tool more user-friendly for individuals with visual impairments. Our enhancements can contribute to improving the Qualtrics interface for all users.

derry
Download Presentation

Enhancing Slider Questions in Qualtrics with Accessibility Features

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) • 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