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

			<button>
				<svg>
					<use xlink:href="#reset"></use>
				</svg>
			</button>
		

			<button aria-label="Reset counter">
				<svg>
					<use xlink:href="#reset"></use>
				</svg>
			</button>
			 
			<span class="counter-result" aria-live="polite"></span>
		

Lorem ipsum link sit amet consectetur adipisicing elit. Similique tempore reprehenderit repudiandae esse voluptate doloribus.

Placeat atque architecto necessitatibus tempora minima quidem, omnis harum link ex doloremque sunt tempore soluta harum?

			<svg viewBox="0 0 32 32">
				<use xlink:href="#gear" />
			</svg>
		

			<button>
				<svg viewBox="0 0 32 32">
					<use xlink:href="#gear" />
				</svg>
			</button>
		

Lorem ipsum link sit amet consectetur adipisicing elit. Similique tempore reprehenderit repudiandae esse voluptate doloribus.

Placeat atque architecto necessitatibus tempora minima quidem, omnis harum link ex doloremque sunt tempore soluta harum?

• focus-trap
• Modals and Keyboard Traps (Udacity)
• focus-trap (Github)

Lorem ipsum link sit amet consectetur adipisicing elit. Similique tempore reprehenderit repudiandae esse voluptate doloribus.

Placeat atque architecto necessitatibus tempora minima quidem, omnis harum link ex doloremque sunt tempore soluta harum?

Lorem ipsum link sit amet consectetur adipisicing elit. Similique tempore reprehenderit repudiandae esse voluptate doloribus.

Placeat atque architecto necessitatibus tempora minima quidem, omnis harum link ex doloremque sunt tempore soluta harum?

• role="dialog"
• aria-modal="true"
• aria-label
• aria-expanded

Lorem ipsum link sit amet consectetur adipisicing elit. Similique tempore reprehenderit repudiandae esse voluptate doloribus.

Placeat atque architecto necessitatibus tempora minima quidem, omnis harum link ex doloremque sunt tempore soluta harum?

			<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>
		

			<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>
		

• h3
• aria-label
• aria-live