Search Engine Optimization (SEO)

So part of the business case that we made was that accessibility impacts usability and SEO. Don Norman has a great quote about that disability is about making it easier for everyone. I like to say that accessibility is a cousin of usability. They're their sister, and it's because you're optimizing your code,

simplifying your layouts, you know, maybe a little strategically for screen readers, right? Knowing that things like maps are going to get in the way or that a layout is going to impact the way that a screen reader accesses it. And it's the same for SEO, you've done any SEO or played around with the way Googlebot thinks and parses a page, it's very structured, it's very strategic. And once you realize how it does that, you can think that way when you're designing as well. So plain English, consideration for the end user,

browser and device compatibility. You know, this is where usability and accessibility are combined with that goal of useful, usable, searchable. And the key is quick and efficiently and painless. That's critical for accessibility even more than usability. So accessibility impacts SEO, Right? And the reason is because the better the experience and time on site is the main factor, right? For the Nielsen/NetRatings maybe ten years ago set the standard from unique visits to time on site,

which is why Facebook and other sites try and keep you locked in right to view their content because their advertisers incentivize them with time on site. Well, the more you do that, the more Google's algorithm likes your site. Making graphical information searchable like all graphical information. Google likes that. So that's a ranking indicator. Screen reader testing can also help you figure out what's missing from your SEO keywords, right? So if you look at your Alt text, you can be like

- Oh, wait a minute, we haven’t optimize this. Now, if you optimize your usability, it doesn't necessarily impact accessibility. And if you optimize SEO, it doesn't necessarily impact accessibility. So it's really the other way around. And modify, optimize accessibility can improve SEO, can improve usability. It's not mutually bi directional.

Now, when you do journey maps or you create personas, and when you think about content strategy or improving your content and making it more useful, more desirable for your users, it's important that you get that guidance from user research and specifically doing field studies, sitting down with users, going to their homes;

if it's B2B, going to their office place, sitting beside them. I once was doing an internal intranet study for a big hospital. I would go from desk to desk talking to different users. When I would come up with an artifact, so when I would discover an artifact, in one case it was a list of telephone numbers of – you know – frequent people to call; you really need to dig deeper and discover *all the opportunities that exist*. And I ended up carrying a stack of papers.

And one of the users said, "You know, it would be really nice if I had a list of frequent people to call..." And I pulled it out for my stack of papers and said, "Oh, you mean something like this?" And she went, "Yeah. That's exactly right!" I'll tell you another story from a store – it's like a country store. So, on the West coast of the United States there are a new generation of farmers. The focus of this study was to discover what the experience was for younger, for Millennial farmers,

and in particular what content they might need to go along with an e-commerce experience. So, we went out to farms and interviewed people – actually we recruited through, we joined groups on Facebook and we could actually see from the Facebook groups that people were recommending our client's brand and other brands, and they were asking questions like "Where can I sell chicken eggs?" because when you start farming at home, out in the countryside, like chickens are a popular one, goats are the other one; you start developing the byproducts of those of those things.

So, we talked to a lawyer – she's a lawyer by day, when she goes into Seattle, the nearest biggest city, she takes her Nubian goats and sells them to people that buy the goats. It's really interesting. Then the other thing she made was soap with the lard she was making with the extra fat that she was getting from her pigs. She was making her own soap and then selling her own soap as  kind of a cottage industry. So, we could see this – we heard from the users that kind of stuff; we saw them doing this online as well.

So, we had a kind of the social side of it, and Facebook groups are extremely important for certain communities like this. They also act as a way to sell products if you have excess products. But one thing we found out is the users said they want to be able to do this at the stores as well. They said they like the physical events, the social events that stores put on. So, you know, come to the store – a little music, a little bit of food: community essentially. They really liked that, but they wanted more of them. We also discovered that a lot of women

were making the buying decisions. One of our personas was the manager of the farm. A lot of these people have just learned how to do farming off of YouTube; they call it the University of YouTube. So, that small content about how to make your own sauerkraut, how to raise goats, how to make a fence that is deer-proof so the deer don't come and eat your vegetables. All these kinds of things they rely on YouTube, so that was a content discovery source for us. We realized as well that these women were one of the primary personas; they kept coming up.

The irony here was the CEO of the company was actually a woman, but they didn't tell us to interview women – they didn't tell us anything about the gender side of it. We went and did some research just because it was one of our findings and it turns out that in Oregon, anyway, 50% of new farmers are women. This is a huge cultural shift from the 1950s, '60s, where it was like 85 to 90% men.

