Finnberry does Ed-Tech

It's been a while since I last posted about PDFs. However, as part of my handover at work, I've been creating some video resources about how to tag PDFs. This is by no means an exhaustive guide, but hopes to introduce several different types of tag and how to create them. Headings and paragraphs Most of the text on the page is likely to be normal paragraphs. Normal text is marked up using a paragraph tag. Headings should also be marked up. Formatting alone is not enough. Headings should be nested correctly, beginning with <h1>, and not skipping any headings. This will be explained further in the video. Lists When we see a list on a page, it is obvious that it is a list. We can immediately see how many items there are and where each new item begins. For a screen reader to give this information, lists need to be marked up correctly. This video will show you how. Tables Tables should only be used to present tabular data or information. Never use tables for layout. (I may hav...

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, so...

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 ...

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...

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 - ...

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 cha...

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....

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.

Like my last post, I'm going to cover the wider section and gloss over the subsections within it. This guideline says: Do not design content in a way that is known to cause seizures or physical reactions. I would like to hope that in 2021, people are aware that flashing lights can cause seizures for people with certain conditions. From personal experience of photosensitivity, they can also trigger migraines. Who knows what else?  I would question why you would use flashing, given that this is known to be problematic but like the safety note on suppositories that tells you not to take them orally, you know someone is trying it. PowerPoint I have to confess that I'm not the greatest fan of PowerPoint. I was a primary school teacher back in the day when it was all new and exciting. Y6 children (initially) were taught how to use PowerPoint and then gave endless presentations to their class, the school, the staff, different classes, etc. They made all the rookie errors, because we (...

I think this is a very simple guideline: Provide users enough time to read and use content. Most of the sub-guidelines in this section are about web pages that include forms. I remember getting caught out by several of these, donkey's years ago, when we had dial-up Internet. I would contribute to a discussion and by the time it had sent, it had timed out. Even now, if I type a large forum post, I tend to copy it (ctrl+C) before clicking the send button... just in case it times out. Timed content I am really not a fan of timed content. One of my predecessors at work had a habit of setting timings in their eLearning, so that the user couldn't progress without reading the slide. It would drive me mad! I read quickly and I would read it and then have to sit and wait to move on. So irritating! When we lived in Finland though, I had the opposite problem. Anything I have to/had to read in Finnish takes me longer than it would take a Finn. Reading in a second language is often slower t...

In this post, I'm going to explain how I solved the problem of my photography portfolio not working with keyboard navigation. Previous/next buttons If I was navigating by keyboard, I would expect the next tab after the menu to take me to the previous and then the next buttons that sit half way up my photo. So I had a look at the html for those and this is what I found: <a class="prev" onclick="plusSlides(-1)">Prev</a> <a class="next" onclick="plusSlides(1)">Next</a> For those that don't speak fluent html, the <a> tag is what tells the internet browser that the text or image that follows is going to be a hyperlink.  Initially, I just saw that they begin with an <a> tag and thought that should be fine but I did notice that the <a> tags don't have an href element and that is odd. Maybe that is the problem. I wanted to be sure that this was the problem, so I googled it and found one of the top sol...

For this guideline, I am going to use my own website. I have been revamping my porfolio website to update it but also to provide more examples of my work and some better functionality. I recently updated my colour scheme and (obviously) checked that it all met WCAG guidelines.  The most recent piece of work, has been to develop some photography pages. These are organised by theme. Although I have ensured that all of the prior content meets WCAG guidelines, I have just checked the photography pages and they fail this guideline.  Keyboard Guideline All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints. So, if you visit one of my photography pages and try to tab through, using the keyboard, you will soon spot the problem. You will notice that as you hit the TAB key, the dif...

 I have skipped the last few in the previous section because they were mainly to do with HTML and CSS issues, which the vast majority of people don't work with... unless they are developers, in which case, they should be able to read the guidance and put it into practice themselves. So I have jumped to the next section, section 2, which is about operability . Basically, all user interface components and navigation must be operable - be able to be used. The first guidelines in this section address keyboard navigation. All functionality should be achieveable by keyboard only. That means... unplug your mouse and check that you can still use whatever it is you have designed. Challenge Before we start delving into the specifics of this one, I would like to challenge you to live for a day or two without your mouse. Unlug it! Put it in the drawer. Do everything with your keyboard. Why is this important? Because you will begin to understand some of the challenges of keyboard navigation. Yo...

This is another of the guidelines that I face almost every time I am asked to check a document for accessibility. The guideline says: If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text. There are a couple of exceptions, such as text that is part of a logo, but in general, you should really give this one some thought.  Images of text??? What are images of text and why would you use them? It sounds a bit weird at first, but I'll bet many people do this. Have you ever taken a screenshot of something to use in a document or a web page or as part of a social media post?  I recently had to fix a document and several of the pages were screenshots of a pdf. There were a few icons but the bulk of it was text. By taking a screenshot, you effectively take text and convert it into an image... an image of text.  Here's an example of an image of text: It's only when you really think about it, that you realis...

This one should be quite quick and I was tempted to skip over it but maybe there is something to raise awareness of... It says: Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential. The only place where I regularly see an opportunity to restrict the orientation to a particular display is in Storyline, the software where I design most of my eLearning. I don't think I've ever used it though. Why would you want to restrict a person's choice?  What I do want to make you aware of is that in some editors, Blogger included, you can preview and see how it would appear on different devices and different orientations. I find this quite useful just to check that my posts are readable in all displays, especially if I'm using pictures or video.  So, there are six icons. Let's go through each one and what it shows. 1. Monitor - this shows what you would see on a normal c...

The guideline says: Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, colour, size, visual location, orientation, or sound. What does that mean? We come back to colour in more detail in a later guideline but this one is really very general. It refers to any item on the page that isn't text or a described image... things like navigation buttons, ways of categorising, making choices... anything where the user has to choose based on a colour, a shape, where something is on the page... that kind of thing. What do I need to do? This could be misinterpreted as an instruction to avoid the use of colour, shape, position and so on... but all it really is, is a reminder that you need more. You can have an arrow at the bottom of the page for your next button, but just make sure it is labelled in such a way that a screen reader can read it. It may need alt text, for example. I think one of the worst offender...

The guidance states:  Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. What does that all mean? It basically means you need to stop and think about what information you get by seeing and consider how someone with a screen reader will get that same information. The structure of a document or web page is easy to get, if you can see. When we look at a page, headings are often on their own line, bold, bigger than the rest of the text. Lists are usually indented and have a number or a bullet point in front of each item. Paragraphs have a larger space between them than normal lines. Hyperlinks are usually underlined and/or in a different colour. These are all things that you see .  What about people who can't see? How would they know what is a heading, a list item, a paragraph, a hyperlink, etc? The only way is if your document or web page is structured correctly an...

When I posted my previous post, asking for a volunteer to do be my audio description voice, I wasn't sure whether anyone would even read it, never mind volunteer. I was so excited when a friend on Twitter contacted me and her daughter, Alice had offered to record the audio tracks.  I have to say, she has a really good voice for audio work and I think the finished product is really good! I was surprised at how easy it was to do. I just dragged Alice's audio files, which she had recorded from my last blog and named very logically, onto a new audio track in the time line. I had to increase the audio gain to make her clips a little louder but the quality was such that this was fine and didn't cause any problems with extra noise.  Anyway, enough of me. Here is the final version with audio description:

 This guideline is given at all three levels: 1.2.3 Level A - provide audio description or a text alternative 1.2.5 Level AA - provide audio description - this generally fits between existing audio/dialogue 1.2.7 Level AAA - provide extended audio description (this is where the video pauses to give more information to the user in a longer audio description that wouldn't fit neatly between existing audio Audio description (AA) Unlike captions, which YouTube helps you to do, audio description actually involves some planning and a fair bit of extra work. I confess, I have never attempted to do a video with audio description as it seems a daunting task. Maybe now is the time to have a go! Choosing a video This is where I realise why I haven't considered making an audio description yet. Most of my recent videos are instruction videos and I'm kind of giving the information as I go. With hindsight, I could have probably planned them with more thought for those that can't see t...

Listen to this post by audio Or click here for the transcript