Developer friendly AAA accessibility testing process

Accessibility is becoming ever more important and a standard for many pages (hopefully more to come). But there are many different ways of testing whether sites and apps are accessible. There is no set way, as long as the testing passes all the requirements on the WCAG 2.1 guidelines, it will be sufficient. Below I am outlining a simple process that I follow to get the biggest “offenders” out of the way.

Accessibility is not simply passing automated testing and calling it a day, a lot of it is based on actually using the page with the different limitations in place and the tools that people would be using, however this process should get you most of the way there.

Pre-requisites:

Google Chrome installed

1) Quick automated scanning / testing (on every page)

aXe or straight Chrome: aXe
Chrome: Lighthouse / Chrome: Accessibility Developer Tools
Chrome: Siteimprove Accessibility Checker
Chrome: WAVE Evaluation Tool
AChecker
Tenon (but can cost for the best results)
Pa11y Tool (command line tool, if needed for extra testing, but the previous ones should be enough)

2) Valid HTML

Scan the page with the W3’s HTML validator. This is the most basic check and many issues can simply come from having invalid HTML. You can either “view source” on the page and copy/paste the content into the validator, or simply give it the URL to validate (if it’s public). Do this for every page. Think about variations where there’s dynamically added content.

https://validator.w3.org/

3) Hierarchy – Headings

The page should have only 1 H1 tag, all the following H tags need to be in a logical order, i.e.
H1 > H2 > H3 > H4, etc. compared to H1 > H3 > H2.

Use headings to define the page structure!

H tags should be used to title sections of the content. H tags are often used instead of navigation as screen readers allow users to quickly jump between them. This helps users find the relevant section of the page and directly skip to it.

A good tool to test with is:
Chrome: Headings Map

Or you can also use the:

Chrome: WAVE Evaluation Tool

By going to the “Outline” tab

4) Contrast

We are looking for a contrast ratio of around 7:1 for any text size to pass AAA.

Chrome: WCAG Contrast checker

Not as useful, but helps CheckMyColours.com

NB: You will have to test hover states (on buttons, links, etc.) separately. (Hint: you can set the hover state as on in the Chrome developer tools)

5) Keyboard accessible navigation through the page / “Skip to content” / Focus order

The user must be allowed to skip the navigation (that should be consistent on every page). This is so that they don’t have to tab through all the links on every page refresh.
Example: https://webaim.org/techniques/skipnav/
The focus order needs to be logical and run through the page in the most semantic way, i.e. not jump from the header to the footer and then to the top navigation and then to the middle of the content. Normally, this is achieved by a logical structuring of the HTML that is not different from the design.

6) Focus visible

Focus highlighting must always be clearly visible (standard is a bright sky-blue colour, but any can be used as long as it has sufficient contrast). Any element on the page that is focus-able must have that highlight. This includes form elements, links, buttons or even content in some cases.
Make sure focus is also visible transferred if a modal is opened on the page. The focus must move to the modal and its content. Once the modal is closed, the focus must move back to the element that triggered the modal opening in the first place.
All of this is necessary so that the user always know where they are on the page when navigating and tabbing through the content.

Bad example:

Good example:

7) Text resizing

Using CMD+ (CTRL+) or CMD- (CTRL-) make sure the text resizes and the page keeps it’s layout without breaking. All the text must maintain a reasonable ratio between the different sizes (i.e. paragraphs and headings should not be massively different and should scale at the same ratio).

8) Text for images (or presentation only specified)

Make sure all images have alt=”” text specified or role=”presentation” if they are to be ignored. Step 1 above should catch any of these issues.

9) Forms – Input labels / error identification / error prevention (help texts)

[to be added]

Resources:

Articles:

Tools:

Callbacks VS Promises – Differences – Simple Notes

I thought to discuss simply the differences between callbacks and promises in JavaScript and why promises are becoming so popular.

The classic callback pattern

function getDataCallback(apiUrl, callback) {
  // If the callback is successful
  // pass the err parameter as "undefined"
  callback(undefined, {"your": "JSON object"});

  // If the callback was unsuccessful
  // pass the error message
  callback("No data found");
}

getDataCallback('http://your-api.com', function (error, data) {
  // If err is not undefined
  if (error) {
    console.log('There was an error:', error);
  } else {
    console.log('It worked', data);
  }
});

function getDataCallback(apiUrl, callback) {

// If the callback is successful

// pass the err parameter as "undefined"

callback(undefined, {"your": "JSON object"});

// If the callback was unsuccessful

// pass the error message

callback("No data found");

}

