ecureuill commented 4 years ago

This is a "not-end" requirement. What I want to mean is that this should be considered for any new page you create that Student can access. Also should correct the old pages.

I will use the label Feature Design Notes to this cases

The objective of this technique is to create lists of related items using list elements appropriate for their purposes. Some assistive technologies allow users to navigate from list to list or item to item. Style sheets can be used to change the presentation of the lists while preserving their integrity.

[ ] The ol element is used when the list is ordered
[ ] The ul element is used when the list is unordered.
[ ] Definition lists (dl) are used to group terms with their definitions.
[ ] Not all lists need markup. For instance, sentences that contain comma-separated lists may not need list markup.
[ ] The list structure (ul/ol) is also useful to group hyperlinks. When this is done, it helps screen reader users to navigate from the first item in a list to the end of the list or jump to the next list. This helps them to bypass groups of links if they choose to.

Tests Procedure

Check that content that has the visual appearance of a list (with or without bullets) is marked as an unordered list.
Check that content that has the visual appearance of a numbered list is marked as an ordered list.
Check that content is marked as a definition list when terms and their definitions are presented in the form of a list.
1. Check that the list is contained within a dl element.
2. Check that each term in the list being described is contained within a dt element.
3. Check that when there is more than one term that shares the same decription that the dt elements immediately follow each other.
4. Check that the description for each term is contained in one or more dd elements.
5. Check that the one or more dd elements immediately follow the one or more dt elements containing the term being described.

Expected Results: All the checks above are true.

Example 1: A list showing steps in a sequence

This example uses an ordered list to show the sequence of steps in a process.

 <ol>
  <li>Mix eggs and milk in a bowl.</li>
  <li>Add salt and pepper.</li>
</ol>

Example 2: A grocery list

This example shows an unordered list of items to buy at the store.

<ul>
  <li>Milk</li>
  <li>Eggs</li>
  <li>Butter</li>
</ul>

Example 3: A word and its definition

This example uses a definition list to group a definition with the term that is being defined.

<dl>
  <dt>blink</dt>
  <dd>turn on and off between .5 and 3 times per second
  </dd>
</dl>

Example 4: Contact information using a definition list

This example uses a defintion list to mark up pairs of related items. The pairs themselves are a logically related list. Since browsers lack wide support for CSS styling on definition list elements, span elements have been included in the markup for styling purposes only, and are not required:

<dl>
<dt><span>name:</span></dt><dd><span>John Doe</span></dd>
<dt><span>tel:</span></dt><dd><span>01-2345678</span></dd>
<dt><span>fax:</span></dt><dd><span>02-3456789</span></dd>
<dt><span>email:</span></dt><dd><span>johndoe@someemail.com</span></dd>
</dl>

The following CSS styling can be used to format each paired item in the list on its own line, as well as giving a table-like layout:

dt, dd{float: left;margin: 0;padding: 0;}
dt{clear:both;font-weight: bold}
dt span{display: inline-block; width: 70px;}
dd span{display: inline-block; margin-right: 5px;}

This is shown in the working example of Contact information using a definition list

Example 5: Using lists to group links

In this example the links are grouped using the ul and li elements.

<a name="categories" id="categories"></a><h2>Product Categories</h2>
<ul class="navigation">
    <li><a href="kitchen.html">Kitchen</a></li>
    <li><a href="bedbath.html">Bed &amp; Bath</a></li>
    <li><a href="dining.html">Fine Dining</a></li>
    <li><a href="lighting.html">Lighting</a></li>
    <li><a href="storage.html">Storage</a><li>
</ul>

CSS can be used to style the list elements, so this technique can be used with a variety of visual appearances. Here is a style that removes the list bullets and the left padding that creates the indent and flows the individual list elements horizontally.

ul.navigation {
  list-style: none; 
  padding: 0;
}
ul.navigation li {
  display: inline;
}

This style removes the list bullets and the left padding and displays the items in a floating block.

ul.navigation {
 list-style: none; 
 padding: 0;
}
ul.navigation li {
 display: block; 
 float: left;
}

github-actions[bot] commented 4 years ago

This Feature is ready to be implemented.