Giter VIP home page Giter VIP logo

accessible-minimalism-wordpress-theme's Introduction

Accessible Minimalism WordPress Theme

Minimalist WordPress theme with a penchant for accessibility.

Inspired by the Accessible Minimalism Hugo Theme.

Project aims

  • XHTML 1.0 Strict valid and HTML 5 friendly code
  • minimal bloat in the generated markup
  • focus on accessibility
    • semantic, minimal markup for screen readers
    • minimal added CSS for partially sighted users
    • easy to read source code
    • minimal config required to get started and use in Hugo
  • RSS subscription support
  • favors fully-blind users over partially or fully sighted users
  • mobile-last development

Who is this for?

This aims at users who care more about content and inclusivity than dancing baby GIFs or whatever the 2020 equivalent is.

The early web was great for content, unburdened by MBs of JavaScript or CSS. RSS feeds allowed users to pull your content on demand vs being forced into giving you space in their precious inbox or following your social-ills.

Getting started

TBC

Configuration

TBC

Development decisions

  • skip redundancy such as anchor's title attributes
  • default browser colors are high contrast enough

Screenshot

Screenshot

Testing

  • check theme against w3c validator
  • check using a new Lokl site
  • check navigation and content in lynx(1) browser
  • check navigation and content in screen reader(s)
  • test accessibility in sites like:

Roadmap

  • add a demo site, also serves as test site for validators / theme homepage
  • theme options / config help for enabling footer links to email, RSS, socials

License

The Unlicense - do whatever you like with this code.

accessible-minimalism-wordpress-theme's People

Contributors

bookwyrm avatar leonstafford avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

accessible-minimalism-wordpress-theme's Issues

WP 5.8 shows PHP warning, seems related to some missing info from theme

Notice: Trying to get property 'queue' of non-object in wp-includes/script-loader.php on line 2652

Warning: Invalid argument supplied for foreach() in wp-includes/script-loader.php on line 2652

the function in question (first foreach here):

/**
 * Allows small styles to be inlined.
 *
 * This improves performance and sustainability, and is opt-in. Stylesheets can opt in
 * by adding `path` data using `wp_style_add_data`, and defining the file's absolute path:
 *
 *     wp_style_add_data( $style_handle, 'path', $file_path );
 *
 * @since 5.8.0
 *
 * @global WP_Styles $wp_styles
 */
function wp_maybe_inline_styles() {
	global $wp_styles;

	$total_inline_limit = 20000;
	/**
	 * The maximum size of inlined styles in bytes.
	 *
	 * @since 5.8.0
	 *
	 * @param int $total_inline_limit The file-size threshold, in bytes. Default 20000.
	 */
	$total_inline_limit = apply_filters( 'styles_inline_size_limit', $total_inline_limit );

	$styles = array();

	// Build an array of styles that have a path defined.
	foreach ( $wp_styles->queue as $handle ) {
		if ( wp_styles()->get_data( $handle, 'path' ) && file_exists( $wp_styles->registered[ $handle ]->extra['path'] ) ) {
			$styles[] = array(
				'handle' => $handle,
				'path'   => $wp_styles->registered[ $handle ]->extra['path'],
				'size'   => filesize( $wp_styles->registered[ $handle ]->extra['path'] ),
			);
		}
	}

	if ( ! empty( $styles ) ) {
		// Reorder styles array based on size.
		usort(
			$styles,
			static function( $a, $b ) {
				return ( $a['size'] <= $b['size'] ) ? -1 : 1;
			}
		);

		/*
		 * The total inlined size.
		 *
		 * On each iteration of the loop, if a style gets added inline the value of this var increases
		 * to reflect the total size of inlined styles.
		 */
		$total_inline_size = 0;

		// Loop styles.
		foreach ( $styles as $style ) {

			// Size check. Since styles are ordered by size, we can break the loop.
			if ( $total_inline_size + $style['size'] > $total_inline_limit ) {
				break;
			}

			// Get the styles if we don't already have them.
			$style['css'] = file_get_contents( $style['path'] );

			// Set `src` to `false` and add styles inline.
			$wp_styles->registered[ $style['handle'] ]->src = false;
			if ( empty( $wp_styles->registered[ $style['handle'] ]->extra['after'] ) ) {
				$wp_styles->registered[ $style['handle'] ]->extra['after'] = array();
			}
			array_unshift( $wp_styles->registered[ $style['handle'] ]->extra['after'], $style['css'] );

			// Add the styles size to the $total_inline_size var.
			$total_inline_size += (int) $style['size'];
		}
	}
}

warning doesn't show in WP 5.7

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.