getDataCallback('http://your-api.com', function (error, data) {

// If err is not undefined

if (error) {

console.log('There was an error:', error);

} else {

console.log('It worked', data);

}

});

This is a very standard callback pattern. You work with the data and when done you call the callback function.

In the callback you check if there is an error and if not, you process the success. It works and has worked for a while, but there are a few problems with this pattern.

First, you have duplication by having to call the callback function for both a success case and a error case.

Second, you have one function handling multiple cases – the callback has to manually check if there is an error and handle it. Every time you need to manually do that and the code starts to look messy and confusing the more you add.

Third, you can end up (for whatever reason) calling the callback function multiple times for either success or errors. This can cause all sorts of issues.

Promises

function getDataPromise(apiUrl) {
  return new Promise(function (resolve, reject) {
    
    // If the callback is successful
    resolve({"your": "JSON object"});

    // If the callback was unsuccessful
    reject('No data found');

  });
}

getDataPromise('http://your-api.com').then(function (data) {

  // Handle successfully returned data
  console.log('It worked', data);

}, function (error) {

  // Handle errors
  console.log('There was an error:', error);

});

function getDataPromise(apiUrl) {

return new Promise(function (resolve, reject) {

// If the callback is successful

resolve({"your": "JSON object"});

// If the callback was unsuccessful

reject('No data found');

});

}

getDataPromise('http://your-api.com').then(function (data) {

// Handle successfully returned data

console.log('It worked', data);

}, function (error) {

// Handle errors

console.log('There was an error:', error);

});

In promises it works similar to callbacks but we start by actually creating a new Promise();. Promises take two parameters – resolve and reject to handle respectively success and error cases.

You can call each only once and this is a much cleaner way, there are no assumptions (“undefined” means error).

Next, the promise function is called and it has a method available called .then(); The first parameter of .then() always handles the success so you know you will receive whatever you were expecting (in this case our JSON object “data”). The second parameter of .then() handles fails, hence the “error” is passed to receive the respective error.

You could achieve this pattern yourself as well, but promises provide a secure and intuitive way of handling callbacks.

Conclusion

Promises are great as they provide an easy, simple and secure way to handle callbacks in ES6, that is readable and just makes sense. If you want to read more on promises, check this article by Jake Archibald on developers.google.com.

Subscribe to receive the next post in your mailbox

I need a website – where do I start? Or how to build a website

I’ve been working on websites for a very long time and I still meat a lot of clients and friends who ask the above question. It is normal, we keep moving with the new trends, not thinking in detail what they mean or how they work until one day we have to or want to take advantage and in this case build a website.

Here are a few things you need to know to get started. Continue reading →

Adding PHP Twig syntax to Sublime 3

I needed to start working with Twig recently so I had to add syntax highlighting to Sublime for it. Pretty easy and the best tutorial I found was here:

http://stackoverflow.com/questions/26294305/twig-syntax-highlighting-sublime-text-2

1. Download

The files can be downloaded from

https://github.com/Anomareh/PHP-Twig.tmbundle/archive/master.zip

or you can also clone them with:

git clone https://github.com/Anomareh/PHP-Twig.tmbundle.git

1	git clone https://github.com/Anomareh/PHP-Twig.tmbundle.git

2. Installation

To install this bundle in Sublime Text, a few extra steps are required.

a) Open Sublime Text and in the Preferences menu click Browse Packages.

b) In the directory that was just opened, create a new directory PHP-Twig/.

c) Copy the content of the repo you downloaded into the directory you just created.

d) Move the contents of the PHP-Twig/Syntaxes/ directory to PHP-Twig/ (one directory up).

e) Restart Sublime Text.

3. Apply

To apply syntax highlighting on your Twig HTML files : Open a .html.twig file Go to View menu → Syntax → Open all with current extension as → HTML (Twig).

Sublime Text 3 most powerful shortcuts

If you are just starting with Sublime or are a long-time user, you can still benefit hugely from getting to know the shortcuts. For me Photoshop is a software I cannot use without a keyboard, and Sublime being a text editor can be deceivingly simple. The interface is extremely clean but it has incredibly powerful hidden functionalities and they are available through shortcuts. Continue reading →

The most useful articles on getting started with React.js and Redux

This article will be a live thread – I will keep updating it. The idea is to have one central place for all the useful information, not every single article on the subject out there, but the ones I found personally useful:

Redux

One of the most useful and well written articles when it comes to explaining Redux and how it works: https://css-tricks.com/learning-react-redux/

Redux’s documentation is great, make sure you read it (play with the examples as well if you struggle in your own implementation): http://redux.js.org/docs/introduction/index.html

