I'm Dreaming of an Accessible Christmas - A11yPals Accessibility Consulting

Warning

The following contains a really bad sense of humour and worse singing. For the love of your ears, you may just want to skip the audio and jump straight into the lyrics and their meaning.

Seriously, you have been warned! I am no singer and my meds for C-PTSD mood stabilizing give me horrible dry mouth so it’s even worse. Proceed with extreme caution.

Accessible Christmas – The Song

I’m dreaming of an accessible Christmas.
One like we’ve never gotten to know.
Where the websites gleaming,
and we are beaming,
cause the purpose of that button we already know.

I’m dreaming of an accessible Christmas
Where my keyboard shortcuts aren’t a fight.
May our text be legible on white.
And make sure your language code is right.

I’m dreaming of an accessible Christmas.
Where headings start at number 1.
When the skip links work that’s oh so fun!
I’ll want to linger, longer and not run.

I’m dreaming of an accessible Christmas.

Where fonts are justified left to right.

Let’s have text resize just as we like.

And make sure line space is of an acceptable height.

Important steps to a more accessible Christmas

Often people see accessibility as something difficult to achieve and as an “add-on” to their functionality. However it does not need to be this way. Here are 5 simple steps you can take to make your website more accessible, in time for Christmas. Let’s make Christmas accessible!

Button Purpose

If you are familiar with the Web Content Accessibility Guidelines (WCAG) you will know that criteria 1.3.5 Identify Input Purpose is a key criteria for making your website and the components on your website accessible.

When it comes to button purpose there are a few concepts which should be considered.

All buttons need labels! Even icon buttons need labels (and I would encourage you to also read my separate article “X Marks the Spot, but not the close button.” around icon buttons). The label let’s users, including assistive tech users what action the button is going to perform.
Buttons labels need to be easy to understand. The person using the button may be using translation software, they could have a learning or cognitive disability, they could be older and less tech literate. So keep button names short, descriptive and easy to understand.
Avoid duplicating labels. Buttons with the same labels should never perform different actions.
If a button is visible, it should be able to be activated. Do not deactivate your buttons and leave your user guessing how to activate them. This kind of error prevention leads to less errors, mostly because users leave your site when they can’t figure out how to enable the button.
Ensure buttons manage state. Both code and user, need to know if a button is enabled, disabled, pressed or un-pressed.

For more information on buttons check out my other technical blogs.

Keyboard Shortcuts

This aspect of websites is linked to WCAG criteria 2.1.4 Character Key Shortcuts.

Keyboard shortcuts can make using part of your websites easier for many users. However, when creating keyboard shortcuts there are some guidelines you should follow

Ensure your keyboard shortcuts do not conflict with other existing shortcuts. e.g. do not overwrite shortcuts like ctrl + v
Do not create keyboard shortcuts which are only of printable characters. Ensure shortcuts also use a non printable character such as ctrl, alt or opt. Users and code need to be able to determine between legitimate typing and keyboard controls.
Allow your shortcuts to be customised and remapped. This can ensure they and do not interfere with assistive technologies or users current customisations.
If I keyboard shortcut is only for a specific item, the shortcut should only work when that item is in focus. E.g. The shortcut to play a video should only work when the users keyboard focus is already sitting on the video.
Clearly document any keyboard shortcuts you create, so users are aware of them and can use them.

How to Set Keyboard Shortcuts

To set keyboard shortcuts you can use JavaScript libraries like “Mousetrap” (No not that fun, though somewhat buggy, game we all played as children) which allows you to tie your keyboard shortcut into specific functions.

Code snippet example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>KeyUp Event Example</title>
    <script> 
      document.addEventListener('DOMContentLoaded', (event) => { 
        document.addEventListener('keyup', function (e) { 
        // Check if the Q key is released 
          if (e.ctrlKey && e.key === 'k') { 
            e.preventDefault(); 
            // Prevent the default action
            alert('Ctrl + k pressed!'); 
          }
        });
      }); 
    </script>
  </head>
  <body>
    <h1>Press and release Ctrl + k to see the event in action</h1>
  </body>
</html>

Language Codes

Language codes allow technology to understand the language of the website and it’s parts. By using correct language tags performance is improved for

Screen readers – to correctly pronounce both language and dialect of that language
Search engines – allows them to understand and leverage the language of the content for better indexing, currency selection and also to appropriately target advertisements to the region or geography
Browsers – language tags can help with the rendering of content where not specified including characters and direction. Left-to-right VS right-to-left
Translation software and spell check – ensures that languages are converted correctly and picks up any differences in dialects and spelling between regions such as the differences between UK and US English.

Language tags can be set using the HTML standard and Subtag registery.

Code Example – English Australian full document

<!DOCTYPE html> 
    <html lang="en-AU"> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Page in Australian English</title> 
    </head> 
    <body> 
        <p>G'day mate!</p> 
    </body>
</html>

Code example – English Australian primary, partial content in French

<!DOCTYPE html> 
    <html lang="en-AU"> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Page in Australian English with parts in French</title> 
    </head> 
    <body> 
        <p>G'day mate!</p> 
        <p lang="fr">bonjour mon ami!</p>
    </body>
</html>

Headings

I discuss headings frequently and you will find information about headings all through my blog articles. A quick summary

Headings group content. Items under a heading should be related to that heading.
Order is important. You should avoid skipping headings and keep them at correct levels.
Font style should not drive heading levels.
There should only ever be one heading level 1 (h1) on a page
Headings should logically stand on their own and be useful for navigation.

In the latest WebAIM Screen Reader User Survey 10 71% of users will navigate by headings as their first way of finding information on a large site. 88.8% of users find heading levels useful when navigating. So support your users get those heading levels right!

