2.4.2 Page titled

This is possibly the most obvious guideline but one that sometimes gets overlooked. I'm going to stretch it a little to cover more than just webpages. The actual guideline says:

Webpages have titles that describe the topic or purpose.

However, titles are useful for more than just webpages, so we'll do a quick run through of how this applies to documents that you might share online.

Webpages

Let's start with webpages. When coding in html, you have two main blocks of code: 

  • Head - contains information about the page and links to things like the stylesheet and any javascript
  • Body - the actual content that will be displayed on the page.

In the head, you should include a title tag. This displays the title of the page on the tab in the Internet browser. It works like this:

<head>
    <title>Portfolio</title>
</head>

And this looks like this:

Screenshot of the tab at the top of the browser, showing the title: Portfolio.

The key thing is that this title needs to be short and to describe what the page contains. Mine probably needs changing. I think I will change it so that each page has:

  • Finnberrys - Home
  • Finnberrys - Portfolio
  • Finnberrys - About Me
  • Finnberrys - Skills.

Word documents

For most people, this is going to be more relevant and more likely to be done wrong. By wrong, I mean in a way that screen readers can't access. 

How do you give your Word document a title? Firstly, does your title always describe the content of the document accurately and succinctly? Cryptic titles aren't always very helpful, even if they are clever. Once you've come up with a title, how do you make it look like a title? This is where we don't always think about accessibility.

Most people show a title (and subsequent headings) by changing the formatting of the font. You might make it bigger, bold, centred, etc. As a sighted person, we take in all that visual information, and without even thinking about it, we process it as a title. But a blind person can't do that. They need their screen reader to tell them it is a title, and that only happens if we structure it correctly.

Screenshot from Word showing the title, which actually is The Title, and that it is structured as a title on the ribbon at the top.

If you don't like the formatting, you can modify it by clicking on the little drop down arrow in the bottom right corner of the Styles and changing the font there. 

PowerPoint

When you first open a new PowerPoint, you get this default title slide. As with Word, if you don't like it, you can search through different designs or format it yourself.

Screenshot of the default PowerPoint title slide

The difference in PowerPoint is that you need to go into the Slide Master (in the View menu) to format it. At some point, I'll do a full session on how to use the Slide Master. I think it's quite simple but many people say they never use it. The point is, that is where you can change the formatting. Don't just delete the title box, as the chances are your new title will not get picked up by a screen reader.

PDFs

Okay, so this isn't ideal but when creating PDFs from Word or PowerPoint, often the accessibility stuff doesn't transfer nicely. You have to go in and manually fix a lot of stuff. I've just tried it with a really simple document and the title didn't even transfer. The problem here is that you need the paid for tools to fix it. So I have Adobe Acrobat Pro and this gives me accessibility tools, which enable me to fix stuff.

If you have it, go into the tools menu and scroll down to Accessibility. Run an accessibility check and then look for the items that fail. If Title is there, right click and choose Fix. Then untick the box that says, Leave As Is and put in a sensible title.

Screenshot of Adobe Acrobat Pro and the Description box where you can add a title.

Summary

It's common sense really... give your webpage, document, presentation or whatever a meaningful title. Then make sure you format it in a way that is accessible to a screen reader.


Comments

Popular posts from this blog

1.3.1 Info and relationships

1.1 Text alternatives

Alt text on social media 1 - Facebook