A huge list of articles, add-ons and tutorials to get you started – Awesome Redux: https://github.com/xgrommx/awesome-redux

React.js

A very good article to start learning the basics of React quickly: https://css-tricks.com/productive-in-react/

This is also a good start if you know javascript and jQuery: http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-to-get-by/

Once you have a read through the above you can create a simple app with React following this tutorial by Tyler McGinnis: http://tylermcginnis.com/reactjs-tutorial-a-comprehensive-guide-to-building-apps-with-react/

Use this react boilerplate to setup a working environment quickly: https://github.com/christianalfoni/react-app-boilerplate

A must-bookmark-list of useful resources: https://medium.com/@sapegin/react-and-redux-single-page-applications-resources-22cd859b0c1d

JSX – a year in: https://gist.github.com/chantastic/fc9e3853464dffdb1e3c

ES6 & Babel

Understanding ES6 modules with Babel: http://bradwestfall.com/articles/javascript-es6-modules-with-babel

Mozilla docs – exporting modules: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

Mozilla docs – importing modules: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

Courses on React:

https://frontendmasters.com/courses/modern-web-apps/

https://reactforbeginners.com/

WordPress – Create a landing page template within your theme that has no navigation

I thought this will be a nice little guide on how you can create a page template inside your theme to assign to pages that you want to use as a landing page.

Landing pages have become an extremely powerful tool in the world of marketing to test different ideas about products and engagement. A landing page is simply

A page that has no menu or sidebar, i.e. any distractions that would lead the user away from the page. It goes from top to bottom and each part of the page gives more information about the subject the page is designed for. Normally a landing page has a call to action at the bottom which can be a button, a subscription form or a “buy now” link.

Now that we know why you would want a landing page, lets find out how to create a new page template for your existing theme.

Creating the template

Before we get the template, I want to stress that you really should be doing this in your child theme folder and not in your main theme folder. If you don’t know what the difference is then please check this page.

Now, in your main theme folder you will have a /main-theme/page.php file. Copy it across to /child-theme/page.php. Then rename the file to /child-theme/page_landing.php. If you are not sure about the naming of files and why it is using a “_” instead of “-” please read this article. In my example the page_landing.php looks like this:

/child-theme/page_landing.php

<?php
/**
 * Template Name: 
 */

get_header(); ?>

    <main id="main" class="site-main" role="main">

        <?php while ( have_posts() ) : the_post(); ?>

            <?php get_template_part( 'content', 'page' ); ?>

            <?php if (option::get('comments_page') == 'on') { ?>
                <?php comments_template(); ?>
            <?php } ?>

        <?php endwhile; // end of the loop. ?>

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

<?php get_footer(); ?>

<?php

/**

* Template Name:

get_header(); ?>

<?php while ( have_posts() ) : the_post(); ?>

<?php get_template_part( 'content', 'page' ); ?>

<?php if (option::get('comments_page') == 'on') { ?>

<?php comments_template(); ?>

<?php } ?>

<?php endwhile; // end of the loop. ?>

</main>

<?php get_footer(); ?>

Notice at the top we have a template name. This name will be shown in the WordPress page admin, so it should make sense. I’ve named mine:

<?php
/**
 * Template Name: Landing page
 */

<?php

