Transcript for Making accessibility simpler in Higher Education and beyond!

A "Lunch and Learn" session at TechSharePro 2022 delivered on 16 November 2022.

• Presentation recording
• Presentation resources

Welcome

Hi everyone, I'm Matthew Deeprose from the University of Southampton.

Welcome to this Lunch and Learn at TechShare Pro 2022 titled, "Making Accessibility Simpler in Higher Education and Beyond". I'm a white male in my mid-40s wearing a pink shirt with a black jacket and matching pocket square. My pronouns are he / him.

About me

I've been working in Higher Education IT for more than 20 years. Since I found out about The Public Sector Bodies Accessibility Regulations 2018, I've been learning about accessibility, finding opportunities to put it into practice and looking for ways to share what I learn with others.

Some recent accessibility projects I've been involved in have been:

• refreshing our Virtual Learning Environment to have an updated, on brand theme that meets and surpasses accessibility guidelines as much as possible,
• designing an Accessibility Testing process,
• running our Digital Accessibility Community of Practice,
• and designing and delivering accessibility focussed webinars.

We use Blackboard Ally and I've recently become co-chair of the European Blackboard Ally User Group. I'm also a member of the UCISA Diversity task force.

You can find out more about me and the work I'm doing on my website at matthewdeeprose.github.io. You can find my LinkedIn, Twitter, and YouTube there, feel very free to connect with me and give me feedback on this session.

Please use the Slido to ask questions. You can also find a link in there to the dedicated captions from StreamText. You should also be able to pin Tim and Bridget our BSL (British Sign Language) interpreters. Alright! Let's get started!

Introduction

In my work, accessibility is about removing barriers that might prevent people from making the most out of our organisation's digital estate. In particular for those with disabilities, or impairments, be they permanent, situational, or temporary. This is particularly important within the educational context, because education has a significant impact on our lives.

Thinking in terms of removing barriers can sound quite simple. But we will find complexity and puzzles to solve, first for our own understanding, and then for how we can explain and empower our colleagues to take action on removing those barriers.

For me, the key is finding a set of steps we can use to solve these puzzles.

So, in this session, I'm going to use examples from my recent work to show how I've attempted to answer some of these questions.

• How can we demystify writing alternative text for complex images like charts and graphs?
• How can we simplify accessible brand palette colour choices?
• And how can we amplify engagement with accessibility within our organisation?

Since this is a lunch and learn session, I'll be sharing links and resources, some of my own and some from others in the accessibility profession. You might have heard of some, but hopefully there will be something new and interesting for everyone and if they are useful, you can use them straight away.

I'm aiming to give you lots of resources, and at the end of my presentation I'll do a "quick fire" run-through of other resources I recommend, that can help to demystify, simplify, and amplify.

I'm speaking from my experience working in Higher Education Information Technology, but to a greater or lesser extent, everything I cover today is likely to be useful for any organisation.

The slide deck and all the resources I'll be discussing are available from my presentation web page. You can reach it at this address: go.soton.ac.uk/tsp. The link also appears in the footer of every slide.

How can we demystify writing alternative text for complex images like charts and graphs?

First, let's look at writing alternative text for complex images like charts and graphs. How have I tried to demystify that process?

Missing or poorly composed alternative text is one of the top accessibility issues affecting learning content at my University. It's also the second most common accessibility issue that the Web Accessibility in Mind (WebAIM) organisation found in their survey of the million most popular web pages.

There's also lots of good examples out there, but when you do a quick Google search, you might find fairly basic guides that use quite simple images as examples. It can be difficult to find advice around those more complex images we might use in education and elsewhere.

Writing good alternative text is really important. Many Universities use systems such as Blackboard Ally or Sensus Access that provide students with alternative formats, such as an audio version. Good quality alternative text really helps students to get the most out of alternative formats.

We recently designed and ran a thirty-minute session about writing alternative text for images, charts and graphs. We covered six examples, from basic images to more complex ones like graphs, decision trees, and Venn diagrams.

Rather than go into detail about the session because you can review the recording, slides and materials online in your own time, I want to highlight which resources were really useful for me in creating the session.

