ARIA Patterns

1.3 #Principles.Address Address

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.

author: Chris Harvey
updated: 2018-03-12

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