Skip to content

Commit

Permalink
try stack
Browse files Browse the repository at this point in the history
  • Loading branch information
@crescentheaded
crescentheaded committed May 5, 2024
1 parent efa4dc3 commit 730742a
Showing 1 changed file with 104 additions and 95 deletions.
199 changes: 104 additions & 95 deletions ...AccessibilityHandbook.docc/Pages/Integration/Basic/Connect/Navigation/Navigation.tutorial
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@Tutorial(time: 20) {
@Intro(title: "Navigating Between Elements") {
@Intro(title: "Navigating between Elements") {
Previously we learnt how to provide interfacial elements with everything to be accessible. But interfaces are not just elements -- there is also coherence between them, implemented by meaningful connection between its elements.

In this tutorial we are going to conclude foundation of making accessible interfaces: how to connect everything so it flawlessly work as intended with any assistive technology.
Expand All @@ -8,130 +8,139 @@
@Section(title: "Direct and indirect selection") {
@ContentAndMedia {
Accessing elements of an interface may be accomplished two ways: by direct and indirect selection.

### Direct selection
Direct selection is navigating within an interface by precisely aiming at a target element of free choice by using pointer devices such as mouses, trackballs, touchpads, eye-trackers and so on. Modern personal computers are designed to be primarily used with pointers, thus it is important for developers to not forget about another way.

### Indirect selection
Indirect selection is oppose to the former on: all elements available on a screen are consequently iterated in a particular order. In case of iOS, the order is how users visually perceive the content -- it's called reading order. Talking about English language, its speakers read top to bottom and left to right, so an English screen-reader will do the same on iOS.

### Physical controls of indirect selection
}

@Stack {
@ContentAndMedia {
### Direct selection
Direct selection is navigating within an interface by precisely aiming at a target element of free choice by using pointer devices such as mouses, trackballs, touchpads, eye-trackers and so on. Modern personal computers are designed to be primarily used with pointers, thus it is important for developers to not forget about another way.
}
@ContentAndMedia {

### Indirect selection
Indirect selection is oppose to the former on: all elements available on a screen are consequently iterated in a particular order. In case of iOS, the order is how users visually perceive the content -- it's called reading order. Talking about English language, its speakers read top to bottom and left to right, so an English screen-reader will do the same on iOS.
}
}
}

@Section(title: "Physical controls of indirect selection") {
@ContentAndMedia {
Assistive technology enabling indirect selection do so because there is no requirement to be able to precisely aim with pointer devices, therefore it provides access to an interface for people who struggle with dexterity (fine motor skills) or visual perception. To see how exactly various Accessible Features use indirect selection, visit [**Switch Control**](<doc:SwitchControl>) and [**VoiceOver**](<doc:VoiceOver>) articles.

Talking about our mission in this tutorial we are going to learn how to ensure that every elements on a screen is reachable with usage of assistive technology, so let's start to figure out what may be an issue.
}
}

@Section(title: "Horizontal swipes") {
@ContentAndMedia {
We already know how [**Accessibility Features**](<doc:AccessibilityFeatures>) build their Accessibility Tree. Our goal is to make sure that the elements are presented in the right order and are accessible for consequential selection.
@Section(title: "Horizontal swipes") {
@ContentAndMedia {
We already know how [**Accessibility Features**](<doc:AccessibilityFeatures>) build their Accessibility Tree. Our goal is to make sure that the elements are presented in the right order and are accessible for consequential selection.
}

@Steps {
@Step {
Let's continue from the point we stopped at the previous tutorial. We were working on accessibility of a complex cell and that cell was placed in a list of such elements.
}

@Steps {
@Step {
Let's continue from the point we stopped at the previous tutorial. We were working on accessibility of a complex cell and that cell was placed in a list of such elements.
}

@Step {
So we have to deal with a list of complex cells.
}

@Step {
First of all, such construction is a list, so let's omit the fact of complexity of its components and see how indirect selection works in scrolling of such lists.
}

@Step {
Swipe to left, right key button, "to next item" switch recipe and other implementations of proceeding to the next item puts the focus frame on an appropriate element and allows interaction with it.
}

@Step {
Our task is to ensure that elements iterated in the order that repeats the order of visual perception of the interface to convey the same cognitive model.
}
@Step {
So we have to deal with a list of complex cells.
}
}

@Section(title: "Cognitive models") {
@ContentAndMedia {


@Step {
First of all, such construction is a list, so let's omit the fact of complexity of its components and see how indirect selection works in scrolling of such lists.
}
@Steps {
@Step {
Let's take a look at our screen and flatten it to a textual description of elements in the order they are placed on the screen. But is it how we present it?
}

@Step {
Nope, it's not an ideal representation of the interface. First of all, it has 17 "accessible" elements. It's not that many, but a tailored layout will always have less.

> Note: And 7 inaccessible ones. Images are hidden by default.
}

@Step {
Next we have a few product card available on the screen: smaller ones under "You'll enjoy it" header and normal ones of endless quantity under categories buttons.
}

@Step {
The previous tutorial was fully dedicated to complex cells, so we already know how to make this experience more comfortable: without buttons of unclear context and meaningful semantics.
}

@Step {
Now let's poke at something unknown yet.
}

@Step {
Swipe to left, right key button, "to next item" switch recipe and other implementations of proceeding to the next item puts the focus frame on an appropriate element and allows interaction with it.
}

@Step {
Our task is to ensure that elements iterated in the order that repeats the order of visual perception of the interface to convey the same cognitive model.
}
}

@Section(title: "Vertical Swipes") {
@ContentAndMedia {
}

@Section(title: "Cognitive models") {
@ContentAndMedia {

}
@Steps {
@Step {
Let's take a look at our screen and flatten it to a textual description of elements in the order they are placed on the screen. But is it how we present it?
}

@Step {
Nope, it's not an ideal representation of the interface. First of all, it has 17 "accessible" elements. It's not that many, but a tailored layout will always have less.

> Note: And 7 inaccessible ones. Images are hidden by default.
}
@Steps {
@Step {

}

@Step {
Next we have a few product card available on the screen: smaller ones under "You'll enjoy it" header and normal ones of endless quantity under categories buttons.
}
}

@Section(title: "Notifications") {
@ContentAndMedia {


@Step {
The previous tutorial was fully dedicated to complex cells, so we already know how to make this experience more comfortable: without buttons of unclear context and meaningful semantics.
}
@Steps {
@Step {

}

@Step {
Now let's poke at something unknown yet.
}
}

@Section(title: "Modal views") {
@ContentAndMedia {
}

@Section(title: "Vertical Swipes") {
@ContentAndMedia {

}
@Steps {
@Step {

}
@Steps {
@Step {

}
}
}

@Section(title: "Special gestures") {
@ContentAndMedia {
}

@Section(title: "Notifications") {
@ContentAndMedia {

}
@Steps {
@Step {

}
@Steps {
@Step {

}
}
}

@Section(title: "Modal views") {
@ContentAndMedia {

}
@Steps {
@Step {

}
}

@Section(title: "Wrap-up") {
@ContentAndMedia {
}

@Section(title: "Special gestures") {
@ContentAndMedia {

}
@Steps {
@Step {

}
}

@Assessment {
}

@Section(title: "Wrap-up") {
@ContentAndMedia {

}
}

@Assessment {

}
}

@Comment {
Expand Down

0 comments on commit 730742a

Please sign in to comment.