Zugänglichkeit Element Fokusbox
Stellt sicher, dass der Zugänglichkeitspfad einer Ansicht oder das VoiceOver-Fokusfeld seinen eigenen visuellen Bildschirmrahmen umfasst.
Diese Regel erzwingt eine Deque Best Practice. Sie können diese Regel über das Mobile Dashboard deaktivieren oder indem Sie die Regel in für iOS geschriebenen Tests ignorieren.
Erfahren Sie, wie Sie Regeln im Mobile Dashboard deaktivieren.
Auswirkung
Am stärksten betroffen sind Personen, die VoiceOver mit Sehkraft verwenden. VoiceOver gibt die Details eines Bildschirmelements an, der Fokus scheint jedoch teilweise oder vollständig von dem anzusagenden Element abzuweichen.
Bestätigung
- VoiceOver aktivieren
- Fokussieren Sie das Element
- Eines der folgenden Ereignisse wird eintreten:
– Unzugänglich: Das Fokusfeld von VoiceOver enthält das Element teilweise.
- Unzugänglich: Das Fokusfeld von VoiceOver enthält das Element überhaupt nicht.
- Zugänglich: Das Fokusfeld von VoiceOver enthält das Element vollständig.
So beheben Sie das Problem
UIKit
Die falsche Verwendung von accessibilityPath
oder accessibilityFrame
in einer Ansicht führt dazu, dass diese Regel ein Problem feststellt. Beheben Sie das Problem auf eine der beiden Arten:
- Verwenden Sie nicht
accessibilityPath
oderaccessibilityFrame
. VoiceOver berechnet automatisch die Bildschirmkoordinaten der Ansicht und sollte korrekt einen Rahmen (Fokusfeld von VoiceOver) um das aktuell fokussierte Element zeichnen. Wenn Sie eine dieser Eingabehilfe-APIs auf ein Element anwenden, wird das Fokusfeld von VoiceOver für dieses Element neu gezeichnet. - Wenn Sie das Fokusfeld von VoiceOver neu zeichnen müssen, stellen Sie sicher, dass Sie die Bildschirmkoordinaten des Elements korrekt berechnen und dass Sie das Fokusfeld bei jeder Bewegung des Elements neu berechnen und neu definieren (z. B. in einer UIScrollView):
// Assuming we are in a ViewController
let button = UIButton()
// If not within a ViewController, self.view should be replaced with the rootView of the screen
let rootview = self.view
let onScreenFrame = button.superview!.convert(button.frame, to: rootview)
button.accessibilityPath = UIBezierPath(rect: onScreenFrame)
SwiftUI
Diese Art von Zugänglichkeitsproblem tritt voraussichtlich nicht in SwiftUI-Ansichten auf.
React Native
Bei standardmäßigen berührbaren oder drückbaren Elementen treten diese Art von Zugänglichkeitsproblemen voraussichtlich nicht auf.
Wenn Sie den Fokus auf einen anderen Elementtyp setzen, fügen Sie die accessible
-Eigenschaft und die accessibilityElementsHidden
-Eigenschaft direkt zum Element hinzu:
<Image
source={DequeLogo}
accessible={true}
accessibilityElementsHidden={false}
accessibilityLabel="Deque Systems Logo"
accessibilityRole="image"
style={{ width: 100, height: 60 }}
resizeMode='center'
/>
Wenn Elemente in einer enthaltenen Ansicht gruppiert sind, fügen Sie die accessible
-Eigenschaft und die accessibilityElementsHidden
-Eigenschaft zur enthaltenen Ansicht hinzu:
<View
style={styles.rowContainer}
accessible={true}
accessibilityElementsHidden={false}
accessibilityLabel="Dark Mode"
accessibilityValue={{ text: "" + secondSwitchIsEnabled }}
accessibilityRole="switch"
onTouchStart={() => {
setSecondSwitchIsEnabled(!secondSwitchIsEnabled)
}}>
<Text style={{ fontSize: 18 }}>Dark Mode</Text>
<Switch
style={styles.standardSwitch}
importantForAccessibility='no-hide-descendants'
value={secondSwitchIsEnabled}
onValueChange={() => {
setSecondSwitchIsEnabled(!secondSwitchIsEnabled);
}}
/>
</View>