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

ewinslow · ewinslow · commit f446e6f1ad32 · 2014-06-14T23:50:14.000Z
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.
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>
