Standardit · ARIA

Rooli Asiakirjarakenne

article

Merkitsee itsenäisen kokonaisuuden, joka voisi seistä yksinään — blogikirjoituksen, uutisen, foorumivastauk­sen tai tuotekortin. Käytä ensin natiivia <article>-elementtiä; turvaudu role="article"-attribuuttiin vain, kun HTML-elementtiä ei voi käyttää.

Käyttötilanteet

Käytä <article>-elementtiä. Natiivielementti tuo roolin mukanaan ilmaiseksi ja integroituu dokumentin jäsentellyyn rakenteeseen.

role="article" <div>-elementillä on perusteltua vain, kun natiivielementtiä ei voi käyttää — yleensä julkaisujärjestelmän rajoituksesta. Jokaisen artikkelin tulisi sisältää oma otsikkonsa, jotta ruudunlukuohjelman käyttäjät voivat tunnistaa sen.

Artikkelijoukolle (aikajana, blogiindeksi) kääri artikkelit role="feed"-säiliöön ja aseta aria-posinset / aria-setsize jokaiselle artikkelille. Muussa tapauksessa jätä molemmat attribuutit pois.

Yleiset virheet

  • <article>-elementin käyttäminen jokaiselle sisältölohkolle. Elementti tarkoittaa “seisoo omillaan”. Sivupalkin lyhyt kuvaus ei yleensä ole artikkeli.
  • role="article" <section>-elementillä, joka on osa laajempaa dokumenttia eikä itsenäinen kokonaisuus. Käytä role="region"-roolia tai pelkkää <section>-elementtiä.
  • Artikkeli ilman otsikkoa. Ruudunlukuohjelman käyttäjät, jotka navigoivat artikkeleittain, eivät saa sille nimeä.
  • <article>-elementtien sisäkkäistäminen kommenttiketjussa ilman aria-labelledby-attribuuttia, jolla jokaiselle sisäiselle artikkelille annetaan oma erotettava nimi.

Esimerkki

<article aria-labelledby="post-title-42">
  <h2 id="post-title-42">Miksi sivulla tulisi olla vain yksi main-maamerkkialue</h2>
  <p>The <code>&lt;main&gt;</code> landmark identifies…</p>
</article>