ARIA Patterns

1 #Principles Principles

Parts of an overarching design theme.

  • voice-and-tone, mood, and look-and-feel of the site
  • typographical conventions & rhythm (typefaces, font sizes, and leading used throughout the site)
  • additionally, any atypical writing modes / other languages required
  • site-wide color scheme
  • image treatment conventions (storytelling, image placement, quality, filters, etc.)
Source: kss-styleguide.scss, line 1

1.1 #Principles.Directory Directory

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

A Directory is a static outlined list of pages on a website. It is also commonly known as a “sitemap”. This principle does not have any styles, but it provides the semantic and accessible structure necessary to convey a sitemap.

See the [xDirectory rendering function](../api/global.html#xDirectory_renderer) for usage.

author
Chris Harvey
updated

DOM:

const {xDirectory} = require('aria-patterns')
let data = {
  "@type": "WebPage",
  "name": "A 2016 Event",
  "url": "https://2016.asce-event.org/",
  "hasPart": [
    {
      "@type": "WebPage",
      "name": "Registration",
      "url": "https://2016.asce-event.org/registration/",
      "hasPart": [
        { "@type": "WebPage", "name": "Why Attend" , "url": "https://2016.asce-event.org/registration/why-attend/" },
        { "@type": "WebPage", "name": "Volunteer"  , "url": "https://2016.asce-event.org/registration/volunteer/",
          "hasPart": { "@type": "WebPage", "name": "For Students", "url": "https://2016.asce-event.org/registration/volunteer/for-students/" }
        }
      ]
    },
    {
      "@type": "WebPage",
      "name": "Location",
      "url": "https://2016.asce-event.org/location/"
    },
    {
      "@type": "WebPage",
      "name": "Sponsor",
      "url": "https://2016.asce-event.org/sponsor/",
      "hasPart": [
        { "@type": "WebPage", "name": "Partnering Orgs"  , "url": "https://2016.asce-event.org/sponsor/partnering-orgs/"  },
        { "@type": "WebPage", "name": "Cooperating Orgs" , "url": "https://2016.asce-event.org/sponsor/cooperating-orgs/" }
      ]
    }
  ]
}
document.querySelector('header > nav').append(
  xDirectory.render(data)
)
Example
Markup: ../../test/out/x-directory.test.html 

<header><nav>
  <ol role="directory">
    <template>
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="" itemprop="url">
          <slot itemprop="name"></slot>
        </a>
      </li>
    </template>
  
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/" itemprop="url">
          <slot itemprop="name">Home</slot>
        </a>
      </li>
    
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/registration/" itemprop="url">
          <slot itemprop="name">Registration</slot>
        </a>
      
  <ol role="directory">
    <template>
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="" itemprop="url">
          <slot itemprop="name"></slot>
        </a>
      </li>
    </template>
  
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/registration/why-attend/" itemprop="url">
          <slot itemprop="name">Why Attend</slot>
        </a>
      </li>
    
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/registration/volunteer/" itemprop="url">
          <slot itemprop="name">Volunteer</slot>
        </a>
      
  <ol role="directory">
    <template>
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="" itemprop="url">
          <slot itemprop="name"></slot>
        </a>
      </li>
    </template>
  
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/registration/volunteer/for-students/" itemprop="url">
          <slot itemprop="name">For Students</slot>
        </a>
      </li>
    </ol>
</li>
    </ol>
</li>
    
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/program/" itemprop="url">
          <slot itemprop="name">Program</slot>
        </a>
      
  <ol role="directory">
    <template>
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="" itemprop="url">
          <slot itemprop="name"></slot>
        </a>
      </li>
    </template>
  
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/program/short-courses/" itemprop="url">
          <slot itemprop="name">Short Courses</slot>
        </a>
      </li>
    
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/program/technical-tours/" itemprop="url">
          <slot itemprop="name">Technical Tours</slot>
        </a>
      </li>
    
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/program/optional-tours/" itemprop="url">
          <slot itemprop="name">Optional Tours</slot>
        </a>
      </li>
    </ol>
</li>
    
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/location/" itemprop="url">
          <slot itemprop="name">Location</slot>
        </a>
      </li>
    
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/speakers/" itemprop="url">
          <slot itemprop="name">Speakers</slot>
        </a>
      
  <ol role="directory">
    <template>
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="" itemprop="url">
          <slot itemprop="name"></slot>
        </a>
      </li>
    </template>
  
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/speakers/distinguished-lecturers/" itemprop="url">
          <slot itemprop="name">Distinguished Lecturers</slot>
        </a>
      </li>
    </ol>
</li>
    
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/sponsor/" itemprop="url">
          <slot itemprop="name">Sponsor</slot>
        </a>
      
  <ol role="directory">
    <template>
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="" itemprop="url">
          <slot itemprop="name"></slot>
        </a>
      </li>
    </template>
  
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/sponsor/partnering-orgs/" itemprop="url">
          <slot itemprop="name">Partnering Orgs</slot>
        </a>
      </li>
    
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/sponsor/cooperating-orgs/" itemprop="url">
          <slot itemprop="name">Cooperating Orgs</slot>
        </a>
      </li>
    </ol>
</li>
    
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/exhibit/" itemprop="url">
          <slot itemprop="name">Exhibit</slot>
        </a>
      
  <ol role="directory">
    <template>
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="" itemprop="url">
          <slot itemprop="name"></slot>
        </a>
      </li>
    </template>
  
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/exhibit/exhibitor-list/" itemprop="url">
          <slot itemprop="name">Exhibitor List</slot>
        </a>
      </li>
    </ol>
</li>
    
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/about/" itemprop="url">
          <slot itemprop="name">About</slot>
        </a>
      </li>
    
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/contact/" itemprop="url">
          <slot itemprop="name">Contact</slot>
        </a>
      
  <ol role="directory">
    <template>
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="" itemprop="url">
          <slot itemprop="name"></slot>
        </a>
      </li>
    </template>
  
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/contact/submit-feedback" itemprop="url">
          <slot itemprop="name">Submit Feedback</slot>
        </a>
      </li>
    
      <li itemprop="hasPart" itemscope="" itemtype="http://schema.org/WebPage">
        <a href="https://2016.asce-event.org/contact/talk-representative" itemprop="url">
          <slot itemprop="name">Talk to a Representative</slot>
        </a>
      </li>
    </ol>
</li>
    </ol>
</nav></header>
Source: p-Directory.less, line 7

1.2 #Principles.PersonFullname PersonFullname

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Markup for a person’s full name in "Px. First M. Last, Sx." format. For example: "Dr. Martin L. King, Jr."

See the [xPersonFullname rendering function](../api/global.html#xPersonFullname_renderer) for usage.

author
Chris Harvey
updated

DOM:

const {xPersonFullname} = require('aria-patterns')
document.querySelector('[itemtype="http://schema.org/Person"] > h1[itemprop="name"]').append(
  xPersonFullname.render({
    "@type": "Person",
    "familyName"     : "King",
    "givenName"      : "Martin",
    "additionalName" : "Luther",
    "honorificPrefix": "Dr.",
    "honorificSuffix": "Jr."
  })
)
Example

Dr. Martin L. King, Jr.

Markup: ../../test/out/x-person-fullname.test.html 

<article itemscope="" itemtype="http://schema.org/Person">
  <h1 itemprop="name">
  <slot name="honorificPrefix" itemprop="honorificPrefix">Dr.</slot>
  <slot name="givenName" itemprop="givenName">Martin</slot>
  <abbr title="Luther" itemprop="additionalName">
    <slot name="additionalName">L.</slot>
  </abbr>
  <slot name="familyName" itemprop="familyName">King</slot><span>,</span>
  <slot name="honorificSuffix" itemprop="honorificSuffix">Jr.</slot>
</h1>
</article>
Source: p-PersonFullname.less, line 7

1.3 #Principles.Address Address

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Markup for a postal address, in the format:

1600 Pennsylvania Avenue NW
Washington, DC 20006

Note that this pattern does not use an <address> element, as that is specifically reserved for contact information of the authoring person or organization of a website.

See the [xAddress rendering function](../api/global.html#xAddress_renderer) for usage.

author
Chris Harvey
updated

DOM:

const {xAddress} = require('aria-patterns')
document.querySelector('[itemtype="http://schema.org/PostalAddress"]').append(
  xAddress.render({
    "@type": "PostalAddress",
    "streetAddress"  : "1 First St NE",
    "addressLocality": "Washington",
    "addressRegion"  : "DC",
    "postalCode"     : "20543",
    "addressCountry" : "United States",
    "$regionName"    : true,
  })
)
Example

1 First St NE
Washington, DC 20543
United States

Markup: ../../test/out/x-address.test.html 

<p itemscope="" itemtype="http://schema.org/Place">
  <span itemprop="location" itemscope="" itemtype="http://schema.org/PostalAddress">
  <slot name="streetAddress" itemprop="streetAddress">1 First St NE</slot>
  <br>
  <slot name="addressLocality" itemprop="addressLocality">Washington</slot><span>,</span>
  <data value="DC" itemprop="addressRegion">
    <slot name="addressRegion">DC</slot>
  </data>
  <slot name="postalCode" itemprop="postalCode">20543</slot>
  <br>
  <slot name="addressCountry" itemprop="addressCountry">United States</slot>
</span>
</p>
Source: p-Address.less, line 7