접근성 툴팁 추가

by hohoya33

HTML

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>웹접근성 가이드 - Accessibility Guidelines</title>
		<link rel="stylesheet" href="css/reveal.css">
		<link rel="stylesheet" href="css/custom.css">
		<!-- Code syntax highlighting -->
		<link rel="stylesheet" href="https://highlightjs.org/static/demo/styles/monokai-sublime.css">
		<link rel="stylesheet" href="https://code.cdn.mozilla.net/fonts/fira.css">
		<link rel='stylesheet' href='lib/font/devicons/devicons.css'>
		<!-- Printing and PDF exports -->
		<script>
			var link = document.createElement( 'link' );
			link.rel = 'stylesheet';
			link.type = 'text/css';
			link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
			document.getElementsByTagName( 'head' )[0].appendChild( link );
		</script>
	</head>
	<body>
		<div class="reveal">
			<div class="slides">
				<section>
					<span style="height:4.3em;width:4.3em;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background-color:#000">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="width:100%;fill:#fff">
							<path d="M12,2c1.1,0,2,0.9,2,2s-0.9,2-2,2s-2-0.9-2-2S10.9,2,12,2z M21,9h-6v13h-2v-6h-2v6H9V9H3V7h18V9z"></path>
						</svg>
					</span>
					<h1 style="margin-bottom:60px">
						#a11y 웹 접근성 개선<br>
						<span style="font-size:30px">improving web accessibility</span>
					</h1>
					<p>2018. 12. 13</p>
					<p>IT 개발2팀 UI파트</p>
				</section>

				<section>
					<h2>The Agenda</h2>
					<ul>
						<li>카테고리 (Navigation)</li>
						<li>레이어 팝업 (Modals)</li>
						<li>툴팁 (Tooltip)</li>
					</ul>
				</section>

				<section>
					<section>
						<h2>카테고리 (Navigation)</h2>
					</section>

					<section>
						<h3>기존 방식</h3>
						<p>마우스오버 시 하위 메뉴 열림<br>키보드만으로 조작하기 위해 초점 이동 시 동일하게 구현</p>

						<iframe width="100%" height="300"...