Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve accessibility in site profiles #1758

Open
wants to merge 1 commit into
base: devns
Choose a base branch
from
Open

Improve accessibility in site profiles #1758

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Improve accessibility in site profiles
  • Loading branch information
@marcus-herrmann
marcus-herrmann committed Mar 20, 2016
commit c554371fc5ca89a2877e2e7f8cb211009c1e67e5
2 changes: 1 addition & 1 deletion site-beginner/templates/_foot.php
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@


</div><!--/#main-->
</main><!--/#main-->

<!-- footer -->
<footer id='footer'>
13 changes: 8 additions & 5 deletions site-beginner/templates/_head.php
View file
Original file line number Diff line number Diff line change
@@ -10,8 +10,10 @@
</head>
<body class='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
$homepage = $pages->get('/');
@@ -40,12 +42,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 id='search' type='text' name='q' 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 +59,5 @@

?></div>

<div id='main'>
<main id='main'>

4 changes: 2 additions & 2 deletions site-beginner/templates/basic-page.php
View file
Original file line number Diff line number Diff line change
@@ -23,7 +23,7 @@

?></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 @@
// output sidebar text if the page has it
echo $page->sidebar;

?></div><!-- end sidebar -->
?></aside><!-- end sidebar -->

<?php include('./_foot.php'); // include footer markup ?>
43 changes: 40 additions & 3 deletions site-beginner/templates/styles/main.css
View file
Original file line number Diff line number Diff line change
@@ -6,6 +6,7 @@
* 3. Main content and sidebar
* 4. Footer
* 5. Media queries for responsive layout
* 6. Accessibility
*
*/

@@ -124,9 +125,6 @@ form.search {
border: 1px solid #ccc;
width: 100%;
}
form.search button {
display: none;
}

.breadcrumbs {
clear: both;
@@ -291,3 +289,42 @@ figure figcaption {
font-size: 115%;
}
}

/*********************************************************************
* 6. Accessibility
*
*/

/* Hide visually, but remain approachable for screenreader */

.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
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;
}
2 changes: 1 addition & 1 deletion site-classic/templates/foot.inc
View file
Original file line number Diff line number Diff line change
@@ -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>
13 changes: 8 additions & 5 deletions site-classic/templates/head.inc
View file
Original file line number Diff line number Diff line change
@@ -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,7 +47,7 @@

<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)
@@ -64,7 +66,7 @@

?></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:
@@ -87,6 +89,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 +114,7 @@

<div class="container">

<div id="sidebar">
<div id="sidebar" role='complementary'>

<?php

@@ -128,7 +131,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 +159,5 @@

</div><!--/sidebar-->

<div id="bodycopy">
<div id="bodycopy" role="main">

40 changes: 40 additions & 0 deletions site-classic/templates/styles/main.css
View file
Original file line number Diff line number Diff line change
@@ -502,3 +502,43 @@ body, input, textarea, table {
z-index: 9999;
}

/**
* Accessibility helpers
*
*/

/* Hide visually, but remain approachable for screenreader */

.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
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: 20;
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
background: #DD0074;
color: #fff;
}

19 changes: 11 additions & 8 deletions site-default/templates/_main.php
View file
Original file line number Diff line number Diff line change
@@ -41,8 +41,10 @@
</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) {
@@ -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 id='search' type='text' name='q' placeholder='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> ";
@@ -73,7 +76,7 @@
echo "<span>$page->title</span> ";
?></div>

<div id='main'>
<main id='main'>

<!-- main content -->
<div id='content'>
@@ -83,12 +86,12 @@

<!-- sidebar content -->
<?php if($sidebar): ?>
<div id='sidebar'>
<aside id='sidebar'>
<?php echo $sidebar; ?>
</div>
</aside>
<?php endif; ?>

</div>
</main>

<!-- footer -->
<footer id='footer'>
46 changes: 42 additions & 4 deletions site-default/templates/styles/main.css
View file
Original file line number Diff line number Diff line change
@@ -6,7 +6,8 @@
* 3. Main content and sidebar
* 4. Footer
* 5. Media queries for responsive layout
*
* 6. Accessibility
*
*/

/*********************************************************************
@@ -124,9 +125,6 @@ form.search {
border: 1px solid #ccc;
width: 100%;
}
form.search button {
display: none;
}

.breadcrumbs {
clear: both;
@@ -297,3 +295,43 @@ figure figcaption {
font-size: 115%;
}
}


/*********************************************************************
* 6. Accessibility
*
*/

/* Hide visually, but remain approachable for screenreader */

.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
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;
}
Loading