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.
Inaccessible | Accessible | |
---|---|---|
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.
Inaccessible | Accessible | |
---|---|---|
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.
Inaccessible | Accessible | |
---|---|---|
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.
Inaccessible | Accessible | |
---|---|---|
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.
Inaccessible | Accessible | |
---|---|---|
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.