AXSChat Podcast with Heather S. Neff – Founder of Equivalent Design and Accessibility Designer

 Heather is the Founder of Equivalent Design, the leading global accessible graphics firm for advancing disability inclusion and equality. Her more than 20 years of leadership experience driving accessible design was ignited by challenges she experienced having motor and vision disabilities.

Ms. Neff leads a team of talented and diverse individuals, including people with disabilities, who are working to build a more inclusive digital world. She is also an educator focusing on accessible graphic design and adaptive, responsive and accessible SVG files. Heather is a thought leader and advocates for disability inclusion, gender equality, and LGBTQ representation in technology. She is a member of the IAAP and is available for international speaking engagements.


At Equivalent Design we have a vision for a more diverse, inclusive and an equitable future. We believe that we can make a positive social impact by the use of intelligent, responsive graphic files and thoughtful accessible graphic design practices. We have a growing team and are always looking to hire talented accessible design professionals. 

Transcript

0:00

This is a draft transcript produced live at the event and corrected for spelling and basic errors. AXSCHAT Heather Neff

NEIL: 0:05

Hello and welcome to Axschat. I am flying solo today because Debra has got first world problems with her Wi-Fi and Antonio is still on holiday. But I'm delighted to be joined by Heather Neff, who is the founder of Equivalent Design. So, Heather, great to have you with us. I'm really excited to geek out with you about the topic we're going to talk about today, which is accessible SVG, scalable vector graphics. First off, let's talk a bit about you, your background and how you become to be working in the field?

HEATHER: 0:35

Great, well thank you. First of all, I want to thank you guys for having me on. It's such an honour to be on Axschat. So, a little bit about me. I am the founder of Equivalent Design. But how I got here is an interesting story. I have been a web designer since 2000 and was a graphics expert for a long time, doing graphic design and I moved into creative direction, marketing direction and then I became a user experience designer and User Interface designer for quite some time. And then about eight years ago I tore a ligament in my upper chest here which connects to my right arm and then became a very painful motor disability, which as a graphic designer and as an artist was really difficult to lose my right arm, as you can imagine. So, I started looking to assistive technologies to do hands free mousing. I turned into a voice control user, but when I looked for all this assistive technology it led me to realise that there's a whole community about accessibility out there, which as someone who also had an eye disease and then had cataract surgery that went wrong, I'm a now low vision user as well. So, I became very passionate about accessibility and joined the community. And I noticed that when I was in there that there wasn't a lot of great graphic design being created that was accessible. And as I researched more and more about accessible graphic design, I realised that there's a need for people to teach it and to share it and to educate people about how to make the design itself accessible. That is where I started changing my branding agency into an accessible graphic design firm and I was starting from my CPAX invocation and I was in a course for that over at DK University and when I was having a hard time that day logging in my arm was really painful so I chatted in hey I'm disabled and can you help me and of course they helped me login but they also said, since you're disabled for free. So, the next time I was able to login, there was all these courses there and as a brand new person who did a lot of logo designs over the last 22 years, I noticed there was a course called images SVG and Canvas, and I was like ooh, SVG and so, I've used those many years for logos and online. But I didn't know how accessible they could be. So, after reading this course I was like, oh my goodness, they are so interesting that their code and so forth. I knew that we could do some things but not as much as we can do now. I took my husband who is our CTO and the staff that I had at the design agency, and we decided to start a company around these intelligent smart SVG's and that was something that was a super passionate project of mine design stuff so. So, we've been working on new novel ways of doing this accessible design stuff, so.

NEIL: 3:25

Excellent. So, I mean I am really interested in some of the things you just mentioned. So, there is a perception that accessibility has to or does equal ugly and that you have always a trade-off between beautiful design and inclusive design and that is not true but, yet there is a certain grain of truth in that and people get led to that because I think that when people do stuff that is accessible they don't necessarily think about the design and when designers are thinking about how stuff looks they are not thinking about how to include people and it's rare to find someone that does both and I'm always interested in the people that do both because that is where the gold is, if you like. So, you know you look at the W3C's website. It's ugly. It's accessible but it's not something that is pleasant to look and also as someone that is dyslexic and ADHD actually the text is pretty inaccessible for me. It's technically accessible in that it will interact with screen readers and that I could navigate by keyboard and all of these kinds of things, but in terms of me actually processing the information, I would much prefer nice infographics.

