Category: A11y

Schema.org name vs headline

I’ve been tasked with adding schema.org markup to a website, which is something I’ve known about for quite a while, I even added some to OngoingWorlds, although still don’t really know what the benefit is apart from the obvious company name, address, opening hours, telephone number etc which I assume is what gets used when showing a company at the top of a SERP, or on Google maps. Useful for some things, like restaurants you’re googling, but not others.

Another example of data I assume comes from this sort of data is cinema times, and probably e-commerce website data showing on the Google “shopping” tab.

But that’s about all the examples I can think of, even though there’s looooads of different types of metadata you can add, including fictional characters in stories, accessibility hazards, audience, quests in games, and loads of others – problem is, if these aren’t presented in interesting or useful ways like the restaurant result example, then what’s the point?

There seems to be some duplication too. I was marking up the blog articles template (blog on schema.org) with things like author, publishedDate etc, (which are useful), but there’s also a headline and name.

Description of headline:

Headline of the article.

Description of name:

Text – The name of the item.

I wouldn’t be so bothered, but Google’s structured data testing tool is marking the lack of name as an error in red. Not sure how serious that is, but it’s RED!

Google structured data testing tool result showing errors

I’ve had a look at other examples, and The Guardian uses itemprop=”headline” on it’s main article title, ignoring name completely (hey they also use BEM, thats cool!). The Independent uses headline too, so I’m going to do what they do and ignore name.

Although, there’s a discussion on W3C to deprecate headline completely, in favour of name, which is more standard. So I don’t know what to believe!

The difference between <a> and <button> elements

I’ve seen some markup recently where the <a> tag is being hijacked to do things it shouldn’t be used for, and where a <button> should be used instead. I was going to write a long article about the difference between a HTML <button> element (used normally to DO something), and the HTML <a> element (used normally to take you somewhere else) but I saw this great answer to a question on Quora by Jakob Persson who sums it up perfectly:

This has to do with the semantics of HTML.

An A tag is an anchor element and in the context of hypertext, helps link documents together. HTTP stands for “Hypertext Transfer Protocol” why hypertext is one of the foundational ideas of the web. The word “web” is a metaphor for this network of pages which all tie together, like a spider’s web.

A BUTTON is exactly that, a button. It doesn’t denote there being a relationship between the current document and other. It just says that it is a UI element which you can click.

CSS allows us to style things to look identical. But it doesn’t change the semantics, i.e. the meaning of different HTML elements.

In summary:

  • If your element links the user to another page, then it should be an A.
  • If it’s a UI element that triggers JavaScript, make it a BUTTON.
  • If you want your site to “fail gracefully” when JS is absent, use an A tag that links to a page that relies on a server-side script and attach an event handler to it for the JS functionality.

– Jakob Persson

Some awful #darkpatterns

I’m always on the lookout for examples of horrible examples of interfaces, especially websites with terrible user interface. I hate terrible user interface, in fact it’s more perverse than that, I LOVE to hate terrible user interfaces.

Really bad user interface that’s actually intentional is called a dark pattern. This is something that’s deliberately intended to mislead the user.

A colleague of mine found this example of a dark pattern recently and screenshotted it:

Constantly switching the context and switching positive and negative actions makes it confusing. 

 

Here’s another with confusing negatives intended to catch you out:

I think the worse example of a dark pattern is on the RyanAir website, where there’s a section asking if you want travel insurance. You don’t HAVE to buy travel insurance from them, but the way to opt-out isn’t all that obvious. You have to find the “Don’t insure me” option hidden amongst the countries of residence:

ryanair-website-ux3

I wonder how many people have unnecessarily bought travel insurance because they didn’t know how to opt-out?

You’ll find more stuff like this tweeted as #darkpattern and I’m going to try and opost any I find here under the category dark pattern.

Mystery meat & hidden salad

Mystery meat – A term given for an option that you don’t know what it’ll do until you choose/select/click it. The metaphor as I underswtand it: You’re choosing tinned meat, but don’t know what’s inside until you buy it and open it.

I especially hate this used in navigation, where in recent years it’s become common practice to replace words with icons, to easily translate the interface into different languages, and fit more onto the screen for mobile.

Hidden salad – I went to a resetaurant recently and asked for a side salad with my burger instead of fries. The burger wasn’t supposed to come with a salad, so I expected to pay extra. As it turns out, the salad WAS a legitimate option, but a hidden one.

“Hidden salad” is what I call options that are valid but completely hidden from the user. Similar to mystery meat but instead of being presented with a cryptic option, you’re not given any option at all until you discover it. This is used especially in interfaces where you have to type, like command-line tools (which I especially hate). Or a more fun use might be Google’s hidden easter eggs.

WordPress have ditched the title tag in links

WordPress have previously always asked for title text when adding a link, but from version 4.2 they’ve abandoned this.

LinkmodalChange…Which is quite a good thing imo.

I wrote an article about how bad the title tag is for accessibility, because some web developers assume this is read aloud by screenreaders, bit it isn’t. I wrote an article about this here: I thought title tag improved accessibility, I was wrong.

