Skip to content

Commit

Permalink
some temp pictures and spelling
Browse files Browse the repository at this point in the history
  • Loading branch information
crescentheaded committed Feb 15, 2024
1 parent 3a7cdd2 commit 31b46e1
Show file tree
Hide file tree
Showing 34 changed files with 60 additions and 29 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ Nothing here yet, but one day will be a verbose guide on how to develop accessib
## Небольшой зачин для интро (про что эта статья)

## Зачем нужно делать доступные приложения - табличка с видами дизабилитис с фокусом на матерей в слингах в кофейнях и автомобилистах. Про статистику использования аксесиблити сетинг, про расширение аудитории, пару слов про ДОБРОДЕТЕЛЬ
@Image(source: fifteen-percent, alt: "")

## Пару слов про дизайн

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@

@TutorialReference(tutorial: "doc:DescribeElements")
@TutorialReference(tutorial: "doc:AdaptCells")
@TutorialReference(tutorial: "doc:Traits")
}

@Chapter(name: "Reduce Number of Controls") {
Expand Down Expand Up @@ -123,6 +122,14 @@
@TutorialReference(tutorial: "doc:UITesting")
}

@Chapter(name: "Maintenance") {
@Image(source: chapter-placeholder.png, alt: "")

How to maintain accessible apps.

@TutorialReference(tutorial: "doc:Maintenance")
}

