Skip to content

Promote good accessibility practices in example code #1624

Closed
@chipit24

Description

@chipit24

I came across the following code block in the Vue docs, from https://vuejs.org/v2/guide/list.html#v-for-on-a-lt-template-gt:

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>

To help promote good accessibility practices, I think these examples could be updated to include any relevant aria attributes, roles, etc.:

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

See https://www.w3.org/TR/wai-aria-1.1/#presentation.

Once the accessibility guide (#1002) is finished, references to such attributes can link to explanations in the guide.

This is one example, but I'm sure there are others, and I would like to get your thoughts on this :) I could go through the rest of the docs and get a PR put together.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions