fix(a11y): Add semantic structure to installer page layout

aria landmark roles allow advanced screen reader users to jump around the page quickly. Aria roles are used in addition to semantic elements because browsers do not yet consistently expose the semantic elements as landmarks to assistive technology. Ideally we would actually just shim this behavior with JS so that we don't have to worry about consistently pairing the elements with their equivalent roles.
Elgg · Jun 14, 2014 · f446e6f · f446e6f
1 parent 434efa2
commit f446e6f
Showing 1 changed file with 9 additions and 9 deletions.
diff --git a/views/installation/page/default.php b/views/installation/page/default.php
@@ -34,24 +34,24 @@
 	</head>
 	<body>
 		<div class="elgg-page">
-			<div class="elgg-page-header">
+			<header class="elgg-page-header" role="banner">
 				<?php echo elgg_view('page/elements/header', $vars); ?>
-			</div>
+			</header>
 			<div class="elgg-page-body">
 				<div class="elgg-layout">
-					<div class="elgg-sidebar">
+					<aside class="elgg-sidebar" role="complementary">
 						<?php echo elgg_view('page/elements/sidebar', $vars); ?>
-					</div>
-					<div class="elgg-body">
-						<h2><?php echo $vars['title']; ?></h2>
+					</aside>
+					<main class="elgg-body" role="main">
+						<h1><?php echo $vars['title']; ?></h1>
 						<?php echo elgg_view('page/elements/messages', array('object' => $vars['sysmessages'])); ?>
 						<?php echo $vars['body']; ?>
-					</div>
+					</main>
 				</div>
 			</div>
-			<div class="elgg-page-footer">
+			<footer class="elgg-page-footer" role="contentinfo">
 				<?php echo elgg_view('page/elements/footer'); ?>
-			</div>
+			</footer>
 		</div>
 	</body>
 </html>