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

4
site-beginner/templates/_foot.php
View File

@@ -1,9 +1,9 @@
</div><!--/#main-->
</main>
<!-- footer -->
<footer id='footer'>
<footer id='footer' role="contentinfo">
<p>
Powered by <a href='http://processwire.com'>ProcessWire CMS</a> &nbsp; / &nbsp;
<?php

9
site-beginner/templates/_func.php
View File

@@ -22,7 +22,7 @@ function renderNav(PageArray $items) {
if(!$items->count()) return;
echo "<ul class='nav'>";
echo "<ul class='nav' role='navigation'>";
// cycle through all the items
foreach($items as $item) {
@@ -67,15 +67,16 @@ function renderNavTree($items, $maxDepth = 3) {
// $out is where we store the markup we are creating in this function
// start our <ul> markup
echo "<ul class='nav nav-tree'>";
echo "<ul class='nav nav-tree' role='navigation'>";
// cycle through all the items
foreach($items as $item) {
// markup for the list item...
// if current item is the same as the page being viewed, add a "current" class to it
// if current item is the same as the page being viewed, add a "current" class and
// visually hidden text for screen readers to it
if($item->id == wire('page')->id) {
echo "<li class='current'>";
echo "<li class='current'><span class='visually-hidden'>Current page: </span>";
} else {
echo "<li>";
}

13
site-beginner/templates/_head.php
View File

@@ -11,7 +11,7 @@
<body class='has-sidebar'>
<!-- top navigation -->
<ul class='topnav'><?php
<ul class='topnav' role='navigation'><?php
// top navigation consists of homepage and its visible children
$homepage = $pages->get('/');
@@ -25,7 +25,7 @@
if($child->id == $page->rootParent->id) {
// this $child page is currently being viewed (or one of it's children/descendents)
// so we highlight it as the current page in the navigation
echo "<li class='current'><a href='$child->url'>$child->title</a></li>";
echo "<li class='current'><span class='visually-hidden'>Current page: </span><a href='$child->url'>$child->title</a></li>";
} else {
echo "<li><a href='$child->url'>$child->title</a></li>";
}
@@ -40,12 +40,13 @@
<!-- search form -->
<form class='search' action='<?php echo $pages->get('template=search')->url; ?>' method='get'>
<input type='text' name='q' placeholder='Search' value='' />
<button type='submit' name='submit'>Search</button>
<label for='search' class='visually-hidden'>Search:</label>
<input type='text' name='q' id='search' placeholder='Search' value='' />
<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) {
@@ -56,5 +57,5 @@
?></div>
<div id='main'>
<main id='main'>

4
site-beginner/templates/basic-page.php
View File

@@ -23,7 +23,7 @@ include('./_head.php'); // include header markup ?>
?></div><!-- end content -->
<div id='sidebar'><?php
<aside id='sidebar'><?php
// rootParent is the parent page closest to the homepage
// you can think of this as the "section" that the user is in
@@ -40,6 +40,6 @@ include('./_head.php'); // include header markup ?>
// output sidebar text if the page has it
echo $page->sidebar;
?></div><!-- end sidebar -->
?></aside><!-- end sidebar -->
<?php include('./_foot.php'); // include footer markup ?>

44
site-beginner/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;
@@ -291,3 +289,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;
}