/**

* Template Name: Landing page

If you go to the page admin on the page that you want to become your landing page on the side you would most likely see:

If you click the “Template” drop-down the “Landing page” should be there. Select it.

The header

Now, if you refresh the page it should look no different to what it was before (a lot of work for nothing??). Please bare with me. What just happened is that now we have our own page template and we have absolute control over that page and how it looks.

Most of the page should be as it is, we can edit the content from the admin, but what we want now is to remove the navigation from the header. For this go to /main-theme/header.php and copy it over to /child-theme/header.php. Now rename the file to /child-theme/header-landing.php. Edit the file and remove the code for the navigation, this is how it looked for me before and after:

/child-theme/header-landing.php BEFORE:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<?php get_sidebar(); ?>

<div class="site">

<header class="site-header">
    <nav class="navbar <?php if (inspiro_maybeWithCover()) echo 'page-with-cover'; ?> " role="navigation">
        <div class="wrap">
             <div class="navbar-header">

                <div class="navbar-brand">
                    <?php if ( ! option::get( 'misc_logo_path' ) ) echo '<h1>'; ?>

                    <a href="<?php echo home_url(); ?>" title="<?php bloginfo( 'description' ); ?>">
                        <?php if ( ! option::get( 'misc_logo_path' ) ) { bloginfo( 'name' ); } else { ?>
                            <img src="<?php echo ui::logo(); ?>" alt="<?php bloginfo( 'name' ); ?>" />
                        <?php } ?>
                    </a>

                    <?php if ( ! option::get( 'misc_logo_path' ) ) echo '</h1>'; ?>
                </div><!-- .navbar-brand -->
            </div>

            <?php if ( has_nav_menu( 'primary' ) || is_active_sidebar( 'sidebar' ) ) : ?>

                <button type="button" class="navbar-toggle">
                    <span class="sr-only"><?php _e( 'Toggle sidebar &amp; navigation', 'wpzoom' ); ?></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <div class="navbar-collapse collapse">

                    <?php
                    wp_nav_menu( array(
                        'menu_class'     => 'nav navbar-nav dropdown sf-menu',
                        'theme_location' => 'primary',
                        'items_wrap'     => '<ul id="%1$s" class="%2$s">%3$s' . diamond_wc_menu_cartitem() . '</ul>',
                        'container'      => false
                    ) );
                    ?>


                </div><!-- .navbar-collapse -->

            <?php endif; ?>

        </div>
    </nav><!-- .navbar -->
</header><!-- .site-header -->

<!DOCTYPE html>

<head>

<?php wp_head(); ?>

</head>

<?php get_sidebar(); ?>

<nav class="navbar <?php if (inspiro_maybeWithCover()) echo 'page-with-cover'; ?> " role="navigation">

<?php if ( ! option::get( 'misc_logo_path' ) ) echo '<h1>'; ?>

<a href="<?php echo home_url(); ?>" title="<?php bloginfo( 'description' ); ?>">

<?php if ( ! option::get( 'misc_logo_path' ) ) { bloginfo( 'name' ); } else { ?>

<?php } ?>

</a>

<?php if ( ! option::get( 'misc_logo_path' ) ) echo '</h1>'; ?>

</div>

</div>

<?php if ( has_nav_menu( 'primary' ) || is_active_sidebar( 'sidebar' ) ) : ?>

</button>

<?php

wp_nav_menu( array(

'menu_class' => 'nav navbar-nav dropdown sf-menu',

'theme_location' => 'primary',

'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s' . diamond_wc_menu_cartitem() . '</ul>',

'container' => false

) );

</div>

<?php endif; ?>

</div>

</nav>

</header>

/child-theme/header-landing.php AFTER:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<?php get_sidebar(); ?>

<div class="site">

<header class="site-header">
    
</header><!-- .site-header -->

<!DOCTYPE html>

<head>

<?php wp_head(); ?>

</head>

<?php get_sidebar(); ?>

</header>

Nice, if you refresh the page now though you would still see the menu! Why? Because our page_landing.php doesn’t know about the existence of header-landing.php. Go back to the /child-theme/page_landing.php and change:

<?php
/**
 * Template Name: Landing page
 */

get_header(); ?>

<?php

/**

* Template Name: Landing page

get_header(); ?>

<?php
/**
 * Template Name: Landing page
 */

get_header( 'landing' ); ?>

<?php

/**

* Template Name: Landing page

get_header( 'landing' ); ?>

Notice we have the get_header( ‘landing’ ); ?>. This tells our new landing page to use the updated header. Save and do a refresh, now you should have no navigation in your header and you can continue working on the content of your landing page.

Moreover, editing those two templates you can adjust any other styling, add HTML and make any changes you wish to tailor the way your landing page looks. Also, you can re-use the template by assigning it to any new pages from the:

I hope that helps, if you have any questions, please write in the comments below.

Smarty – How to assign a variable into a variable in the template

Recently I needed to assign several variables into one smarty variable inside the template.

Here is the basic rules for the example:

You have a text that says “Your registration expires in # days”;
You want The text “in # days” to change to “today” if the # days is 0.

Here’s a way you can do this with smarty variables inside the template (whether you should do this in the template is not a discussion for this post).

{assign var="num_days" value="0"}

{if $num_days != "0"}
    {assign var="days_left" value="`$in_days` `$days_until_expiry` `$days`"}
    /* $days_left = in 3 days */
{else}
    {assign var="days_left" value="`$today`"}
    /* $days_left = today */
{/if}

{assign var="num_days" value="0"}

{if $num_days != "0"}

{assign var="days_left" value="`$in_days` `$days_until_expiry` `$days`"}

/* $days_left = in 3 days */

{else}

{assign var="days_left" value="`$today`"}

/* $days_left = today */

{/if}