Now, Diagram Centre have a really good YouTube video on describing complex images. It's quite old now, but they get through a lot of different image types. The Northwest Evaluation Association, NWEA, has produced an incredible resource on writing alternative text for images that are used in assessments. So how can you describe an image without giving away the answer? That's an incredible resource if you write quizzes or assessments. Many of you will be aware of the POET training tool that has exercises you can follow to learn more about writing alternative text. If you've not come across it before, I recommend it.

The previous resources were all freely available. This next resource is amazing but has a cost, from £400 a year for access for three users. textBox digital's "described" service provides guidance and worked examples of writing alternative text for different types of image. On screen I'm listing the types of image they cover, examples include Diagrams, graphs, Illustrations, Maps, and scientific images such as circuit diagrams. I'm now sharing a list of examples from the graph section. This includes area charts, box and whisker plots and dot plots.

When you select an image type, Described provides an overall set of guidance, a step by step process, and a worked example with final complete description. Once you have a process you can follow it really helps you to unlock what once might have been a mystery and can make it seem simple.

Some high-level strategies for all descriptions are to consider the context in which we use the image, our intended audience, and the function or purpose of that image. You might write different descriptions for the same image as the context, audience, and function changes. For more complex images, a full description should include the title, the construction of image, a summary or overview, and a data table if relevant.

So even if you have some really complex images you need to describe. There's lots of resources out there that can help you. Of course, even with a structured process, you still need the subject matter expertise once you get to writing the descriptions.

Next, I'm going to speak to the question of how we can simplify making accessible colour choices.

How can we simplify accessible brand palette colour choices?

Insufficient colour contrast is the most prevalent issue reported in the WebAIM million. It's something that's so easy to get right, but you have to know about it.

As many will know, the Web Content Accessibility Guidelines state that with a contrast ratio of 3:1, that's the minimum level of contrast for graphical objects like icons. A contrast level of 4.5:1 is the minimum for text. 7:1 and higher is the minimum for text when we want to reach the AAA level of accessibility. For someone new to accessibility, this can seem a bit intimidating, if someone just wants to use our brand colour palette, how can they make accessible choices easily?

Most organisations including Universities, have corporate colour schemes, aligned with their brand.

They are likely to be part of PowerPoint and Word templates with brand colours included in the theme. Websites and online applications are likely to use the brand colours, not only for content, but for the whole user interface, including hover states, focus indicators and so on.

Yesterday, Heather from Sky Scanner was saying about or talking about the work that they had done to create a new brand colour palette that was more accessible.

When I was redesigning the colour theme for our virtual learning environment, I was frequently looking up the contrast ratios of colours from our brand. To save me time I built a look up table with all 441 possible colour combinations. Overtime I turned this into a web page.

To zoom in and give you a clear understanding. The same colours are in the same order for both the horizontal and vertical axes. Where two colours meet the table shows F, if it fails all contrast criteria. G means it can only be used for graphical objects, AA means that as well as graphical objects it can be used for text, but only at the minimum AA level, and AAA means it can be used for text at the enhanced level, as well as for graphical objects. I've been using that a lot and so have a number of my colleagues that's become more and more popular over the years since I put it together.

To give you one example of how I've used this colour matrix. The past couple of months I've been creating some infographics. To make them more visually interesting I've been using vector-based stock images such as this one on screen which is a slightly abstract illustration of a computer screen with a woman holding a settings symbol and a file transfer symbol.

To make these images more congruent, I recolour them using my university's brand, and the matrix helps me to pick colours that have sufficient contrast with each other. This is a small part of an infographic I'm producing that explains our pilot process for new Educational Technology tools.

Since I wrote a script to create the colour matrix, I can feed it with the colours of any brand, so if it would be useful for you there's info on my presentation web page about how to request one for your brand.

A few months after making the script, I found that others had the same idea and have similar tools online, and if I'd have found this out before, I probably wouldn't have gone to the trouble of making my own.

On screen is the Accessible Colour Palette Builder and a tool called Contrast Grid that offers very similar functionality. Note that while I've tested my own content for accessibility, I haven't tested the third party site that I'll be sharing in this presentation. I've got links on the support site to both of these tools. I'm going to give you a quick demo of Contrast Grid. Now I'm going to try a live demo. Wish me luck!

