Transcript for making accessibility easier

Introduction

Matthew Deeprose: Thank you very much, Kristen. Hello everyone! Hopefully you can see my slides and I'm going to tell you or give you a little presentation in which I will hopefully not run over time, to tell you about some insights into a range of activities we've done that aim to make accessibility easier for our colleagues. Since I've got a lot to get through, we're going to keep questions to the end. I'm afraid I'm not going to be able to see the chat while I'm presenting but if anything goes wrong, Kristen please tell me and I'll try and fix it. So, let's get started!

Now you might be thinking, "we already made accessibility easier - we bought Ally". My experience is that after the initial rush of excitement, we start thinking about how to deal with certain edge cases or more difficult topics and questions are likely to come up once our colleagues and students really start using Ally. You might encounter resistance to yet another seemingly new and additional demand on staff time. So, how can we deal with some of these edge cases? And how can we make certain accessibility topics seem less burdensome and invite curiosity?

In this presentation I'm going to share

  • how he went about designing and delivering a webinar on writing alternative text for more complex images like charts and graphs, what went well, what we still have to do
  • an approach to helping colleagues make accessible on-brand colour choices
  • and one small step forward in terms of accessibility and organisational change

Alternative text for complex images

If you look at your ally institutional report, missing alternative text is probably one of your top two along with colour contrast. When you search for guidance online, it tends to be overly simplistic and quite repetitive often, with facile examples that don't account for the context of the images that our academic staff may use. Of course, you really need good alternative text to realise the benefits of Ally's audio format.

I'm going to open up the presentation we delivered, point out some aspects and challenges, and then I'll share some resources and discoveries, highlight some unresolved questions and explain my next steps.

I'm going to give you a light walkthrough of the session we gave and give a commentary on it. I'll be posting all of the links and they're also all on the Ally community site. I've hidden some of the slides: I'm just going to show you some some pointers.

When we started introducing the topic of course we mentioned the Ally audio format. I felt a good metaphor was that when you don't add alternative text, you're effectively censoring content - you're putting up that barrier to some of your users. Introducing the main way of thinking about it: consider the context, the audience and the function. Then we started with some light easy examples but then we started talking about charts and graphs. So, first of all how much do you need to write? Talking with a few different experts we came up with this decision workflow:

  • is it only for visual interest? That's decorative.
  • does it replicate text already in the document? Then adding a caption with some essential information, then marking [the image] as decorative should suffice.
  • Does it support text already in the document? Then brief alternative text is probably satisfactory, along with a caption or title.
  • But does the graph or chart go further than text already in the document? Then as well as having a brief alternative text, caption or title, we need to write a full description and provide the tabular data if relevant.

Then I went through three worked examples. Starting with this graph which is about how the cones in our eyes detect different shades of colour.

The breakdown of how you would approach that is: the title, the construction of the image, the summary or overview, and then providing the data. Then I gave and explained some examples like, "this is the title" and how I came up with that, then talking about the construction of the image, where we're kind of setting like the parameters and the boundaries of what's within the graph, and then having the detailed summary or overview, for example like saying like the m-cone starts at 390 nanometres at zero energy and so on.

So, then you're really describing what's in that graph. Then having that tabular data so that those that can't see the graph can really dig into that if they need it. We did the same then like saying what if what you needed was supporting text, that was already in there, then a suggested caption and short alternative text and describing that.

Then giving that same kind of walkthrough for a set of Venn diagrams and then a decision tree.

So, I'm just going to go back to my presentation. Here's a few resources that I used and I recommend. You've probably heard of Diagram Center. They have a really good YouTube video on describing complex images. It's really quite old now but it's still worth watching. They get through many different image types. The Northwest Evaluation Association has produced an incredible resource on writing alternative text for images that are used in assessments. How can you describe an image without giving away the answer? I expect many of you are aware of the POET training tool that has exercises you can follow to learn more about writing alternative text.

Those resources were all freely available. This next resource is amazing but has a cost starting at £400 per annum for access for three users. Textbox Digital's Described service provides worked examples of writing alternative text for different types of image, including step by steps of many complex graphs. I'm going to give you a quick demo.

So, this is Described. I've got a summary of different types of image. Then if I had selected graphs then I have different types of graph, and then if I go into the detail... for example this is a "box and a whisper plot". I've got an overview, then I've got the process, "how would I go about describing a box of whisker plot"? (Which I find hard to even understand what they're about at the best of times.) Then a brilliant worked example, and then a final example description based on the image type used. I think that's really useful and I'm planning to use that a lot more in the future.