HEATHER: 5:04

Mm hmm, yeah.

NEIL: 5:06

So SVG and the fact that you can make images accessible and embed lots of information in those images is a really important tool for us bridging that divide between stuff that is innately accessible and stuff that is also nice to look at and well designed and well resolved. So, I think it's also super topic.

HEATHER: 5:31

Like you said, people think it's boring and ugly and sometimes it is. And that is an unfortunate that misnomer that people think that. Right now, because we've been able to take this technology it really opens up the ability to have beautiful well branded websites that are actually way superior in accessibility. So, to back up what we are talking about most images or PNG's and JPEG's are pixel based or rasterised images and those are used on the internet and there is a situation where a lot of people don't even add an alternative text or an alt text so that low vision users can't even tell what's inside the image and that is kind of a big issue online. One of the things that we are doing is that because we are using vector artwork, which is math-based XML code, it can actually scale beautiful hence the vector graphics, right? So, unlike a pixel image when you blow it up that becomes super blurry, these graphics will stay crisp and clean and look beautiful on a retina device and that's actually a huge part of the accessibility as well is just being able to zoom in and magnify the content. But these graphics are so cool that they do all kinds of different types of magic. So, I could go on and on about the millions of different things we can do with them. Because it's code we can animate them, they are interactive. We can make sure they respond to media cards, which are the OS settings where people can choose personalised accessibility settings and these graphics will respond beautifully to something like dark mode or the personalised colour choices by user that is choosing colours that they want to see the background and foreground colour. It's a WCAG compliancy, 1.4.8 to allow the user to surf as they want to in dark mode or choose the colours they want to choose. And it's a really important part of accessibility too to give that dark mode for low vision users and people with photophobia. I personally have photophobias myself and really understand what it's like that most of the internet is quite white and bright and can be very jarring on the eyes and so it's actually one of the biggest barriers we're finding right now with our technology is that most organisation don't offer up a dark theme on their website and that is something I highly encourage people to realise how important that is for the user experience especially around low vision users and people who really are affected by bright websites that are physically in pain from them. So, it's actually quite an interesting topic to get into all the different things we can do around just dark themes alone and how that can play into it. But these graphics look amazing with those colour choices as well. So, it's a really cool thing for them to be doing.

NEIL: 8:13

Yeah, so lots to unpick here for me. Firstly, I have scotopic sensitivity, also known as Irlen syndrome so I also, through my dyslexia and so on, find the glare of bright white on the internet and on computers in general, tiring and painful. The first thing I do when I get a new iPhone is turn on reduced white point. But at the same time, complete dark mode can actually be quite tough as well. So, what you mentioned in terms of the ability for users to have their own settings and for the graphics to work with those settings is super important Because it's really difficult for individual graphic designers to be able to choose a colour pallet that is going to work with all of those combinations. In fact, it's almost impossible. So, if it’s a fixed colour, right? So, we've done quite a bit of work with this, within my own organisation because we went and did an eco-brand, and we went dark mode because it actually reduces the amount of energy, we consume for all of our PowerPoints and our websites and everything else. And that's important for us to reduce our energy consumption, especially as an organisation that is really focused on decarbonisation but at the same time, we were looking at colour pallets and fonts and so on, to make it more accessible. As part of the feedback on that was actually, we, including me found that the dark mode was too dark and the white on the dark mode was too white. And so, people were getting shimmer effects from the white and it was actually quite painful. So, the next situation we are looking at greys and subtle different text pallets and so on, again because we can always improve. There's no finished product in this kind of thing. But what you are talking about here result would resolve some of the other problems we have with the dark mode and the light mode because we switch the print because obviously you don't want to print the dark mode presentation because you use so lakes of ink and that's really bad for the he environment. So, it’s something like an SVG would be able, especially one that is done accessibility, would be able to cope with those switches.

