How do you make a Gif Accessible?

How do you make a Gif Accessible? The question came up after I sent off a Gif of some teenage Caucasian boys flashing gang signs in a wannabe fashion. I am always amazed at the world’s Gif library and do wonder what later generations will think of it and us. But I had to ask myself how would I make a Gif accessible? 

I was recently introduced to Haben Girma’s newly released book; Haben: The Deafblind Woman Who Conquered Harvard Law. I’ve been supporting the NYC DOE with the accessibility mandates to comply with the Civil Rights Office Agreement Case Number 02-16-1175. This has provoked me to start asking questions about accessibility and changing my habits. I’ve admittedly found the official rules a bit difficult to decipher. And if you ask one person involved with accessibility another person will have a different answer. Thankfully there’s a plan to untangle some of these rules and questions about them. We currently use the W3C's Web Content Accessibility Guidelines (WCAG). We will be moving toward Silver Standards, “not a bullet but a level”. Silver is aimed to standardize things much more succinctly so we can all be on the same page. 

For me questions still come up. Admittedly earlier in the week I had to google how to make an emoji accessible. I wanted to write 😉 which is semi-colon parentheses, ;). I wondered if a screen reader would read it as “winky face”. It was a hit and miss depending on what screen reader and how the emoji was created. So I googled how to make it more accessible. For one thing we describe emoji’s when we are trying to be accessible. So the pink heart is “pink heart”. And smiley face is “smiley face”. And poop is “chocolate ice cream”. Okay. Fine. It’s “poop”. But we can add these details through a particular accessibility comment in the HTML called Aria aria-label=“poop” in the tag of the emoji would make the screen reader say “poop”. If you have a screen reader installed here’s your chance to make your computer say “poop” 💩. 

But back to the Gifs. How do we make something so culturally relevant accessible? Videos have closed captioning and images have alt text. A Gif is somewhere between. (I’m going to also need to test if the screen reader says “jif” or “gif”) but just like images they need descriptions. Alt text will allow you to provide a description. Well that was a simple answer to a curious question. 

But wait! Gifs are not inherently accessible!

Gifs loop and have a frame rate which could create a blink in the range of less that 3 times a second which is known to produce seizures. They can be distracting because they go on forever and auto start. You can't stop them since they have no controls. So how do you correct this? The easiest way is to make it a movie. I groaned when I read this. Because I include Gifs in my training slides frequently because they just repeat without the user having to press play. I do want to rebel here but I recognize I would just be disenfranchising millions of people from accessing my materials. If it’s between aesthetics to avoid the cultural shift of clicking play and keeping knowledge from many who need and want it…? Let’s shift our culture. I can’t promise I’ll never use another Gif (and there are ways to make them loop no more that 5 times) but I’ll aim to provide videos with controls stating there is no audio and users should click play along with providing alt text. 

Slide Object Order: a new Add-on for Slides

In today’s point and click, touch or voice activated world we often disregard the importance of tab order. Tab order allows us to use the keyboard to move from screen element to screen element. It’s most frequently used in data entry positions where speed is a factor. But what if you had to rely on tab order for daily access to content? Some folks with various impairments do. 

Often when we think of accessibility we relate it to society members who have grown up with some impairment. While this is an area of accessibility needs it’s not every case. If you struggle to put a user of this technology in mind I suggest thinking of someone aging in your life who may be hard of hearing or struggling with sight. Users of accessibility tools don’t need to have been born with an impairment. In fact if we were to make everything accessible we’d all benefit. Those wheelchair ramps help us also push strollers and carts easier. 

Some Accessibility features rely on the tab order for navigation. If you use a screen reader you would tab through elements to hear them read. Switches use the same sort of feature tabbing until the item you want to access is highlighted and then accepting the highlight. Technology makes many things which were out of reach to some accessible. But we can still do better. 

While working in a Google Slide deck regarding accessibility, myself and Earnest Poole, @eapoole http://www.themindfulstemteacher.com identified that we could not easily change the tab order of elements. First, the tab order on a slide is attached to the layers of objects, z-index, the further back the earlier the tabbing experience. The z-index is an integer determining the back-to-front layers of digital items. We always have a first or back image. The furthest back image is always a z-index of 0. As we add elements the z-index increases. We theoretically can add an infinite amount of objects but will always have a starting point of 0. 

How does this play out when creating a slide deck? Well most of us use z-index to layer images on top of each other. It’s a visual effect which can create appealing slides. We have four choices when working with objects in a slide. 

1. Move an object to the furthest front area or z-index of ∞; “Send to front”
2. Move an object forward one z-index; “Bring forward”
3. Move an object back one z-index; “Send backward”
4. Move an object to the furthest back area or z-index of 0; “Send to back”

