Skip to content

Commit 3ea437d

Browse files
bruvzgbruvzg
committed
Add basic accessibility features demo.
1 parent 2fc0497 commit 3ea437d

14 files changed

+490
-0
lines changed

‎gui/accessibility/README.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# UI Accessibility
2+
3+
This is a demo of UI accessibility in Godot.
4+
5+
Demo shows basic UI accessibility features and making custom nodes accessible.
6+
7+
Language: GDScript
8+
9+
Renderer: Compatibility
10+
11+
## Screenshots
12+
13+
![Screenshot](screenshots/ui_access.webp)

‎gui/accessibility/clear.svg

Lines changed: 1 addition & 0 deletions
Loading

‎gui/accessibility/clear.svg.import

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
[remap]
2+
3+
importer="texture"
4+
type="CompressedTexture2D"
5+
uid="uid://ni6t4bukhhtq"
6+
path="res://.godot/imported/clear.svg-8b4ed1a66e68ce7d40ebb58ca5ec90ed.ctex"
7+
metadata={
8+
"vram_texture": false
9+
}
10+
11+
[deps]
12+
13+
source_file="res://clear.svg"
14+
dest_files=["res://.godot/imported/clear.svg-8b4ed1a66e68ce7d40ebb58ca5ec90ed.ctex"]
15+
16+
[params]
17+
18+
compress/mode=0
19+
compress/high_quality=false
20+
compress/lossy_quality=0.7
21+
compress/uastc_level=0
22+
compress/rdo_quality_loss=0.0
23+
compress/hdr_compression=1
24+
compress/normal_map=0
25+
compress/channel_pack=0
26+
mipmaps/generate=false
27+
mipmaps/limit=-1
28+
roughness/mode=0
29+
roughness/src_normal=""
30+
process/channel_remap/red=0
31+
process/channel_remap/green=1
32+
process/channel_remap/blue=2
33+
process/channel_remap/alpha=3
34+
process/fix_alpha_border=true
35+
process/premult_alpha=false
36+
process/normal_map_invert_y=false
37+
process/hdr_as_srgb=false
38+
process/hdr_clamp_exposure=false
39+
process/size_limit=0
40+
detect_3d/compress_to=1
41+
svg/scale=1.0
42+
editor/scale_with_editor_scale=false
43+
editor/convert_colors_with_editor_theme=false

‎gui/accessibility/controls.gd

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
extends Control
2+
3+
func _ready() -> void:
4+
$LineEditName.grab_focus() # Accessible UI should always have keyboard focus, since it is a main way of interacting with UI.
5+
6+
7+
func _on_button_set_pressed() -> void:
8+
$Panel/LabelRegion.text = $LineEditLiveReg.text # Set live region text.

‎gui/accessibility/controls.gd.uid

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
uid://7d87a4p1kd2u

