ainara.blanco
/
wcagUnderstanding


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
							<!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.min.css" rel="stylesheet">

	<style>

		button{	
			margin-top: 5px;
		}

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

		.btns ul {
			list-style-type: none;
		}

		.btns li {
			float: left;
			padding: 2px;
		}
		#columns li {
    	padding-right: 30px;
		}
	</style>
</head>
<body>

	<div class="container">
		
		<div class="row">
			<fieldset class="col-12 row bg-light justify-content-end btns" style="padding:20px">
				<legend class="col" style="text-align: right;">Idioma</legend>
				<ul class="col-4">
					<li><button id="cat" type="button" onclick="btnLang(this)" class="btn btn-secondary btn-sm language">Català</button></li>
					<li><button id="es" type="button" onclick="btnLang(this)" class="btn btn-secondary btn-sm language">Español</button></li>
					<li><button id="en" type="button" onclick="btnLang(this)" class="btn btn-secondary btn-sm language">English</button></li>
				</ul>
			</fieldset>
		</div>

		<h1>WCAG</h1>

		<div class="row">
			<div class="col-12">
				<p role="status">
					Showing <span class="badge bg-primary" id="returnedResults">78</span> tests, version <span class="badge bg-primary" id="version">All</span>, categorised by <span class="badge bg-primary" id="filter">all</span> success criteria. Level <span class="badge bg-primary" id="level" >All</span>.
				</p>
			</div>
		</div>

		<div class="row">
			<fieldset id="versionbtn" class="col-6 row bg-light btns" style="padding:20px">
				<legend class="col-3">Version</legend>
				<ul class="col justify-content-start">
					<li><button type="button" onclick="btnVersion(this)" class="btn btn-primary btn-sm version">All</button></li>
					<li><button type="button" onclick="btnVersion(this)" class="btn btn-secondary btn-sm version">2.0</button></li>
					<li><button type="button" onclick="btnVersion(this)" class="btn btn-secondary btn-sm version">2.1</button></li>
					<li><button type="button" onclick="btnVersion(this)" class="btn btn-secondary btn-sm version">2.2</button></li>
				</ul>
			</fieldset>

			<fieldset id="levelbtn" class="col-6 row bg-light justify-content-end btns" style="padding:20px">
				<legend class="col-3">Level</legend>
				<ul class="col">
					<li><button type="button" onclick="btnLevel(this)" class="btn btn-primary btn-sm level">All</button></li>
					<li><button type="button" onclick="btnLevel(this)" class="btn btn-info dark-text btn-sm level">A</button></li>
					<li><button type="button" onclick="btnLevel(this)" class="btn btn-warning dark-text btn-sm level">AA</button></li>
					<li><button type="button" onclick="btnLevel(this)" class="btn btn-danger btn-sm level">AAA</button></li>
				</ul>
			</fieldset>
		</div>

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

		<div class="row">
			<fieldset id="columns" class="col-12 row bg-light btns" style="padding:20px">
				<legend class="col-3">Show columns</legend>
				<ul class="col" style="text-align:right">
					<li>
						<label for="wcagLevel">Level</label>
						<input type="checkbox" id="wcagLevel" value="Level" onchange="showColumns(this)" checked="true">
					</li>
					<li>
						<label for="wcagVersion">Version</label>
						<input type="checkbox" id="wcagVersion" value="Version" onchange="showColumns(this)" checked="true">
					</li>
					<li>
						<label for="goal">Goal</label>
						<input type="checkbox" id="goal" value="Goal" onchange="showColumns(this)" checked="true">
					</li>
					<li>
						<label for="intent">Intent</label>
						<input type="checkbox" id="intent" value="Intent" onchange="showColumns(this)">
					</li>
					<li>
						<label for="benefits">Benefits</label>
						<input type="checkbox" id="benefits" value="Benefits" onchange="showColumns(this)">
					</li>
					<li>
						<label for="verification">Verification</label>
						<input type="checkbox" id="verification" value="Verification" onchange="showColumns(this)">
					</li>
					<li>
						<label for="tools">Tools</label>
						<input type="checkbox" id="tools" value="Tools" onchange="showColumns(this)">
					</li>
					<li>
						<label for="category">Category</label>
						<input type="checkbox" id="category" value="Category" onchange="showColumns(this)" checked="true">
					</li>
				</ul>
			</fieldset>
		</div>

		<div style="overflow-x: auto;">
		<table class="table">
			<caption class="visually-hidden">WCAG success criteria intents and benefits</caption><!--
			<thead style="border-top:0px">
				<th scope="col">Understanding Criteria</th>
				<th scope="col">Level</th>
				<th scope="col">Version</th>
				<th scope="col" style="width: 40%;">Intent</th>
				<th scope="col" style="width: 40%;">Benefits</th>
				<th scope="col">Category</th>
			</thead>
			<thead style="border-top:0px">
				<th scope="col">Understanding Criteria</th>
				<th scope="col">Level</th>
				<th scope="col">Version</th>
				<th scope="col">Goal</th>
				<th scope="col">Intent</th>
				<th scope="col">Benefits</th>
				<th scope="col">Verification</th>
				<th scope="col">Tools</th>
				<th scope="col">Category</th>
			</thead>-->
			<thead></thead>
			<tbody></tbody>
		</table>
		</div>
		
	</div>
	<script src="./data/content.js"></script>
	<script src="./scripts/script.js"></script>
</body>
</html>