The Secret Life of Forms

20,035 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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
20,035
On SlideShare
0
From Embeds
0
Number of Embeds
19,606
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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; }

×