I learned this after pretending to be blind for a week, and learning how to use a screenreader. I learned loads, and recommend every web developer to do the same!

Image above is from this article which is where I was first alerted about WordPress’ change.

 

Don’t do “skip to content” links wrong

In the last few months I’ve been doing a lot of research on how blind users use webpages using screenreaders, including spending a lot of time blindfolded and using these for myself. I discovered a few things, and found that a lot of what I thought was true, were actually myths. Continue reading Don’t do “skip to content” links wrong

Why splash pages suck

barrier

Splash pages are quite old hat these days, but occasionally you will see a site that uses them. Sometimes there are legitimate reasons for using them but these occasions are rare, and the splash pages are just an unnecessary obstacle that stops your users from getting to the content in your website.

Splash pages can be more than just slightly irritating, they can turn users away before they even get to the content of your website, and they can have severe negative impacts on your site’s SEO.

The worst types of splash pages

  • Flash animations or video – There used to be a trend that websites would force users to watch an animation before they were allowed to see the full website. This can irritate users as they have to watch the animation before getting in to the site they want to see.
    Also an animation might start to play without any user input, not great if embarrassing sounds start to come out of your speakers. And it’s even worse for the user if they can’t skip this – see below.
  • Where the user can’t skip – Sometimes a flash page will have a long animation or video, and won’t have any ability to go straight to the rest of the site until the video or animation has finished. This forces the user to sit and wait before they can get to the content they’re really interested in. Also not providing a link to the rest of the site is incredibly bad for SEO, which we’ll explain about below.
  • Where the link to get into the site is not obvious – Your visitor wants to move onto the next page, but the link they have to press isn’t obvious. If this takes too long to find they’ll give up before ever reaching your site.

It’s not user friendly

On your website it’s very easy for your visitors to leave. If they’re not having a good experience using your website, they might just give up and go away. When you create websites you have to think about your audiences and how they will navigate your site. If a splash page prevents them from getting to the content they want, they’ll get annoyed and so will be less likely to buy your products or services.

If your splash page uses technology like Flash or Javascript, remember that not all users will have these enabled on their computers, and so might not see your splash page at all.

No content on your homepage

The classic splash screen will be an image, logo, or animation and won’t contain much text. This doesn’t give your users much to read, so they might well be left in the dark about what your site represents. You might think that your 2 minute animation or video clearly explains your website and your services, but you can’t be sure your users are going to stick around to watch it all.

Users on slow connections have to wait longer

If your splash page has an animation or video, chances are that your user might have a slow internet connection and have to wait for this to load. This increases the time your potential customer spends waiting before they can get into your website.

Splash pages are bad for SEO

Splash pages can have a negative impact on your websites SEO for many reasons.

  • No text on the homepage – If your splash page is just an image, video or flash animation with no text on the page, this reduce your chance of ranking well in search results.
  • Difficult for search engines to index the website – A splash page makes it more difficult for search engines to index beyond the splash page. This is especially true if the link to the homepage is kept within the flash or within the Javascript, which means that search engines won’t even be able to discover the other pages of your site. You can counteract this problem these days by providing an XML sitemap which will give Google knowledge of all your pages, but ideally you want to make it as easy as possible for your site to be indexed. Also if Google can’t index your site, neither can website analysing tools like Nibbler.

Bounce rate is high

Studies of splash pages show that the bounce rate (the percentage of visitors leaving after seeing the page) is higher than on pages with standard content.

Think about what your customer wants

Imagine your customers, and try to think about what they want to get out of your website. They might be looking for information about your company or product, or they might be an existing customer who wants to find your address or phone number. With a splash page you’re effectively putting an obstacle in the way of them getting to the information they want.

Content from the splash page could just go on the homepage

There’s really no reason to show a splash page and a homepage, there should ideally be just one page. The advantage of this is that the homepage has links to all other sections, rather than just one which says “click to enter”.

Instead of having a splash page, put the important messages on the homepage. At least then if the user is only interested in a certain page on your website, they’re only one click away rather than two.

There are exceptions for splash pages

Every website is different and you might have a valid case for using a splash page. These reasons might be:

  • To display a specific message to the users, which could include an important update to the website, or some information that is crucial to show before they visit your site.
  • To display an important disclaimer about the website, for example it contains adult content or something that you don’t want certain people to see.
  • Users are required to set their language or location. Although there are better ways to do this automatically, without the user needing to take any action.
  • Additional advertising. Drawing attention to a new product.

There are some legitimate reasons for using splash pages, but it’s not recommended. If you’re absolutely certain you want to include a splash page, make sure you use some website analytics to track how many visitors are not through to your homepage.

If you really want to use a splash page, follow these tips:

  • Add a clear link to skip the page.
  • Make sure the link is in the HTML and not in Flash or javascript.
  • Check your website analytics to see is any users are being turned away by your homepage.
  • Make sure you have at least some content on your splash page, rich in keywords for search engines.