Améliorez l’accessibilité de votre app Mac pour tous

Améliorez l’accessibilité de votre app Mac pour tous

Découvrez comment intégrer des fonctionnalités d'accessibilité qui exploitent pleinement la puissance et la flexibilité de macOS. Approfondissez les notions de base pour découvrir comment prendre en charge VoiceOver et le contrôle vocal, améliorer la disposition de vos vues, explorer la façon dont les technologies d'assistance naviguent dans votre contenu, et bien plus encore.

Chapitres
- 0:00 - Bienvenue
- 0:44 - Disposition
- 7:48 - Navigation
- 9:52 - Interaction
Ressources
Vidéos connexes

WWDC24
- Catch up on accessibility in SwiftUI
WWDC21
- SwiftUI Accessibility: Beyond the basics
Bonjour, je m’appelle Nicholas et je suis ingénieur dans l’équipe Accessibilité. L’accessibilité permet à tous les utilisateurs de découvrir et d’apprécier les apps que vous créez. Je vais approfondir les notions de base et explorer comment rendre votre app Mac plus accessible. Les apps Mac sont conçues pour interagir via le clavier et la souris, avec des interfaces utilisateur plus denses et un multitâche puissant. Ces spécificités du Mac soulèvent des enjeux majeurs pour l’accessibilité,
comme adapter la disposition de votre app aux outils d’accessibilité, accélérer la navigation dans votre app et rendre les interactions plus accessibles. Sur Mac, votre app a beaucoup d’espace pour afficher les contrôles et le contenu. Tout comme vous structurez visuellement votre interface pour qu’elle soit claire et intuitive, vous devez réfléchir à la façon dont celle-ci sera interprétée par les technologies d’accessibilité. SwiftUI transmet chaque vue de votre app sous forme d’éléments d’accessibilité. Ces éléments contiennent les informations nécessaires aux technologies d’accessibilité pour comprendre votre app et interagir avec elle. Si vous n’êtes pas familier avec les éléments d’accessibilité, regardez la vidéo WWDC 2024 « Catch up on accessibility in SwiftUI ». J’ai commencé à créer une app Mac dans SwiftUI pour éditer des documents texte.
Une barre latérale permet de changer de page et de marquer avec un signet les pages importantes.
Un inspecteur avec des contrôles permet de formater le texte sélectionné, avec une liste de préréglages de style conçue pour appliquer en une fois plusieurs options de formatage.
Je veux créer une app Mac exceptionnelle et pour cela il faut qu’elle soit accessible à tous les utilisateurs. J’ai donc intégré les bases de l’accessibilité dès le début et testé de nouvelles fonctionnalités que j’ajoute avec VoiceOver.
Pour rappel, VoiceOver est un lecteur d’écran qui permet aux personnes ayant différents niveaux de vision d’utiliser votre app. VoiceOver permet d’entendre l’interface de votre app sous forme vocale - « VoiceOver activé dans l’éditeur de texte accessible » - ou de la ressentir sous forme de braille. VoiceOver offre également un excellent moyen de tester l’accessibilité de votre app en exploitant toutes les informations d’accessibilité fournies par votre app. Si les tests avec VoiceOver sont concluants, vous êtes en bonne voie pour offrir une expérience optimale avec d’autres technologies d’accessibilité comme le contrôle vocal et le contrôle de sélection.
Sur Mac, VoiceOver est principalement contrôlé à l’aide de raccourcis clavier. Vous pouvez les utiliser, par exemple, pour passer à l’élément suivant ou à l’élément précédent de l’écran. Grâce à ces raccourcis, je peux déplacer le focus de VoiceOver d’un élément à un autre pour en en entendre la description :
« bouton Réduire, bouton Plein écran, barre d’outils, Mon document texte, barre latérale, table, séparateur vertical, modifier le texte, insertion à la fin du texte, séparateur vertical, Inspecteur de format, zone de défilement. » Un simple déplacement de souris à l’écran peut nécessiter de nombreuses frappes au clavier pour les utilisateurs de VoiceOver.
En arrière-plan, VoiceOver passe à l’élément d’accessibilité suivant fourni par SwiftUI.
Pour accélérer la navigation avec VoiceOver, SwiftUI permet de regrouper les éléments d’accessibilité dans un élément conteneur.
Des raccourcis clavier permettent d’activer ou de désactiver le focus sur ces conteneurs. Par défaut sur Mac, VoiceOver navigue par conteneur, ce qui permet de naviguer plus rapidement dans l’app et de ne se concentrer que sur un conteneur. Sur Mac, contrairement à d’autres plates-formes comme l’iPhone ou l’iPad, les conteneurs d’accessibilité contiennent souvent des conteneurs imbriqués. Cela crée une structure arborescente d’éléments d’accessibilité représentant l’interface de votre app. Dans votre app, regroupez les éléments liés dans des conteneurs afin d’accélérer la navigation avec VoiceOver.
Attention cependant à ne pas créer trop de niveaux de conteneurs imbriqués. Parfois, cela complique la recherche d’éléments et entraîne une perte de temps due à des focus répétés dans les conteneurs.
Pour affiner les conteneurs de votre app, utilisez le modificateur .accessibilityElement(children:).
Lorsque le modificateur est appliqué à une vue, le comportement fourni détermine comment la vue et ses sous-vues sont représentées pour l’accessibilité. Trois options de comportement sont disponibles :
.contain représente la vue comme un conteneur d’accessibilité dans lequel les sous-vues constituent les éléments d’accessibilité.
.combine représente la vue et ses sous-vues comme un seul élément d’accessibilité qui fusionne tous les attributs et toutes les actions. .ignore représente la vue comme un seul élément d’accessibilité qui ignore complètement les sous-vues.
Lors de mes tests avec VoiceOver, j’ai remarqué quelques points à retravailler. Tout d’abord, je vais déplacer VoiceOver élément par élément dans l’Inspecteur de format à droite. « Dans Inspecteur de format, zone de défilement, 22 éléments, styles de titres. Titre, bouton Appliquer, Sous-titre, bouton Appliquer, En-tête, bouton Appliquer, Corps, bouton Appliquer, Gras, bouton à bascule. » J’ai remarqué que je devais passer par chaque préréglage de style avant d’atteindre le bouton à bascule Gras. Ces préréglages de style sont affichés à l’aide d’un VStack.
Je peux utiliser le modificateur .accessibilityElement(children:) avec le comportement .contain sur le VStack pour créer un conteneur. Je peux également utiliser le modificateur .accessibilityLabel pour nommer ce conteneur.
Je vais refaire le test et déplacer VoiceOver élément par élément dans l’Inspecteur de format à droite. « Dans Inspecteur de format, Zone de défilement, 15 éléments, Styles de titre, Préréglages de style, Groupe, Gras, bouton à bascule. » C’est parfait. Je n’ai pas besoin de parcourir tous les préréglages de style si je ne le veux pas. Je veux m’assurer que la navigation dans ce conteneur de préréglages de style fonctionne. Je place donc le focus de VoiceOver dans le conteneur, puis je déplace VoiceOver élément par élément.
« Dans Préréglages de style, Groupe, 8 éléments Titre, bouton Appliquer, Sous-titre, bouton Appliquer, En-tête, bouton Appliquer, Corps, bouton Appliquer. » Cela fonctionne, mais je remarque que VoiceOver place le focus séparément sur le titre et le bouton Appliquer de chaque préréglage.
Un préréglage de style est représenté par une Hstack contenant une vue titre et une vue bouton.
Je peux utiliser le modificateur .accessibilityElement(children:) avec le comportement .combine de la HStack, afin de créer un élément d’accessibilité qui fusionne les propriétés de la vue titre et de la vue bouton.
Je teste à nouveau la navigation VoiceOver élément par élément dans le conteneur de préréglages de style. « Dans Préréglages de style, Groupe, 4 éléments Titre, bouton Appliquer, Sous-titre, bouton Appliquer, En-tête, bouton Appliquer, Corps, bouton Appliquer. » Je peux maintenant parcourir chaque préréglage comme un seul élément, ce qui rend la navigation plus fluide.
Un autre aspect de la structure d’accessibilité que vous pouvez affiner est l’ordre des éléments. Dans cet exemple, le nom de l’auteur du livre précède visuellement le titre. Mais je veux que le titre soit lu en premier par VoiceOver, car cela permet de parcourir rapidement beaucoup de livres. Je peux modifier l’ordre des éléments d’accessibilité à l’aide du modificateur .accessibilitySortPriority.
Si j’attribue une plus grande priorité à la vue titre du livre, elle sera triée en premier. Par défaut, les vues ont une priorité de tri de zéro. Les vues ayant une priorité égale sont triées en fonction de leur position visuelle. Désormais, VoiceOver lira le titre du livre avant le nom de l’auteur et la description. Lorsque vous testez votre app avec VoiceOver, si l’ordre de lecture ne vous convient pas, utilisez le modificateur .accessibilitySortPriority.
Maintenant que la structure d’accessibilité de mon app est affinée, je souhaite aller encore plus loin dans la navigation grâce aux rotors.
Avec la fonctionnalité de signets de mon app, un utilisateur voyant peut facilement repérer celles qui sont marquées dans la liste des pages. Mais une personne utilisant VoiceOver doit naviguer page par page pour savoir lesquelles comportent des signets. « Page 2 marquée d’un signet. Page 3. Page 4. Page 5 marquée d’un signet. Page 6. Page 7, page 8 marquée d’un signet, page 9, page 10. » Pour que cette expérience soit aussi simple que pour les utilisateurs voyants, une personne utilisant VoiceOver doit pouvoir naviguer uniquement parmi les pages marquées d’un signet.
Pour cela, je peux utiliser des rotors. Les rotors sont un moyen essentiel d’accélérer la navigation pour une personne utilisant VoiceOver. Ils permettent de définir des collections de vues ou des portions de texte dans votre app, dans lesquelles vous pouvez rapidement naviguer. Pour ajouter un rotor de signets à ma liste de pages, j’utilise le modificateur .accessibilityRotor et je l’appelle Signets. Je peux déclarer de façon conditionnelle quelles pages doivent être incluses dans le rotor Signets. Lorsque je place le focus VoiceOver sur la liste des pages de la barre latérale, je peux ouvrir le menu du rotor via un raccourci clavier, ce qui me permet de parcourir rapidement tous mes signets et d’accéder directement à la page souhaitée. « Menu Signets. Page 2. Page 5. Page 5 marquée d’un signet. »
Les rotors d’accessibilité transforment ainsi une navigation longue ou complexe en une expérience optimale pour les utilisateurs de VoiceOver.
Quand je navigue dans mon app avec VoiceOver, je déplace ce que l’on appelle le focus VoiceOver. Les technologies d’accessibilité comme VoiceOver gèrent leur propre état de focus, distinct du focus clavier.
Sous macOS et iOS 26, votre app peut suggérer un focus initial pour les technologies comme VoiceOver à l’aide du modificateur .accessibilityDefaultFocus. Lorsqu’une nouvelle scène apparaît, SwiftUI suggère que la vue avec ce modificateur reçoive le focus, tout en laissant le système adapter cette décision en fonction des préférences de l’utilisateur.
Maintenant que la navigation vers tous les éléments de mon app est fluide, je veux m’assurer que l’interaction avec eux est tout aussi aisée. Dans mon app, j’ai ajouté la possibilité de marquer une page avec un bouton qui apparaît lorsque le pointeur survole la vignette de page. Cela préserve la clarté visuelle des vignettes lorsque le bouton n’est pas nécessaire. Cependant, comme une personne utilisant VoiceOver ne déplace pas le pointeur, elle ne verra jamais ce bouton.
Dans votre app, toute interaction nécessitant de survoler un pointeur ou d’effectuer un geste sur le trackpad peut ne pas être accessible à tous. Vous devez proposer d’autres moyens de découvrir et d’effectuer ces interactions.
Heureusement, SwiftUI offre une solution simple pour cela. Vous pouvez ajouter des actions d’accessibilité à une vue, que les technologies comme VoiceOver peuvent exécuter de manière accessible. Pour cela, utilisez le modificateur .accessibilityAction. Ce modificateur permet d’ajouter une action de signet aux vues de ma liste de pages. C’est aussi simple que d’ajouter un bouton.
Je vais utiliser VoiceOver pour placer le focus sur une vignette de page et utiliser la nouvelle action d’accessibilité des signets. « Page 3. Menu Actions, 2 éléments. Afficher les autres éléments. Ajouter un signet à la page 3. Ajouter un signet à la page 3. »
J’ai pu ouvrir le menu Actions avec un raccourci clavier et ajouter facilement un signet à la page. D’autres technologies d’accessibilité, comme le contrôle de sélection et le contrôle vocal, s’appuient sur ces actions d’accessibilité.
Un autre moyen d’améliorer l’interaction de votre app est d’ajouter des raccourcis clavier. Ces derniers ne sont pas seulement utiles aux utilisateurs avancés pour exécuter les tâches courantes, ils ont aussi un impact majeur sur l’accessibilité, en particulier pour ceux qui ne peuvent pas utiliser une souris. Si vous créez vos contrôles personnalisés, il se peut qu’ils ne disposent pas des informations d’accessibilité intégrées aux autres contrôles. Pour savoir comment rendre facilement les contrôles accessibles avec SwiftUI, regardez la vidéo de la WWDC 2021 « SwiftUI Accessibility : Beyond the basics ». A vous de jouer : testez votre app avec VoiceOver sur Mac, affinez vos conteneurs et déterminez là où vous pouvez ajouter des rotors personnalisés. Enfin, vous pouvez mettre en avant l’accessibilité de votre app grâce aux étiquettes d’accessibilité. Pour en savoir plus, regardez la vidéo « Evaluate your app for Accessibility Nutrition Labels ». Merci de votre attention.

