mirror/processwire
1
0
Fork 0
mirror of https://github.com/processwire/processwire.git synced 2025-08-31 10:21:44 +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-classic/templates/foot.inc
View File

@@ -6,7 +6,7 @@
if($page->numChildren) {
echo "<ul class='nav'>";
echo "<ul class='nav' role='navigation'>";
foreach($page->children as $child) {
echo "<li><p><a href='{$child->url}'>{$child->title}</a><br />";
@@ -24,7 +24,7 @@ if($page->numChildren) {
</div><!--/content-->
<div id="footer" class="footer">
<div id="footer" class="footer" role="contentinfo">
<div class="container">
<p>Powered by <a href='http://processwire.com'>ProcessWire Open Source CMS/CMF</a></p>
</div>

24
site-classic/templates/head.inc
View File

@@ -32,6 +32,8 @@
</head>
<body>
<a href="#bodycopy" class="visually-hidden element-focusable bypass-to-main">Skip to content</a>
<p id='bgtitle'><?php
// print the section title as big faded text that appears near the top left of the page
@@ -45,11 +47,12 @@
<a href='<?php echo $config->urls->root; ?>'><p id='logo'>ProcessWire</p></a>
<ul id='topnav'><?php
<ul id='topnav' role='navigation'><?php
// Create the top navigation list by listing the children of the homepage.
// If the section we are in is the current (identified by $page->rootParent)
// then note it with <a class='on'> so we can style it differently in our CSS.
// then note it with <a class='on'> so we can style it differently in our CSS
// and add a text that is visually hidden, but available for screen readers.
// In this case we also want the homepage to be part of our top navigation,
// so we prepend it to the pages we cycle through:
@@ -58,19 +61,23 @@
$children->prepend($homepage);
foreach($children as $child) {
if ($child === $page->rootParent) {
$class = " class='on'";
$indicator = "<span class='visually-hidden'>Current page: </span>";
}
$class = $child === $page->rootParent ? " class='on'" : '';
echo "<li><a$class href='{$child->url}'>{$child->title}</a></li>";
echo "<li><a$class href='{$child->url}'>$indicator{$child->title}</a></li>";
}
?></ul>
<ul id='breadcrumb'><?php
<ul id='breadcrumb' role='navigation' aria-label='You are here:'><?php
// Create breadcrumb navigation by cycling through the current $page's
// parents in order, linking to each:
foreach($page->parents as $parent) {
echo "<li><a href='{$parent->url}'>{$parent->title}</a> &gt; </li>";
echo "<li><a href='{$parent->url}'>{$parent->title}</a> <span class='visually-hidden'>&gt;</span> </li>";
}
?></ul>
@@ -87,6 +94,7 @@
?></h1>
<form id='search_form' action='<?php echo $config->urls->root?>search/' method='get'>
<label for='search_query' class='visually-hidden'>Search:</label>
<input type='text' name='q' id='search_query' value='<?php echo htmlentities($input->whitelist('q'), ENT_QUOTES, 'UTF-8'); ?>' />
<button type='submit' id='search_submit'>Search</button>
</form>
@@ -111,7 +119,7 @@
<div class="container">
<div id="sidebar">
<div id="sidebar" role='complementary'>
<?php
@@ -128,7 +136,7 @@
// We have determined that we're not on the homepage
// and that this section has child pages, so make navigation:
echo "<ul id='subnav' class='nav'>";
echo "<ul id='subnav' class='nav' role='navigation'>";
foreach($page->rootParent->children as $child) {
$class = $page === $child ? " class='on'" : '';
@@ -156,5 +164,5 @@
</div><!--/sidebar-->
<div id="bodycopy">
<div id="bodycopy" role="main">

42
site-classic/templates/styles/main.css
View File

@@ -502,3 +502,45 @@ body, input, textarea, table {
z-index: 9999;
}
/*********************************************************************
* 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;
z-index: 10;
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
background: #333;
color: #fff;
}