Сергей Горобцов: Идеологии разработки веб...
TRANSCRIPT
![Page 1: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/1.jpg)
![Page 2: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/2.jpg)
1
Graceful Degradation, ProgressiveEnhancement, Feature Detection,Responsive Web Designи Accessibility
Сергей Горобцов
разработчик интерфейсов
7 ноября 2013, ШРИ
2
![Page 3: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/3.jpg)
Стратегии разработки1. Graceful Degradation (безопасная деградация)
2. Progressive Enhancement (прогрессивное улучшение)
3. и маленький бонус в виде Feature Detection (определение
возможностей браузера)
3
![Page 4: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/4.jpg)
Graceful DegradationСпособность системы продолжать свою работу в случае отказа
некоторых её компонентов. И чем серьезней отказ, тем ниже качество
работы системы.
4
![Page 5: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/5.jpg)
Тёплое с мягкимЧто же такое отказоустойчивость системы? Это прежде всего:
1. не отсутствие скруглённостей и градиентов у блоков
2. не фарш из контента и кусков оформления в старых браузерах
3. и тем более не плашка о том, что мой браузер устарел
5
![Page 6: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/6.jpg)
Распечатай меня полностью<div class="printme">
<a href="javascript:window.print()">Распечатать</a>
</div>
.printme:before { background: url(print.png) no-repeat; }
Распечатать
01.
02.
03.
6
![Page 7: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/7.jpg)
Распечатай меня полностью<div class="printme">
<a href="javascript:window.print()">Распечатать</a>
</div>
.printme:before { background: url(print.png) no-repeat; }
Распечатать
01.
02.
03.
7
![Page 8: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/8.jpg)
Распечатай меня полностью<div class="printme">
<a href="javascript:window.print()">Распечатать</a>
</div>
01.
02.
03.
8
![Page 9: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/9.jpg)
Распечатай меня полностью<div class="printme">
<a href="javascript:window.print()">Распечатать</a>
</div>
<noscript>
<div class="warning">Инструкция?</div>
</noscript>
01.
02.
03.
04.
05.
06.
9
![Page 10: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/10.jpg)
Формы
10
![Page 11: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/11.jpg)
Формы
Нестандартные чекбоксы
11
![Page 12: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/12.jpg)
Формы
Cелектор <select />
12
![Page 13: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/13.jpg)
Формы
Диапазонный селектор
13
![Page 14: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/14.jpg)
Формы
Выбор форм-фактора
14
![Page 15: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/15.jpg)
Верстаем<div class="checkbox">
<div class="checkbox__tick"></div>
новые
</div>
Плюс CSS, плюс JS и плюс немного магии. По тому же принципу
собираем и остальные контролы.
01.
02.
03.
04.
15
![Page 16: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/16.jpg)
Что получаем
В случае отказа JS пользователь в печали уходит в закат
16
![Page 17: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/17.jpg)
Приступаем к деградации<div class="checkbox">
<input type="checkbox" id="some_id">
<div class="checkbox__tick"></div>
<label for="some_id">новые</label>
</div>
01.
02.
03.
04.
05.
17
![Page 18: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/18.jpg)
Результат
18
![Page 19: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/19.jpg)
Диапазонный слайдер1. предусмотреть на серверной стороне отсутствие данных
2. передавать всегда минимальное и максимальное значения
3. дать возможность выбора
19
![Page 20: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/20.jpg)
Диапазонный слайдер
20
![Page 21: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/21.jpg)
Progressive EnhancementПрогрессивное улучшение предполагает создание веб-интерфейсов
поэтапно от простого к сложному. На каждом из этапов должен
получаться законченный веб-интерфейс.
1. HTML этап
2. CSS этап
3. CSS3 этап
4. JavaScript этап
21
![Page 22: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/22.jpg)
HTML этап
22
![Page 23: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/23.jpg)
CSS этап
23
![Page 24: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/24.jpg)
CSS этап
24
![Page 25: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/25.jpg)
CSS этап
25
![Page 26: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/26.jpg)
CSS3 этап
26
![Page 27: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/27.jpg)
JavaScript этап
27
![Page 28: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/28.jpg)
Что же такое Progressive EnhancementProgressive Enhancement — это доведённый до совершенства Graceful
Degradation, за исключением следующих моментов:
• задает направление разработки от простого к сложному, а для
Graceful Degradation это не так важно.
• на первом месте контент, а для Graceful Degradation оно на втором
плане.
28
![Page 29: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/29.jpg)
![Page 30: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/30.jpg)
Немного о Feature DetectionМетод, при котором мы можем пытаться определять поддержку фич
путём проверки нужных полей / вызовов нужных методов.
30
![Page 31: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/31.jpg)
Например в JavaScriptfunction detectCanvas() {
var canvas = document.createElement("canvas");
return canvas.getContext ? true : false;
}
detectCanvas() ? "счастье" : "тлен";
01.
02.
03.
04.
31
![Page 32: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/32.jpg)
Modernizr<html class=“js canvas canvastext no-geolocation rgba
hsla multiplebgs borderimage borderradius boxshadow
cssanimations csscolumns cssgradients cssreflections
csstransforms csstransforms3d csstransitions video audio
webworkers applicationcache fontface”>
01.
02.
03.
04.
05.
32
![Page 33: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/33.jpg)
Modernizr и Graceful Degradation.button {
border-radius: 5px;
}
.no-borderradius .button {
background-image: url('rounded_corners.png');
}
01.
02.
03.
04.
05.
06.
33
![Page 34: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/34.jpg)
Modernizr и Progressive Enhancement.button {
background-image: url('rounded_corners.png');
}
.borderradius .button {
background-image: none;
border-radius: 5px;
}
01.
02.
03.
04.
05.
06.
07.
34
![Page 35: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/35.jpg)
Расширяя возможностиFeature Detection стоит воспринимать как приятное дополнение
к Graceful Degradation или Progressive Enhancement, но не более.
35
![Page 36: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/36.jpg)
Responsive Web Design
36
![Page 37: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/37.jpg)
Responsive Web DesignАдаптивный веб-дизайн (англ. Responsive web design) — дизайн веб-
страниц, обеспечивающий отличное отображение сайта на различных
устройствах, подключённых к интернету.
Адаптивный веб-дизайн — Википедия“
37
![Page 38: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/38.jpg)
И опять холивары1. определять устройство и выбирать из некоторого множества
представлений дизайна
2. подстраивать дизайн под конкретный диапазон разрешений экрана
38
![Page 39: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/39.jpg)
Разрешения экранов
39
![Page 40: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/40.jpg)
О техниках1. Fluid Grid (http://alistapart.com/article/fluidgrids)
2. Fluid Images (http://alistapart.com/article/fluid-images)
3. Media Queries
40
![Page 41: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/41.jpg)
Резиновый макет на основе пропорций.navigate {
width: 30%; /* 300px / 1000px = 0,30 */
float: left;
}
.content {
width: 70%; /* 700px / 1000px = 0,70 */
float: right;
}
01.
02.
03.
04.
05.
06.
07.
08.
41
![Page 42: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/42.jpg)
Резиновый макет на основе пропорций.navigate__inner {
width: 15%; /* 45px / 300px = 0,15 */
float: left;
}
01.
02.
03.
04.
42
![Page 43: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/43.jpg)
Резиновые изображения.img {
max-width: 100%;
}
01.
02.
03.
43
![Page 44: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/44.jpg)
Резиновые изображения<picture alt="description of image">
<source src="small.jpg">
<source src="medium.jpg" media="(min-width: 400px)">
<source src="large.jpg" media="(min-width: 800px)">
<img src="small.jpg" alt="description of image">
</picture>
Более интересные способ: https://github.com/scottjehl/picturefill
01.
02.
03.
04.
05.
06.
44
![Page 45: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/45.jpg)
Media Queries@media only screen and (min-width: 480px) { ... }
@media only screen and (min-width: 768px) { ... }
@media only screen and (min-width: 992px) { ... }
@media only screen and (min-width: 1382px) { ... }
01.
02.
03.
04.
45
![Page 46: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/46.jpg)
Media Queries<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="shetland.css" />
01.
02.
03.
46
![Page 47: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/47.jpg)
Media Queries/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) { ... }
/* Smartphones (landscape) ----------- */
@media only screen and (min-width: 321px) { ... }
01.
02.
03.
04.
05.
06.
47
![Page 48: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/48.jpg)
Media Queries@media screen and (orientation: landscape) { ... }
@media screen and (orientation: portrait) { ... }
01.
02.
03.
48
![Page 49: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/49.jpg)
Media Queries@media screen
and (min-width: 800px)
and (max-width: 1200px) { ... }
01.
02.
03.
49
![Page 50: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/50.jpg)
BreakpointsТочки на шкале разрешений, при которых происходит применение
новых стилей.
0⩸⩸⩸⩸⩸⩸320⩸⩸⩸⩸⩸⩸768⩸⩸⩸⩸⩸⩸1024⩸⩸⩸⩸⩸⩸1280⩸⩸⩸⩸⩸⩸∞
50
![Page 51: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/51.jpg)
Breakpoints@media only screen and (min-width: 320px) { ... }
0⩸⩸⩸⩸⩸⩸320⩸⩸⩸⩸⩸⩸768⩸⩸⩸⩸⩸⩸1024⩸⩸⩸⩸⩸⩸1280⩸⩸⩸⩸⩸⩸∞
51
![Page 52: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/52.jpg)
Breakpoints@media screen
and (min-width: 800px)
and (max-width: 1200px) { ... }
0⩸⩸⩸⩸⩸⩸320⩸⩸⩸⩸⩸⩸800⩸⩸⩸⩸⩸⩸1024⩸⩸⩸⩸⩸⩸ 1200⩸⩸⩸⩸⩸⩸∞
01.
02.
03.
52
![Page 53: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/53.jpg)
![Page 54: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/54.jpg)
Mobile FirstСначало мобильники. Стратегия, при которой сначало ведётся
разработка для мобильных устройств и далее по нарастающей.
Есть мнение, что Progressive Enhancement + Mobile First это и есть
Responsive Design.
54
![Page 55: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/55.jpg)
Accessibility
55
![Page 56: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/56.jpg)
Немного статистики ВОЗВо всём мире:
• 250 000 000 со зрительной дисфункцией
• 100 000 000 с полной потерей зрения
В России:
• 147 000 официально зарегистрированных незрячих
56
![Page 57: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/57.jpg)
Проблемы зрения• Близорукость и дальнозоркость
• Искажение цветового восприятия
• Полное отсутствие зрения
57
![Page 58: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/58.jpg)
Искажение цветового восприятия
58
![Page 59: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/59.jpg)
Относительная яркость(L1 + 0.05) / (L2 + 0.05), где L1 это относительная яркость более
светлого из цветов, и L2 это относительная яркость более темного из
цветов.
59
![Page 60: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/60.jpg)
Собственная яркостьL = 0.2126 * R + 0.7152 * G + 0.0722 * B, где R, G и B определяются
как:
• если RsRGB <= 0.03928 то R = RsRGB/12.92 иначе R =
((RsRGB+0.055)/1.055) ^ 2.4
• если GsRGB <= 0.03928 то G = GsRGB/12.92 иначе G =
((GsRGB+0.055)/1.055) ^ 2.4
• если BsRGB <= 0.03928 то B = BsRGB/12.92 иначе B =
((BsRGB+0.055)/1.055) ^ 2.4
60
![Page 61: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/61.jpg)
Нормативы WCAG(Web Content Accessibility Guidelines)
• для мелких шрифтов 7:1
• для крупных достаточно соотношения 4.5:1
61
![Page 62: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/62.jpg)
Сравнения
21:1
1.3:1
62
![Page 63: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/63.jpg)
Стандарты• Section 508
• WCAG 1.0 (http://www.w3.org/TR/WCAG10/)
• WCAG 2.0 (http://www.w3.org/TR/WCAG20/)
• WAI-ARIA (http://www.w3.org/TR/wai-aria/)
63
![Page 64: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/64.jpg)
Програмное обеспечение• JAWS платная
http://www.freedomscientific.com/
• NVDA бесплатная
http://www.nvda-project.org/
• VoiceOver (Mac OS, iOS)
64
![Page 65: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/65.jpg)
Что нужно делать• Соблюдайте семантику документа
• Соблюдайте требования стандартов
• Делать контент доступным для работы с клавиатуры
65
![Page 66: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/66.jpg)
TabindexГоворя о доступности с клавиатуры, стоит упомянуть и работу с
tabindex
• tabindex не указан
• tabindex = 0
• tabindex > 0
• tabindex = -1
66
![Page 67: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/67.jpg)
Что можно делать (WAI-ARIA)WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet
Applications) — стандарт доступности активных Интернет-
приложений, определяет подходы к тому, чтобы сделать содержимое
сайтов и интернет-приложения более доступными для людей
с ограниченными возможностями.
67
![Page 68: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/68.jpg)
Roles• Abstract Roles
• Widget Roles
• Document Structure Roles
• Landmark Roles
http://www.w3.org/TR/wai-aria/roles
68
![Page 69: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/69.jpg)
Применение ролей<div role="banner"></div>
<div>
<div role="navigation"></div>
<div role="main"></div>
</div>
<div role="contentinfo"></div>
01.
02.
03.
04.
05.
06.
69
![Page 70: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/70.jpg)
Применение ролей<div role="banner"></div>
<div>
<div role="navigation"></div>
<div role="main"></div>
</div>
<div role="contentinfo"></div>
01.
02.
03.
04.
05.
06.
70
![Page 71: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/71.jpg)
Применение ролей<div role="banner"></div>
<div>
<div role="navigation"></div>
<div role="main"></div>
</div>
<div role="contentinfo"></div>
01.
02.
03.
04.
05.
06.
71
![Page 72: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/72.jpg)
Применение ролей<div role="banner"></div>
<div>
<div role="navigation"></div>
<div role="main"></div>
</div>
<div role="contentinfo"></div>
01.
02.
03.
04.
05.
06.
72
![Page 73: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/73.jpg)
Роли и атрибуты<div class="checkbox"></div>
73
![Page 74: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/74.jpg)
Роли и атрибуты<div class="checkbox"
role="checkbox"
></div>
01.
02.
03.
74
![Page 75: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/75.jpg)
Роли и атрибуты<div class="checkbox"
role="checkbox"
tabindex="0"
></div>
01.
02.
03.
04.
75
![Page 76: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/76.jpg)
Роли и атрибуты<div class="checkbox"
role="checkbox"
tabindex="0"
aria-checked="false"
></div>
01.
02.
03.
04.
05.
76
![Page 77: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/77.jpg)
Роли и атрибуты<div class="checkbox"
role="checkbox"
tabindex="0"
aria-checked="true"
></div>
01.
02.
03.
04.
05.
77
![Page 78: Сергей Горобцов: Идеологии разработки веб интерфейсов, адаптивность, Accessibility](https://reader036.vdocuments.mx/reader036/viewer/2022081502/557ed193d8b42ae27f8b4e86/html5/thumbnails/78.jpg)
Спасибо за внимание.Вопросы?
78