HEATHER: 10:53

Absolutely it's about also you know, catering to the user and letting them be in a dark mode, light mode or custom colour mode. One of the other things they do is rearrange themselves on different screen sizes, so they will adapt to a mobile which would then respond to whatever mode they are in on their phone. So, that is a much better user experience infographic. So they don't have to pinch and zoom on something like an infographic. So, we're really actually focusing on some pretty cool stuff with the infographics as well. Where we're actually using selectable keyboard navigable text within the graphic, which is actually real text which is indexable by Google of course. But we're actually facing semantic HTML within a graphic so that low vision users and key board users can actually navigate around inside a graphic which has never you know been very popular on the web yet because it's brand new to us as well. It sounds really exciting to be able to add HTML to something inside an infographic and behind the scenes, we're actually unlike an alt text we actually have unlimited characters as well so we can serve up more information as desired. We're working on having a short listening experience and a longer description for a user to choose if they want to listen to an info graphic. So, that's pretty exciting as well.

NEIL: 12:08

I'm really excited about that part because I'm a big fan of infographics but I'm less of a fan of having to you know write the image for infographics because actually getting something like a complex infographic right in an image description is incredibly hard, especially for someone that is dyslexic. Right? So, this would do it much more elegantly. It's a much more better solution, a better user experience. So, I think this is really.

HEATHER: 12:43

Yeah, we are basically, sometimes I joke about it. We are making graphics for blind people. it's really about the low vision user experiencing things where they can magnify the content and they can be in the colours that they choose. A lot of times, low vision users chose a very dark background with a very bright colour so, they can actually see what is going on and they get very close to the monitor. So, our graphics would actually switch into that very bright colour but still remain with the tonality, so they look really good for the user, even if it's magnified even if it's in these custom colours. They look amazing, these custom colours. We are also doing something like a favicon, where it would respond to the dark mode browser, so your brain would show up better in the tab. So, the smart SVG is being utilised by the OS system as well. And since it can be animated, we're also listening to the reduced motion query as well. So, in case somebody has the accessibility setting in there that they don't want animation, we can control that and reduce it or stop it completely to make sure that it is accessible as possible.

NEIL: 13:43

Yeah. I mean again. I turn off all the parallax things because they make me a bit giddy. So, being able to do that is really great and I mean I again, the kind of granularity that you can add to this is really interesting because I would quite like to see, you have an example video with a seeing eye or guide dog? Right? And you have the tail wagging and so on and I would quite like to see the tail wagging that would not make me feel sick. But the sort of background effects of stuff moving of background behind the test is something I would want to turn off instantly.

HEATHER: 14:22

Right and first of all, we would never put out anything that would harm anyone. So, we've been studying how to create very, very accessible, very, very easy you know, gradients and small changes like loading SVG's that wouldn't harm anyone. We also listen to the WCAG five seconds or less and also making sure that there is a play and stop button. So, it's kind of like flash where you can actually create a totally graphic that is animated and doing all kind of neat things and pull in other file types because SVG is actually a document type where you can actually call-in audio files and other pixeled images and basically, it's a website within the website. There’re so many things we can do. It's kind of endless possibilities with this type of code and because it's code we can continue to do things like meta data and key words into the graphic. So, there's all kinds of things going on behind the scenes that we are doing a lot of research and development to see how far we can push a lot of these things.

NEIL: 15:21

Now, I mean I got excited about SVG's for the same reasons that you probably did in, you know at a very basic stage of you know I would be playing around with graphics and they would pixelate when you blow them up or you'd lose image quality over time, you see lots of memes on the web and the image quality is terrible, because people have screen grabbed and screen grabbed and screen grabbed and eventually you know, the actual quality of the image is awful. And I, sadly working in corporate, I spend an awful lot of time making infographics and diagrams and schematics in PowerPoint. I got super excited when I found Sabre’s SVG because suddenly I had something that because the other thing is, you make these things and they have a life and they get pasted into your colleague's PowerPoints and then they were doing those screen grabs and they they would copy the image and they'd all start degrading and the text would become blurry and everything else and then suddenly I found Sabre’s SVG doing and now it's scalable and it doesn't look like dog poop when you paste it in a couple of times.

