mirror/processwire
1
0
Fork 0
mirror of https://github.com/processwire/processwire.git synced 2025-08-30 01:49:58 +02:00
Code Issues Releases Wiki Activity

Improve accessibility in site profiles

Browse Source
This commit is contained in:
mhe
2016-11-20 09:47:25 +01:00
parent d013ef8550
commit 28d119c273
12 changed files with 221 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
site-languages/templates/_main.php
View File

@@ -60,8 +60,10 @@
</head>
<body class="<?php if($sidebar) echo "has-sidebar"; ?>">
<a href="#main" class="visually-hidden element-focusable bypass-to-main"><?php echo _x('Skip to content', 'bypass'); ?></a>
<!-- language switcher / navigation -->
<ul class='languages'><?php
<ul class='languages' role='navigation'><?php
foreach($languages as $language) {
if(!$page->viewable($language)) continue; // is page viewable in this language?
if($language->id == $user->language->id) {
@@ -76,11 +78,11 @@
?></ul>
<!-- top navigation -->
<ul class='topnav'><?php
<ul class='topnav' role='navigation'><?php
// top navigation consists of homepage and its visible children
foreach($homepage->and($homepage->children) as $item) {
if($item->id == $page->rootParent->id) {
echo "<li class='current'>";
echo "<li class='current'><span class='visually-hidden'>" . _x('Current page:', 'navigation') . " </span>";
} else {
echo "<li>";
}
@@ -92,7 +94,7 @@
?></ul>
<!-- breadcrumbs -->
<div class='breadcrumbs'><?php
<div class='breadcrumbs' role='navigation' aria-label='<?php echo _x('You are here:', 'breadcrumbs'); ?>'><?php
// breadcrumbs are the current page's parents
foreach($page->parents() as $item) {
echo "<span><a href='$item->url'>$item->title</a></span> ";
@@ -103,12 +105,13 @@
<!-- search engine -->
<form class='search' action='<?php echo $pages->get('template=search')->url; ?>' method='get'>
<input type='text' name='q' placeholder='<?php echo _x('Search', 'placeholder'); ?>' />
<button type='submit' name='submit'><?php echo _x('Search', 'button'); ?></button>
<label for='search' class='visually-hidden'><?php echo _x('Search:', 'label'); ?></label>
<input type='text' name='q' id='search' placeh older='<?php echo _x('Search', 'placeholder'); ?>' />
<button type='submit' name='submit' class='visually-hidden'><?php echo _x('Search', 'button'); ?></button>
</form>
<div id='main'>
<main id='main'>
<!-- main content -->
<div id='content'>
@@ -121,15 +124,15 @@
<!-- sidebar content -->
<?php if($sidebar): ?>
<div id='sidebar'>
<aside id='sidebar'>
<?php echo $sidebar; ?>
</div>
</aside>
<?php endif; ?>
</div>
</main>
<!-- footer -->
<footer id='footer'>

44
site-languages/templates/styles/main.css
View File

@@ -6,6 +6,7 @@
* 3. Main content and sidebar
* 4. Footer
* 5. Media queries for responsive layout
* 6. Accessibility helpers
*
*/
@@ -156,9 +157,6 @@ form.search {
border: 1px solid #ccc;
width: 100%;
}
form.search button {
display: none;
}
.breadcrumbs {
font-size: 80%;
@@ -351,3 +349,43 @@ figure figcaption {
font-size: 115%;
}
}
/*********************************************************************
* 6. Accessibility helpers
*
*/
/* Hide visually, but remain approachable for screenreader */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
white-space: nowrap;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
border: 0;
}
/* Show bypass link on hover */
.element-focusable:focus {
clip: auto;
overflow: visible;
height: auto;
}
/* Sample styling for bypass link */
.bypass-to-main:focus {
top: 0;
left: 0;
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
background: #333;
color: #fff;
}