What I have learnt from developing an accessible WordPress template

13 Aug 2016

It’s been ages since I’ve written a blog article, so I thought it would be sensible to discuss what I’ve been working on during my break.

Over the last five years, I’ve been producing websites for a variety of companies. I take pride in what I produce and relish over self improvement. However, over the last few months in education, I have grown to understand how inaccessible websites are to those who require assistive technology to browse the web. Anyone who takes part in web design should also get involved in accessibility. Not only should an element look nice, but in practical terms, work on/with anything.

So I chose to test myself in accessibility by creating a WordPress template solely catered to accessibility with a nice emphasis on typography (default font: Comic Sans).

My first public template is named Grace. Built on underscores, it gave me a great boilerplate to work from and further improve. I have yet to complete my template, but Grace is both scalable and customisable, so can’t wait to see how it ends up looking.

First lesson learnt

As my current website is quite accessible, I’ve come to understand how certain elements on my personal website can be further improved. For example, my blogs pagination could provide further feedback to users of screen readers, by adding the following:

<ul>
    <li><span class="page-numbers current"><span class="screen-reader-text">Page</span>1</span></li>
    <li><a class="page-numbers" href="https://example.com/blog/page/2/"><span class="screen-reader-text">Page</span>2</a></li>
    <li><a class="page-numbers next" href="https://example.com/blog/page/2/"><span class="screen-reader-text">Next page</span></a></li>
</ul>
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: fixed !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    &:focus {
        background: #007acc;
        clip: auto !important;
        display: block;
        @include font-size(1.1);
        font-weight: bold;
        padding: 15px 25px;
        left: 50%;
        transform: translate(-50%, 0%);
        height: auto;
        width: auto;
        z-index: 9001; // always* at front
    }
}

If you look at line 2-4 of HTML you will notice a span tag in each with the class name of “screen-reader-text”.

By having these hidden span tags inside pagination elements, will now read “page 1”, “page 2”, “page 3”, “next page” to screen readers. Not only does this give screen readers further info about the link and where it goes, but it sounds more user friendly also as opposed to “1”, “2”, “3”, “next”.

Second lesson learnt

For the past year, I’ve been also trying to develop a JavaScript-free website during my free time. It does seem quite simple when starting off, but when you need that complex something added to your site, it’s probably best you use JavaScript or jQuery.

As much as I try to avoid using scripting languages (mainly for speed and performance), they always manage to get the job done with the least amount of effort.

Take a web designers nightmare, the responsive menu: irritating for the most part using HTML and CSS up to the point where it needs accessibility. Not forgetting, your menus need menus and so on, also those elements need to be accessible.

Final thoughts

Not using JavaScript does have its advantages in my opinion, but don’t create a website that will neglect a portion of its audience. Impairments are varied in nature and are not limited to the visually impaired either.

What I’m trying to get at is, by not having JavaScript will likely mean you don’t have an accessible site either (or at best, one that could be enhanced using JavaScript). Are you willing to affect these users (potential customers) from accessing your site?