HEATHER: 16:37

And there's no resolution, it's just math. So, it literally is staying crisp and clear, it's great for going to print. So, we've actually had some discussion with people who do tactile graphics and having an SVG to begin with is what they could use to print something, of course. But then we could take that and turn into one of these very intelligent responsive SVG's that have all these accessibility features and they'd solve a lot of the problems dealing with these pixel-based image, when they're going online for accessibility. So, we're really excited to see what kind of partnerships might happen around the idea of helping developers learn how to do this. It's a technical situation where you're going into illustrator and you have to know how to put the layers in the right order, so when you export it, it's announced correctly on a screen reader and you want to make sure you're able to test thoroughly on all the different assistive technologies and screen reading software. So, it's a really important thing to make sure that you're paying attention to all these details, you really want to make sure it's going to work and it's going to work across all the different browsers and also really respond to things like that, reduced motion that people aren't having any poor experiences with the SVG.

NEIL: 17:42

Yeah. So, geeking out again, I'm getting very excited about the idea that you can work with tactile printing and so on and create tactile images from this. Are you saying that you can actually as well as, so essentially you can have 3D information in the SVG?

HEATHER: 18:04

I think it's more that the file itself that's going to print that's going to turn into one of these graphics so whatever you've designed in that and ultimately, it's going to be doing three dimensional things. But it does translate beautifully to a 2D printed object and also onto the web and you can do all kinds of stuff within Illustrator, so you're using Adobe Illustrator, a similar vector-based program to design gradients and shapes and sizes and whatever you want to do. Most people should be considering, perhaps starting with their logos, since logos usually have different mock ups. So, you have a horizontal logo with a tag line and perhaps you'd prefer a smaller stacked logo on the mobile version of your logo or your branding and that is something that's really quite useful knowing that it can resize to different screen sizes and different break points which is a great feature as well. So, we're trying to encourage people to think about moving into the most important graphics on their website, starting with their logo and any really important infographics that are crucial for people to listen to and to hear and to see because these guys, these smart SVG's provide so much visibility and so much more information, it's actually going to be a huge jump for people to go from a JPEG with a small alt text to something that's a smart SVG that has a much better description in the back end very contextual, very rich information so they actually gather what is going on inside a graphic. We're also trying to make sure with the semantics they can jump past it if they don't want to hear what is going. So, it is all about have that user have that amazing experience where a visual user, a sighted user will scroll past an infographic instantly. We want to allow a low vision user to have that same experience if they don't want to deal with the infographic. But, if they want to here and know what is going inside, they can have a great listening experience to what the details are inside an infographic, which is a really big deal, you know, about getting information to the public.

NEIL: 19:57

Yeah. Equally, I mean quite often, you know you have infographics, and you want to be able to interact with parts of infographics and at the moment, which is pretty complex as well. So, sometimes you know what you want to do is hide information until people want extra information and so, finding a way to be able to do that, I think even for sighted users is also useful, because I think if you bombard someone like me with text, I'm probably going to turn off and go and look for the next shiny thing. Whereas, if there's still enough information there for me to decide what is pertinent and important then I can filter out the signal from the noise and decide that I want to drawdown further. So, I'm interested in that but what it sounds like is that at the moment, you're at the stage where you have got a really solid foundation for a new sort of media approach to this. But that it's still really sort of dependent on expert or at least a level of knowledge of design packages and how to utilise them and a knowledge about the impact of what it means to do these things to enable accessibility. I guess, from my point of view, what I'm always keen to do is go from that expert step to teach more people. And I think you said that you've, doing some of that and then beyond that to how we can make this something that becomes mass deployable. So that everybody can benefit because the web is huge. Everybody is creating content all of the time and so, the more we can make this something that novice, nonexpert users can do, that we can build in the expertise into systems, build expert systems rather than requiring an expert to use a system, that the greater impact it has over time. So, I think you know before we want on air you said you had been doing work on making those materials available?