Skip links

Skip links are in-page links, which allow users to quickly jump over repetitive content. These are most commonly used for skipping over headers or navigation to the main content on the web page. This makes it easier and quicker for a keyboard only user or uses with some assistive technologies to get to the information they want.

Some skip link examples include

Skip to content/skip to main – jumps a user over header and/or navigation menus to the primary content of the page
Back to top – skips the user from the bottom of the page back to the top of the page
Skip navigation – skips over a navigation section to the next section of the page
Accessibility help – skips the user to information around accessibility details which may include identifying mapping of shortcut keys.

How to code a skip link

To successfully code a skip link you need to

Add an anchor link that points to where you wish to go
Give an ID to the item being used as an anchor
If the link is to be hidden, create CSS to hide the link
Create CSS to show the link when encountered in tab order

Code Example

Create the anchor (HTML)

<a href="#accessibilityhelp" class="skip-link">Skip to accessibility information</a>

CSS management

.skip-link { 
    position: absolute; 
    top: -40px; 
    left: 0; 
    background: #000; 
    color: #fff; 
    padding: 8px; 
    z-index: 100; 
} 
.skip-link:focus { 
    top: 0; 
}

Set the ID of the target for the skip link

<div id="accessibilityhelp"> 
    <!-- Your main content here -->
    <h2>Accessibility Information</h2> 
    <p>For navigating this website we have included....</p>
</div>

Click away rates

According to recent studies, 70% of online shoppers with disabilities are forced to click away or get assistance from someone else to make purchases from difficult websites.

The average time taken for a user to click away from an inaccessible website is typically very short. Studies suggest that users spend less than 15 seconds on a website before deciding to leave if they encounter accessibility issues. That is a lot of customers and potential sales, lost in one heck of a short time window.

Font Justification

No font justification is not explaining your argument on why a particular font style has been selected, it refers to the alignment of text on a web page. For accessibility the following principles hold

Left justification is preferred. It ensures consistent spacing between words making the text easier to follow without distractions
Full justifications creates unseen spacing and can lead to “rivers of white space” that make it harder to read especially for people with dyslexia and Irlen syndrome.

Fonts do not resize – Developers have hard coded font size, preventing them from being changed.
Fonts resize but content truncated – Other visual items containing the content do not resize causing the text to be truncated.
Fonts resize but content is obscured – Buttons, images or other content are at fixed locations and so overlap the text, obscuring the text.
Text overlaps when font size is increased – this makes it look like hieroglyphics and is completely unreadable.

The WCAG does discuss text resizing, however, there are some argument around what does and doesn’t constitute user agents and assistive technologies and the hands off, but the main agreement point is that users should be able to resize to 200% without loss of content.

If I ever test your site and you only support full page zoom, whether you like it or not, whether we get into an awesome discussion around the ambiguity of the WCAG, I will let you know if your text only zoom fails and I will get out my “angry Kylie” hairbows.

Spacing of Acceptable Height

When we start discussing white space things get complicated. So what we are talking about here is paragraph spacing, line, spacing, word spacing and letter spacing. Letter spacing is referred to as Kerning (and I highly encourage you to search some of the “Troubles with Kerning” Facebook pages or have a look at Pleated Jeans, The Real Crime is that Kerning web page, for interesting Kerning accidents.

What is WCAG 1.4.12?

WCAG Criteria 1.4.12 states (with some exceptions) that content should support changes to the following properties with no loss of content or functionality.

Paragraph spacing to at least 2 times the font size;
Line height to at least 1.5 times the font size;
Word spacing to at least 0.16 times the font size.
Letter spacing to at least 0.12 times the font size;

Code Example

How to set these in CSS and test out on websites

<style>
    body * {
        line-height: 1.5em !important;
        letter-spacing: 0.12em !important;
        word-spacing: 0.16em !important;
    }
    p,
    .para,
    .paragraph {
        margin: 2em 0 !important;
    }

</style>

There are different ways you can change these settings but a quick and easy way to test out what these changes look like is with the Chrome Plug-in “Stylus.” You can find a demo of this plug-in along with other tools on my YouTube Video “Polished (and sometimes puzzling) Plug-ins to Perfect Your Accessibility”

Summary

Many components interact to make accessible experiences. Some items you may never have considered (or you gloss over in the Web Content Accessibility Guidelines) can turn out to be more important than you first thought. So when you return to work after your end of year break, perform a mini-audit of your website and check if you are meeting the principles discussed in this song.

Buttons labels should be clear and meaningful
Keyboard shortcuts should function, not overwrite other common shortcuts and shortcut lists be communicated to the user
Language are set for your page and it’s parts
Headings are correct levels, appropriate for the content and easy to understand
Skip links are clear and operated as expected
Fonts are correctly justified (for English left aligned)
Fonts resize to 200% as minimum
Your use of white space can be adapted as per WCAG criteria 1.4.12

So to give us all an accessible Christmas, please make sure to keep these concepts in mind when creating your web pages

I’m Dreaming of an Accessible Christmas

Warning

Accessible Christmas – The Song

Important steps to a more accessible Christmas

Button Purpose

Keyboard Shortcuts

How to Set Keyboard Shortcuts

Code snippet example

Language Codes

Code Example – English Australian full document

Code example – English Australian primary, partial content in French

Headings

Skip links

How to code a skip link

Code Example

Create the anchor (HTML)

CSS management

Set the ID of the target for the skip link

Click away rates

Font Justification

Font size

Spacing of Acceptable Height

What is WCAG 1.4.12?

Code Example

Summary