@Chapter(name: "Activism") {
@Image(source: chapter-placeholder.png, alt: "")

Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,20 @@

@Tutorial(time: 10) {
@Intro(title: "Setting Up Adjustable Elements") {
Simplifies interactions with complex elements for VoiceOver.
}


@Section(title: "Title") {
Jepa.
@Steps {
@Step {
Jepa.
@Image(source: placeholder-image.png, alt: "")
}
}
}

@Comment {
@Section(title: "Basic Setup") {
@ContentAndMedia {
Expand Down Expand Up @@ -92,3 +104,4 @@
}
}
}

Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
@Tutorial(time: 15) {
@Intro(title: "🔒 Accessible Colors And Shapes") {
это для сотрудников арт лебедев
@Image(source: visual-properties, alt: "")

}



@Section(title: "<#text#>") {
@ContentAndMedia {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
@Tutorial(time: 30) {
@Intro(title: "🔒 Dynamic Type") {

@Image(source: vision-loss, alt: "")
}



@Section(title: "<#text#>") {
@ContentAndMedia {
<#text#>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
Описание ячеек выглядит как хорошее продолжение темы лейблов и вэлью: если мы видим элемент как единое целое, то описывать мы его тоже должны как один элемент. При этом случаи бывают сложные, например, когда надо порядок элементов решать. Ну и типо го разберем, заодно и код посмотрим
}

To have **Accessibility Features** work as intented sometimes it is needed to **simplify complex cells** to such degree so there is no difference for accessibility features between *differentiated abstractions* that are stored in cells.
To have **Accessibility Features** work as intended sometimes it is needed to **simplify complex cells** to such degree so there is no difference for accessibility features between *differentiated abstractions* that are stored in cells.

In other words, if there is a cell with pizza's description it is reasonable to distinguish data by its nature: have an image as an illustration, a title, a list of ingridients and a price - but it complicates the work for VoiceOver, Voice Control and Switch Control.
In other words, if there is a cell with pizza's description it is reasonable to distinguish data by its nature: have an image as an illustration, a title, a list of ingredients and a price - but it complicates the work for VoiceOver, Voice Control and Switch Control.

Such detailed layout makes automated adaption of the cell's contents **wrong**.

Expand All @@ -25,7 +25,6 @@
@Steps {
@Step {
Firstly, **there is a definite problem for *VoiceOver* to adapt such interfaces**.

The thing is that **the focus works such way so it outlines *every* single element of a cell starting from *the title***.

> Note: Pay attention that **images are hidden from VoiceOver *by default***, therefore are *inaccessible* to be focused on.
Expand Down Expand Up @@ -54,15 +53,15 @@
}

@Step {
Moreover such discretion leads to a decrease in *comrehensibility*: users can easily **lose track of what pizza in particular they are going through at the moment**.
Moreover such discretion leads to a decrease in *comprehensibility*: users can easily **lose track of what pizza in particular they are going through at the moment**.

@Code(name: "Several Cells, Wrong Rhyme", file: "DescribeCell_3_1.swift") {
@Image(source: "DescribeCell_3_3", alt: "Focus outlines the button with the price.")
}
}

@Step {
For example, **the price button* may be percieved connected to the next title** which is something we really don't want to have. Normally prices are playing a critical role in choice-making.
For example, **the price button* may be perceived connected to the next title** which is something we really don't want to have. Normally prices are playing a critical role in choice-making.

@Code(name: "Several Cells, Wrong Rhyme", file: "DescribeCell_3_2.swift") {
@Image(source: "DescribeCell_3_3", alt: "Focus outlines the button with the price.")
Expand All @@ -75,7 +74,7 @@

> Tip: The solution here is to **use *the title* as the cell's *label***.

@Image(source: "chicken-bbq-price-pronounciation", alt: "Voice Control shows the badge over the button with the price")
@Image(source: "chicken-bbq-price-pronunciation", alt: "Voice Control shows the badge over the button with the price")
}
}
}
Expand All @@ -86,7 +85,7 @@

In order to **properly *describe* the cell so VoiceOver can read it correctly** we have to transfer the text from *labels* to the *accessibility description* of the cell in a *correct order* and with a *correct type*. Let's try to do so.

@Image(source: "chicken-bbq-priority", alt: "Order in which elements are read is controlled by designers' vision.")
@Image(source: "cell-priority", alt: "Order in which elements are read is controlled by designers' vision.")
}

@Steps {
Expand All @@ -98,7 +97,6 @@

@Step {
First of all we have to **specify that the cell will be a *focusable element***. By doing that we ***reduce* the number of elements available on the screen**, which is, as you remember from the previous section, really helpful for *adaption*.

There is no need to *explicitly* hide other elements - setting the cell with `accessibleElements` property is enough. To see **how it works *exactly*** take a look at <doc:ControlHierarchy> where everything is explained in *greater* detail than we can afford in *tutorials*.

@Comment {
Expand All @@ -121,16 +119,11 @@
@Step {

Not to forget there is also *the price* which is **an *essential* part of cells with a *product offer***.

To adapt it *correctly* we need to follow the strategy controlled by *the cell's design* whose concept is to make users *notice* the product.

Its **image is what *attracts the attention***, then **title is read and understood *loud and clear*** - it's on top and visually distinguished by a *bolder* font used.

Furtherly the attention may be *interrupted* by a **bright coloured button**.

Next the attention may be *interrupted* by a **bright coloured button**.
**Ingredients are least prior** to the attention and this is in their nature: this elements is of an *informative matter*, therefore not about *attention attraction*.

Logically **we place the price *after* the title**. Pay attention that **to keep label simple the price has to be put in the beginning of `accesibilityValue`**.
Logically **we place the price *after* the title**. Pay attention that **to keep label simple the price has to be put in the beginning of `accessibilityValue`**.

@Code(name: "Cell and VoiceOver.swift", file: "DescribeCell_9.swift") {
@Image(source: "DescribeCell_9_preview", alt: "Reading order is controlled by people who want to sell this pizza to you.")
Expand All @@ -139,7 +132,6 @@

@Step {
Everything is *described* and VoiceOver is happy, but *most importantly* we shouldn't forget to **mark the interactive element with `.button` trait*.

After that *specifying* we are done and did great!

@Code(name: "Cell and VoiceOver.swift", file: "DescribeCell_10.swift")
Expand All @@ -149,7 +141,7 @@

@Section(title: "What Can Be Done: Ease Scrolling") {
@ContentAndMedia {
In VoiceOver the **default *scrolling* is implemented by a *three-finger swipe***. The gesture will announce where the user currectly is, i.e. VoiceOver will **read the number of the *visible* page**. For example, *"4 out of 20*".
In VoiceOver the **default *scrolling* is implemented by a *three-finger swipe***. The gesture will announce where the user correctly is, i.e. VoiceOver will **read the number of the *visible* page**. For example, *"4 out of 20*".

**Going through *tables* of cells functions *exactly* the same way**. For example, *"from 25 to 40 out of 120"* will be said during going over the rows.

Expand Down Expand Up @@ -199,7 +191,6 @@

@Step {
And, as a result, **three-finger swipe will cause the *titles* to be listed outloud**.

We are happy, VoiceOver is happy, but, most importantly, the user would not have to do anything unnecessary to see what's available on the menu. Congratulations!

@Comment {
Expand Down Expand Up @@ -289,15 +280,15 @@
@Justification(reaction: "That's right!") {
Yep, this is it!

If adapted *correctly*, the user will hear what is in the table without unnecessery for the moment information specified.
If adapted *correctly*, the user will hear what is in the table without unnecessary for the moment information specified.
}
}

@Choice(isCorrect: false) {
Four-fingers swipe

@Justification(reaction: "Try again!") {
Unfortunately, this is not the answer. Horizontal **four-fingers swipe switches beetwen applications opened**.
Unfortunately, this is not the answer. Horizontal **four-fingers swipe switches between applications opened**.
}
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
@Image(source: chapter-placeholder.png, alt: "")
}
@Step {
To *succintly identify* the song we will risk to use its name as `Label`.
To *succinctly identify* the song we will risk to use its name as `Label`.

@Image(source: placeholder-image.png, alt: "")
}
Expand Down Expand Up @@ -240,12 +240,21 @@

What about a little `quiz` to revise the topic? 🔎



@Comment {
Тут надо раскрыть, что на описание еще могут влиять другие трейты и контейнеры, но об этом позже
}

@Image(source: attributes-order, alt: "")
}

@Steps {
@Step {
Text.
@Image(source: placeholder-image.png, alt: "")
}
}
}
@Assessments {
@MultipleChoice {
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
}


Allows to connect external devices and link them to any command. As a result paralyzed people can control a phone by simple signals: finger movement, muscle stretches, etc. Also, a iPhone's camera can recognize facial expression or any sound like a command. In the end user moves focus on screen and pass command to focused element by submenu that is presented after selection.
Allows to connect external devices and link them to any command. As a result paralyzed people can control a phone by simple signals: finger movement, muscle stretches, etc. Also, a iPhone's camera can recognise facial expression or any sound like a command. In the end user moves focus on screen and pass command to focused element by submenu that is presented after selection.

![Switch Control modes: focus groups on elements, cross selection and submenu](switch-control-overview)

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Voice Control

Adds additional commands over graphical UI to control a phone by voice commands. A user of Voice Control can see, but can't touch their phone, as a result he can pronounce commands lite "select Pepperoni", "tap purchase" or "close screen". iPhone recognizes speech, convert it to text and links command to elements' description.
Adds additional commands over graphical UI to control a phone by voice commands. A user of Voice Control can see, but can't touch their phone, as a result he can pronounce commands lite "select Pepperoni", "tap purchase" or "close screen". iPhone recognises speech, convert it to text and links command to elements' description.

@Metadata {
@PageImage(
Expand All @@ -12,6 +12,8 @@ Adds additional commands over graphical UI to control a phone by voice commands.

## Overview



![Voice Control modes: with labels, enumerated elements or grid](voice-control-picker-example)

[Video how to use Voice Control](https://www.youtube.com/watch?v=eg22JaZWAgs)
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ Helps blind or low-visioned persons to use a phone by listening audio descriptio

## Overview

@Image(source: media-types, alt: "")

![VoiceOver gestures](voiceOver-gestures)

[Video how to navigate by VoiceOver](https://www.youtube.com/watch?v=qDm7GiKra28)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
## Зачин про айфончики

## Про эпл и их дайверсити движения
@Image(source: inclusion, alt: "")

## Про историю аксесибилити на айос (та самая статья)

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
@Intro(title: "Accessibility Maintenance") {
If supported, any application grows in complexity even if there is no additional functionality added.

@Image(source: image-placeholder, alt: "")
@Image(source: placeholder-image, alt: "")
}

@Section(title: "No Fucking Idea") {
Expand All @@ -16,7 +16,7 @@
@Step {
Text?

@Image(source: image-placeholder, alt: "")
@Image(source: placeholder-image, alt: "")
}
@Step {
Text.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
Testing is an essential part of production. Just as any other functionality, accessibility of an app has to be tested to make sure that the app is approachable and intuitive.

@Metadata {
@DisplayName("Accessibility Quality Assurance")
@PageImage(
purpose: icon,
source: "icon",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -95,4 +95,4 @@ Reading the book you may sometimes notice screenshots of iOS applications with *
### What's Next?
- <doc:WhatsNext>
- <doc:Processes>
- <doc:Testing>
- <doc:AccessibilityQualityAssurance>
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 31b46e1

Please sign in to comment.