4:15 - Contain subviews within accessibility container

// Contain subviews within accessibility container

import SwiftUI

struct ContentView: View {
  var body: some View {
    VStack {
      FirstView()
      SecondView()
    }
    .accessibilityElement(children: .contain)
  }
}

4:23 - Combine subviews into one accessibility element

// Combine subviews into one accessibility element

import SwiftUI

struct ContentView: View {
  var body: some View {
    VStack {
      FirstView()
      SecondView()
    }
    .accessibilityElement(children: .combine)
  }
}

4:33 - Hide subviews from accessibility

// Hide subviews from accessibility

import SwiftUI

struct ContentView: View {
  var body: some View {
    VStack {
      FirstView()
      SecondView()
    }
    .accessibilityElement(children: .ignore)
  }
}

5:12 - Contain style presets in accessibility container

// Contain style presets in accessibility container

import SwiftUI

struct FormattingInspectorView: View {
  var body: some View {
    Form {
      VStack {
        StylePresetView(type: .title)
        StylePresetView(type: .heading)
        StylePresetView(type: .subHeading)
        StylePresetView(type: .body)
      }
      .accessibilityElement(children: .contain)
      .accessibilityLabel("Style Presets")
    }
  }
}

6:21 - Merge Title View and Button into one accessibility element

