Components

Accessibility

Writing semantic code helps readability, maintainability and improving the accessibility.

Element	Description and correct usage
div	Use divs for layout purposes.
span	Use spans for inline text.
section	Use sections for big pieces of code.
article	Use articles for a single item in a section.
h1, h2, h3, ...	Use headings for titles.
p	Use paragraphs for text and paragraphs.
a	Use anchors for links.
button	Use buttons for buttons.
input	Use inputs for inputs.
label	Use labels for labels.
form	Use forms for forms.
table	Use tables for tables.
ul, ol	Use lists for lists.
li	Use list items for list items.
img	Use images for images.
iframe	Use iframes for iframes.
svg	Use svg for svg.

Accessibility

Accessibility is important for everyone. It helps people with disabilities to use your application. It also helps people with different screen sizes and devices to use your application.

example:

<template>
  <div>
    <h1>Accessibility</h1>
    <p>Accessibility is important for everyone. It helps people with disabilities to use your application. It also helps people with different screen sizes and devices to use your application.</p>
  </div>
</template>

Keyboard navigation

Make sure that your application is accessible with the keyboard. This means that you can navigate through your application with the keyboard. This is important for people with disabilities and for people who prefer to use the keyboard instead of a mouse.

Screen readers

Make sure that your application is accessible with screen readers. This means that your application is readable for people who use screen readers. This is important for people with disabilities.

Focus

Make sure that your application has a clear focus. This means that the focus is visible for the user. This is important for people with disabilities and for people who prefer to use the keyboard instead of a mouse.

Color contrast

Make sure that your application has a good color contrast. This means that the contrast between the text and the background is good. This is important for people with disabilities.

ARIA

Make sure that your application has ARIA attributes. This means that you use ARIA attributes to make your application accessible. This is important for people with disabilities.

Semantic HTML

Make sure that your application has semantic HTML. This means that you use HTML tags for their semantic meaning. This is important for people with disabilities and for people who prefer to use the keyboard instead of a mouse.

Headings

Make sure that your application has headings. This means that you use headings to structure your application. This is important for people with disabilities and for people who prefer to use the keyboard instead of a mouse.