HEATHER: 22:26

Yeah, so we know it's a little bit tricky to learn all of this. We spent two years of research in development reading the entire internet to figure out what is being done. Because SVG's have been around since the late 1990's. They are not a new format of image. It's just never really caught on to really take over. So, a lot of people use SVG's already for maybe a logo on their website, but they are not being utilised to be much more intelligent and much more accessible. So, because there is this education that needs to be done, I realised that a lot of people didn't know this even existed, the technology has been around but we took it and we also added some new ideas to learn how to do things because we have a very step by step process, we actually made first an accessible graphic design book on how to make a design accessible. So, when you're in illustrator in design, how to start with the basics first so, you're not exporting some very complicated thing that isn't accessible into an SVG. We still want the basic design stuff to come first. That's crucial for everything to become as accessible as possible. Then we have to know how to do the step by step guide, so we did make a detailed developer's guide for organisations who are very interested in learning and taking into their organisations so that their staff and their team can learn how to do this and get links to the get hub, so they've all the different patterns for inside the SVG's and then we have this whole guide to teach them and we would have tech support and so forth to make sure we can pass this knowledge on to each organisation. It's actually something that's really important to me and that's why we're trying to educate everybody by going onto these types of Podcasts and actually spreading that I would really like to teach this and bring it to the world. That's one of my goals to really start changing the digital landscape to include these accessible SVG's since I think they are so important for being more inclusive and they just offer great opportunity to utilise, like you said, the dark mode which is an average of 28% energy consumption. So many people that are in places that only access the internet on their phone they're in dark mode and these are simple things that you can actually think about doing to make that user experience much better and to be more accessible to be honest, you know, and it's a really big deal for everybody to understand how they can also impact your SCO because they are code. They load instantly, which a big deal for load times right? So, that's another accessible feature that they don't have resolution. So, they're usually under 10 kilobytes which is pretty exciting as well.

NEIL: 24:52

Well, and not just in terms of load time that has an impact on the environment too because, I think we've got used to having what people call elastic compute. The almost infinite capacity for scale of and size of images and storage and all of this stuff. But there is an energy usage behind that and there is a cost to the environment of all of these large files and I think that while Moore's law has powered you know ever increasing processor capabilities and we've got ever increasing storage capacity that has come at a cost to the planet.

HEATHER: 25:40

Absolutely.

NEIL: 25:41

So, some of the work that we need to do as technologists is to look at how we can use this technology more efficiently and create much more efficient ways of delivering quality interactive experiences and no one is saying actually we want you to have a really rubbish experience, we still want you to have that kind of retina display clarity or those 48K quality figures, but there have to more efficient way of delivering that data. So, that we can stop you know burning our planet down just for the sake of having high-def videos and high-def graphics. So, I think there is really you know some synergies between accessibility and sustainability and something that I have talked a lot. We have talked about treating exclusion like pollution. But actually, there are linkages and so, when you write good accessible, compliant codes it's also better for the environment. So, we can link the two. What I'd love to do more is do the measurements on some of that stuff because I think that I am always keen to find the drivers that might effect change and whilst doing the right thing absolutely motivates lots of people and increasing the top and bottom lines motivates others, actually lots of business are driven by their sustainability goals and their sustainability metrics. So, if we can demonstrate that this impacts on the decarbonisation programmes and stuff like that, then you've got another reason for driving adoption.

HEATHER: 27:36

