Pre-Production Checklist

Pre-Production Checklist

• Is it responsive?
• Does is have special features for touch devices?
• Are hit areas appropriately sized?
• Are alternative selection mechanisms in place?
• Are there incompatibility fallbacks for unsupported browsers?
• Is all information accessible via keyboard?
• Are there visible states for focus/hover/selected?
• Is there a fallback for tooltips?
• Are tables legible and accessible?
• How did it perform on PageSpeed?
• Is it error-free on WAVE?
• Are the colors color blind safe? Is there enough contrast?

---

Responsive:

• Test the graphic on as many devices as possible and make sure it flows appropriately and doesn't break out of the viewport.

• Use the viewport meta tag in your HTML.

    <meta name="viewport" content="width=device-width, initial-scale=1">
  

• More on sizing content: Viewport Meta Tag | Mozilla Developers

• Use CSS media queries.

    @media all and (max-width: 768px) {}
  

• More on media queries: Media Queries for Standard Devices | CSS Tricks

• More on RWD fundamentals: Responsive Web Design Basics | Google Developers

---

Touch Support:

• Some interactives may require specific enhancements for touch devices.

• Example: Disable mouse events on a map and use a native control, like a select box, instead. (How?)

• To isolate UI elements and interactions for touch devices, test for mobile user agent strings and add a CSS class to the containing element. This way you can use touch-only CSS and JS selectors.

    var touch;
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
      touch = true;
      var wrapper = document.getElementById('interactive-wrapper');
      wrapper.className += ' touch-device';
    }
  

The above JS snippet tests for the user agent and – if it's a touch device – sets the variable touch to TRUE and adds the class touch-device to the interactive's container. This way you can write touch-only CSS like below, which will increase the size of an SVG circle on touch devices:

    .touch-device circle {  
      r: 30;
      stroke-width: 8;
    }
You can also now write JS like below, which will only add event listeners for mouse actions if the user is *not* on mobile:

    if (!touch){
      elem.addEventListener( 'mouseover', function(e) {
        tooltipInfo(e.target);
        tooltip.style.display = 'block';
      });
      elem.addEventListener( 'mouseout', function() {
        tooltip.style.display = 'none';
      });
    } 

• More on designing for touch: Fingers, thumbs, and people | Steven Hoober

---

Hit Areas:

• Tap targets should be large enough to touch on mobile – at least 30x30 pixels or so.
• Links and tap targets should be spaced appropriately so users won't accidentally hit the wrong link.
• Use media queries to make the necessary adjustments to your design. (See Responsive above.)
• For some graphics (like SVG maps) that are scaled down by device width, hit areas will become too small on certain devices. To compensate:
• Provide a different means to access the data. (See Alternative Selection Mechanisms below.)
• Don't disable pinch-zoom! Ensure your users can zoom in on a desired area of your graphic.
• Lively discussion on pinch-zoom: Disabling Pinch Zoom on Mobile Web | StackOverflow
• More on hit areas: Finger-Friendly Design | Smashing Magazine

---

Alternative Selection Mechanisms:

• If your graphic includes a custom way to access data, also provide a native control (select box, radio buttons, etc.) so your user can access the data in your interactive more easily via keyboard or their mobile device.

• In the above example, data embedded in the map is available both by hovering over a county and by using the select box to pick a county. This accomplishes two things:

• It makes the data accessible via keyboard.

• It allows geographicaly small areas (like San Francisco County) to be more easily selected on mobile devices.