I've just got to find my web browser. Here we are, and I've got to find my list of colours. Here is the Contrast Grid website. From a notepad, I'm just going to paste in all of the colours from my brand colour scheme. Now you see it instantly. It created a very similar matrix to what I showed you that I had made, where I've got all of the colours, and I can see do they have a "AA", "AAA"? Could they be used for graphics, or should we just not use them at all?

I'm not so happy about how this isn't responsive, so it's not going to work very well on mobile phones, but it is really fast, and if you want to have a quick check, you probably will find that very useful. I'm going to go back to my slides now.

The colour matrix might still be a bit too intimidating for some. I'm always looking for approaches to invite curiosity with accessibility and make it more approachable. A couple of months ago, I was working on another infographic, and a colleague mentioned, he hadn't seen one of the colour combinations that I'd used before, so I had an idea for a colour randomiser that would offer an accessible colour combination from our brand. It will give us one background colour, one text colour, and three colours for graphical objects. I'm just going to show you that now.

I'm just going to change to my browser, and if I just refresh this page, I've got a bit of an introduction, and now when I select this Randomise button, it will pick a different background colour, text colour, tells me the hex code for that colour, the contrast ratio, what WCAG criteria would it meet, in this case AAA, and then for graphic colours, this could be anything from 3:1 and higher. So, here I've got a grey colour, Neutral 1, because of course we like to have abstract names for our brand colours, and it's showing me the contrast ratio, and again for the other three. Then as I select the Randomize button, it's going to give me a whole set of new choices from there. I'm hoping that approaches like this can help to both find new combinations that we might not have used before, and also just to make it something a bit more interactive and approachable in terms of helping our colleagues to make more accessible choices. I'm going to go back to the slide deck now.

There are other useful tools out there. You may find yourself wanting to use a colour combination that does not have enough contrast, how can you find a colour that is a close match which does have sufficient contrast?

On screen I have screenshots of two tools that can help you with this, the Tanaguru Contrast Finder, and Colour Safe. I'm going to show you the Tanaguru Contrast Finder.

I've just gone to my browser. I'm at the Tanaguru contrast finder page, and I want to use a white text with an orange background. This colour orange is from the University of Southampton brand, but I already happen to know that this isn't going to have sufficient contrast for the use of text. I want to aim for at least a 4.5 to 1 contrast ratio, and I have to have a white text colour. Look at the background colour and give me some colours that are very close to that orange colour.

I've already run this because I've been burnt several times by live demos. There is reminding me of my current choice, this orange with white text, which has a contrast ratio of 2.7: 1, which is far too low. It's showing me below a number of similar colours. Maybe not quite as bright and orange as my original colour, but these do all have a contrast ratio higher than 4.5 to 1. If I was working with a customer or a client who really said it's got to be orange, but I want to make sure it's accessible, then maybe I can use this tool to find something that's like really close. I should probably tell them that I've changed it, but I think most of the time people may or may not notice. I think that's a really useful tool. I'm going back to my slides now.

Another aspect of accessible contrast is when we add text over images. In this example we have a quote from Jesse Jackson, "When everyone is included, everyone wins", in white text over a photograph of a woman using a refreshable braille display sat beside her service dog. The white text is very difficult to read because the photograph has a lot of light colours.

There are different strategies to resolving this, we could use a black outline around the text, or drop shadow, or just put a solid colour behind the text, or we could add a layer over the photo that darkens it, helping to make the text more legible.

The optimal overlay finder is a tool that I often use. I'm going to give you a quick demonstration. If I find here, I have the overlay finder. I could upload a custom image, which I've already done. It shows me here an example before and an example after. It's telling me that if I were to add a black overlay and use an opacity, let's call it 52%, then I will have sufficient contrast between the text and any of the colours that it appears against. I'm going to show you in PowerPoint how I would approach this.

I've actually already added a black overlay over this photograph. I'm just waiting for my screen magnifier to load. If I were to change that overlay, I can pick it up while I'm talking. If I got 0%, I can't see the photo at all now, whereas at 100%, I can see the photo very well, because it made that layer invisible.

I'm going to select 52%, and now I have a much better contrast between the text and the background. Of course, maybe I should choose a different photograph. If I had to use that photograph and wanted to make sure it was accessible, then that's an approach I've been using.

By the way, I'll be mentioning this, Disability:IN in my quick fire round at the end.