‎gui/accessibility/controls.tscn

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
[gd_scene load_steps=4 format=3 uid="uid://c50snxy83byec"]
2+
3+
[ext_resource type="Script" uid="uid://7d87a4p1kd2u" path="res://controls.gd" id="1_gpdjo"]
4+
[ext_resource type="Texture2D" uid="uid://ni6t4bukhhtq" path="res://clear.svg" id="2_qo8cm"]
5+
[ext_resource type="Script" uid="uid://v3wb3vhx0ang" path="res://custom_control.gd" id="3_xwvqn"]
6+
7+
[node name="Accessibility" type="Control"]
8+
layout_mode = 3
9+
anchors_preset = 15
10+
anchor_right = 1.0
11+
anchor_bottom = 1.0
12+
grow_horizontal = 2
13+
grow_vertical = 2
14+
script = ExtResource("1_gpdjo")
15+
16+
[node name="SectionNames" type="Label" parent="."]
17+
layout_mode = 0
18+
offset_left = 40.0
19+
offset_top = 16.0
20+
offset_right = 249.0
21+
offset_bottom = 50.0
22+
theme_override_font_sizes/font_size = 24
23+
text = "Accessible names:"
24+
25+
[node name="NamesDescription1" type="Label" parent="."]
26+
layout_mode = 0
27+
offset_left = 376.0
28+
offset_top = 56.0
29+
offset_right = 1088.0
30+
offset_bottom = 88.0
31+
theme_override_colors/font_color = Color(1, 1, 1, 0.5882353)
32+
text = "Readable name for control can be specified using \"accessible_name\" property."
33+
autowrap_mode = 2
34+
35+
[node name="LabelName" type="Label" parent="."]
36+
layout_mode = 0
37+
offset_left = 64.0
38+
offset_top = 56.0
39+
offset_right = 115.0
40+
offset_bottom = 88.0
41+
text = "Name:"
42+
43+
[node name="LineEditName" type="LineEdit" parent="."]
44+
layout_mode = 0
45+
offset_left = 152.0
46+
offset_top = 56.0
47+
offset_right = 336.0
48+
offset_bottom = 87.0
49+
accessibility_name = "Name"
50+
51+
[node name="NamesDescription2" type="Label" parent="."]
52+
layout_mode = 0
53+
offset_left = 376.0
54+
offset_top = 104.0
55+
offset_right = 1088.0
56+
offset_bottom = 136.0
57+
theme_override_colors/font_color = Color(1, 1, 1, 0.5882353)
58+
text = "Or by setting \"placeholder\" in case of input controls like \"LineEdit\"."
59+
autowrap_mode = 2
60+
61+
[node name="NamesDescription4" type="Label" parent="."]
62+
layout_mode = 0
63+
offset_left = 376.0
64+
offset_top = 152.0
65+
offset_right = 1088.0
66+
offset_bottom = 184.0
67+
theme_override_colors/font_color = Color(1, 1, 1, 0.5882353)
68+
text = "Node without name still works with screen reader, but it's harder to determine its purpose."
69+
autowrap_mode = 2
70+
71+
[node name="LabelType" type="Label" parent="."]
72+
layout_mode = 0
73+
offset_left = 64.0
74+
offset_top = 104.0
75+
offset_right = 115.0
76+
offset_bottom = 136.0
77+
text = "Type:"
78+
79+
[node name="LineEditType" type="LineEdit" parent="."]
80+
layout_mode = 0
81+
offset_left = 152.0
82+
offset_top = 104.0
83+
offset_right = 336.0
84+
offset_bottom = 135.0
85+
placeholder_text = "Type"
86+
87+
[node name="NamesDescription3" type="Label" parent="."]
88+
layout_mode = 0
89+
offset_left = 376.0
90+
offset_top = 200.0
91+
offset_right = 1088.0
92+
offset_bottom = 232.0
93+
theme_override_colors/font_color = Color(1, 1, 1, 0.5882353)
94+
text = "Controls with a static \"text\" property, like \"Button\" will use it as the default readable name."
95+
autowrap_mode = 2
96+
97+
[node name="LabelBroken" type="Label" parent="."]
98+
layout_mode = 0
99+
offset_left = 64.0
100+
offset_top = 152.0
101+
offset_right = 115.0
102+
offset_bottom = 184.0
103+
text = "No name:"
104+
105+
[node name="LineEdit" type="LineEdit" parent="."]
106+
layout_mode = 0
107+
offset_left = 152.0
108+
offset_top = 152.0
109+
offset_right = 336.0
110+
offset_bottom = 183.0
111+
112+
[node name="ButtonOK" type="Button" parent="."]
113+
layout_mode = 0
114+
offset_left = 64.0
115+
offset_top = 200.0
116+
offset_right = 127.0
117+
offset_bottom = 231.0
118+
text = "OK"
119+
120+
[node name="ButtonClear" type="Button" parent="."]
121+
layout_mode = 0
122+
offset_left = 136.0
123+
offset_top = 200.0
124+
offset_right = 160.0
125+
offset_bottom = 231.0
126+
accessibility_name = "Clear"
127+
icon = ExtResource("2_qo8cm")
128+
129+
[node name="LabelRegion" type="Label" parent="."]
130+
layout_mode = 0
131+
offset_left = 40.0
132+
offset_top = 264.0
133+
offset_right = 173.0
134+
offset_bottom = 298.0
135+
theme_override_font_sizes/font_size = 24
136+
text = "Live region:"
137+
138+
[node name="Panel" type="Panel" parent="."]
139+
layout_mode = 0
140+
offset_left = 64.0
141+
offset_top = 304.0
142+
offset_right = 336.0
143+
offset_bottom = 352.0
144+
145+
[node name="LabelRegion" type="Label" parent="Panel"]
146+
layout_mode = 0
147+
offset_left = 8.0
148+
offset_top = 8.0
149+
offset_right = 264.0
150+
offset_bottom = 40.0
151+
accessibility_live = 2
152+
153+
[node name="LineEditLiveReg" type="LineEdit" parent="."]
154+
layout_mode = 0
155+
offset_left = 64.0
156+
offset_top = 368.0
157+
offset_right = 336.0
158+
offset_bottom = 399.0
159+
placeholder_text = "Live region text"
160+
161+
[node name="LiveDescription1" type="Label" parent="."]
162+
layout_mode = 0
163+
offset_left = 376.0
164+
offset_top = 304.0
165+
offset_right = 1088.0
166+
offset_bottom = 379.0
167+
theme_override_colors/font_color = Color(1, 1, 1, 0.5882353)
168+
text = "Live regions (\"accessibility live\" property) can be used to announce changes to unfocused elements, depending on the setting screen reader will speak changes immediately or whenever the user is idle."
169+
autowrap_mode = 2
170+
171+
[node name="LiveDescription2" type="Label" parent="."]
172+
layout_mode = 0
173+
offset_left = 376.0
174+
offset_top = 528.0
175+
offset_right = 1088.0
176+
offset_bottom = 603.0
177+
theme_override_colors/font_color = Color(1, 1, 1, 0.5882353)
178+
text = "Accessibility support for a node can be fully customized by implementing \"ACCESSIBILITY_*\" notifications handler and associated virtual methods, see script attached to \"CustomControl\" node."
179+
autowrap_mode = 2
180+
181+
[node name="ButtonSet" type="Button" parent="."]
182+
layout_mode = 0
183+
offset_left = 64.0
184+
offset_top = 416.0
185+
offset_right = 127.0
186+
offset_bottom = 447.0
187+
text = "Set"
188+
189+
[node name="LabelCustom" type="Label" parent="."]
190+
layout_mode = 0
191+
offset_left = 40.0
192+
offset_top = 488.0
193+
offset_right = 249.0
194+
offset_bottom = 522.0
195+
theme_override_font_sizes/font_size = 24
196+
text = "Custom control:"
197+
198+
[node name="CustomControl" type="Control" parent="."]
199+
anchors_preset = 0
200+
offset_left = 64.0
201+
offset_top = 528.0
202+
offset_right = 364.0
203+
offset_bottom = 568.0
204+
focus_mode = 2
205+
script = ExtResource("3_xwvqn")
206+
207+
[connection signal="pressed" from="ButtonSet" to="." method="_on_button_set_pressed"]

‎gui/accessibility/controls.uid

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
uid://bttvjfh81iwsa

0 commit comments

Comments
 (0)