So we've got to grips with how to write description of their complex images and we have resources that we can use that explain how to do it. The question that remained for me, which I want a good answer to before I'm going out briefing academics on this topic, is when we need to use full descriptions where do we put them in the document, be it a Word document, PowerPoint presentation, or something else?

Ally doesn't use speaker notes or hidden slides in PowerPoint, quite rightly, but those would have been fairly obvious places. One technique I've seen recommended is to put the full description in very small text and hide it off the slide or behind the image. I think that would be a faff [onerous] for "the jobbing academic" and would obscure the valuable full description from everyone apart from those using an audio alternative format or screen reader.

The answer seems to be to just include it in full on however many pages and slides it requires but I'm nervous that academics may see this as breaking the flow of their carefully curated materials. I plan to do investigations further on that topic with a number of academic colleagues and also through discussions with our Students Union who this year are really interested in digital accessibility. I'll be really interested to hear how others are dealing with describing complex images and where they recommend their academics place full descriptions within their resources that they upload to Blackboard.

Now let's take a pause. I'm going to have a drink and then I'm going to move on to the next session. Keep the questions for the end.

Colour contrast, brand insights

If alt text wasn't your top issue, then it's probably colour contrast. You might find that your academic colleagues try to use corporate templates for slides and documents, and almost everyone will at some point have to use their corporate brand colour palette.

In this section I'm going to review an older attempt to make this easier, some discoveries, and something new I put together this summer. You are probably aware of the brand colour matrix I've been using. I wrote a script that checks all the colours within a brand palette for accessibility and presents that information in a web page. I've done a few versions of this for more than twenty universities and colleges around the world. This isn't new but I want to share some insights that I found from using this approach and then demonstrate something new I've worked on over the summer.

In terms of insights one example is that of the twenty one colour s in our brand, only seven have sufficient contrast with white and two of those are different shades of black! White, of course, is the background colour commonly used in corporate templates, documents and Blackboard and so on. This makes explicit how our corporate brand wasn't designed with accessibility in mind.

Whereas with black I can use 11 other colours and they're much more fun colours like orange, green, yellow, and cyan compared with dark blue and magenta that I can use with white. This helped me to design this slide deck which uses brand colours. Looking at brand palettes in this way might help with designing dark modes for institutional services.

It also highlighted that two colours in our brand cannot be used with text whatsoever, only graphical objects - so ratio of 3:1, now those colours are dead to me!

Over the summer, I put this new tool together. With each selection of the randomise button, it fills a square with an "on-brand" colour, then adds some text with an on-brand colour that has a contrast ratio of at least 4.5 to 1 to meet the AA success criterion for contrast, and then three graphics / icons with three different brand colours that all have a contrast ratio of at least 3:1. Details like hex codes for colours, their vanity [brand] names, contrast ratios are shown for each combination. I'll give you a quick demo.

Here I have the tool. If I click on randomise... now I've got a background colour, there's the vanity name, it's picked out a text colour, showing details like contrast ratio WCAG rating and so on, and I can keep pressing this button to get new examples. I came up with this when I was making an infographic and someone said to me, "I've never seen that combination used before," which made me start thinking how can we find new and interesting colour combinations that we might not have used before? Some of these maybe I wouldn't use. Maybe I wouldn't use a graphic that was grey with a background that was grey, for example I've got a 3.291:1 contrast ratio. It would meet AA for graphics but I would probably still avoid it personally.

I've got some ideas for updates. First priority is to allow the colours to be changed so we can use any range of colours we want because right now it's fixed to my University's brand colours. Once I've got that sorted then anyone can use this tool for their colour set. Another aspect I'd like to work on is to allow the user to fix one of the colours, probably the background colour, and then cycle through accessible combinations for that colour only. It might also be useful to have an option to say only show AAA colour contrast options, only show AA and so on. I'm not super happy with the placeholder text and graphics I'm using in the example card. Perhaps I could add something more interesting and have it change with each roll of the dice? Since with WCAG 3 of course the contrast measurement is changing to the Accessible Perceptual Contrast Algorithm (APCA) I would like to use that too. As I showed in the demo, there's some combinations I wouldn't recommend even though they meet the WCAG 2.1 AA, but if I add on in addition an APCA check it's likely to filter those out.

By the way we've just added the TPGI colour contrast picker to our software center so those without admin rights can install it. We're planning a session soon about colour contrast and helping users to pick colours and check their contrasts will be much easier using this tool.

