skip to content W3C SVG

Cupper Shortcodes

Feb 12, 2019

blockquote

{{% blockquote author="Carl Jung" %}}
Even a happy life cannot be without a measure of darkness, and the word happy would lose its meaning if it were not balanced by sadness. It is far better to take things as they come along with patience and equanimity.
{{% /blockquote %}}

Even a happy life cannot be without a measure of darkness, and the word happy would lose its meaning if it were not balanced by sadness. It is far better to take things as they come along with patience and equanimity. 

  <br>
  <span class="author">&mdash; Carl Jung</span>

note

{{% note %}}
This is a note! It's something the reader may like to know about but is supplementary to the main content. Use notes when something may be interesting but not critical.
{{% /note %}}

warning note

{{% warning %}}
This is a warning! It's about something the reader should be careful to do or to avoid doing. Use warnings when something could go wrong.
{{% /warning %}}

cmd

{{< cmd >}}
hugo server --gc
{{< /cmd >}}

hugo server --gc

code

{{< code numbered="true" >}}
<div [[[role="dialog"]]] [[[aria-labelledby="dialog-heading"]]]>
  <button [[[aria-label="close"]]]>x</button>
  <h2 [[[id="dialog-heading"]]]>Confirmation</h2>
  <p>Press Okay to confirm or Cancel</p>
  <button>Okay</button>
  <button>Cancel</button>
</div>
{{< /code >}}

1. The dialog is only announced as a dialog if it takes the `dialog` ARIA role
2. The `aria-labelledby` relationship attribute makes the element carrying the `id` it points to its label
3. The close button uses `aria-label` to provide the text label "close", overriding the text content
4. The heading is used as the dialog's label. The `aria-labelledby` attribute points to its `id`
<div role="dialog" aria-labelledby="dialog-heading"> <button aria-label="close">x</button> <h2 id="dialog-heading">Confirmation</h2> <p>Press Okay to confirm or Cancel</p> <button>Okay</button> <button>Cancel</button> </div>
  1. The dialog is only announced as a dialog if it takes the dialog ARIA role
  2. The aria-labelledby relationship attribute makes the element carrying the id it points to its label
  3. The close button uses aria-label to provide the text label “close”, overriding the text content
  4. The heading is used as the dialog’s label. The aria-labelledby attribute points to its id

syntax highlighting

To get syntax highlighting for your code, use markdown code fences, then specify the language:

```html
<div role="dialog" aria-labelledby="dialog-heading">
  <button aria-label="close">x</button>
  <h2 id="dialog-heading">Confirmation</h2>
  <p>Press Okay to confirm or Cancel</p>
  <button>Okay</button>
  <button>Cancel</button>
</div>
```

<div role="dialog" aria-labelledby="dialog-heading">
  <button aria-label="close">x</button>
  <h2 id="dialog-heading">Confirmation</h2>
  <p>Press Okay to confirm or Cancel</p>
  <button>Okay</button>
  <button>Cancel</button>
</div>

codePen

{{% codePen VpVNKW %}}

Site error: The codePenUser param has not been set in config.toml

colors

{{% colors "#111111, #cccccc, #ffffff" %}}

      <li style="background-color: #111111;">
    <span>#111111</span>
  </li>

  <li style="background-color: #CCCCCC;">
    <span>#CCCCCC</span>
  </li>

  <li style="background-color: #FFFFFF; border: 1px solid #111">
    <span>#FFFFFF</span>
  </li>

expandable