This is an inclusion and a bias story of discovering bias. Women were complaining that the jeans were designed for men. Women said that after going on a horse for like 20 minutes, the jeans would rip. Then the crotch would just rip out, so they're throwing away, wasting money on clothes that were not designed for a  woman's body, for her physical needs as well as social and other in these. In other words, they were made cute, so little tiny pockets that you can't put anything in – no tools, no phone.

Whereas the men's clothing had that functionality. And there's a bias on clothing, in particular work clothing, and there are actually brands that cater specifically to women that understand this, and there are two  or three brands. But it's still very niche; it's very like edge case. Yet up to 50%, in California, close to 35 to 40% of farmers are women now. And these are government statistics,  and it matched kind of our study.

So, it was a finding that we stumbled upon by making sure that we interviewed the right users, that we listened to – we didn't just assume that farmers were men. We kept an open mind when we created the study. The content ideas that poured out of this  gave us all the types of things that users were saying they needed, and we were able to tell our client to have their social media team and make the kind of content that would work, that would resonate emotionally with the kind of problems that users were trying to solve, in addition to the e-commerce.

And actually when that site launched after six months, (there was) a 10x increase in sales from that site. So, they did something right, and a lot of it had to do with just doing one of these very open baseline professional field studies that can give you all the content and desirability insights that you need to make the right decisions.

Now, just to start off by saying responsive is a default. Responsive is not an option – *do it*. And the reason is because that's where the world is at. Everyone expects things to be mobile-optimized, and responsive just means that if I switch from my laptop to my tablet to my phone, the site's going to fit to that resolution; it's going to kind of follow me.

And we know that users do that; that's the default. So, by doing responsive design, you're supporting device switching, and that's why it's important. You're also potentially making things a little bit more accessible and SEO-friendly, which is a factor for Google's algorithm that prioritizes responsive sites.

So, let's look at the 10 principles of  accessibility for both web and mobile design. The first principle is that blindness  gets you 80% of accessibility issues. Now, there are four major types of disabilities: *blindness*,  and that includes low vision and color blindness,

*hearing*, *cognitive* and *motor  impairments*. Now, blindness is actually across a spectrum; they're  like 22 different types of blindness, but we basically differentiate between blind – and  there are different levels; like I said, you can be on the *edge* of blindness – you can still  be legally blind but you can still have some sight; and then you may require screen  magnification, which would be low vision;

so, basically your vision  is impaired to whatever percent: 60, 70, 80, 90, 95%, 97% – you know – but then there's a little  bit of magnification that can help. So, you'll have low vision users using screen magnifiers to, like, 300% or 400% magnification, and a lot of those tools, those  magnifiers have a screen reader in them

as well, so blind users will use just the screen reader. And just like we saw in that last example, the screen reader is, for example, VoiceOver on the iOS operating system, which talks – essentially reads to you; that's a screen reader. So, why blindness of all these different disabilities? You might think, "Oh! Accessibility –  it's too difficult! There's so many different disabilities;

how do you tackle the different ones?" Blindness helps you get almost the whole way there because of keyboard and the screen reader. So, blind users will use a keyboard so you can test keyboard access, which is what motor/mobility users. Hearing – so, deafness and hard of hearing is essentially a captioning thing. So, that's pretty straightforward. And then cognitive issues – they're a little bit more complex.

They're a little bit more complex to test for. And there's such a difference – you know – so we're talking about dyslexia, ADD, Asperger's, things like that. And so, yeah, so blindness is, in terms of core accessibility, the way to get there, in terms of testing.

So, for example, if you're testing with users,  you can recruit – you know – 80% of your users can be blind and you'll be getting a really good  understanding of accessibility. So, *alt-text* is classic on images – classic accessibility can  be summarized with alt-text. Now, here's a little quick quiz for  you: what alt-text would you give this image?

Let's take a minute and play here. So, "ALT..." So, "Man looking at wall with  complex graphics or infographics." What did you give it?

So, the classic issues with alt-text: you want to describe, not the picture, but you want to describe the *information in the picture*. So, what's the man doing? Like the fact that  he's wearing a suit or his age or the type of brick wall it is – it's not  really important, the color of the wall. You know – "Man staring at wall." It might  be a little non-descriptive; it really depends on what the *function* of the image is. If this is an image that's required for the user

