ARIA in HTML - test cases for allowed roles on li elements

last updated 27 March 2022

Tests:

Test 1

Authors MAY use any role, on an li element, so long as list element's implicit list role has been overwritten.

NOTE: that while any role is allowed, the role MUST still adhere to ARIA's required context rule.

NOTE: some of the following tests MAY fail other conformance checker rules beyond checking for the allowed role.

  • alert: pass
  • alertdialog: pass
  • application: pass
  • article: pass
  • banner: pass
  • blockquote: pass
  • button: pass
  • caption: fail (not owned by an element with an explicit figure, grid, table or treegrid role)
  • cell: fail (not owned by an element with role=row within a role=table)
  • checkbox: pass
  • code: pass
  • columnheader: fail (not owned by an element with role=row within a role=table or grid)
  • complementary: pass
  • contentinfo: pass
  • definition: pass
  • deletion: pass
  • dialog: pass
  • document: pass
  • emphasis: pass
  • feed: pass
  • figure: pass
  • form: pass
  • generic: fail (authors SHOULD NOT use the generic role)
  • grid: pass (but fails owning necessary descendant elements)
  • grid > row > gridcell: pass
  • gridcell: fail (not owned by an element with role=row within a role=grid)
  • group: pass
  • heading: pass
  • img: pass
  • insertion: pass
  • link: pass
  • list: pass (but fails owning necessary listitem descendant elements)
  • list > listitem: pass
  • listbox: pass (but fails owning necessary descendant elements)
  • listbox > option: pass
  • listitem: fail (not owned by an element with role=list)
  • log: pass
  • main: pass
  • marquee: pass
  • math: pass
  • menu: pass (but fails owning necessary descendant elements)
  • menu > menuitem: pass
  • menu > menuitemcheckbox: pass
  • menu > menuitemradio: pass
  • menubar: pass (but fails owning necessary descendant elements)
  • menubar > menuitem: pass
  • menuitem: fail (not owned by a menu, menubar or a group that is owned by a menu or menubar)
  • menuitemcheckbox: fail (not owned by a menu, menubar or a group that is owned by a menu or menubar)
  • menuitemradio: fail (not owned by a menu, menubar or a group that is owned by a menu or menubar)
  • meter: pass
  • navigation: pass
  • none: pass
  • note: pass
  • option: fail (not owned by a listbox, or role=group owned by a listbox)
  • paragraph: pass
  • presentation: pass
  • progressbar: pass
  • radio: pass
  • radiogroup: pass (but fails owning necessary descendant radio elements)
  • radiogroup > radio: pass
  • region: pass
  • row: fail (not owned by a table, rowgroup, treegrid or grid. doesn't contain required owned elements - e.g., cells)
  • rowheader: fail (not owned by a row owned by table or grid)
  • scrollbar: pass
  • search: pass
  • search: pass
  • separator: pass
  • slider: pass
  • spinbutton: pass
  • status: pass
  • strong: pass
  • subscript: pass
  • superscript: pass
  • switch: pass
  • tab: fail (not owned by a tablist)
  • table: pass (but fails owning necessary descendant elements)
  • table > row > cell: pass
  • tablist: pass (but fails owning necessary descendant elements)
  • tablist > tab: pass
  • tabpanel: pass
  • term: pass
  • textbox: pass
  • time: pass
  • timer: pass
  • toolbar: pass
  • tooltip: pass
  • tree: pass (but fails owning necessary descendant elements)
  • tree > treeitem: pass
  • treegrid: pass (but fails owning necessary descendant elements)
  • treegrid > treeitem: pass
  • treeitem: fail (not owned by a tree or treegrid)
ol role=none (repeat of ul test)
  • alert: pass
  • alertdialog: pass
  • application: pass
  • article: pass
  • banner: pass
  • blockquote: pass
  • button: pass
  • caption: fail (not owned by an element with an explicit figure, grid, table or treegrid role)
  • cell: fail (not owned by an element with role=row within a role=table)
  • checkbox: pass
  • code: pass
  • columnheader: fail (not owned by an element with role=row within a role=table or grid)
  • complementary: pass
  • contentinfo: pass
  • definition: pass
  • deletion: pass
  • dialog: pass
  • document: pass
  • emphasis: pass
  • feed: pass
  • figure: pass
  • form: pass
  • generic: fail (authors SHOULD NOT use the generic role)
  • grid: pass (but fails owning necessary descendant elements)
  • grid > row > gridcell: pass
  • gridcell: fail (not owned by an element with role=row within a role=grid)
  • group: pass
  • heading: pass
  • img: pass
  • insertion: pass
  • link: pass
  • list: pass (but fails owning necessary listitem descendant elements)
  • list > listitem: pass
  • listbox: pass (but fails owning necessary descendant elements)
  • listbox > option: pass
  • listitem: fail (not owned by an element with role=list)
  • log: pass
  • main: pass
  • marquee: pass
  • math: pass
  • menu: pass (but fails owning necessary descendant elements)
  • menu > menuitem: pass
  • menu > menuitemcheckbox: pass
  • menu > menuitemradio: pass
  • menubar: pass (but fails owning necessary descendant elements)
  • menubar > menuitem: pass
  • menuitem: fail (not owned by a menu, menubar or a group that is owned by a menu or menubar)
  • menuitemcheckbox: fail (not owned by a menu, menubar or a group that is owned by a menu or menubar)
  • menuitemradio: fail (not owned by a menu, menubar or a group that is owned by a menu or menubar)
  • meter: pass
  • navigation: pass
  • none: pass
  • note: pass
  • option: fail (not owned by a listbox, or role=group owned by a listbox)
  • paragraph: pass
  • presentation: pass
  • progressbar: pass
  • radio: pass
  • radiogroup: pass (but fails owning necessary descendant radio elements)
  • radiogroup > radio: pass
  • region: pass
  • row: fail (not owned by a table, rowgroup, treegrid or grid. doesn't contain required owned elements - e.g., cells)
  • rowheader: fail (not owned by a row owned by table or grid)
  • scrollbar: pass
  • search: pass
  • search: pass
  • separator: pass
  • slider: pass
  • spinbutton: pass
  • status: pass
  • strong: pass
  • subscript: pass
  • superscript: pass
  • switch: pass
  • tab: fail (not owned by a tablist)
  • table: pass (but fails owning necessary descendant elements)
  • table > row > cell: pass
  • tablist: pass (but fails owning necessary descendant elements)
  • tablist > tab: pass
  • tabpanel: pass
  • term: pass
  • textbox: pass
  • time: pass
  • timer: pass
  • toolbar: pass
  • tooltip: pass
  • tree: pass (but fails owning necessary descendant elements)
  • tree > treeitem: pass
  • treegrid: pass (but fails owning necessary descendant elements)
  • treegrid > treeitem: pass
  • treeitem: fail (not owned by a tree or treegrid)
menu role=none (repeat of ul test)
  • alert: pass
  • alertdialog: pass
  • application: pass
  • article: pass
  • banner: pass
  • blockquote: pass
  • button: pass
  • caption: fail (not owned by an element with an explicit figure, grid, table or treegrid role)
  • cell: fail (not owned by an element with role=row within a role=table)
  • checkbox: pass
  • code: pass
  • columnheader: fail (not owned by an element with role=row within a role=table or grid)
  • complementary: pass
  • contentinfo: pass
  • definition: pass
  • deletion: pass
  • dialog: pass
  • document: pass
  • emphasis: pass
  • feed: pass
  • figure: pass
  • form: pass
  • generic: fail (authors SHOULD NOT use the generic role)
  • grid: pass (but fails owning necessary descendant elements)
  • grid > row > gridcell: pass
  • gridcell: fail (not owned by an element with role=row within a role=grid)
  • group: pass
  • heading: pass
  • img: pass
  • insertion: pass
  • link: pass
  • list: pass (but fails owning necessary listitem descendant elements)
  • list > listitem: pass
  • listbox: pass (but fails owning necessary descendant elements)
  • listbox > option: pass
  • listitem: fail (not owned by an element with role=list)
  • log: pass
  • main: pass
  • marquee: pass
  • math: pass
  • menu: pass (but fails owning necessary descendant elements)
  • menu > menuitem: pass
  • menu > menuitemcheckbox: pass
  • menu > menuitemradio: pass
  • menubar: pass (but fails owning necessary descendant elements)
  • menubar > menuitem: pass
  • menuitem: fail (not owned by a menu, menubar or a group that is owned by a menu or menubar)
  • menuitemcheckbox: fail (not owned by a menu, menubar or a group that is owned by a menu or menubar)
  • menuitemradio: fail (not owned by a menu, menubar or a group that is owned by a menu or menubar)
  • meter: pass
  • navigation: pass
  • none: pass
  • note: pass
  • option: fail (not owned by a listbox, or role=group owned by a listbox)
  • paragraph: pass
  • presentation: pass
  • progressbar: pass
  • radio: pass
  • radiogroup: pass (but fails owning necessary descendant radio elements)
  • radiogroup > radio: pass
  • region: pass
  • row: fail (not owned by a table, rowgroup, treegrid or grid. doesn't contain required owned elements - e.g., cells)
  • rowheader: fail (not owned by a row owned by table or grid)
  • scrollbar: pass
  • search: pass
  • search: pass
  • separator: pass
  • slider: pass
  • spinbutton: pass
  • status: pass
  • strong: pass
  • subscript: pass
  • superscript: pass
  • switch: pass
  • tab: fail (not owned by a tablist)
  • table: pass (but fails owning necessary descendant elements)
  • table > row > cell: pass
  • tablist: pass (but fails owning necessary descendant elements)
  • tablist > tab: pass
  • tabpanel: pass
  • term: pass
  • textbox: pass
  • time: pass
  • timer: pass
  • toolbar: pass
  • tooltip: pass
  • tree: pass (but fails owning necessary descendant elements)
  • tree > treeitem: pass
  • treegrid: pass (but fails owning necessary descendant elements)
  • treegrid > treeitem: pass
  • treeitem: fail (not owned by a tree or treegrid)

Expected result: The ul, menu and ol elements have a role=none so 'any role' should be allowed on a li element (but still may fail other rules). Use of role=generic would result in a failure as this role is prohibited for use by authors.

Test 2

Authors MAY use any role, on an li element, so long as the li element is not a child of a list element.

NOTE: that while any role is allowed, the role MUST still adhere to ARIA's required context rule.

NOTE: some of the following tests MAY fail other conformance checker rules beyond checking for the allowed role. All of the following will fail HTML validation, as these li elements are not children of an HTML list element.

  • alert: pass
  • alertdialog: pass
  • application: pass
  • article: pass
  • banner: pass
  • blockquote: pass
  • button: pass
  • caption: fail (not owned by an element with an explicit figure, grid, table or treegrid role)
  • cell: fail (not owned by an element with role=row within a role=table)
  • checkbox: pass
  • code: pass
  • columnheader: fail (not owned by an element with role=row within a role=table or grid)
  • complementary: pass
  • contentinfo: pass
  • definition: pass
  • deletion: pass
  • dialog: pass
  • document: pass
  • emphasis: pass
  • feed: pass
  • figure: pass
  • form: pass
  • generic: fail (authors SHOULD NOT use the generic role)
  • grid: pass (but fails owning necessary descendant elements)
  • grid > row > gridcell: pass
  • gridcell: fail (not owned by an element with role=row within a role=grid)
  • group: pass
  • heading: pass
  • img: pass
  • insertion: pass
  • link: pass
  • list: pass (but fails owning necessary listitem descendant elements)
  • list > listitem: pass
  • listbox: pass (but fails owning necessary descendant elements)
  • listbox > option: pass
  • listitem: fail (not owned by an element with role=list)
  • log: pass
  • main: pass
  • marquee: pass
  • math: pass
  • menu: pass (but fails owning necessary descendant elements)
  • menu > menuitem: pass
  • menu > menuitemcheckbox: pass
  • menu > menuitemradio: pass
  • menubar: pass (but fails owning necessary descendant elements)
  • menubar > menuitem: pass
  • menuitem: fail (not owned by a menu, menubar or a group that is owned by a menu or menubar)
  • menuitemcheckbox: fail (not owned by a menu, menubar or a group that is owned by a menu or menubar)
  • menuitemradio: fail (not owned by a menu, menubar or a group that is owned by a menu or menubar)
  • meter: pass
  • navigation: pass
  • none: pass
  • note: pass
  • option: fail (not owned by a listbox, or role=group owned by a listbox)
  • paragraph: pass
  • presentation: pass
  • progressbar: pass
  • radio: pass
  • radiogroup: pass (but fails owning necessary descendant radio elements)
  • radiogroup > radio: pass
  • region: pass
  • row: fail (not owned by a table, rowgroup, treegrid or grid. doesn't contain required owned elements - e.g., cells)
  • rowheader: fail (not owned by a row owned by table or grid)
  • scrollbar: pass
  • search: pass
  • search: pass
  • separator: pass
  • slider: pass
  • spinbutton: pass
  • status: pass
  • strong: pass
  • subscript: pass
  • superscript: pass
  • switch: pass
  • tab: fail (not owned by a tablist)
  • table: pass (but fails owning necessary descendant elements)
  • table > row > cell: pass
  • tablist: pass (but fails owning necessary descendant elements)
  • tablist > tab: pass
  • tabpanel: pass
  • term: pass
  • textbox: pass
  • time: pass
  • timer: pass
  • toolbar: pass
  • tooltip: pass
  • tree: pass (but fails owning necessary descendant elements)
  • tree > treeitem: pass
  • treegrid: pass (but fails owning necessary descendant elements)
  • treegrid > treeitem: pass
  • treeitem: fail (not owned by a tree or treegrid)
  • Expected result: As the li element is not a child of a list element (ul, ol or menu), the element is allowed 'any role' (though the use of any role may still fail other rules). Use of role=generic would result in a failure as this role is prohibited for use by authors.

    Test 3

    Authors MUST NOT specify any role, on an li element, when it is a child of a list element which has not had its implicit list role overwritten.

    • alert: fail
    • alertdialog: fail
    • application: fail
    • article: fail
    • banner: fail
    • blockquote: fail
    • button: fail
    • caption: fail
    • cell: fail
    • checkbox: fail
    • code: fail
    • columnheader: fail
    • complementary: fail
    • contentinfo: fail
    • definition: fail
    • deletion: fail
    • dialog: fail
    • document: fail
    • emphasis: fail
    • feed: fail
    • figure: fail
    • form: fail
    • generic: fail
    • grid: fail
    • gridcell: fail
    • group: fail
    • heading: fail
    • img: fail
    • insertion: fail
    • link: fail
    • list: fail
    • listbox: fail
    • listitem: fail (warning for redundant role)
    • log: fail
    • main: fail
    • marquee: fail
    • math: fail
    • menu: fail
    • menubar: fail
    • menuitem: fail
    • menuitemcheckbox: fail
    • menuitemradio: fail
    • meter: fail
    • navigation: fail
    • none: fail
    • note: fail
    • option: fail
    • paragraph: fail
    • presentation: fail
    • progressbar: fail
    • radio: fail
    • radiogroup: fail
    • region: fail
    • row: fail
    • rowheader: fail
    • scrollbar: fail
    • search: fail
    • search: fail
    • separator: fail
    • slider: fail
    • spinbutton: fail
    • status: fail
    • strong: fail
    • subscript: fail
    • superscript: fail
    • switch: fail
    • tab: fail
    • table: fail
    • tablist: fail
    • tabpanel: fail
    • term: fail
    • textbox: fail
    • time: fail
    • timer: fail
    • toolbar: fail
    • tooltip: fail
    • tree: fail
    • treegrid: fail
    • treeitem: fail

    Expected result: A failure should be flagged for each li element which has a role other than listitem. A warning should be flagged for an li element which has a role=listitem as specifying the redundant role is unnecessary.