The key here is that when you want to include a variable as part of the value of another variable you need to use value=”$in_days“. Notice the ` before and after the variable name inside the double quotes. You can use this method to include variables inside value statements anywhere in smarty templates and make modifications of those included variables.

Sublime Text 3 – Configuration for front-end development

Recently I switched to Sublime Text 3. Previously I had been using Adobe Dreamweaver for about 10+ years. And no, I didn’t use adobe’s built in browsers, “Design preview”, etc. It was a simple text editor, with highlighting, tag closing and build in FTP support. Simply, it was the first editor I used after Notepad and I never felt I needed to switch. Why did I move on to Sublime Text 3? Because Dreamweaver became too heavy, slow and just felt like an ancient piece of software.

On my way to a new editor I tried Atom a really cool web-technology (JS) based text editor. I liked it, but it didn’t have the FTP support with which I had grown so used to. And to be honest, I didn’t spend enough time using it as well.

Next I went onto Sublime. I loved it immediately! Simple, clean design, FAST, fast fast! After a while though I realised it didn’t have everything I needed, so I got on ready. Not long and I had a few “packages” that extended its functionality to the basics I needed. Now I cannot even consider switching back to Dreamweaver.

Dreamweaver is not cheap, and considering you have to pay for every freaking new version it is too much for what it provides. Sublime on the other hand is merely $70 for a lifetime license. Oh, and you can use it for free, but will occasionally get a popup asking you if you want to buy the license. For such a brilliant tool, that you can do most of the things you need (for front-end development, not sure about backend) I think it is more than worth it’s price. Below is my setup with simple instructions to install the same themes/packages:

Looks

Theme: Brogrammer.sublime-theme
Colour-scheme: Oceanic Next (SL).tmTheme

Install using Package Control

Press CMD + Shift + P (Mac)
Type “install” and select “Package Control: Install Package”
Type “oceanic” and select “Oceanic Color Scheme”
Repeat 1) and 2)
Type “brogrammer” and select “Theme – Brogrammer”

Final User Settings:

{
   "color_scheme": "Packages/User/SublimeLinter/Oceanic Next (SL).tmTheme",
   "ignored_packages":
   [
      "Vintage"
   ],
   "theme": "Brogrammer.sublime-theme"
}

{

"color_scheme": "Packages/User/SublimeLinter/Oceanic Next (SL).tmTheme",

"ignored_packages":

[

"Vintage"

"theme": "Brogrammer.sublime-theme"

}

One of the main reasons I like the Oceanic colour scheme is because it has JSX highlighting support:

Packages / Plugins

SFTP

An FTP client that allows you to work from a local copy and as you save your files to upload them straight to a remote server – invaluable

Press CMD + Shift + P (Mac)
Type “install” and select “Package Control: Install Package”
Type “sftp” and select “Sublime SFTP”

Sublime Linter

Framework for interactive code linting within Sublime 3 (not for V2)

Press CMD + Shift + P (Mac)
Type “install” and select “Package Control: Install Package”
Type “sublime linter” and select “Sublime Linter Framework”
Then repeat steps from 1 to 3 and at the last one instead of selecting the framework install the linter packages – CSS, JS, etc.

Babel

Sublime syntax ES6 definitions with React JSX

Press CMD + Shift + P (Mac)
Type “install” and select “Package Control: Install Package”
Type “babel” and select “Babel”

Oh and it has GIT support!

EDIT 8 December 2015:

CSS3 Syntax

Press CMD + Shift + P (Mac)
Type “install” and select “Package Control: Install Package”
Type “CSS” and select “CSS3 -The most complete CSS support for Sublime Text 3.”

Do you use any other packages that you find invaluable?

Smilyan Pavlov

Designer & Web Strategy Consultant in Sheffield, UK

Menu

Category Archives: Code

Developer friendly AAA accessibility testing process

1) Quick automated scanning / testing (on every page)

2) Valid HTML

3) Hierarchy – Headings

4) Contrast

5) Keyboard accessible navigation through the page / “Skip to content” / Focus order

6) Focus visible

7) Text resizing

8) Text for images (or presentation only specified)

9) Forms – Input labels / error identification / error prevention (help texts)

Resources:

Articles:

Tools:

Callbacks VS Promises – Differences – Simple Notes

The classic callback pattern

Promises

Conclusion

Subscribe to receive the next post in your mailbox

I need a website – where do I start? Or how to build a website

Adding PHP Twig syntax to Sublime 3

1. Download

2. Installation

3. Apply

Sublime Text 3 most powerful shortcuts

The most useful articles on getting started with React.js and Redux

WordPress – Create a landing page template within your theme that has no navigation

Creating the template

The header

Smarty – How to assign a variable into a variable in the template

Sublime Text 3 – Configuration for front-end development

Looks

Packages / Plugins

SFTP

Sublime Linter

Babel

CSS3 Syntax