ainara.blanco
/
wcagUnderstanding


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
							<!doctype html>
<html lang="en-GB">
<head>
	<title>WCAG</title>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="shortcut icon" href="images/favicon.ico">
	<link href="./css/bootstrap.css" rel="stylesheet">

</head>

<style>

	button{	margin-top: 5px;}
	legend{	margin-top: 5px;font-size:inherit;}

</style>

<body>

	<div class="container">
		<h1>WCAG</h1>
		<div class="row">
			<div class="col-sm-12 col-lg-7">
				<p role="status">
					Showing <span class="badge bg-primary" id="returnedResults">78</span> understanding criteria categorised by <span class="badge bg-primary" id="filter" data-level="">all</span> success criteria. Level <span class="badge bg-primary" id="level" >All</span>.
				</p>
			</div>
		</div>

		<fieldset>
			<div class="row bg-light" style="padding:20px;">
				<div class="col-3" style="padding-left:0px;">
					<legend>Categorise WCAG</legend>
				</div>
				<div class="col" style="text-align:right">
					<button type="button" onclick="btnLevel(this)" class="btn btn-primary btn-sm level">All</button>
					<button type="button" onclick="btnLevel(this)" class="btn btn-info dark-text btn-sm level">A</button>
					<button type="button" onclick="btnLevel(this)" class="btn btn-warning dark-text btn-sm level">AA</button>
					<button type="button" onclick="btnLevel(this)" class="btn btn-danger btn-sm level">AAA</button>
				</div>
			</div>
		</fieldset>

		<fieldset>
			<div class="row bg-light" style="padding:20px;">
				<div class="col-3" style="padding-left:0px;">
					<legend>Categorise WCAG</legend>
				</div>
				<div class="col" style="text-align:right">
					<button type="button" onclick="btnCategory(this)" class="btn btn-primary btn-sm category">all</button>
					<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">content</button>
					<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">forms-and-UI</button>
					<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">audio-video</button>
					<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">structure</button>
					<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">colour</button>
					<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">font-size</button>
					<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">dynamic-content</button>
					<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">keyboard</button>
					<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">link</button>
				</div>
			</div>
		</fieldset>

		<div style="overflow-x: auto;">
		<table class="table">
			<caption class="visually-hidden">WCAG success criteria sorted by category</caption>
			<thead style="border-top:0px"><th>Understanding Criteria</th><th>Level</th><th>Version</th><th style="width: 40%;">Intent</th><th style="width: 40%;">Benefits</th><th>Category</th></thead>
			<tbody></tbody>
		</table>
		</div>

	</div>
	</body>

	<script src="./data/json-EN.js"></script>
	<script src="./scripts/script.js"></script>

</html>