Разработка доступных интерфейсов

Сергей Кригер

Разработка Доступных Интерфейсов

Сергей Кригер

Rit logo
SinnerSchrader logo sergeikriger.com
Есть вакансии

Разработка

Weather widget.

Moscow
17
  • Mon 28
  • Tue 31
  • Wed 31
  • Thu 33
Loaded Moscow

Кнопка

Button in PSD file

Разработка

Псевдоклассы

Screenshot missing focus.

Разработка

Button documentation screenshot
https://www.w3.org/TR/wai-aria-practices-1.1/#button
0

Разработка

			<button>
				<svg>
					<use xlink:href="#reset"></use>
				</svg>
			</button>
		
Button documentation screenshot
https://www.w3.org/TR/wai-aria-practices-1.1/#button
			<button aria-label="Reset counter">
				<svg>
					<use xlink:href="#reset"></use>
				</svg>
			</button>
			 
			<span class="counter-result" aria-live="polite"></span>
		
0

Меню

Select element screenshot
London
  • London
  • Moscow
  • Berlin
			<div class="select">
				<div class="select-btn">London</div>
				<ul class="select-list">
					<li class="active">London</li>
					<li>Moscow</li>
					<li>Berlin</li>
				</ul>
			</div>
		
			<div class="select">
				<button class="select-btn">London</button>
				<ul class="select-list">
					<li class="active">London</li>
					<li>Moscow</li>
					<li>Berlin</li>
				</ul>
			</div>
		
  • London
  • Moscow
  • Berlin
Select element docs screenshot
https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox
  • London
  • Moscow
  • Berlin
Select element docs screenshot
https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox
			<ul class="select-list" role="listbox" aria-labelledby="...">
				<li role="option">Moscow</li>
				<li role="option">London</li>
				<li role="option">Berlin</li>
			</ul>
			<span aria-live="polite"></span>
		
Select city
  • Moscow
  • London
  • Berlin

Виджет погоды

Weather widget screenshot

Weather widget code

			const weather = new Weather({
				selector: '.js-weather',
				cities: [],
				modal: new Modal({
					selector: '.js-modal',
					modalTrigger: '.js-modal-trigger'
				}),
				select: new Select({
					selector: '.js-select'
				}),
			});
		
17
Moscow
  • Mon 28
  • Tue 31
  • Wed 31
  • Thu 33

Weather widget.

Moscow
17
  • Mon 28
  • Tue 31
  • Wed 31
  • Thu 33
Loaded Moscow

Что дальше?

WAI ARIA screenshot
www.w3.org/TR/wai-aria-practices-1.1
weblind.ru screenshot
weblind.ru

Спасибо!..

sergeikriger.com
bit.ly/2rRj48C Presentation QR code.

Credits

Icons made by Egor Rumyantsev from www.flaticon.com is licensed by CC 3.0 BY

Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY

Icons made by Text Input from www.flaticon.com is licensed by CC 3.0 BY

Painter icon created by Gan Khoon Lay from the Noun Project

Accessibility icon created by Mark Caron from the Noun Project