How can we amplify engagement with accessibility?

My final question is, how can we amplify engagement with accessibility across our organisation? I'm going to share one small change that I believe has done just that.

You're probably aware of the accessibility inspector in office. It appears in Word, PowerPoint, and Excel. You're probably already using it. It could check for 16 different accessibility issues whilst you work. When it finds accessibility issues, an accessibility investigator alert appears. Selecting it will give you an overview of the issues and steps you can follow to improve accessibility. For example, setting the reading order, using headings, resolving contrast issues, adding headings to tables, and so on. To benefit from this feature, each user has to turn on the " keep accessibility checker running while I work" option for each of Word, PowerPoint, and Excel in the settings.

An alternative method is that after running an accessibility check in one of Word, PowerPoint, or Excel you can select a check box within the inspection results panel to "keep accessibility checker running while I work". But you've got to have actually made an effort to look for [review] accessibility first before you even see that option.

What if we could remove those steps?

Like many organisations, our University sets up PCs for staff and students. We've got staff machines and we've got public workstations where students can use computers on campus.

Could we just turn on this feature? I checked with the brilliant Microsoft enterprise Disability Answer Desk, who said it was possible using an admin tool called Group Policy. They didn't give me a step by step, but just knowing it was possible meant I could follow up with our Desktop team at the University of Southampton and they put this into action for us.

We've now implemented the change so that the accessibility inspector is always running while our staff and students work on University machines. I've also shared an anonymised implementation plan that other organisations can use to make the same change on their PCs, and I've shared a webinar recording, slides, and materials for how we explained and demonstrated the benefits of using the accessibility inspector.

We only made this change a couple of months ago. Since we're quite used to Microsoft Office changing quite frequently now we're on Microsoft 365, I'm hoping that lots of our colleagues will be curious to select the button and review how they can make their content more accessible.

We've already been approached by a senior governance group led at executive level who asked for help to make their Word templates more accessible after they noticed the results of the accessibility inspector.

It's also proved an interesting conversation starter. In a world of hybrid meetings we often see when people share their screens the accessibility status of their documents. Some have been sharing their tips on how they approached resolving an accessibility issue they found whilst producing content.

I also really like how when the accessibility inspector cannot find any issues, the button changes to "accessibility good to go", we made this one of the key messages in our training, that a resource isn't "good to go" until the accessibility inspector says it is "good to go". Of course, automated tools can't find all issues, but if we can reach a baseline where everyone's aiming to have no issues which can be detected automatically, then that's going to be quite a step forward.

So far, I've shared some of my experiences with mystifying how we write alternative text, simplifying the accessible use of brand colour schemes and amplifying engagement with accessibility. Hopefully, some of these resources were new or interesting to you and on the presentation website you can find all of the links.

Quick fire round

Now just in case you didn't find anything that we covered so far of interest, I'm going to do a quick fire round showing some more resources that can help to simplify your accessibility journey.

Inclusive Stock photography

I'm often using stock photo services and when I look for more inclusive imagery, I'm not sure about how credible some of the images are. I remember a really interesting presentation from Keely Cat-Wells and Dan Edge of C Talent, which is the linked to on my presentation site by the way. Dan mentioned that he could tell in some images whether someone using a wheelchair was just using it as a prop and it wasn't really their wheelchair. Both the Disabled and Here collection and the Disability:IN inclusive stock photo library are available on Creative Commons so I recommend checking them out.

Introducing accessibility

If you're looking for a way to introduce people to digital accessibility, The Accessibility Maze is a web based game that you and your colleagues can play to learn more about accessibility. It was created to help those new to web accessibility experience first hand what it is like to encounter accessibility barriers. The game introduces a number of common barriers players must work around, mirroring the experience of those who encounter these obstacles daily, and provides quick lessons on how to avoid or correct them.

Organisational implementation

If you're looking for tips on how to approach implementing accessibility within an organisation, the W3C has a fantastic pathway " Planning and Managing Web Accessibility", some colleagues and I gave a session last year showing how to apply this in an educational context at an event called " Making IT accessible for all!"

Shifting left

