SwiftUI Academy · Lección

VoiceOver y etiquetas de accesibilidad

Describa los controles para las tecnologías de asistencia.

VoiceOver y etiquetas de accesibilidad es una lección gratuita de SwiftUI Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de SwiftUI Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de SwiftUI Academy incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en inglés.

What Is VoiceOver?

VoiceOver is Apple's screen reader. It speaks your interface aloud so people who can't see the screen can still use your app. 🔊

SwiftUI Helps You

The good news: SwiftUI auto-generates accessibility for standard views. A Text already reads its content, so you start ahead.

When Labels Go Missing

An icon-only button has no readable text, so VoiceOver may say nothing useful. That's when you add an explicit accessibility label.

Button(action: save) {
    Image(systemName: "square.and.arrow.down")
}

Adding a Label

Attach accessibilityLabel to describe what a control does in plain words, not how it looks.

Button(action: save) {
    Image(systemName: "square.and.arrow.down")
}
.accessibilityLabel("Save")

Label, Not Appearance

Write the label as the user's goal. Say Save, not "down arrow icon". The label is meaning, never decoration.

Adding Hints

An accessibilityHint tells the user what happens after they act. It is read after the label, with a short pause.

.accessibilityLabel("Save")
.accessibilityHint("Saves your note to the list")

Reading the Value

For controls that hold data, accessibilityValue announces the current state, like a slider reading "70 percent".

Slider(value: $level)
    .accessibilityValue("\(Int(level)) percent")

Grouping Elements

Use accessibilityElement(children:) to merge a card's pieces into one swipe, so VoiceOver reads it as a single unit.

VStack { Text(name); Text(role) }
.accessibilityElement(children: .combine)

Marking Roles with Traits

Add accessibilityAddTraits so VoiceOver announces a view's role, like calling a tappable card a button.

.accessibilityAddTraits(.isButton)

Hiding Decoration

Purely decorative images add noise. Use accessibilityHidden(true) to skip them so VoiceOver focuses on what matters.

Image("sparkle")
    .accessibilityHidden(true)

Test It Yourself

Turn on VoiceOver in the Accessibility settings and swipe through your app. Hearing it is the fastest way to spot gaps.

Quick Check

You have an icon-only button. Which modifier gives VoiceOver a readable name?

Recap

You learned to make controls speak: add an accessibilityLabel for icons, hints for outcomes, and group or hide views so VoiceOver flows clearly. ✨

Preguntas frecuentes

¿La lección «VoiceOver y etiquetas de accesibilidad» es gratis?

Sí — el texto completo de «VoiceOver y etiquetas de accesibilidad» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de SwiftUI Academy, actualiza a CoddyKit PRO. El curso de SwiftUI Academy incluye 4 lecciones en total.

¿Qué aprenderé en «VoiceOver y etiquetas de accesibilidad»?

Describa los controles para las tecnologías de asistencia. Practicas SwiftUI Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar SwiftUI Academy?

No se requiere experiencia previa. SwiftUI Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «VoiceOver y etiquetas de accesibilidad»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de SwiftUI Academy?

Sí. Cada lección de SwiftUI Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a SwiftUI Academy