Editorial: Address accessibility concerns (#309)

This addresses some of the accessibility concerns raised in #307.

Changes:
- Provide two separate columns headers for enumeration description tables and
add a caption
- Make parameter names row headers in parameter definition tables
- Pull back old custom styles for parameter definition tables that are no longer
provided out of the box by ReSpec

media-source-respec.html

@@ -287,7 +287,7 @@ <h2><dfn>MediaSource</dfn> Object</h2>
     "closed",
     "open",
     "ended"
-};</pre><table class="simple" data-dfn-for="ReadyState"><tbody><tr><th colspan="2">Enumeration description</th></tr>
+};</pre><table class="simple" data-dfn-for="ReadyState"><caption>Description of {{ReadyState}} enumeration values</caption><tbody><tr><th>Value</th><th>Description</th></tr>
         <tr><td><dfn><code id="idl-def-ReadyState.closed">closed</code></dfn></td><td>
           Indicates the source is not currently attached to a media element.
         </td></tr>
@@ -304,7 +304,7 @@ <h2><dfn>MediaSource</dfn> Object</h2>
       <div><pre class="idl">enum EndOfStreamError {
     "network",
     "decode"
-};</pre><table class="simple" data-dfn-for="EndOfStreamError"><tbody><tr><th colspan="2">Enumeration description</th></tr><tr><td><dfn><code id="idl-def-EndOfStreamError.network">network</code></dfn></td><td>
+};</pre><table class="simple" data-dfn-for="EndOfStreamError"><caption>Description of {{EndOfStreamError}} enumeration values</caption><tbody><tr><th>Value</th><th>Description</th></tr><tr><td><dfn><code id="idl-def-EndOfStreamError.network">network</code></dfn></td><td>
           <p>Terminates playback and signals that a network error has occurred.</p>
           <p class="note">JavaScript applications SHOULD use this status code to terminate playback with a network error. For example, if a network error occurs while fetching media data.</p>
         </td></tr><tr><td><dfn><code id="idl-def-EndOfStreamError.decode">decode</code></dfn></td><td>
@@ -414,7 +414,7 @@ <h3>Attributes</h3>
             <li>Add the new object to {{MediaSource/sourceBuffers}} and [=queue a task=] to [=fire an event=] named {{addsourcebuffer}} at {{MediaSource/sourceBuffers}}.</li>
             <li>Return the new object.</li>
           </ol>
-        <table class="parameters"><tbody><tr><th>Parameter</th><th>Type</th><th>Nullable</th><th>Optional</th><th>Description</th></tr><tr><td class="prmName">|type|</td><td class="prmType">{{DOMString}}</td><td class="prmNullFalse"><span role="img" aria-label="False">✘</span></td><td class="prmOptFalse"><span role="img" aria-label="False">✘</span></td><td class="prmDesc"></td></tr></tbody></table><div><em>Return type: </em><a>SourceBuffer</a></div></dd>
+        <table class="parameters"><tbody><tr><th>Parameter</th><th>Type</th><th>Nullable</th><th>Optional</th><th>Description</th></tr><tr><th class="prmName">|type|</th><td class="prmType">{{DOMString}}</td><td class="prmNullFalse"><span role="img" aria-label="False">✘</span></td><td class="prmOptFalse"><span role="img" aria-label="False">✘</span></td><td class="prmDesc"></td></tr></tbody></table><div><em>Return type: </em><a>SourceBuffer</a></div></dd>
 
           <dt><dfn><code>removeSourceBuffer</code></dfn></dt><dd>
           <p>Removes a {{SourceBuffer}} from {{MediaSource/sourceBuffers}}.</p>
@@ -574,7 +574,7 @@ <h3>Attributes</h3>
             <li>Destroy all resources for |sourceBuffer|.</li>
           </ol>
         <table
-          class="parameters"><tbody><tr><th>Parameter</th><th>Type</th><th>Nullable</th><th>Optional</th><th>Description</th></tr><tr><td class="prmName">|sourceBuffer|</td><td class="prmType">{{SourceBuffer}}</td><td class="prmNullFalse"><span role="img" aria-label="False">✘</span></td><td class="prmOptFalse"><span role="img" aria-label="False">✘</span></td><td class="prmDesc"></td></tr></tbody></table><div><em>Return type: </em>{{undefined}}</div></dd>
+          class="parameters"><tbody><tr><th>Parameter</th><th>Type</th><th>Nullable</th><th>Optional</th><th>Description</th></tr><tr><th class="prmName">|sourceBuffer|</th><td class="prmType">{{SourceBuffer}}</td><td class="prmNullFalse"><span role="img" aria-label="False">✘</span></td><td class="prmOptFalse"><span role="img" aria-label="False">✘</span></td><td class="prmDesc"></td></tr></tbody></table><div><em>Return type: </em>{{undefined}}</div></dd>
 
           <dt><dfn><code>endOfStream</code></dfn></dt><dd>
           <p>Signals the end of the stream.</p>
@@ -585,7 +585,7 @@ <h3>Attributes</h3>
             <li>Run the [=end of stream=] algorithm with the error parameter set to |error:EndOfStreamError|.</li>
           </ol>
         <table