• The tricky part is keeping the two selection mechanisms (the map and the select box) in sync. Here are the functions that operate the select box:

    function countySelect(){
      var select = document.getElementById("cir-map-select");
      select.onchange = function(){
        var value = select.value;
        updateSelectionInfo(value);
      }
    }
  
    function updateSelectionInfo(value){
      var info = document.getElementById("cir-map-info");
      if (value != "Select a county"){
        var svgCounty = document.getElementById(value);
        var dataCounty = svgCounty.getAttribute("data-name");
        var dataApproved = svgCounty.getAttribute("data-approved").toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        var html = "<div class='info-inner'><span class='county-group'>" + dataApproved + " active permits</span></div>";
        info.innerHTML = html;
        updateSelectedPath(svgCounty);     
      } else {
        info.innerHTML = "";
        deselectPath();
      }
    }
  
    function updateSelectedPath(path){
      deselectPath();   
      if (path.getAttribute('data-selected') == 'true'){
        path.setAttribute('data-selected', 'false');
      } else {
        path.setAttribute('data-selected', 'true');
      } 
      path.setAttribute('data-selected', 'true');
      var parent = path.parentNode;
      parent.appendChild(path);
    }
  
    function deselectPath(){
      var selected = document.querySelector('.cir-county[data-selected="true"]');
      if (selected) {
    	selected.setAttribute('data-selected', 'false');
      }
    }
  

  Then the map paths also update the select box:

    elem.addEventListener( 'click', function(e) {
      var countyID = e.target.id;
      var select = document.getElementById("cir-map-select");           
      if (e.target.getAttribute('data-selected') == 'true'){
        select.value = "Select a county";
        e.target = "";
        countyID = "Select a county";
      } else {
        select.value = countyID;
      }
      updateSelectedPath(e.target);
      updateSelectionInfo(countyID);
    }); 
  

---

Incompatibility Fallbacks:

• Provide feedback to users who turn off javascript:

    <style>
      .compatibility-error {display:none;}
    </style>
    
    <noscript>
      <style>
        .viz-container {display:none;}
        .compatibility-error {display:block;}
      </style>
    </noscript>
    <div class="compatibility-error">This interactive feature requires a modern browser with JavaScript enabled.</div>
  

• Provide feedback to users who use browsers you don't support:

    <!--[if lt IE 9]>
      <style>
        .county-selection-wrapper, #interactive-wrapper, .cir-map-legend, .credit {display:none;}
      </style>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
  

---

Keyboard Support:

• Test for keyboard support by tabbing through your UI to make sure important elements are focusable.

• Test for screen reader support with a tool like ChromeVox, a screen reading browser extension for Chrome. This tool will let you hear information as you tab through an interface. Make sure data in your interactive is audible.

• Use the tabindex attribute to give elements keyboard focus.

    <div tabindex="0" role="button">focusable element</div>
  

• tabindex="0" will place the element in default navigation order. 0 is the value you should use most often.

• tabindex="-1" will remove the elment from default navigation order but allow it to receive focus programmatically.

• tabindex="2" ...or 3, 4, 5, etc. will place elements in the specified order.

• Include event listeners for focus, blur, and keydown in order to trigger interaction via keyboard events in JS.

    $('#us-map circle').focus(function(){ 
   	  var $this = $(this);
      getCircleData($this);
      $('.map-info').css('display', 'block');
    });
  
    $('#us-map circle').blur(function(){ 
      $('.map-info').css('display', 'none');
    });
  
    $('.cir-map-state').keydown(function(e){ 
      var code = e.which;
      // 13 = Return, 32 = Space
      if ((code === 13) || (code === 32)) {
      	$(this).trigger('click');
      }
    });
  

• More on keyboard support: Keyboard Accessibility | WebAIM

---

Visible States:

• Use distinct, visible styles for the different element states:
• default
• hover
• selected
• focus

---

Tooltip Alternative:

• For mobile especially (but also for keyboard navigation), display tooltip data on a fixed area of the screen.
• Fixed data sections help prevent the user's fingers from getting in the way of the data.

---

PageSpeed Evaluation:

• Run your graphic through WebPageTest and/or PageSpeed Insights.
• More performance resources: Links! | Julia Smith

---

WAVE Evaluation:

• Use the WAVE Evaluation Chome Plugin or WAVE Evaluation Firefox Toolbar to make sure you didn't overlook any accessibility issues.

---

Colors:

• Use a color blindness simulator such as Sim Daltonism for Mac or one of the many browser plugins to check for color blindness. Color combinations such as red and green should be avoided.
• Check to ensure contrast between colors is high enough using a color contrast checker.

---