"Shifting left" is about considering accessibility as early as possible in the development process. Here's two really useful resources. If you are working with developers it can be useful to include accessibility within your definition of done, or to use behaviour driven development techniques to ensure your requirements are met. MagentA11y from T-mobile provides testing criteria in Gherkin format, which is often used for user stories and in behaviour driven development.

If you are buying a commercial-off-the-shelf service, then this Accessible IT Procurement guide is vital. It has examples of legal clauses you can use during procurement, questions to ask and so on, and it's aimed specifically at Higher Education.

Screen reader testing

Ideally, we involve those who use assistive technologies such as screen readers to test our new sites and services, or changes to existing sites and services. This might not always be possible. If you need to do some screen reader testing yourself and aren't sure how to start, Canaxxes has a screen reader testing guide and the ScreenReader app, developed by the Appt foundation who were on one of the lunch and learn sessions yesterday, is an app to help you to learn how to use a screen reader on a mobile device.

Accessibility testing

On the topic of testing, Alistair McNaught has shared a really useful Tools and platforms Quick Check accessibility testing spreadsheet. If you need to do more deeper testing the Government Digital Service has a really useful accessibility testing guide. Of course, there's tools like Accessibility Insights but I assume everyone knows about that one.

Developing staff

If you want to build or train your team, Scott O'Hara's Accessibility Interview questions gives some great examples of questions you can ask at interviews and Teach Access offers an interactive accessibility tutorial for developers and designers.

Newsletters and blogs

My recommended way to learn about accessibility and keep up to date is through accessibility newsletters and blogs. As Charlie said in the Accessibility Champions session, community knowledge is really important. I've learnt the most from amazing blogs by people like Adrian Roselli, Eric Eggert, Sara Soueidan, Scott O'Hara and especially Laura Carlson's weekly newsletter. I've collated a list of my favourite accessibility newsletters and blogs on my website.

Conclusion

Thanks for joining me on the lunch and learn. I hope there was something of use to everyone! A special thank you to our captioner Jen, and Tim and our Bridget BSL interpreter.

We can use the remaining time to try to answer any questions. Perhaps you'd like to look in more detail at something I shared? Or maybe you want to share how you approached demystifying, simplifying and amplifying accessibility at your organisation?

Before I start reviewing the slido, the next session at 14:00 is "Innovation and Accessibility Eco Systems" which looks amazing. Do not miss the session at 16:15 GMT, " User-generated accessibility information" because anything that Cam Bedouin is involved with is always going to be awesome and you really need to check out him and his colleagues on that session.

Questions and answers

Thanks very much for listening and I'll stop sharing and start having a look at any questions in the Slido. I'm going to just go by, let's see, most popular.

From Kirsten, "Does higher education as an industry have unique accessibility challenges that don't occur in other industries?" Brilliant question. Thank you, Kirsten. I'd say probably due to the breadth of the types of resources that we use at universities, for example, maps, chemistry, STEM, there's a lot of very complex notation and I think we still haven't quite fully solved the question of how can we help our academic staff to create accessible resources in those subject areas, particularly that can be adjusted really well with our alternative formats that we offer with Blackboard Ally and Sensus Access. There is a brilliant JISC accessibility maths group who are working on that and one of my colleagues, Luke, is in there as well. I think we've only got a few seconds left. I'm going to have a look at the next one.

David says, "Really cool and awesome", thank you. "Highly informative". Awesome. Brilliant. Thank you very much.

"Could you share any tips or sources to explain the importance of colour contrast to marketing / stakeholders" ask Nikki? I would suggest, ask them to… say you get something with a yellow background and white text, put it on a mobile phone, ask them to go out in the middle of the day, on a sunny day and try to read the text on their phone. That's a kind of situational impairment with screen glare and then ask them to compare something with really good contrast and the experience. Then think about all of the other ways that that might appear so that it's not only affecting those that might have an impairment or disability or permanent disability but those situational impairments and how the more accessible the content, the more everyone benefits.

I think we've reached 14:00. I don't want to make you late for the next session. You're welcome to get in touch with me and if you'd like to have a follow up to this section with AbilityNet, I'm sure if you contact AbilityNet we can sort something out.

Thank you so much for listening! I don't know whether I'm just going to get cut off but thanks very much, and thanks again to Bridget for trying to deal with my rapid talking. Thank you Bridget and thanks everyone and goodbye.