markup.tips
/web/tips/

Page Description Published On
 Silence Your CSS Footprint With Sass Silent… Efficiently group your common styles together to reduce your CSS footprint in this Thinkful project..
 Sticking Components above the Fold Get stuck riding the bleeding edge with this unstable CSS3 feature
 Creating an Accessible to-do list powered by… Enhance a simple to–do list with React.js
 Adopting Orphans with   Up your typography game with the use of this single HTML entity
 Making your Markup Speak Using speakable.jquery.js you too can make your markup talk
 Loading Modernizr from a CDN Get the best of both worlds by loading Modernizr from a CDN near you
 Creating an Accessible Settings Table Create an accessible settings table using HTML5, CSS3, and a sprinkle of jQuery


Try It
(press TAB)

Settings Value
site_title My Site

site_title
Media Source Filesystem

Media Source
JS–Driver React.js 0.x

JS–drivers

 
 
clipsJSON {{"prop":"value"}}

clipsJSON
compress_css Yes

compress_css

 


Creating an Accessible Settings Table#HTML #JS

The Problem

Configurable software of any kind can find itself in need of settings to be quickly created, found, and edited. JavaScript based management components tend to lack in accessibility; we need a HTML–first solution.

The Solution

In this tutorial we will start with a simple <table> element that will be progressively enhanced to become the hyper–accessible example found above.

Our .settings-table will have 5 settings each with a different input type.

Fundamental Principles

  • Each setting actually consists of two <tr> elements
    • First <tr> is always present and displays the setting name/value pair
    • Second <tr> spans all columns and contains an accessible form
  • For .js users
    • the corresponding .setting-form of each setting is initially hidden using a .js-hide class
    • Some jQuery is used to show the corresponding .setting-form of each setting on focus
  • For .no-js users
    • All settings are expanded to make all forms accessible
    • Each .setting-form contains a standard <form> that supports .no-js users.

Table Structure

Admittedly with an odd approach, this component relies on two rows per setting. Note the use of the classic colspan attribute. This lets our form be greedy and take up the full width of the component. If you add columns to your table update your colspan attributes accordingly.

Source Markup

Source HTML for this example.

Source Styles

Notice the use of the .js-hide class to hide our forms for asynchronous users. We're using a craft :nth-of-type(4n-1) to visually differentiate “every other” settings row. You'll also find a crafty uses of the adjacent selector to display forms and the focus selector to visually highlight rows for .no-js users.


Sprinkle of jQuery

jQuery is used to listen to either a focus or click event and open the corresponding .setting-form. Modernizr is used to detect whether or not the device is using touch input.

Pretty lightweight, eh? Notice we aren't even having to make use of jQuery.hide() or jQuery.show(). Setting an .open class on the setting row will show or hide the corresponding .setting-form. These two <tr>s are siblings so you may be wondering how this is accomplished using only CSS. We have the adjacent selector to thank for this:


.settings-table tbody > tr.open + .setting-form {
  display: table-row; /* display the setting form for open rows */
}

To support older browsers, we need a few more lines of jQuery to act as a polypill for the adjacent selector.


Try It
(again)

Settings Value
site_title My Site

site_title
Media Source Filesystem

Media Source
JS–Driver React.js 0.x

JS–drivers

 
 
clipsJSON {{"prop":"value"}}

clipsJSON
compress_css Yes

compress_css

 


Try It
(no–js)

Settings Value
site_title My Site

site_title
Media Source Filesystem

Media Source
JS–Driver React.js 0.x

JS–drivers

 
 
clipsJSON {{"prop":"value"}}

clipsJSON
compress_css Yes

compress_css

 

Disqus This

Disqus This