// Merge Title View and Button into one accessibility element

import SwiftUI

struct StylePresetView: View {
  let preset: StylePreset
  
  var body: some View {
    HStack {
      PresetTitleView(preset: preset)
      Button("Apply") { /* ... */ }
    }
    .accessibilityElement(children: .combine)
  }
}

7:01 - Set the order of accessibility elements

// Set the order of accessibility elements

import SwiftUI

struct BookDetailsView: View {
  let book: Book

  var body: some View {
    VStack {
      Text(book.author)
      Text(book.title)
        .accessibilitySortPriority(1)
      DescriptionView(book: book)
    }
    .accessibilityElement(children: .combine)
  }
}

8:43 - Add an accessibility rotor for bookmarked pages

// Add an accessibility rotor for bookmarked pages

import SwiftUI

struct PagesView: View {
  @Binding var pages: [Page]
  
  var body: some View {
    List(pages) { page in
      PageListItemView(page: page)
    }
    .accessibilityRotor("Bookmarks") {
      ForEach(pages) { page in
        if page.isBookmarked {
          AccessibilityRotorEntry(page.title, id: page.id)
        }
      }
    }
  }
}

9:33 - Set the default VoiceOver focus

// Set the default VoiceOver focus

struct MyView: View {
  @AccessibilityFocusState(for: .voiceOver) var focusedForVoiceOver

