search

solex2006 / SELIProject

SELI Project
9 stars 17 forks source link

Info and Relationships #76

Open ecureuill opened 4 years ago

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

WCAG: 1.3.1

Use the appropriate semantic elements will make sure the structure is available to the user agent. This involves explicitly indicating the role that different units have in understanding the meaning of the content.

Scenario The technology in use does NOT provide the semantic structure to make the information and relationships conveyed through presentation programmatically determinable:

Example 1: Indicating new content with boldface and a text indicator

The following example shows a list of accessibility standards. WCAG 2.0 is new, so is indicated in bold face. To avoid conveying information solely by presentation, the word "(new)" is included after it as well.

 <h2>Web Accessibility Guidelines</h2>
       <ul>
                <li><strong>WCAG 2.0 (New)</strong></li>
                <li>WCAG 1.0</li>
                <li>Section 508</li>
                <li>JIS X 8341-3</li>
                ...
      </ul>
Example 2: Font variations and explicit statements.

An on-line document has gone through multiple drafts. Insertions are underlined and deletions are struck through. At the end of the draft a "change history" lists all changes made to each draft.

Example 3: Providing an alternate way to know which words in the text have been identified by using a different font.

An on-line test requires students to write a short summary of a longer document. The summary must contain certain words from the original document. When a sentence in the original document contains a word or phrase that must be used in the summary, the word or phrase is shown in a different font than the rest of the sentence. A separate section also lists all the words and phrases that must be used in the summary.

Scenario: Heading

Scenario: Data table

Scenario: CSS content

Meaningful content must not be implemented using only CSS :before or :after.

  1. For each instance of content inserted through use of the :before and :after pseudo-elements and the content property:
  2. Check that non-decorative information presented by the generated content is available when styles are overridden. Expected Results: check 2 is false, Example :x: An online book review site uses :before (and its content property) to indicate the titles of newly reviewed books. 
    <style>
.new-title::before {content: "New!" ;}
</style>
...
<h3 class="new-title">Potato Life</h3>
<h3>Angry Anteaters</h3>

    :heavy_check_mark: "New!" is inserted directly into the titles of newly reviewed books.

    <h3>New! Potato Life</h3>
<h3>Angry Anteaters</h3>

Scenario: Letter spacing

Scenario: Groups of options

Selection list is a set of allowed values for a form control such as a multi-select list or a combo box. Often, selection lists have groups of related options. Those groups should be semantically identified, rather than simply delimiting the groups with "dummy" list entries. This allows user agents to collapse the options by group to support quicker skimming of the options, and to indicate in what group an option of interest is located. It also helps to visually break up long lists so that users can more easily locate the option(s) they are interested in.

The optgroup element should be directly inside the select element, and the option elements directly inside the optgroup. It is possible for a select element to contain both single option elements and optgroup groups, though authors should consider if this is in fact the desired intent when using this. It is not possible to nest the optgroup element, so only one level of grouping can be done within a select.

Tests Procedure

  1. Check the set of options within a selection list to see if there are groups of related options.
  2. If there are groups of related options, they should be grouped with optgroup. Expected Results: Check 2 is true.

Example 1

The following combo box collects data about favorite foods. Grouping by type allows users to select their preference more quickly.

<form action="http://example.com/prog/someprog" method="post">
    <label for="food">What is your favorite food?</label>
    <select id="food" name="food">
      <optgroup label="Fruits">
        <option value="1">Apples</option>
        <option value="3">Bananas</option>
        <option value="4">Peaches</option>
        <option value="5">...</option>
      </optgroup>
      <optgroup label="Vegetables">
        <option value="2">Carrots</option>
        <option value="6">Cucumbers</option>
       <option value="7">...</option>
     </optgroup>
     <optgroup label="Baked Goods">
       <option value="8">Apple Pie</option>
       <option value="9">Chocolate Cake</option>
       <option value="10">...</option>
     </optgroup>
   </select>
</form>

Example 2

The following example shows how a multi-select box can make use of the optrgroup element.

<form action="http://example.com/prog/someprog" method="post">
    <label for="related_techniques"><strong>Related Techniques:</strong></label>
    <select name="related_techniques" id="related_techniques" multiple="multiple" size="10">
  <optgroup label="General Techniques">
    <option value="G1">G1: Adding a link at the top of each page ... </option>
    <option value="G4">G4: Allowing the content to be paused and restarted ... </option>
    <option value="G5">G5: Allowing users to complete an activity without any time... </option>
    <option value="G8">G8: Creating an extended audio description for the ... </option>
    <option value="G9">G9: Creating captions for live synchronized media... </option>
    <option value="G10">G10: Creating components using a technology that ... </option>
  </optgroup>
  <optgroup label="HTML Techniques">
    <option value="H2">H2: Combining adjacent image and text links for the same ... </option>
    <option value="H4">H4: Creating a logical tab order through links, form ... </option>
    <option value="H24">H24: Providing text alternatives for the area ... </option>
  </optgroup>
  <optgroup label="CSS Techniques">
    <option value="C6">C6: Positioning content based on structural markup... </option>
    <option value="C7">C7: Using CSS to hide a portion of the link text... </option>
  </optgroup>
  <optgroup label="SMIL Techniques">
    <option value="SM1">SM1: Adding extended audio description in SMIL 1.0... </option>
    <option value="SM2">SM2: Adding extended audio description in SMIL 2.0... </option>
    <option va## Scenario: Text to convey information
