Difference between revisions of "UL, OL, and LI Elements"

From Level Access Web Labs
Jump to navigation Jump to search
Line 33: Line 33:
 
<li>Test</li>
 
<li>Test</li>
 
</ol>
 
</ol>
</html>
+
 
  
 
<h2>Nested Unordered Lists</h2>
 
<h2>Nested Unordered Lists</h2>
Line 51: Line 51:
 
<li>Android Firefox</li>
 
<li>Android Firefox</li>
 
<li>Android Chrome</li>
 
<li>Android Chrome</li>
 +
</ul>
 +
</li>
 +
</ul>
 +
 +
<h2> Unordered Nested List with Input elements </h2>
 +
<ul>
 +
<li>Browsers I like:
 +
<ul>
 +
<li>
 +
<label><input type="checkbox" />Internet Explorer</label>
 +
</li>
 +
<li>
 +
<label><input type="checkbox" />Firefox</label>
 +
</li>
 +
<li>
 +
<label><input type="checkbox" />Chrome</label>
 +
</li>
 +
</ul>
 +
</li>
 +
<li>Cheeses I like:
 +
<ul>
 +
<li>
 +
<label><input type="checkbox" />Cheddar</label>
 +
</li>
 +
<li>
 +
<label><input type="checkbox" />Swiss</label>
 +
</li>
 +
<li>
 +
<label><input type="checkbox" />Provolone</label>
 +
</li>
 
</ul>
 
</ul>
 
</li>
 
</li>
Line 65: Line 95:
 
VoiceOver appears as an outlier to the standard behaviour, allowing CSS to suppress the native semantics of the &lt;ul&gt; structure. This behaviour confirmed to occur as early as v9.3.2, and persists at time of writing to the current version of iOS 10.2.1.
 
VoiceOver appears as an outlier to the standard behaviour, allowing CSS to suppress the native semantics of the &lt;ul&gt; structure. This behaviour confirmed to occur as early as v9.3.2, and persists at time of writing to the current version of iOS 10.2.1.
 
</p>
 
</p>
 
+
</html>
 
[[Category:Elements]]
 
[[Category:Elements]]

Revision as of 16:12, 30 March 2017

Unordered List

  • Web Accessibility
  • PDF Accessibility
  • Mobile Accessibility

Ordered List

  1. Design
  2. Develop
  3. Test

Ordered List (reversed)

  1. Design
  2. Develop
  3. Test

Ordered List (with start number)

  1. Design
  2. Develop
  3. Test

Ordered List (with value number)

  1. Design
  2. Develop
  3. Test

Nested Unordered Lists

  • Desktop Browsers for Testing
    • Firefox
    • Internet Explorer
    • Safari
  • Mobile Browsers for Testing
    • Mobile Safari
    • Android Firefox
    • Android Chrome

Unordered Nested List with Input elements

  • Browsers I like:
  • Cheeses I like:

Unordered List with list-style: none assigned

  • TalkBack on Firefox says this is a List
  • VoiceOver on Mobile Safari says this is not a List
  • NVDA on Firefox says this is a List
  • JAWS on Internet Explorer 11 says this is a List

VoiceOver appears as an outlier to the standard behaviour, allowing CSS to suppress the native semantics of the <ul> structure. This behaviour confirmed to occur as early as v9.3.2, and persists at time of writing to the current version of iOS 10.2.1.