mirror of
https://github.com/emilk/egui.git
synced 2026-06-26 14:49:06 -04:00
docs: add AccessKit accessibility guide (#8233)
Summary: - add docs/accessibility.md with labels, custom widgets, and testing guidance - link the guide from the README accessibility FAQ Closes #4396 Checks: - cargo fmt --all -- --check - git diff --check
This commit is contained in:
committed by
GitHub
parent
f624e30786
commit
27a61934b1
66
docs/accessibility.md
Normal file
66
docs/accessibility.md
Normal file
@@ -0,0 +1,66 @@
|
||||
# Accessibility
|
||||
|
||||
egui can expose its widget tree through [AccessKit](https://accesskit.dev/).
|
||||
When using `eframe`, AccessKit support is enabled by default on native
|
||||
platforms where an adapter is available. Integrations that build directly on
|
||||
`egui` can opt in with `Context::enable_accesskit()` before running frames.
|
||||
|
||||
## Labels
|
||||
|
||||
Most built-in widgets register their role and accessible name when shown
|
||||
through the usual egui APIs. Buttons, checkboxes, radio buttons, sliders, combo
|
||||
boxes, text edits, links, windows, images, and progress indicators all contribute
|
||||
widget information to the AccessKit tree.
|
||||
|
||||
For inputs with a separate visible label, connect the input response to the
|
||||
label:
|
||||
|
||||
```rust
|
||||
let label = ui.label("User name:");
|
||||
ui.text_edit_singleline(&mut user_name).labelled_by(label.id);
|
||||
```
|
||||
|
||||
## Custom widgets
|
||||
|
||||
If a widget is visual-only or draws custom shapes, give it explicit widget
|
||||
information:
|
||||
|
||||
```rust
|
||||
use egui::{Sense, WidgetInfo, WidgetType};
|
||||
|
||||
let (_rect, response) = ui.allocate_exact_size(size, Sense::click());
|
||||
// Paint using ui.painter().
|
||||
response.widget_info(|| {
|
||||
WidgetInfo::labeled(WidgetType::Button, ui.is_enabled(), "Open color picker")
|
||||
});
|
||||
```
|
||||
|
||||
Choose the closest `WidgetType`. For non-interactive custom content, prefer a
|
||||
label or image role where possible rather than leaving the node unnamed.
|
||||
|
||||
## Testing
|
||||
|
||||
`egui_kittest` builds on AccessKit, so tests can query the same roles and names
|
||||
that screen readers consume:
|
||||
|
||||
```rust
|
||||
use egui::accesskit::Role;
|
||||
use egui_kittest::{Harness, kittest::Queryable as _};
|
||||
|
||||
let mut harness = Harness::new_ui_state(
|
||||
|ui, accepted| {
|
||||
ui.checkbox(accepted, "Accept terms");
|
||||
},
|
||||
false,
|
||||
);
|
||||
|
||||
harness
|
||||
.get_by_role_and_label(Role::CheckBox, "Accept terms")
|
||||
.click();
|
||||
harness.run();
|
||||
|
||||
assert!(*harness.state());
|
||||
```
|
||||
|
||||
You can also inspect the tree in the demo app when it is built with the
|
||||
`accessibility_inspector` feature.
|
||||
Reference in New Issue
Block a user