to understand the content on the page, then it's  going to have to be a little bit more descriptive. So, my alt-text: "Man looking  at wall with complex graphics or infographics." I think should cover it. If it's too short, like "Man looking at wall." – we talked about that, that might be a little – you know...

If you add something like "Picture of man looking at wall." – you don't need that; you don't need the "picture". So, or "photo" or "image" – you don't need to say "image" – "Image of man looking at wall." You don't need to say that, either. So, yeah, *alt-text*. It's classic to accessibility because a lot of people forget it.

They miss it; it's just classically overlooked. And alt-text is actually critical to SEO. So, it's really, really important that alt-text is addressed. Let's look at the third one, then, so classic on mobile is the *hamburger menu*, the hamburger menu being the three lines in the top left of the screen. The easy fix is to just properly  tag it; so, typically those menus, the user,

their screen reader just skips over them; users don't see them. They can't actually access them. So, the classic one for mobile there is tagging those  mobile elements when they become responsive. And the fourth one here is *Content  that gets placed "out of the way" might not be found on the screen."  And so, what does "out of the way" mean? Well, think of this, the screen reader reading this screen – this is a map. So, you're looking for the location of this restaurant. This is from an actual usability or accessibility test,

and I've included the kind of findings  here; so, the screen reader doesn't see the location list. That's the important content. The map is not  really important; it's a visual paradigm. Blind users are not going to see the map. This Google map's not going to be accessible. It's like a million images that are not tagged; it's just like a big soup. So, the important thing is the *list of locations that are on the screen* so that you know, "Oh yes, there's a restaurant near me."

And the location list is after the map, and it should be *before the map* in the code. So, the way that the screen reader is – the screen reader is parsing, reading the code, and so this is what we mean by "out of the way content" –  content that's hard to find.

The fifth principle is that accessibility testing with users – so *actually testing with users* – can reveal huge gaps. Now, this is a huge revelation  for accessibility, by the way, because a lot of people think they can handle it with checkers or with code reviews; I used to think that I could do that too. And I need to tell you after 17 years  of practice of this in business with my company Experience Dynamics, we've come to the  overwhelming *mandatory* recommendation, conclusion,

revelation that *you have to accessibility test* – you  have to test with actual users. It shouldn't be a surprise. In usability, you test with users. You don't just try and guess or follow a guideline. It's the same with accessibility testing;  it's *even more important* I think because *accessibility is twice as risky as usability*. Here, you see a usability test on the left;

and on the right, you see an accessibility test with blind users completing the same task. So, you see task 3 here and we have just – you know – it's almost three times as easy for users who are sighted than users who are blind to complete this task. The sixth principle is that *disabling zoom on mobile makes it inaccessible*.

So, low vision users using screen magnifiers won't be able to actually do the zooming if you disable it. So, a lot of people will disable that on mobile, and it locks users out. This is an image of a 400 times magnification by a user with low vision, and that's literally how the screen is being digested.

The seventh principle is that *accessibility is easily learned*. Remember that close to 20% of the US population and 10% of men are colorblind, by the way. So, clean coding can be learned with a little practice. Accessibility is actually cheaper if you do it upfront compared to if you try and do it later. So, it should be part of your coding, but also it should be part of your UX design strategy too. So, the next principle is  *accessibility doesn't mean ugly*.

It may require you to rethink kind of the layout – again,  this is where UX design can be very helpful. But one of the things I've realized is that *visual  bias is your worst enemy*; that because you're so familiar with seeing  things and the layout of a screen – you know – the more creative you are, the more of a designer you are; the more creative designer, visual designer,

the more biased you're going to be because you can *handle*, just like you can handle gray on gray and – you know – clean UIs that people that need very high contrast, very definite articulation of UI elements are requiring, and for you, it's fine if they're not there. The ninth one here is to *check mobile accessibility separately* – we've talked about a few mobile accessibility issues here. This is the same accessibility test where the link is underneath the map;

for some reason, the responsive view pushes the search UI to a link underneath the map into a collapse, and then you're  supposed to click on that link and open it up. Now, it's even hard to see for sighted users. Even when I was observing it, I barely noticed this link. What was happening with our blind users was it was skipping right past it; so, it was reading the screen – you know –

so, it was like *search results, a map, edit search*, and then... and then it was continuing on. And it was just the fact that it said "edit search", here you're seeing the user was turning down her speaking rate because she thought – she went over it like five times and didn't catch it. It actually was there. I thought it wasn't there; I thought it wasn't being picked up, but it was there. When she turned down her speaking rate, you could hear it being said, but it was sort of mashed in.

