mirror/processwire
1
0
Fork 0
mirror of https://github.com/processwire/processwire.git synced 2025-08-19 04:51:22 +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

17
site-default/templates/_main.php
View File

@@ -41,12 +41,14 @@
</head>
<body class="<?php if($sidebar) echo "has-sidebar "; ?>">
<a href="#main" class="visually-hidden element-focusable bypass-to-main">Skip to content</a>
<!-- 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'>Current page: </span>";
} else {
echo "<li>";
}
@@ -59,12 +61,13 @@
<!-- search form-->
<form class='search' action='<?php echo $pages->get('template=search')->url; ?>' method='get'>
<input type='text' name='q' placeholder='Search' value='<?php echo $sanitizer->entities($input->whitelist('q')); ?>' />
<button type='submit' name='submit'>Search</button>
<label for='search' class='visually-hidden'>Search:</label>
<input type='text' name='q' placeholder='Search' id='search' value='<?php echo $sanitizer->entities($input->whitelist('q')); ?>' />
<button type='submit' name='submit' class='visually-hidden'>Search</button>
</form>
<!-- breadcrumbs -->
<div class='breadcrumbs'><?php
<div class='breadcrumbs' role='navigation' aria-label='You are here:'><?php
// breadcrumbs are the current page's parents
foreach($page->parents() as $item) {
echo "<span><a href='$item->url'>$item->title</a></span> ";
@@ -83,9 +86,9 @@
<!-- sidebar content -->
<?php if($sidebar): ?>
<div id='sidebar'>
<aside id='sidebar'>
<?php echo $sidebar; ?>
</div>
</aside>
<?php endif; ?>
</div>

43
site-default/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
*
*/
@@ -124,9 +125,6 @@ form.search {
border: 1px solid #ccc;
width: 100%;
}
form.search button {
display: none;
}
.breadcrumbs {
clear: both;
@@ -297,3 +295,42 @@ 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;
}