{{% expandable label="A section of dummy text" level="2" %}}
Here is some markdown including [a link](https://twitter.com/heydonworks). Donec erat est, feugiat a est sed, aliquet pharetra ipsum. Vivamus in arcu leo. Praesent feugiat, purus a molestie ultrices, libero massa iaculis ante, sit amet accumsan leo eros vel ligula.
{{% /expandable %}}

<h2>

<button aria-expanded="false" data-expands="js-expandable-96787626368eb25280dc28455fe4c57f">
  <span class="expandable-label">A section of dummy text</span>
  <svg aria-hidden="true" focusable="false" viewBox="0 0 70.866142 70.866141">
    <g transform="translate(0 -981.5)">
      <rect style="stroke-width:0;fill:currentColor" ry="5" height="60" width="9.8985" y="987.36" x="30.051" class="up-strut" />
      <rect style="stroke-width:0;fill:currentColor" ry="5" height="10" width="60" y="1012.4" x="5"/>
    </g>
  </svg>
</button>

</h2>

fileTree

{{% fileTree %}}
* Level 1 folder
    * Level 2 file
    * Level 2 folder
        * Level 3 file
        * Level 3 folder
            * Level 4 file
        * Level 3 folder
            * Level 4 file
            * Level 4 file
        * Level 3 file
    * Level 2 folder
        * Level 3 file
        * Level 3 file
        * Level 3 file
    * Level 2 file
* Level 1 file
{{% /fileTree %}}
  • Level 1 folder
    • Level 2 file
    • Level 2 folder
      • Level 3 file
      • Level 3 folder
        • Level 4 file
      • Level 3 folder
        • Level 4 file
        • Level 4 file
      • Level 3 file
    • Level 2 folder
      • Level 3 file
      • Level 3 file
      • Level 3 file
    • Level 2 file
  • Level 1 file

ticks

{{% ticks %}}
* Selling point one
* Selling point two
* Selling point three
{{% /ticks %}}
  • Selling point one
  • Selling point two
  • Selling point three

figure

{{< figure
img="sun.jpg" 
caption="The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. [Credits](https://images.nasa.gov/details-GSFC_20171208_Archive_e000393.html)." 
command="Resize" 
options="700x" >}}
The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. Credits.

principles

See the full principles list.

{{% principles include="Add value, Be consistent" descriptions="true" %}}

      <li>
    <strong>
      <a href="https://inclusivedesignprinciples.org#be-consistent">
        <svg class="balloon-icon" viewBox="0 0 141.73228 177.16535" aria-hidden="true" focusable="false">
          <use xlink:href="#balloon"></use>
        </svg>
        Be consistent
      </a>:
    </strong>
    <em>Use familiar conventions and apply them consistently.</em>
    
      <p>Familiar interfaces borrow from well-established patterns. These should be used consistently within the interface to reinforce their meaning and purpose. This should be applied to functionality, behavior, editorial, and presentation. You should say the same things in the same way and users should be able to do the same things in the same way.</p>
    
  </li>









  <li>
    <strong>
      <a href="https://inclusivedesignprinciples.org#add-value">
        <svg class="balloon-icon" viewBox="0 0 141.73228 177.16535" aria-hidden="true" focusable="false">
          <use xlink:href="#balloon"></use>
        </svg>
        Add value
      </a>:
    </strong>
    <em>Consider the value of features and how they improve the experience for different users.</em>
    
      <p>Features should add value to the user experience by providing efficient and diverse ways to find and interact with content. Consider device features such as voice, geolocation, camera and vibration API&#39;s, and how integration with connected devices or a second screen could provide choice.</p>
    
  </li>

wcag

See the full wcag list.

{{% wcag include="1.2.1, 1.3.1, 4.1.2" %}}

      <li>
    <strong><a href="https://www.w3.org/TR/WCAG20/">
      <svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true" focusable="false">
        <use xlink:href="#w3c"></use>
      </svg>
      1.2.1 Audio-only and Video-only (Prerecorded</a> (level A)
    </strong>
    
  </li>



















  <li>
    <strong><a href="https://www.w3.org/TR/WCAG20/#content-structure-separation-programmatic">
      <svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true" focusable="false">
        <use xlink:href="#w3c"></use>
      </svg>
      1.3.1 Info and Relationships</a> (level A)
    </strong>
    
  </li>





































































































  <li>
    <strong><a href="https://www.w3.org/TR/WCAG20/#ensure-compat-rsv">
      <svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true" focusable="false">
        <use xlink:href="#w3c"></use>
      </svg>
      4.1.2 Name, Role, Value</a> (level A)
    </strong>
    
  </li>

tested

See the full browser list.

{{% tested using="Firefox + JAWS, Chrome, Safari iOS + Voiceover, Edge" %}}

  <td>
    
    
    
    
    <img src="https://shawngraham.github.io/dhmuse/images/browser-firefox.svg" alt="">
    <span><strong>Firefox </strong></span>
    
      
      
      <span class="additional">with <strong>JAWS</strong></span>
    
  </td>

  <td>
    
    
    
    
    <img src="https://shawngraham.github.io/dhmuse/images/browser-chrome.svg" alt="">
    <span><strong>Chrome </strong></span>
    
  </td>

  <td>
    
    
    
    
    <img src="https://shawngraham.github.io/dhmuse/images/browser-safari-ios.svg" alt="">
    <span><strong>Safari iOS </strong></span>
    
      
      
      <span class="additional">with <strong>Voiceover</strong></span>
    
  </td>

  <td>
    
    
    
    
    <img src="https://shawngraham.github.io/dhmuse/images/browser-edge.svg" alt="">
    <span><strong>Edge </strong></span>
    
  </td>
Tested using