One piece of feedback from the brand randomiser I saw was my colleague Dr Eleonora Gandolfi saying, "we need more tools like this please," that made me think about the opportunities of hackathons to identify and prototype tools like the colour suggester that can make accessibility easier for our busy colleagues. So I'm working with our students union see if our computer science students might be interested in this.

I'm going to take a break and have a drink and then move over to the last section.

Accessibility inspector for everyone

The last topic I wanted to cover was about one small piece of organisational change. It's about the accessibility inspector in office. You're probably already using it. You can check for 16 different accessibility issues whilst you work in Word, PowerPoint and Excel. You can identify issues before you upload content to the VLE, which is check then by Ally. So, it's a touch less reactive.

The user has to turn on the check [accessibility] while I work option in each of Word, PowerPoint and Excel in the settings. So we made one small change: we've turned on the "check while I work setting" on all University match PCs using Group Policy. I've also got an implementation plan for this on my website if you want to try it at your institution.

We've been raising awareness of this. I'm going to be giving a quick overview of how we did this in a recent webinar. In terms of success, it's been quite interesting. I've already encountered people talking about it like it's always been there. We've been contacted by one of our executive governance groups seeking help to make their word templates more accessible.

Now I'm going to work through some of the webinar materials and just pick out a few elements that I think you might be interested in. Again, I've hidden lots of slides I'm just going to show you a little bit.

The way that I introduce it is saying, "what if you could make your stuff more professional, improve your Blackboard efficiency, make the world a better place, and that was easy"? Note, I haven't used the word "accessibility" and I try not to use it in any of the advertising materials about it, to get more people to come to the session. Then I start talking about the accessibility inspector... [it] runs while you work, makes things better... and then we gave a set of examples in Word, PowerPoint and Excel of using accessibility inspector to fix things.

One of those things was about table headings. I used this example I'm going to show you in a moment which was inspired by a demo that Nico gave at one of the TLCs [Teaching and Learning Conference]. Hopefully I've shared sound and hopefully you will hear this.

Computer: Begin table with three columns and three rows. Row one of three. Column one of three. Superhero. Column two of three. Skill. Column three of three. Nemesis.

Row two of three, column one of three. Batman.

Matthew Deeprose: So, there we are showing... if this is a big table imagine how confusing it will be to keep following that? Because of course, I haven't added that column header information - it's only there through visible formatting.

Computer: Begin table with three columns and three rows. Row one of three. Column one of three. Column heading Superhero. Column two of three. Column heading Skill. Column three of three. Column heading Nemesis.

Row two of three. Column one of three with column heading Superhero, Batman.

Matthew Deeprose: So, now it's showing when you add the column headings then you can keep track of what's going on and you can start to immediately hear the benefits. Again, focusing on the Ally alternative format. Of course you've got to make this work - you've got to untick "allow row to break across pages" and tick "repeat as header row" which is a bit of a pain. I hope that we can find a way of making that a bit less obscure and niche.

We did similar with explaining reading order. I'm not going to play this, but we started with a slide with a set of pictures where of course the reading order was wrong. We played the audio example from Ally which had making a cup of tea in completely the wrong order, then we fixed it and showed how with the right order then the audio version makes sense.

So, I'm just going to go back. We're reaching our conclusion now. So, let's... I just need to find the right slide.

Okay I think I've got a bit lost here but I'm going to come back and we're about to finish so I've got one last bit of questions that I kind of wanted to raise and I've lost my speaker notes, so I'm sorry to the captioner, I'm going to have to speak off script for a moment.

We know that with PowerPoint tables [in Ally] you can't get the header information read out with the audio version. I raised a ticket about this last year and was told it was due to the way that LibreOffice is set up with Ally. They [Anthology support] said they reported it to LibreOffice but I haven't heard anything. One of my worries is the more that we show the benefits the more people are going to find those edge cases that I still can't resolve.

Also, how can we get Ally to read a table like this properly? How can I get ally to read not only the column headers but the row headers? You can do that in HTML with a screen reader but I can't yet find a way of making that work with Ally.

Also, on the topic of the audio format, we haven't heard much about audio playlists or breaking that 100,000 limit that prevents us from making larger audio formats.

So, what have we covered?

  • I showed you what we went through with alternative text for complex images, some of the challenges, the questions, and some of the resources.
  • We showed you an approach to helping make more accessible colour choices.
  • And one small step in terms of organisational change by making that accessibility inspector turned on for all University managed PCs.

Thanks very much for listening. I hope I haven't run over time too much. I'll hand back over to Kristen who can perhaps round up some of the questions or any questions from the chat, and we might have some time to discuss before we hand back over to Andy and Karen.