lue="SM6">SM6: Providing audio description in SMIL 1.0... </option>
  </optgroup>
  <optgroup label="ARIA Techniques">
    <option value="ARIA1">ARIA1: Using WAI-ARIA describedby... </option>
    <option value="ARIA2">ARIA2: Identifying required fields with the "required"... </option>
    <option value="ARIA3">ARIA3: Identifying valid range information with "valuemin" ... </option>
  </optgroup>
  <optgroup label="Common Failures">
    <option value="F1">F1: Failure of SC 1.3.2 due to changing the meaning of content by... </option>
    <option value="F2">F2: Failure of SC 1.3.1 due to using changes in text presentation... </option>
    <option value="F3">F3: Failure of SC 1.1.1 due to using CSS to include images  ... </option>
    <option value="F4">F4: Failure of SC 2.2.2 due to using text-decoration:blink ...</option>
  </optgroup>
</select>
</form>

Scenario: Document structure

84

Scenario: Text Semantic

Tags like em, strong, mark, cite, blockquote, q, time, h1...h6, ol, ul, address, audio, video, picture, figure, figcaption, etc

Test Procedure

Using semantic elements to mark up structure

  1. Check if there are parts of the content that have a semantic function.

  2. For each part that has a semantic function, if corresponding semantic markup exists in the technology, check that the content has been marked up using that semantic markup. Expected Results: Check 2 is true.

    Example 1

    A paragraph contains a hyperlink to another page. The hyperlink is marked up using the a element.

          <p>Do you want to try our new tool yourself? A free 
        demonstration version is available in our 
        <a href="download.html">download section</a></p>
Example 2

A page about the history of marriage uses a quotation from Jane Austen's novel, Pride and Prejudice, as an example. The reference to the book is marked up using the cite element and the quotation itself is marked up using the blockquote element.

              <p>Marriage was considered a logical step for a bachelor, 
                as can be seen in the first chapter of the novel 
                <cite>Pride and Prejudice</cite>:</p>
                <blockquote>
                <p>It is a truth universally acknowledged, that a single man in
                possession of a good fortune, must be in want of a wife.</p>
                <p>However little known the feelings or views of such a man may
                be on his first entering a neighbourhood, this truth is so well
                fixed in the minds of the surrounding families, that he is considered
                the rightful property of some one or other of their daughters.</p>
                </blockquote>
Example 3

A car manual explains how to start the engine. The instructions include a warning to make sure the gear is in neutral. The author feels the warning is so important that it should be emphasized so the warning is marked up using the strong element.

   <h1>How to start the engine</h1>
                <p>Before starting the engine, <strong>make sure the gear 
                is in neutral</strong>. Next, turn the key in the ignition. 
                The engine should start.</p>
Example 4

This example shows how to use the em and strong elements to emphasize text.

              <p>What she <em>really</em> meant to say was, 
                "This is not ok, it is <strong>excellent</strong>!"</p>
Example 5

Using highlighting and background color to visually and semantically identify important information.

             <style type="text/css">
                .vocab {
                background-color:cyan;
                font-style:normal;
                }
                </style>
                ...
                <p>New vocabulary words are emphasized and highlighted 
                with a cyan background</p>
                <p>The <em class="vocab">scathing</em> review of the play 
                seemed a bit too harsh... </p>

Using semantic markup to mark emphasized or special text

  1. Examine the content for information that is conveyed through variations in presentation of text.
  2. Check that appropriate semantic markup (such as em, strong, cite, blockquote, sub, and sup) have been used to mark the text that conveys information through variations in text. Expected Results: Check 2 is true.
Example 1

This example shows how to use the em and strong elements to emphasize text. The em and strong elements were designed to indicate structural emphasis that may be rendered in a variety of ways (font style changes, speech inflection changes, etc.).

 ...What she <em>really</em> meant to say was, &quot;This is not ok, 
 it is <strong>excellent</strong>&quot;!...
Example 2

This example shows using the blockquote element to mark up long quotations which may require paragraph breaks. It also demonstrates the use of the cite element to specify a reference.

<p>The following is an excerpt from the <cite>The Story of my Life</cite> by Helen Keller</p>
 <blockquote>
   <p>Even in the days before my teacher came, I used to feel along the square stiff boxwood
   hedges, and, guided by the sense of smell, would find the first violets and lilies.  
   There, too, after a fit of temper, I went to find comfort and to hide my hot face 
   in the cool leaves and grass.</p>
 </blockquote>
Example 3

Here is the use of the q element to mark up a shorter quotation. Quotes are provided around the q element, because many user agents do not support this element yet and therefore do not display it properly (see UA notes). CSS rules to suppress automatic generation of quotes are provided for those user agents that do support the q element, to prevent them from generating quotes automatically in addition to the quotes provided by the author, resulting in double-quoted content. In the future, when the q element is more broadly supported, the need to provide quotes and suppress browser-generated quotes will go away.

q:before { content: ""; } 
q:after { content: ""; }  
 <p>Helen Keller said, "<q>Self-pity is our worst enemy and if we yield to it, 
we can never do anything good in the world.</q>"</p>
Example 4

Superscripts and subscripts are created using the sup and sub elements.

 <p>Beth received 1<sup>st</sup> place in the 9<sup>th</sup> grade science competition.</p>
<p>The chemical notation for water is H<sub>2
github-actions[bot] commented 4 years ago

This Feature is ready to be implemented.

ecureuill commented 4 years ago

Failures

Syllabus dialog page

Course Main page

Course Topic page

Course Contents