Navigation accessibility — landmark roles, "listitem" role

[nfreear]

Hi @timcoughlan,

You / we may want to employ landmark roles, and for example, role=listitem to improve semantics.

Ta,

Nick

---

HTML / SVG:

<div role="main">

  <svg role="list" ...>

    <svg role="listitem" class=" CARD " ...>

      <svg role="button" ...>

    ...

CSS:

[ role = button ],
[ type = submit ]
{
    cursor: pointer;
}

---

Useful reading

• https://w3.org/TR/wai-aria-1.1/#landmark_roles
• https://w3.org/TR/wai-aria-1.1/#listitem
• https://w3.org/TR/wai-aria-1.1/#list