Skip to content

Accessibility #27

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
yonjah wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Accessibility #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b602f29
Improve: Move aside outside of main landmark
yonjah Jun 27, 2019
3d7ac72
fix: working sr-only class from bootstrap
yonjah Jun 27, 2019
80008d6
fix: continue reading contain html elements so should not be escaped
yonjah Jun 27, 2019
4acf5a9
improve: css fonts loading performance
yonjah Jun 29, 2019
5ae9f03
improve: sidebar accessibility
yonjah Jun 29, 2019
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
4 changes: 2 additions & 2 deletions attachment.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
get_header(); ?>

<div id="content-area">
<div id="site-content" role="main"><?php
<main id="site-content"><?php

if ( have_posts() ) {

Expand Down Expand Up @@ -83,7 +83,7 @@
}
?>

</div><!-- #site-content -->
</main><!-- #site-content -->
</div><!-- #content-area -->

<?php get_footer(); ?>
3 changes: 1 addition & 2 deletions css/style.min.css
View file
Open in desktop

Large diffs are not rendered by default.

8 changes: 1 addition & 7 deletions css/style.min.css.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

67 changes: 47 additions & 20 deletions css/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ $border: 1px solid #ddd;
$small-text: 0.8em;
$red_colour: #d90000;
$grey_colour: #ddd;
$scondary_color: #333;
$font_standard_size: 1.0em;
$font_reduced_size: 0.9em;
$font_small_size: 0.8em;
Expand All @@ -21,6 +22,41 @@ $font_serif: "Droid Serif", serif;
-webkit-border-radius: $radius;
}

/* =Screen reader only
-------------------------------------------------------------- */
//sr only code from bootstrap - https://github.com/twbs/bootstrap/blob/a4a04cd9ec741050390746f8056cc79a9c04c8df/scss/mixins/_screen-reader.scss
//
// The MIT License (MIT)
//
// Copyright (c) 2011-2019 Twitter, Inc.
// Copyright (c) 2011-2019 The Bootstrap Authors
@mixin sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}

@mixin sr-only-focusable {
&:not(:focus) {
@include sr-only();
}
}

.sr-only,
.sr-only-focusable:not(:focus) {
@include sr-only();
}
/* #Accessiblity
-------------------------------------------------------------- */
div[tabindex="-1"] { //hide outline from forced tab elements
outline: none;
}

