Skip to content

Improve accessibility in site profiles #1758

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

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

Improve accessibility in site profiles #1758

Show file tree
Hide file tree
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
2 changes: 1 addition & 1 deletion site-beginner/templates/_foot.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@


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

<!-- footer -->
<footer id='footer'>
Expand Down
13 changes: 8 additions & 5 deletions site-beginner/templates/_head.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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('/');
Expand Down Expand Up @@ -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) {
Expand All @@ -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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
* 3. Main content and sidebar
* 4. Footer
* 5. Media queries for responsive layout
* 6. Accessibility
*
*/

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

.breadcrumbs {
clear: both;
Expand Down Expand Up @@ -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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
13 changes: 8 additions & 5 deletions site-classic/templates/head.inc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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)
Expand All @@ -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:
Expand All @@ -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>
Expand All @@ -111,7 +114,7 @@

<div class="container">

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

<?php

Expand All @@ -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'" : '';
Expand Down Expand Up @@ -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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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> ";
Expand All @@ -73,7 +76,7 @@
echo "<span>$page->title</span> ";
?></div>

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

<!-- main content -->
<div id='content'>
Expand All @@ -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'>
Expand Down
46 changes: 42 additions & 4 deletions site-default/templates/styles/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
* 3. Main content and sidebar
* 4. Footer
* 5. Media queries for responsive layout
*
* 6. Accessibility
*
*/

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

.breadcrumbs {
clear: both;
Expand Down Expand Up @@ -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