-          class="parameters"><tbody><tr><th>Parameter</th><th>Type</th><th>Nullable</th><th>Optional</th><th>Description</th></tr><tr><td class="prmName">|error|</td><td class="prmType">{{EndOfStreamError}}</td><td class="prmNullFalse"><span role="img" aria-label="False">✘</span></td><td class="prmOptTrue"><span role="img" aria-label="True">✔</span></td><td class="prmDesc"></td></tr></tbody></table><div><em>Return type: </em>{{undefined}}</div></dd>
+          class="parameters"><tbody><tr><th>Parameter</th><th>Type</th><th>Nullable</th><th>Optional</th><th>Description</th></tr><tr><th class="prmName">|error|</th><td class="prmType">{{EndOfStreamError}}</td><td class="prmNullFalse"><span role="img" aria-label="False">✘</span></td><td class="prmOptTrue"><span role="img" aria-label="True">✔</span></td><td class="prmDesc"></td></tr></tbody></table><div><em>Return type: </em>{{undefined}}</div></dd>
 
           <dt><dfn><code>setLiveSeekableRange</code></dfn></dt><dd>
 
@@ -608,7 +608,7 @@ <h3>Attributes</h3>
                 <th>Description</th>
               </tr>
               <tr>
-                <td class="prmName">|start|</td>
+                <th class="prmName">|start|</th>
                 <td class="prmType">{{double}}</td>
                 <td class="prmNullFalse"><span aria-label="False" role=
                 "img">✘</span></td>
@@ -617,7 +617,7 @@ <h3>Attributes</h3>
                 <td class="prmDesc">The start of the range, in seconds measured from [=presentation start time=]. While set, and if {{MediaSource/duration}} equals positive Infinity, {{HTMLMediaElement}}.{{HTMLMediaElement/seekable}} will return a non-empty TimeRanges object with a lowest range start timestamp no greater than |start|.</td>
               </tr>
               <tr>
-                <td class="prmName">|end|</td>
+                <th class="prmName">|end|</th>
                 <td class="prmType">{{double}}</td>
                 <td class="prmNullFalse"><span aria-label="False" role=
                 "img">✘</span></td>
@@ -672,7 +672,7 @@ <h3>Attributes</h3>
           <p class="note">
             This method returning true implies that HTMLMediaElement.canPlayType() will return "maybe" or "probably" since it does not make sense for a <a>MediaSource</a> to support a type the HTMLMediaElement knows it cannot play.
           </p>
-        <table class="parameters"><tbody><tr><th>Parameter</th><th>Type</th><th>Nullable</th><th>Optional</th><th>Description</th></tr><tr><td class="prmName">|type|</td><td class="prmType">{{DOMString}}</td><td class="prmNullFalse"><span role="img" aria-label="False">✘</span></td><td class="prmOptFalse"><span role="img" aria-label="False">✘</span></td><td class="prmDesc"></td></tr></tbody></table><div><em>Return type: </em>{{boolean}}</div></dd></dl>
+        <table class="parameters"><tbody><tr><th>Parameter</th><th>Type</th><th>Nullable</th><th>Optional</th><th>Description</th></tr><tr><th class="prmName">|type|</th><td class="prmType">{{DOMString}}</td><td class="prmNullFalse"><span role="img" aria-label="False">✘</span></td><td class="prmOptFalse"><span role="img" aria-label="False">✘</span></td><td class="prmDesc"></td></tr></tbody></table><div><em>Return type: </em>{{boolean}}</div></dd></dl>
       </section>
 
       <section id="mediasource-events">
@@ -1179,7 +1179,7 @@ <h2><dfn>SourceBuffer</dfn> Object</h2>
 <pre class="idl">enum AppendMode {
     "segments",
     "sequence"
-};</pre><table class="simple" data-dfn-for="AppendMode"><tbody><tr><th colspan="2">Enumeration description</th></tr><tr><td><dfn><code id="idl-def-AppendMode.segments">segments</code></dfn></td><td>
+};</pre><table class="simple" data-dfn-for="AppendMode"><caption>Description of {{AppendMode}} enumeration values</caption><tbody><tr><th>Value</th><th>Description</th></tr><tr><td><dfn><code id="idl-def-AppendMode.segments">segments</code></dfn></td><td>
           <p>The timestamps in the media segment determine where the [=coded frames=] are placed in the presentation. Media segments can be appended in any order.</p>
         </td></tr><tr><td><dfn><code id="idl-def-AppendMode.sequence">sequence</code></dfn></td><td>
           <p>Media segments will be treated as adjacent in time independent of the timestamps in the media segment. Coded frames in a new media segment will be placed immediately after the coded
@@ -1333,7 +1333,7 @@ <h2><dfn>SourceBuffer</dfn> Object</h2>
             <li>[=Queue a task=] to [=fire an event=] named {{updatestart}} at this <a>SourceBuffer</a> object.</li>
             <li>Asynchronously run the [=buffer append=] algorithm.</li>
           </ol>