/* =Fonts
-------------------------------------------------------------- */
Expand All @@ -32,7 +68,8 @@ $font_serif: "Droid Serif", serif;
url(../fonts/droidsans-webfont.ttf) format('truetype'),
url(../fonts/droidsans-webfont.svg#droid_sansregular) format('svg');
font-weight: normal;
font-style: normal;
font-style: normal;
font-display: fallback;
}
@font-face {
font-family: 'Droid Serif';
Expand All @@ -43,6 +80,7 @@ $font_serif: "Droid Serif", serif;
url(../fonts/droidserif-webfont.svg#droid_serifregular) format('svg');
font-weight: normal;
font-style: normal;
font-display: fallback;
}

/* =Reset
Expand All @@ -51,7 +89,6 @@ body,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,a,img,dl,dt,dd,ol,ul,li,fieldset,form
margin: 0;
padding: 0;
border: 0;
outline: 0;
list-style: none;
}
body {
Expand All @@ -71,16 +108,11 @@ address {
display: block;
}

/* =Hidden sections
-------------------------------------------------------------- */
.screen-reader-text {
display: none;
}

/* =Links
-------------------------------------------------------------- */
a {
text-decoration: none;
font-style: oblique;
color: $red_colour;
}
a:hover {
Expand Down Expand Up @@ -115,6 +147,7 @@ a:hover {
font-size: 2.8em;
line-height: 1.5em;
font-weight: bold;
font-display: swap;
letter-spacing: -0.05em;
text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
margin: 0 0 0 2%;
Expand Down Expand Up @@ -143,7 +176,7 @@ a:hover {
float: right;
font-weight: normal;
margin: 1.5em 2% 0 2%;
color: #999;
color: $scondary_color;
}

}
Expand Down Expand Up @@ -193,6 +226,7 @@ h2 {
}

.widget-title {
font-family: $font_serif;
font-size: 1.4em;
font-weight: bold;
}
Expand Down Expand Up @@ -295,7 +329,7 @@ blockquote {

blockquote,
blockquote p {
color: #999;
color: $scondary_color;
font-style: italic;
}

Expand All @@ -314,18 +348,11 @@ input[type=text] {
}

.search-form {

input[type=submit],
label {
display: none;
}

input[type=text] {
width: 90%;
max-width: 400px;
font-size: $font_reduced_size;
}

}

iframe {
Expand Down Expand Up @@ -404,7 +431,7 @@ article.last-post {
}

.entry-meta {
color: #888;
color: $scondary_color;
font-family: $font_sans_serif;
font-size: 0.8em;
}
Expand Down Expand Up @@ -550,7 +577,7 @@ ol.commentlist {
padding: 0;
@include rounded_corners();
font-size: $font_reduced_size;
color: #999;
color: $scondary_color;
}

li.trackback ul,
Expand Down Expand Up @@ -697,7 +724,7 @@ input[type=submit]:hover {
.comment-notes,
.form-allowed-tags {
font-size: $font_standard_size;
color: #999;
color: $scondary_color;
}

/* =Third party plugins
Expand Down
2 changes: 0 additions & 2 deletions footer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@
*/
?>

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

<footer id="site-footer" role="contentinfo">
<div class="site-info">
<?php _e( 'Copyright', 'hellish-simplicity' ); ?> &copy; <?php bloginfo( 'name' ); ?> <?php echo date( 'Y' ); ?>.
Expand Down
24 changes: 24 additions & 0 deletions functions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ public function __construct() {

// Add filters
add_filter( 'post_class', array( $this, 'add_last_post_class' ) );
add_filter( 'dynamic_sidebar_params', array( $this, 'accessible_widgets' ) );
}

/**
Expand Down Expand Up @@ -146,6 +147,29 @@ public function widgets_init() {
);
}

/**
* Use widget params to try and predict the correct tag and title
*/
public function accessible_widgets($params) {
$id = $params[0]['widget_id'];
$name = $params[0]['widget_name'];
if (!$name) {
$name = $id;
}

// var_dump($params[0]['widget_name'], $id);
$params[0]['before_widget'] = substr($params[0]['before_widget'], 0, -1). ' aria-label="' . esc_attr($name) . '">';
if ( strpos($params[0]['before_widget'], '<aside') === 0 &&
(strpos($id, 'nav') !== false || strpos($id, 'posts') !== false || strpos($id, 'categories') !== false || strpos($id, 'archive') !== false)) {
$params[0]['before_widget'] = '<nav ' . substr($params[0]['before_widget'], 6);
$params[0]['after_widget'] = '</nav>';
} else if (strpos($id, 'search') >= 0) {
$params[0]['before_widget'] = substr($params[0]['before_widget'], 0, -1). ' role="search">';
}
// var_dump($params);
return $params;
}

/**
* Implements Page Styler theme options into Theme Customizer.
*
Expand Down
8 changes: 5 additions & 3 deletions header.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,11 @@
</head>
<body <?php body_class(); ?>>

<a class="skip-link screen-reader-text" href="#main"><?php esc_html_e( 'Skip to content', 'hellish-simplicity' ); ?></a>
<?php
if ( 'full-width.php' != basename( get_page_template() ) ) { //we don't show sidebar in full-width template ?>
<a class="skip-link sr-only-focusable" href="#sidebar"><?php esc_html_e( 'Skip to sidebar', 'hellish-simplicity' ); ?></a>
<?php }
?>

<header id="site-header" role="banner">
<div class="site-branding">
Expand Down Expand Up @@ -48,5 +52,3 @@
<h2><?php bloginfo( 'description' ); ?></h2>
</div><!-- .site-branding -->
</header><!-- #site-header -->

<main id="main">
6 changes: 3 additions & 3 deletions index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
get_header(); ?>

<div id="content-area">
<div id="site-content" role="main"><?php
<main id="site-content"><?php

// If on search page, then display what we searched for
if ( is_search() ) { ?>
Expand Down Expand Up @@ -52,7 +52,7 @@

// Display full content for home page and single post pages
if ( is_home() || is_singular() ) {
the_content( esc_html__( 'Continue reading <span class="meta-nav">&rarr;</span>', 'hellish-simplicity' ) );
the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'hellish-simplicity' ) );
wp_link_pages( array( 'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'hellish-simplicity' ), 'after' => '</div>' ) );
} else {

Expand Down Expand Up @@ -89,7 +89,7 @@
}
?>

</div><!-- #site-content --><?php
</main><!-- #site-content --><?php

// Show sidebar if not on full width template
if ( 'full-width.php' != basename( get_page_template() ) ) {
Expand Down
4 changes: 2 additions & 2 deletions searchform.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
*/
?>
<form method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<label for="s" class="screen-reader-text"><?php esc_html_e( 'Search', 'hellish-simplicity' ); ?></label>
<label for="s" class="widget-title"><?php esc_html_e( 'Search', 'hellish-simplicity' ); ?></label>
<input type="text" id="s" class="field" name="s" placeholder="<?php esc_attr_e( 'Search', 'hellish-simplicity' ); ?>" />
<input type="submit" class="submit" name="submit" value="<?php esc_attr_e( 'Search', 'hellish-simplicity' ); ?>" />
<input type="submit" class="submit sr-only-focusable" name="submit" value="<?php esc_attr_e( 'Search', 'hellish-simplicity' ); ?>" />
</form>
Loading