The Frontend BibleComponents
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.