-        <table class="parameters"><tbody><tr><th>Parameter</th><th>Type</th><th>Nullable</th><th>Optional</th><th>Description</th></tr><tr><td class="prmName">|data|</td><td class="prmType">{{BufferSource}}</td><td class="prmNullFalse"><span role="img" aria-label="False">✘</span></td><td class="prmOptFalse"><span role="img" aria-label="False">✘</span></td><td class="prmDesc"></td></tr></tbody></table><div><em>Return type: </em>{{undefined}}</div></dd><dt><dfn><code>abort</code></dfn></dt><dd>
+        <table class="parameters"><tbody><tr><th>Parameter</th><th>Type</th><th>Nullable</th><th>Optional</th><th>Description</th></tr><tr><th class="prmName">|data|</th><td class="prmType">{{BufferSource}}</td><td class="prmNullFalse"><span role="img" aria-label="False">✘</span></td><td class="prmOptFalse"><span role="img" aria-label="False">✘</span></td><td class="prmDesc"></td></tr></tbody></table><div><em>Return type: </em>{{undefined}}</div></dd><dt><dfn><code>abort</code></dfn></dt><dd>
           <p>Aborts the current segment and resets the segment parser.</p>
 
           <ol class="method-algorithm">
@@ -1396,7 +1396,7 @@ <h2><dfn>SourceBuffer</dfn> Object</h2>
                 <th>Description</th>
               </tr>
               <tr>
-                <td class="prmName">|type|</td>
+                <th class="prmName">|type|</th>
                 <td class="prmType">{{DOMString}}</td>
                 <td class="prmNullFalse"><span role="img" aria-label="False">✘</span></td>
                 <td class="prmOptFalse"><span role="img" aria-label="False">✘</span></td>
@@ -1434,7 +1434,7 @@ <h2><dfn>SourceBuffer</dfn> Object</h2>
             <th>Description</th>
           </tr>
           <tr>
-            <td class="prmName">|start|</td>
+            <th class="prmName">|start|</th>
             <td class="prmType">{{double}}</td>
             <td class="prmNullFalse"><span aria-label="False" role=
             "img">✘</span></td>
@@ -1443,7 +1443,7 @@ <h2><dfn>SourceBuffer</dfn> Object</h2>
             <td class="prmDesc">The start of the removal range, in seconds measured from [=presentation start time=].</td>
           </tr>
           <tr>
-            <td class="prmName">|end|</td>
+            <th class="prmName">|end|</th>
             <td class="prmType">{{unrestricted double}}</td>
             <td class="prmNullFalse"><span aria-label="False" role=
             "img">✘</span></td>
@@ -2551,7 +2551,7 @@ <h2>Methods</h2>
               <tbody>
                 <tr><th>Parameter</th><th>Type</th><th>Nullable</th><th>Optional</th><th>Description</th></tr>
                 <tr>
-                  <td class="prmName">|index|</td>
+                  <th class="prmName">|index|</th>
                   <td class="prmType">{{unsigned long}}</td>
                   <td class="prmNullFalse"><span role="img" aria-label="False">✘</span></td>
                   <td class="prmOptFalse"><span role="img" aria-label="False">✘</span></td>

mse.css

@@ -6,7 +6,7 @@ table.old-table { border-collapse: collapse; border-style: hidden hidden none hi
 table.old-table thead, table tbody { border-bottom: solid; }
 table.old-table tbody th:first-child { border-left: solid; }
 table.old-table tbody th { text-align: left; }
-table.old-table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
+table.old-table td, table th:not(.prmName) { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
 
 dl.switch { padding-left: 2em; }
 dl.switch > dt { text-indent: -1.5em; }
@@ -20,3 +20,63 @@ p + * > li, dd li { margin: 1em 0; }
 body > form { padding: 4px; border: 1px solid red; background-color: white; }
 
 #bug-assist-form { position: fixed; width: 10em; top: 5em; right: 1em; font-family: Tahoma, sans-serif; font-size: 11px; opacity: 0.8; text-align: right; }
+
+.prmNullTrue,
+.prmNullFalse,
+.prmOptTrue,
+.prmOptFalse {
+  width: 45px;
+  text-align: center;
+}
+
+.prmNullTrue,
+.prmOptTrue {
+  color: #0c0;
+}
+
+.prmNullFalse,
+.prmOptFalse {
+  color: #c00;
+}
+
+table.parameters {
+  border-spacing: 0;
+  border-collapse: collapse;
+  margin: 0.5em 0;
+  width: 100%;
+}
+
+table.parameters {
+  border-bottom: 1px solid #90b8de;
+}
+
+.parameters th {
+  color: inherit;
+  padding: 3px 5px;
+  text-align: left;
+  font-weight: normal;
+}
+
+.parameters th:not(.prmName) {
+  color: #fff;
+  background: #005a9c;
+}
+
+.parameters td,
+.parameters .prmName {
+  padding: 3px 10px;
+  border-top: 1px solid #ddd;
+  vertical-align: top;
+}
+
+.parameters tr:first-child td {
+  border-top: none;
+}
+
+.parameters .prmName {
+  width: 100px;
+}
+
+.parameters .prmType {
+  width: 120px;
+}