  var body: some View {
    FirstView()
    SecondView()
      .accessibilityDefaultFocus($focusedForVoiceOver, true)
    ThirdView()
  }
}

10:28 - Add an accessibility action to bookmark the page

// Add an accessibility action to bookmark the page

import SwiftUI

struct PageListItemView: View {
  var page: Page
  
  var body: some View {
    VStack() {
      ThumbnailView(page: page)
      Text(page.title)
    }
    .onHover { /* ... */ }
    .accessibilityAction(named: page.isBookmarked ? "Remove Bookmark" : "Bookmark") {
      page.isBookmarked.toggle()
    }
  }
}

- 0:00 - Bienvenue
- Découvrez comment rendre les apps Mac plus accessibles. Découvrez les bonnes pratiques en matière de représentation de la mise en page, d’accélération de la navigation et d’accessibilité des interactions afin que tout le monde puisse profiter des apps Mac.
- 0:44 - Disposition
- SwiftUI sur macOS permet de rendre vos apps accessibles à tous et à toutes, en particulier à celles et ceux qui utilisent VoiceOver. SwiftUI crée des éléments d’accessibilité à partir des vues, mais il est recommandé d’affiner cette structure pour garantir une navigation optimale. Les principaux aspects de l’accessibilité de macOS comprennent le regroupement d’éléments connexes dans des conteneurs afin de créer une structure arborescente qui accélère la navigation. Vous pouvez utiliser des modificateurs comme accessibilityElement(children:) pour spécifier comment les vues et leurs sous-vues sont représentées : en tant que conteneurs, éléments combinés ou ignorés. Par exemple, dans l’app d’édition de texte de Nicholas, des améliorations ont été apportées à l’inspecteur de mise en forme en regroupant les préréglages de style et en combinant les boutons de titre et d’app en un seul élément. Utilisez aussi le modificateur accessibilitySortPriority pour réorganiser les éléments, en veillant à ce que les informations les plus importantes soient lues en premier.
- 7:48 - Navigation
- L’accessibilité de l’app de l’exemple est améliorée grâce aux rotors, une fonctionnalité VoiceOver qui permet de passer rapidement d’un contenu spécifique à un autre, tel que des pages mises en signet. Cela simplifie la navigation et la rend plus efficace pour les utilisateurs et utilisatrices de VoiceOver. Un nouveau modificateur dans SwiftUI peut suggérer des points de focalisation initiaux.
- 9:52 - Interaction
- Dans les apps SwiftUI, assurez-vous que toutes les interactions sont accessibles, au-delà des méthodes basées sur des pointeurs. Utilisez les actions d’accessibilité et les raccourcis clavier pour les personnes utilisant VoiceOver, Contrôle de sélection et le contrôle vocal.

Chapitres

Ressources

Vidéos connexes

WWDC24

WWDC21