Yeah, it's not just about inclusion, it's about so many other benefits of the technology. I mean first and foremost I think you're absolutely correct on the fact that we can save energy because it's code and you don't have any resolution. The only things that should stay a pixel-based image are photographs. Anything else that's vector based, logos, icons, infographics, any type of illustrations they should be converted into one of these intelligent smart SVG's. This is a really important thing for people to adapt. I think it's something that's going to be crucial going forward, also because of the dark mode response which was a big deal to allow that user to stay in that preference or the customer colours that they want to stay in and the fact that they can be animated and interactive that can actually really enhance the accessibility things, if it’s something that really catches someone, a sighted user's eye or something that makes an interface more accessible, you can actually design the entire website to have smart SVG's. So, for example you're in what's called contrast themes on a PC and a desktop, it allows the user to choose these custom colours. A lot of times, if they choose a dark colour for the background, like any colour they want, it can wash out the text that are a brand's logo, for example. So, we happened to go to a brand and noticed that when we were in that what is called forced colours that we are forcing the colours to be a different colour that their logo text on a PNG completely disappeared like you don't even see the logo. So, it is really interesting to see how that can be an accessibility issue if you don't even know where you are on the website if you happen be a low vision user and you don't see the branding right? So, we know that this visible thing is a really important thing and in our website all of the graphics will respond to these different settings and you can actually control what they look like in these settings which is a really huge feature is to really make sure that they really good job like you said, not having halation, not having extremes but really offering up in a really thoughtful graphic that has been made for dark mode that has been thought through and most already have something like a dark mode for T shirts and dark clothing. So, it's not too far away for to them to adapt a dark theme on website and to utilise some of their own branding already into this type of mode. And I think that is something that a lot of people would be really interested in since we have the ability to do this now.

NEIL: 29:56

Yeah, I fully agree I think it's really, really fantastic work you are doing. As I said I'm super interested, it has been really great geeking out with you. Can you remind us of where we can find the, get where your book is available and what is the title is.

HEATHER: 30:18

Yes, so our company is found at www.equivalent.design and you can find us also on Twitter at equivalent.ux. We are focusing on showing a demo on our homepage. We have an explainer video for those who don't really know how to explain this to somebody else. It actually walks you through what the pixel is, what vectors are and how these graphics are really responsive to these different screen sizes and settings. We also have those settings on our homepage. So we have the explain video on our homepage. We also have a demo showing the different types of graphics in action. So, you can actually see what is going on with them which is quite exciting. The demo is quite telling. So, I really recommend people going over there and watching the demo to see what this means and to see it in action. That's really kind of cool.

NEIL: 31:02

Yeah. I agree. I watched beforehand. I think it's great. Also, what is the book called? Is it available on your website?

HEATHER: 31:11

We are about to bring that to be published so we are just finishing it now to get it published. We are working on that right now. The Developer's Guide, is something that we would package with a partnership. We also, have powered by Equivalent Design Partnership Program, where companies and organisations, if they don't want to figure all this out, all they have to do is send us the vector artwork and their branding and we will work with them in collaboration, to make sure that the designs are accessible and if they need some remediation steps, we will help them figure that out with a compliance check, against of course, the international accessibility laws and then we work with them to make sure that their media queries are going to look the way they wanted them to and to realise the brand needs to adapt something called HSL, or hue saturation lightness and that is something most companies already have. So, it's something that's really important to make sure that companies are also adapting that dark theme which is part of what we're trying to encourage people to do because our graphics, you can get this as a smart graphic on your website but if you're not utilising the dark mode, you're missing out on a huge feature for people to have a much more accessible, much better user experience and why not add that at the same time, so, that's what we're working on is to allow companies to just send us the vector artwork. We convert it and we test it thoroughly. And then we send it back with instructions. It's fairly easy for web developers to just put these graphics in line. They're not that complicated. You just have to make sure that there's a dark theme that would respond to the dark mode and if you don't have that, we can make it respond to the customised settings. It still has that advantage over that pixel-based image because they also scale beautifully which is a huge part of you know magnifying content is a big deal for people. So, it is something that I think, no matter what you're doing should try to convert all of your vector-based artwork into this type of format.

NEIL: 32:59

Yeah. I'm converted. So, thank you so much Heather. It’s been really great learning about this stuff. I'm excited to find out yet more. Be great to have you engage on the Twitter chat. I'm really looking forward to that. Just I need to thank you My Clear Text for keeping us captioned and online and also to mention a thank you to all of the people so far that have contributed to our crowd funder to keep us on air. We are doing nicely. And that is down to the community. And so, thank you everyone.

HEATHER: 33:38

Thank you everybody.