Components complexos: llistes, pestanyes, carrusels, mapes, gràfics i vídeo

Els botons i els camps ben etiquetats resolen la major part d'una aplicació, però les pantalles que aporten més valor solen basar-se en components complexos: llistes llargues amb accions, pestanyes, carrusels, mapes, gràfics i reproductors de vídeo. També són els que concentren els errors que una auditoria marca com a bloquejants, perquè no s'arreglen amb una etiqueta. Al nivell 3 vas veure els seus equivalents web amb els patrons de l'APG (s'obre en una finestra nova); aquí veuràs com es resolen amb les API natives que ja coneixes de les lliçons d'iOS i Android.

Llistes i col·leccions

Una llista accessible permet saber quants elements hi ha i en quin ets, recórrer-los sense perdre't i executar les accions de cada fila sense gestos especials.

• Posició i mida: RecyclerView, LazyColumn i LazyVerticalGrid exposen informació de col·lecció i TalkBack la fa servir per anunciar, per exemple, l'entrada en una llista i la seva mida. Si construeixes una llista o una quadrícula a mà amb Column o Row, afegeix Modifier.semantics { collectionInfo = CollectionInfo(rowCount = n, columnCount = 1) } al contenidor i collectionItemInfo a cada element. A iOS, quan la posició sigui rellevant (resultats de cerca, passos), inclou-la a l'accessibilityValue: «3 de 12».
• Accions de fila: les accions de lliscament d'UITableView (trailingSwipeActionsConfiguration) i de .swipeActions a SwiftUI s'ofereixen a VoiceOver com a accions de l'element. A Android, un ItemTouchHelper o un SwipeToDismissBox no són accessibles per si sols: afegeix-hi accions personalitzades («Arxiva», «Elimina») i un menú visible (2.5.1 Gestos del punter, 2.5.7 Moviments d'arrossegament).
• Desplaçament infinit: si la llista carrega més elements en arribar al final, anuncia la càrrega («S'estan carregant més resultats») i el seu resultat, i no col·loquis informació essencial (contacte, avís legal) en un peu de pàgina al qual no s'arriba mai.
• Estirar per actualitzar: ofereix també un botó o una acció «Actualitza»; el gest d'arrossegament no pot ser l'única via.

Pestanyes, controls segmentats i interruptors

Els components del sistema (UITabBarController, TabView, NavigationBar de Material, TabRow, UISegmentedControl) anuncien el rol, la posició i l'estat seleccionat. Quan el disseny exigeix una barra pròpia, cal reconstruir aquesta informació:

// Compose: barra de pestanyes pròpia
Row(Modifier.selectableGroup()) {
    secciones.forEachIndexed { i, s ->
        Box(
            Modifier
                .selectable(
                    selected = i == actual,
                    onClick = { actual = i },
                    role = Role.Tab
                )
                .minimumInteractiveComponentSize()
        ) { Text(s.titulo) }
    }
}

// SwiftUI: botó de pestanya propi
Button(s.titulo) { actual = i }
    .accessibilityAddTraits(i == actual ? [.isSelected] : [])
// A UIKit, el contenidor de la barra pròpia porta el tret .tabBar
barraPropia.accessibilityTraits = .tabBar

Per als interruptors propis, fes servir Modifier.toggleable(value, role = Role.Switch) a Compose i, a SwiftUI, Toggle amb un estil personalitzat abans que un botó que canvia de color. L'estat no es transmet mai només pel color del control (1.4.1 Ús del color, 1.4.11 Contrast no textual).

Carrusels i paginadors

A la lliçó d'aplicacions híbrides veuràs un carrusel resolt com a control ajustable a React Native. El mateix patró existeix en natiu: el tret .adjustable amb accessibilityIncrement() i accessibilityDecrement() a UIKit, o .accessibilityAdjustableAction a SwiftUI; a Android, ViewPager2 i HorizontalPager exposen accions de desplaçament, i convé afegir-hi un stateDescription «Pàgina 2 de 6». Les regles de fons no canvien: sense avanç automàtic o amb pausa visible (2.2.2 Posar en pausa, aturar, amagar), fletxes amb nom i de 48 dp, i indicadors de pàgina que no siguin només punts de color.

Mapes i ubicació

Un mapa és contingut no textual (1.1.1 Contingut no textual) i, si es fa servir per triar un punt, una interacció per arrossegament. Perquè una tasca basada en un mapa sigui accessible:

1. Alternativa en llista: els resultats representats amb marcadors (oficines, parades, punts de recàrrega) són també en una llista ordenable, amb el nom, l'adreça i la distància.
2. Marcadors amb nom: a MapKit, l'anotació exposa el seu títol; en altres SDK de mapes el suport varia, així que verifica amb VoiceOver i TalkBack què s'anuncia i, si no n'hi ha prou, amaga el mapa a la tecnologia de suport i remet a la llista.
3. Triar la ubicació sense arrossegar: a més de moure el mapa fins a col·locar el punt, permet escriure una adreça, fer servir la ubicació actual o triar d'una llista d'adreces recents (2.5.7 Moviments d'arrossegament).
4. Zoom amb botons: «+» i «−» com a alternativa a la pinça (2.5.1), com vas veure a la primera lliçó.

Gràfics i visualització de dades

Un gràfic de despeses, de consum elèctric o de passos necessita, com a mínim, una descripció textual del que mostra (la idea principal i les dades clau) i, si les dades importen, una manera de consultar-les una a una o en una taula. Les plataformes ofereixen eines diferents:

• iOS: Swift Charts genera elements accessibles per a les marques del gràfic. Per als gràfics propis, un AXChartDescriptor (iOS 15), assignat a la propietat accessibilityChartDescriptor de la vista, permet descriure els eixos i les sèries; VoiceOver el fa servir per oferir els Audio Graphs (gràfics sonors), que representen els valors amb tons. A SwiftUI, el modificador .accessibilityChartDescriptor el connecta a la vista.
• Android: no hi ha cap equivalent del sistema. A Views, ExploreByTouchHelper permet crear nodes virtuals per a cada barra o punt d'una vista dibuixada amb Canvas; a Compose, superposa elements amb semàntica pròpia o exposa una llista de valors amb contentDescription i stateDescription.
• A totes: no codifiquis les sèries només pel color (1.4.1), assegura un 3:1 a les línies i les barres respecte al fons (1.4.11) i ofereix la taula de dades amb un botó «Mostra les dades».

Vídeo, àudio i resposta

Les aplicacions que reprodueixen vídeo hereten els criteris 1.2.x de multimèdia que vas veure al nivell 2. A l'entorn natiu:

• Subtítols i preferències del sistema: AVPlayerViewController mostra les pistes de subtítols del contingut i aplica l'estil que la persona tria als ajustos de subtítols d'iOS. A Android, Media3 (ExoPlayer) pot seleccionar la pista de text segons les preferències del CaptioningManager i aplicar-ne l'estil. Respecta aquestes preferències en lloc d'imposar un estil propi.
• Audiodescripció: si el contingut inclou pistes d'audiodescripció, ofereix-les al selector d'àudio amb un nom comprensible; AVFoundation identifica aquestes pistes amb la característica describesVideoForAccessibility.
• Controls: tots amb nom i estat («Pausa», «Subtítols, activats»), sense desaparèixer mentre el lector de pantalla està actiu i sense reproducció automàtica amb so (1.4.2 Control de l'àudio).
• Resposta hàptica i sonora: una vibració o un so en completar una acció són útils com a reforç, però el resultat s'ha de comunicar també en text i com a missatge d'estat (1.3.3, 4.1.3).

Resum

• Les llistes exposen la posició i la mida, les seves accions de lliscament tenen una alternativa accessible i la càrrega infinita no amaga informació essencial.
• Les pestanyes, els segmentats i els interruptors propis reconstrueixen el rol, l'estat i el grup (Role.Tab, selectableGroup, .isSelected, .tabBar); encara millor, fes servir els del sistema.
• Carrusels com a controls ajustables, sense avanç automàtic o amb pausa visible; mapes amb una llista alternativa i elecció de la ubicació sense arrossegament.
• Gràfics amb un resum textual, dades consultables (AXChartDescriptor, nodes virtuals, taula) i sense dependre del color.
• Vídeo amb subtítols que segueixen les preferències del sistema, audiodescripció quan n'hi hagi i controls etiquetats; la vibració o el so no són mai l'única resposta.