Putting Web Standards for Writers Into Practice

Tweet

If you’re wondering how web standards for writers play out in practice, you’d better read this post.

Recently I took a look at the website of my country’s leading telco, to see how they handled the standards I pointed out recently for web writers. The company’s name is Telstra, and it maintains the basic landline infrastructure in Australia (as well as mobile and internet infrastructure) — something that’s used by people of all ages and abilities.

So you’d expect its site to stick fairly rigorously to best practice.

Of course, these standards aren’t intended for us by writers alone — everyone working on the site should, in theory, be making them happen.

But as I found, the standards are often compromised.

I looked at a single page of the website: http://www.telstra.com.au/mobile-phones/. Let’s step through the standards and see how it stacks up.

We’ll start with the WCAG 2.0.

Telstra Website issues

Text-centric images are used without text equivalents or ALT tags.

1.1 Text alternatives

This page doesn’t provide text alternatives for all the images it presents. The three images on the right of the feature block at the top of the page aren’t replicated in text when we turn images off, so people browsing without images, or using a screen reader, won’t get any information in place of the product hosts.

None of the images have ALT text, either.

The images’ links remain active of course, which makes for some interesting interactions if you’re just clicking around.

1.2 Time-based media alternatives

There are no time-based media on the page, so this particular standard wasn’t an issue.

1.3 Adaptable

These guidelines deal with the structure of content, the relationship between its parts, and establishing a meaningful sequence of information that can be determined programmatically.

The page I looked at uses H1, H2 and H3 tags. The structure they convey looks like this:

Mobile Phones

  • Featured phones
  • Prepaid phones
    • Connect the way you want with our mobile plan options
    • Australia’s best 4G coverage
    • Go faster in more places
    • Telstra 24×7 app

This looks ok — until you look at the page. As you can see, the structure of the presentation doesn’t really reflect this breakdown. All H3s aren’t styled in the same way, so the visual hierarchy doesn’t match the programmatic one.

Could it be that the business has used heading tags in a bid to achieve search rank for these terms, rather than to use them to structure the content? Looks like it.

2.4.2 Page titled

This page has a title that describes its topic: Telstra – Mobile Phones. Woo! You ticked a box, Telstra.

2.4.4 Link purpose (in context)

This requirement is pretty specific:

“The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.”

While the page contains some links with generic text (e.g. the Find out more), their purpose is clear both within the links themselves, but also within the context of the page itself.

One note: it would be hard to differentiate the purposes of these links from one another if you were using a screen reader to read the page links only. One way around this might be to add a keyword to each one:

  • More about plans with a mobile
  • More about SIM-only plans
  • More about no lock-in plans
  • More about pre-paid plans

This way, the links would also meet guideline 2.4.9 Link purpose (link only).

2.4.5 Multiple ways

The Telstra site successfully provides multiple ways of locating the content on the site. It has navigation, a search box, breadcrumbs (at the bottom of the page) and a sitemap.

Those breadcrumbs also meet guideline 2.4.8, Location.

2.4.6 Headings and labels

The headings and labels on the page do a pretty good job of describing the content they relate to.

2.4.10 Section heading

As we saw a moment ago, the use of heading tags is a bit ambiguous on this page. Headings that display the same way aren’t necessarily tagged the same way, which means that users accessing the page in different ways get different messages.

However, this guideline deals with using headings to organize the content, and they are certainly used to do that.

3.1 Readable

The page falls down a bit on this guideline: it provides no mechanism for explaining jargon like 4G and SIM in context.

The deeper you go into the site, the more value some kind of glossary would provide — especially on pages containing feature comparisons.

You don’t need to be vision-impaired to need help demystifying a mobile phone plan, believe me. Contextual help would go a long way to help prospects understand what they’re getting for their money — and may well make the brand seem more approachable and friendly, too.

3.3 Input assistance

Input assistance is provided on forms on the site: fields are appropriately labeled and error messages are provided when mandatory fields are missed.

TelstraErrors

The forms also let you revise the information you’ve entered, which is addressed by guideline 3.3.6.

Telstraeditentries

And help is available, but it’s not really context-sensitive, so improvements could be made around guideline 3.3.5.

Okay, so that’s the WCAG guidelines done. But let’s not forget the other standards we looked at last time: the BBC web content guidelines.

Applying the BBC guidelines

As we’ve seen, the Telstra site doesn’t avoid jargon — we could hardly expect it to do that entirely — but I don’t believe it champions plain English either.

The URL is certainly user-friendly (and SEO-friendly, fancy that!), but as we’ve seen, images don’t have any metadata, which is decidedly unhelpful. The BBC advises against generic link text, and as we’ve seen, this page does use some generic text — though that problem could easily be solved.

