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

From Level Access Web Labs
Jump to navigation Jump to search
(Unordered List with list-style-type: " @ " assigned)
 
(13 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
 +
== Unordered List ==
 
<html>
 
<html>
<h2>Unordered List</h2>
 
 
<ul>
 
<ul>
 
<li>Web Accessibility</li>
 
<li>Web Accessibility</li>
Line 6: Line 7:
 
<li>Mobile Accessibility</li>
 
<li>Mobile Accessibility</li>
 
</ul>
 
</ul>
<h2>Ordered List </h2>
+
</html>
 +
 
 +
== Ordered List ==
 +
<html>
 
<ol>
 
<ol>
 
<li>Design</li>
 
<li>Design</li>
Line 12: Line 16:
 
<li>Test</li>
 
<li>Test</li>
 
</ol>
 
</ol>
 +
</html>
  
<h2>Ordered List (reversed)</h2>
+
== Ordered List (reversed) ==
 +
<html>
 
<ol reversed>
 
<ol reversed>
 
<li>Design</li>
 
<li>Design</li>
Line 19: Line 25:
 
<li>Test</li>
 
<li>Test</li>
 
</ol>
 
</ol>
 +
</html>
  
<h2>Ordered List (with start number)</h2>
+
== Ordered List (with start number) ==
 +
<html>
 
<ol start="3">
 
<ol start="3">
 
<li>Design</li>
 
<li>Design</li>
Line 26: Line 34:
 
<li>Test</li>
 
<li>Test</li>
 
</ol>
 
</ol>
 +
</html>
  
<h2>Ordered List (with value number)</h2>
+
== Ordered List (with value number) ==
 +
<html>
 
<ol>
 
<ol>
 
<li>Design</li>
 
<li>Design</li>
Line 36: Line 46:
  
  
 +
== Nested Unordered Lists ==
 +
<html>
 +
<ul>
 +
<li>
 +
<span>Desktop Browsers for Testing</span>
 +
<ul>
 +
<li>Firefox</li>
 +
<li>Internet Explorer</li>
 +
<li>Safari</li>
 +
</ul>
 +
</li>
 +
<li>
 +
<span>Mobile Browsers for Testing</span>
 +
<ul>
 +
<li>Mobile Safari</li>
 +
<li>Android Firefox</li>
 +
<li>Android Chrome</li>
 +
</ul>
 +
</li>
 +
</ul>
 +
</html>
  
 +
== Unordered Nested List with Input elements ==
 +
<html>
 +
<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>
 +
</li>
 +
</ul>
 +
</html>
  
 
+
==Unordered List with ''list-style: none'' assigned ==
 +
<html>
 +
<ul style="list-style:none">
 +
<li>TalkBack on Firefox says this is a List</li>
 +
<li>VoiceOver on Mobile Safari says this is <b>not</b> a List</li>
 +
<li>NVDA on Firefox says this is a List</li>
 +
<li>JAWS on Internet Explorer 11 says this is a List</li>
 +
</ul>
 +
<p>
 +
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>
 +
</html>
 
[[Category:Elements]]
 
[[Category:Elements]]

Latest revision as of 21:16, 7 December 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.