Posts

PFD Accessibility - fixing tags and reading order

Image
There are two possible problems with the tags in a PDF. The first is that the document is untagged. This means that no tags have been given and therefore a screen reader will have to get information in some other way. The second is that the document is tagged... maybe it has been automatically tagged when created from Word... but the tags are not quite right.  This can happen when the Word document or PowerPoint that the PDF was created from, wasn't checked for accessibility, but there are other things that can affect it too. It is always best to check the tags.  In the video that follows, I have deliberately kept in some of the things I tried that didn't quite work, to show you how to overcome them. It is a longer than usual video, but should give you a good overview of how to check and fix tags. Fixing Tags Tags determine the running order of a PDF when it is read by a screen reader. So the most important thing is that all the items are in the correct order. In the video, som

PDF accessibility - title

Image
One of the most common errors that comes up in a PDF accessibility check is missing title. The video that follows assumes that no title has been given.  To check the title, you can click on File ... Properties and see if anything is in the Title field. If there is but it is still flagging as an error, you have two options: 1. If the title is correct, close the popup, right click on the title error and click Fix . 2. If the title is wrong, delete it and then follow the instructions in the video. How to add a title This video includes a preview of what JAWS (screen reader) reads before and after we have fixed the title. Before, it reads the file name. In my case, when I saved the document, I gave the file a sensible name... but just imagine if JAWS was reading the default download filename with those %20 bits in. Horrible! Just a quick word about the quality of the screen recording. I'm experimenting with a few different screen recording tools. I've recorded this one using Vimeo

PDF accessibility - how to check

Image
We've been looking at WCAG 2.1 and how to ensure that your content meets these important guidelines. We haven't finished yet but I'd like to branch off on a little tangent and take a more detailed look at PDFs and accessibility. This is quite complicated compared to using Microsoft Office and it requires some specialist software. Most people are familiar with Adobe Acrobat - the PDF reader. For accessibility work, you really need the Pro version of Acrobat. It comes as part of Adobe Creative Cloud or you can buy a single product licence.  Accessibility Tools Accessibility tools are not turned on by default, so you'll need to go into your tools tab, scroll down and add Accessibility to your tools pane. This will give you an accessibility checker, which will analyse your PDF and identify any errors and warnings.  Errors usually include things like missing language, title, alt text and tags. Warnings are usually things that need manual checking, such as colour contrast. Vi

2.4.3 Focus order & 2.4.7 Focus visible

Image
These two guidelines seem pretty similar. They actually follow on from each other but the former is an A level requirement and the latter, AA. What is focus order? Focus order means that as you tab through a website, the interactive items (links and buttons) that you go through, are in a logical order. Usually, this just happens automatically, especially if the website is quite simple but there are situations where it goes wrong. We recently got new HR and benfits systems at work and I was involved in user testing. One of the main things I test for is keyboard navigation. This was really odd! There were tiles across the screen, and each one was a link to a particular benefit... but when you tabbed through, the order was completely random! They went back to the supplier of course, and it got fixed.  Reading order Reading order is important in PowerPoint. I was sent a PowerPoint presentation to check this week. The author had actually done a really good job of things like alt text - amon

2.4.2 Page titled

Image
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: The key thing is that this title needs to be short and to describe what the page contains. Mine probably needs chang

Alt text

Image
I have already covered this guideline (back at the end of December) but in the last few weeks, it has cropped up in some of my work. I have been really encouraged, over the last year, to see the commitment my main client has towards meeting WCAG in all their content. They have invested in training for their staff, to ensure that any new content is accessible. It has been fantastic to see the efforts that individuals are making too. Though, naturally, not everyone gets it right all the time (including me). One of the common areas where I have seen mistakes recently, is in alt text. Some of the things I have seen are: Missing alt text (though this is now rare) Automatically generated alt text that is incorrect or inadequate Images incorrectly marked as decorative Images that are not inline with the text. However, the one thing that I get asked most about, is what to write. People find it very difficult to write alt text that is descriptive enough and gets the intended information across.

2.4.1 Bypass blocks

Image
I thought this one would be easier to show than write about, so I made a 10 minute video. Hopefully, it also gives you an idea of how Dragon works, as well as what this guideline is about and how to achieve it.