What we don’t see is the order position each element is currently in. If we move them so they are overlapping we can get a sense of the order. We could also see it by tabbing through them. But there’s no way to see the order for a laid out slide. Until now… 

As Ernest and I were talking about the order of elements on a slide it became obvious we needed an Add-on to help us with what we were doing. We are building a number of slide decks around accessibility and want to be able to walk-the-walk. We needed a tool to not just show us the layers but also allow us to more easily manipulate them. For this I’ve created the Add-on Slide Object Order.

This sidebar Add-on will display the objects on a slide as an abstract with each object stacked on top of each other. The bottom of the stack would be the first of the tab order. Order numbers are listed to the left to better identify the tab order. Each listing can be dragged to reorder the layer and tabbing on the slide. The change in order on the sidebar automatically updates the slide. 

While exploring this issue and creating a solution we identified a need for the tab order not linked to the z-index arrangement of elements. It’s currently not an option because it would be a fully different integrated system to what is already in place. It would require programmers to build a new layer of things to the Slides platform. It’s a real need if we are going to make things truly accessible to all. Why break up the z-index and the tab order? Let’s say you create a shape an put it on your slide, maybe a rectangle. And then you put your photo on top of the rectangle. The first element tabbed to will be the rectangle you created and then your photo. To get your photo as the first thing tabbed to you would have to change to z-index to less than the rectangle putting your photo behind the shape. The more effective but lesser known trick would be to group the photo and the shape. This would then link them together with the same tabbing/z-index. 

We need tools for creating proper accessibility. No one wants to be left out. When I think about accessibility in the classroom I’m not just thinking about my students but also about the people that care for them. That primary care giver who is a grandparent with cataracts and needs a screen reader to tab through and hear the material they are supporting their student's understanding of. We all benefit when things are accessible. And if we can make accessibility tools more accessible we need to do so. 

Google's Accessibility Menu Isn't as Accessible as It Could Be

When Google announced the Accessibility menu in G Suite I was excited for the various possibilities of this tool. My focus was on the screen reader. We all learn best in various ways. Accessibility tools shouldn't be considered just for those with special needs they can benefit all of us. Screen reader allows document text to be read back to the user. It also verbalizes the menus and actions the user is taking on the screen.

 

While I conducted a training the Accessibility menu was asked about. I hadn't previously had the time to explore it. The menu had just appeared on the school's domain teacher thought it could help a lot of students with various tasks. I was on my Macbook Pro and turned on the accessibility screen reader, "Speak" ...nothing. Teachers were on various PC's and turned on their Speak from the Accessibility menu. Again, nothing. I had to move on with the training but aimed to circle back and explore it in my own time.

What I've found is that the Accessibility menu relies on the native device features to work with the Chrome browser. Mac relies on VoiceOver. PC relies on NVDA. Chromebooks have ChromeVox built-in.  The menu assumes there is already a screen reader installed on the system and being used rather than providing a quick and easily accessible functionality switch.

My expectation and the teachers' I was training expectation was to turn on the screen reader as we turned on accessibility. Unfortunately there is a whole install and enabling procedure which complicates use for many schools due to how they are setup. Extensions for Chrome browsers are often turned off for schools with Macs and PCs. Chromebook users have it easier with the ability already setup on their operating system. The ChromeVox extension is recommended, however there's no way to turn it on and off.

Instant screen reading is what was expected but the difficulty in engaging with the Accessibility menu had me look else where for options. The menu is intended for full screen reader ability in the Chrome browser. What the teachers needed was a way to have text read back. This is a different level of accessibility from what the Accessibility menu provides. I pulled up an extension I've used with English language learners called Read Aloud: A Text to Speech Voice Reader. The extension allows more reading control and highlighting of text with voice selection.

To further complicate usage of Accessibility tools there is a long list of complicated key stroke combinations to access various elements on the screen. If you have ever had the change to unlock a secret level through some button clicks on your controller Accessibility is very similar. You don't unlock a hidden level after pressing Ctrl+ ⌘ + Shift + N you just move to the next table. The list of these key codes is immense and requires further memorization to take advantage of. Such elements create further barriers to accessibility. There is also no access to customize such key codes to accommodate a user. We really need to rethink how we provide access to elements on the screen.

I applaud Google for including Accessibility features in the G Suite, but I'm ultimately disappointed in how the Accessibility needs to be setup, the lack of simple controls and transparency for usage. Don't expect to turn on the Accessibility Menu and find things accessible. Ultimately we need to provide users various levels of accessibility and accessibility needs to be easily accessible and adaptable for all.