And the question was – this is like  definitely a usability question and a responsive design decision is: *Why would you need to collapse it?* Why not just have the UI – you know – *above the map would be better*, so you have it where it was before? Even below – if it was there – the actual just UI as opposed to collapsing it and making it a link that said "edit search".

So, you can see here really where usability in UX plays into accessibility when you're thinking about it. It actually requires you – in the same way that SEO responsive web design, accessibility requires you to be thinking about things the way a screen reader, the way a user accessing this website with a screen reader would think about it. And it's really tricky to think that way – I need to tell you this.

It's super tricky to think that way, because you're *not used to it*. You know – you're used to your visual bias; you're like, "Well, I can see the link... what's the problem?" And so, this is where accessibility testing can help you get to that last mile of insight. So, the tenth principle here is *embrace the access attitude*. It's *People First* – design for differences.

*Clear Purpose* – so, well-defined goals, and  that means understanding your audience. So, we'll be talking about personas later on in this course. *Solid Structure* – so building to standards; there are great standards. Accessibility is based on good clean coding. So, just like alt-text, every image  needs an alt tag – *every single image*. That's just part of clean coding, and it'll make things accessible and Googlebot will be happy as well.

*Easy Interactions* – everything works across devices. Interoperability baked right in. *Helpful Wayfinding* – so, it's navigation: clear navigation. One of the things with accessibility is a lot of sites and web apps make it hard for users to navigate. So, just like we saw with that comparison of the  usability test versus the accessibility test, it's like twice as hard / three times as hard to navigate  a site if you're using a screen reader, for example.

*Clean Presentation* – supporting meaning; that's a huge one: supporting meaning. *Plain Language* – plain language is really important, especially for the cognitive disabilities such as dyslexia or ADD or ADHD. And then, finally, *Accessible  Media* – so, supporting all the senses. So, offering captioning for deaf and hard of hearing users,

offering alternative formats – for example, if the media or if the image is too complex or the table is too complex, you'll need to offer a  different way for users to get to it.

There are two main reasons. The first that it's a legal requirement in almost all countries that you make websites that anyone can use, even if they have reduced abilities. This isn't the best reason, but for organizations with legal compliance is a priority. It can be a very powerful one. The second issue is that we find that accessibility is closely connected with general usability and search engine optimization (SEO). When we do things to improve accessibility,

we end up improving both of these other topics. It turns out that search engine optimization and accessibility have more in common than you might think. They both need to deal with technology that's trying to understand the pages. In the case of accessibility, assistive technology needs to present it to users with reduced abilities who perhaps cannot see it or hear it. So assistive technologies will attempt to present web pages in an appropriate form for those users. For search engines,

the Web crawlers need to understand the contents of the pages so they can be indexed correctly. So the structure of the content needs to make sense in both cases, cascading style sheets can work wonders in making a messy HTML page look brilliant. But style sheets are complex to interpret. Assistive technology and search crawlers may simply ignore them. That means if you're relying on style sheets to present your content in a meaningful order, those adjustments go away. Here are some general guidelines for implementing accessibility in web design.

One of the keys to accessibility is to design for assistive technologies or to at least be aware of assistive technologies. When you're designing, if you're looking at visual impairment then the screen readers are the main assistive technology there. Screen readers take the contents of the screen and read it out to you. They are now built into most platforms by default, including smartphones. But if you want to ensure your website works well, the screen is you should try it out. An accessibility specialist may be helpful in that respect.

Screen readers deal with written content, but an important issue is that we need to provide non text content in alternative media. This is the dreaded ALTtext that you are frequently prompted for when creating images. This is because screen readers are great for reading out text in HTML, but if it happens to be text embedded in an image, it has little hope. And for meaning pictorial images Despite the rise of AI, users are likely to get a description

of what an image shows rather than what it was intended to mean. And just as a quick side note, ALT text with decorative images should always be empty and empty ALT-tag tells assistive technology that is not important and can be ignored. If you've got video clips or audio recordings on your site, you need to provide text alternatives for that. Closed captions and transcripts are best and are now provided automatically by many tools. Of course, one of the real usability advantages of text

alternatives is that you can search them. So if you were looking on your internet or on a website for something that somebody said, then you could find that in the transcript and have the entire text available to you there. But most changes for accessibility do benefit all users, especially when you start to think about how can we simplify this layout? How can we make the whole thing easier to use?