In terms of page metadata, the title is fine, and the description is also in line with the BBC standards. But the keywords include a typo, which I can only imagine is intentional, and done with a view to influence external search engines — a tactic which, we keep hearing, has long been useless since search engines decided to ignore the KEYWORDS tag.

keywwordtypo

How’s it looking?

So far, I’d say that the Telstra site only meets the WCAG standards where those standards represent basic web user expectations.

Things like site navigation, breadcrumbs, and telling users which fields contain errors in a submitted form are seen as essential elements of any website, and then, too they’re necessary to allow customers to find and buy the products this organisation is selling.

Unfortunately, Telstra hasn’t seen fit to go any further to help any users with any of the widely available techniques that so many other large organisations happily implement to help users access information. The fact that they’re including brand-name-typo keywords in their page metadata suggests that perhaps their web marketing team isn’t keeping up to date with current search technology.

If I were a writer on this page, I’d change:

  • keywords
  • generic links
  • image metadata
  • the lack of a glossary

I’d also do my best to convince the powers that be that the display of headings should reflect their programmatic hierarchy. Crazy? Maybe!

If you were the writer, what would you push to change? I’d love to hear your thoughts in the comments.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://onsman.com/ ronsman

    Interesting article, Georgina, but I think you’re being a bit harsh. First, Web Standards and WCAG are not interchangeable. WCAG is a set of guidelines for implementing web accessibility for people with disabilities. They’re not meant to to be a checklist, and they don’t represent Web Standards. Even accepting WCAG as a rule of thumb, I don’t think this Telstra webpage is too bad.

    In Text Alternatives, you say the three images on the right should have alt text. That’s debatable. They are all part of the same image-based display: clicking on the three pics on the right changes the main image display. They each have null text (alt=””), telling screen readers that they don’t contain meaningful content. Whether their function as a link to change the main image constitutes “meaningful content” is not clear (given that people using screen readers can’t see the images in the display), and WCAG doesn’t help. Significantly, the accessibility tools I use didn’t pick this up as an issue. In fact, the WAVE toolbar picks up just four errors on the page, such as that the search form at the top of the page doesn’t have a label. There are certainly other issues to consider, such as that some of the different images use the same alt text, which is confusing at best. But that’s also an issue limited to screen readers.

    It’s worth noting that if the main image display changed without user input, it would be considerd time-based media and therefore require user controls. Instead, Telstra has made the display user-controlled in the first place, which WCAG considers a good thing.

    The H1, H2, H3 issue is also a bit misleading. WCAG doesn’t suggest that all H3s on a page should be formatted the same way, just that the structure of headers is hierarchical, logical and consistent. In those terms, this page is OK.

    Your application of WCAG 3.1 is also a little off. “Readable” in this context doesn’t mean “able to be understood”, it means “the meaning can be conveyed to a person who can’t read the words”, typically by software such as screen readers. While WCAG does provide guidelines on explaining unusual words, expanding abbreviations, using words requiring no more than a lower secondary education to understand and providing a mechanism for how to pronounce words, these are all Level AAA, which is more aspirational than immediately practical. Level AA allows exceptions for “proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text”, which means referring to 4G and SIM on a page about mobile phones is considered acceptable (while not denying that a link to a glossary would be useful).

    All of which is to say WCAG isn’t even always the best checklist for judging web accessibility, let alone compliance with Web Standards.

    Finally, it’s reasonable to ask how many of the issues you raise are the responsibility of the writer. If the developers provide a funky widget that changes a main image by clicking on side images, shouldn’t THEY be making sure it’s standards-compliant? Can the writer even get at the code to ensure a form has properly labelled fields?

    It seems to me that Telstra has made a concerted effort to make this webpage accessible – and that counts for a lot. It’s certainly much better than a lot of what’s out there, accessibility-wise. I don’t dispute that there are aspects of the written content that could be improved, but WCAG probably isn’t the right tool to judge that.

    • Georgina Laidlaw

      A bit harsh?! Me?! Never ;)

      You make good points, Ricky: thanks for raising them :) While the WCAG and the BBC guidelines aren’t strictly web standards, for those of us communicating via text, they provide some of the closest things to best practices that we have. And for writers, they’re usually pretty easy to meet.

      It would take me seconds to implement the changes I suggested for this page (except a glossary—that would take longer, but then it’d also be extremely satisfying to do)—so why wouldn’t I do it? Why hasn’t Telstra done it? Taking these kinds of guidelines (as well as others, like house and language style guides) seriously as far as your text goes is necessary for those who want to be more than an “artist”, and actually be a competent professional web writer.

  • http://www.sovainfotech.com/ Sova Infotech

    As I writer, I also feel that it would have been better with the provision of more text. This could make the website much more user friendly as well.