Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Secret Life of Forms

22,606 views

Published on

Using CSS [and HTML5/ARIA] to enhance the user experience of forms (w/case studies)

Presentation for 2016 CSS Dev Conference in San Antonio, TX (October 17, 2016)

Published in: Internet
  • Be the first to comment

The Secret Life of Forms

  1. 1. Photo – Space Lab, Vancouver, Canada (Clint Moroz)
  2. 2. From Native form elements (http://nativeformelements.com/) - Joshua Jenkins
  3. 3. More Information: https://en.wikipedia.org/wiki/Kaieteur_Falls
  4. 4. <span>3</span>
  5. 5. <button type="button">3</button>
  6. 6. <span class="clearButton"><img src="files/images/icons/icon- clear-key-touch.png" width="17" height="18" alt="Clear"></span>
  7. 7. <input type="reset" class="clearButton" value="Clear Number">
  8. 8. <span class="deleteNumber"><img src="files/images/icons/icon- del-key-touch.png" width="17" height="18" alt="<"></span>
  9. 9. <button type="button" class="deleteNumber">Delete Numbers</button>
  10. 10. <a href="#" class="callButton ui-link"></a>
  11. 11. <input type="submit" name="call" value="Call Number" class="callButton">
  12. 12. JS - Add aria-live=“polite” when the full number (10 characters) has been reached – indicating number is ready to be called
  13. 13. .ui-countryselector input[type="radio"] + label ~ div.columns { overflow: hidden; float: none; position: absolute; clip: rect(0,0,0,0); width: 100%; height: 0; margin: 0; padding: 0; }
  14. 14. If a region is not selected, hide related countries
  15. 15. If a region is selected, show related countries
  16. 16. .ui-countryselector input[type="radio"]:checked + label ~ div.columns { position: static; height: auto; }
  17. 17. .ui-countryselector input[type="radio"] + label ~ div.columns { overflow: auto; }
  18. 18. .ui-countryselector input[type="radio"]:checked + label ~ div.columns { float: left; height: 384px; }

×