Skip to content

Components

Accessibility

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

ElementDescription and correct usage
divUse divs for layout purposes.
spanUse spans for inline text.
sectionUse sections for big pieces of code.
articleUse articles for a single item in a section.
h1, h2, h3, ...Use headings for titles.
pUse paragraphs for text and paragraphs.
aUse anchors for links.
buttonUse buttons for buttons.
inputUse inputs for inputs.
labelUse labels for labels.
formUse forms for forms.
tableUse tables for tables.
ul, olUse lists for lists.
liUse list items for list items.
imgUse images for images.
iframeUse iframes for iframes.
svgUse 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:

vue
<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.