---
description: >-
version: 11.17.0
generatedAt: 2026-11-05T09:55:46.931Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

# Accessibility

<Intro>

User Experience (**UX**) is much more than only the visual part. It for sure have to include good accessibility so all people can use our applications, services and solutions.

You have to:

- test **keyboard navigation** during development
- test with **screen readers** during development
- test with **200%** in `font-size` during development

You may read more about [these targets](/web/accessibility).

## Tools

Eufemia includes a range of tools to help you make better accessible applications:

- [Focus Management](/web/accessibility/focus)
- [Accessibility Checklist](/web/accessibility/checklist#accessibility-checklist)
- [Skip Link](/web/accessibility/focus#skip-link)
- [Semantics example](/web/accessibility/checklist#landmark--and-semantics-example)

## Components

- [NumberFormat](/web/components/number-format) makes numbers accessible for screen readers.
- [Heading](/web/components/heading) handles heading leveling automatically.
- [GlobalStatus](/web/components/global-status) includes grouping of form status messages and live announcements for screen readers.
- [FieldBlock](/web/forms/create-component/FieldBlock) handles `<fieldset>` and `<legend>`.
- [VisuallyHidden](/web/components/visually-hidden) hides text visually, while makes it available for screen readers. It's based on the helper HTML class `dnb-sr-only`.
- [SkipContent](/web/components/skip-content) similar to a skip link. It allows a user, while tabbing, to skip large parts of content, to reach quickly a save button etc.
- [AriaLive](/web/components/aria-live) is a component that makes it easy to announce messages to screen readers.

All form components includes a `label` property to bind automatically the FormLabel to the components (HTML element).

```jsx
<Input label="Input label:" />
```

And all form components includes the [FormStatus](/web/components/form-status) component which is coupled to the component by using `aria-describedby`.

```jsx
<Input status="Status message:" />
```

### **200%** you said?

---

<InlineImg
  src={FontSizeScreenshot}
  caption="How it not should be"
  width="auto"
  className="blank x-10"
/>

---

<IntroFooter
  href="/web/get-started/guided-introduction/04-ux-handover"
  text="Next - UX handover"
/>

</Intro>