Design system ten op zichte van ARIA

role="alert"

  • Alert component
  • Form field description component

role="alertdialog"

  • Alert dialog component

role="article"

  • Article component

role="banner"

  • Page header component

role="button"

  • Button component
  • Button that looks like a link component

role="cell"

  • data cell element van de table component

role="checkbox"

  • Checkbox component
  • Custom checkbox component

role="combobox"

  • Combobox component

role="complementary"

  • Aside variant van de blockquote component
  • Aside variant van de spotlight section component

role="columnheader"

  • Table header cell element van de table component

role="contentinfo"

  • Page footer component

role="dialog"

  • Dialog component

role="document"

  • Document component

role="form"

  • Form component

role="group"

  • Button group component

role="heading"

  • Heading component
  • Heading 1 component
  • Heading 2 component
  • Heading 3 component
  • Heading 4 component
  • Heading 5 component
  • Heading 6 component

role="img"

  • Image component
  • Logo component

role="link"

  • Link component

role="list"

  • Ordered list component
  • Unordered list component

role="listitem"

  • List item element van de ordered list component
  • List item element van de unordered list component

role="listbox"

  • Select component

role="main"

  • main content element van het page content component

role="mark"

  • Mark component

role="navigation"

  • Alternate language navigation
  • Breadcrumb navigation

role="option"

  • option element van de select component

role="radio"

  • Radio button element van de table component

role="radiogroup"

  • Fieldset component

role="row"

  • Table row element van de table component

role="rowheader"

  • Table header cell element van de table component

role="separator"

  • Separator component

role="search"

  • Search bar component

role="status"

  • Alert component
  • Form field description component

role="switch"

  • Form toggle component

role="table"

  • Table component

aria-description

aria-description wordt overgeslagen door veel hulpmiddelen om automatisch vertalingen van webpagina’s te maken.

Gebruik liever aria-describedby.

aria-label

aria-label wordt overgeslagen door veel hulpmiddelen om automatisch vertalingen van webpagina’s te maken. Google Translate vertaalt aria-label vaak wel, maar veel andere software niet. Dit is in 2023 nog getest door Adrian Roselli: aria-label Does Not Translate . Daarnaast is een labeltekst die met aria-label wordt toegevoegd alleen aanwezig in de codelaag, en niet zichtbaar op het scherm. Dit vergroot het risico dat iemand zo’n label vergeet aan te passen bij wijzigingen, wat vervolgens gebruikers in de weg kan zitten.

Gebruik liever aria-labelledby.