Skip to main content
Elastic UI
Elastic UI
ComponentsPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Content
  • Voice and writing style
  • Tone
  • Language
  • Accessibility
  • Inclusivity
  • Word choice
  • EUI
  • Accessibility

Accessibility

This page shares common tips and tricks for writing accessible UI copy. It is not exhaustive and does not replace the official

WCAG 2.0 guidelines.

Writing accessible UI copy is only one part of improving web accessibility. Check the EUI documentation for more accessibility guidelines.

What is accessible content and why does it matter

Accessibility for content means making sure that the content can be consumed properly, independently of how users choose or have to interact with it.

Our users and readers are diverse, with different abilities and disabilities. They also interact with our content in different ways: screen readers, mobile devices, Braille, and so on. The list is long, and always evolving.

As content authors, it is our responsibility to provide them with perceivable, operable, understandable, and robust content.

Guidelines

✔️ Make your content scannable. A clear structure and meaningful words tell users if the feature or flow is relevant to them within seconds.

✔️ Add alt text for all images, icons and media files. Screen readers, Braille output devices, and search engines love concise, accurate alt text that describes what cannot always be displayed, viewed or heard on screen.

InaccessibleAccessible
Image of in progress rule creation form.→User is setting up a new threshold rule.
Logs integrations→Integrations that let you to ingest logs.

✔️ Use plain language. Clear, concise UI copy helps users perform tasks. Jargon and complex sentences can confuse or slow them down. You can find very helpful and detailed plain language guidance on the plainlanguage.gov website.

InaccessibleAccessible
Update the sourcerer selection to be the default detections data view.→Choose the default Security data view.
Cancel update rule? You will lose changes to the rule.→Discard rule changes? Select Discard to reject these changes.

✔️ Use meaningful link text. Descriptive text instead of "click here" or "read more" helps users understand what to expect when they open the link. Screen readers jump between links by generating a list of them, and spell out URLs.

InaccessibleAccessible
Click here for more information.→Learn more about indices.
Create a query. Learn more.→Learn how to create an ES|QL query.

✔️ Use device agnostic language. Users can access content and products in many ways. We do not know if they use a mouse, keyboard, tablet, or another device.

InaccessibleAccessible
Type in your username and password.→Enter your username and password.
Select a time range for the Alerts table.→Choose a time range for the Alerts table.

✔️ Avoid directional language. Do not use above, below, left, right, and so on. All these terms assume that UI layouts never varies, that users can actually see the UI, and that they see it the way you think they do. Users might have disabilities or impairments that affect how they understand the UI.

InaccessibleAccessible
Complete the form below.→Complete the following form.
Import values from a file by clicking the Import values button under the table.→Select Import file to import values from supported file types.

Words to avoid

Refer to Word choice to learn more about words to avoid and their replacements.

Edit this page

Previous
Language
Next
Inclusivity
  • What is accessible content and why does it matter
  • Guidelines
  • Words to avoid
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with ❤ by Elastic