Here you find the link to the slides regarding the March 2021 online SEOnerd Switzerland meetup ‘Why Accessibility is More than Just a Lighthouse Metric ‘ with Ruth Everett.
SEOs play a crucial role in the overlap between SEO and accessibility. This presentation will show how we can make a positive impact on accessibility through our work, as we help to make the web a more welcoming place for everyone.
Ruth explains:
– easy and low investment improvements that you can do now on a website –> microcopy helps here!
– how to make a case, to get investment for more complex implementation.
If the stakeholders still say ‘it’s nice but not a priority for us’ show them the benefits for the business ? If you frame the information in their words, they are more likely to understand.
Meet Ruth Everett
Ruth is a Technical SEO Analyst at DeepCrawl. She focuses on helping clients with all things Technical SEO & has spoken at several SEO events. She is also a volunteer for an international animal charity, assisting with technical and on-page SEO. In 2020, she launched a newsletter called Hello World where she shares resources and inspiration about Python for SEO (and dog’s pictures of course!
Twitter @rvtheverett
LinkedIn Ruth Everett
Full webinar recording with Ruth Everett
Read Ruth Everett’s slides
//www.slideshare.net/slideshow/embed_code/key/n2lXj1rGgw1WaY
Thank you Ruth Everett for your presentation
Thanks to our speaker Ruth Everett, we are so happy to welcome you! Preparing a presentation and being present at the meetup take a lot of time.
SEOnerdSwitzerland is nothing without speakers willing to share their knowledge. I am happy we got to welcome Ruth!
About #SEOnerdSwitzerland
SEOnerdSwitzerland is a non-profit association that aims at promoting and sharing knowledge about SEO (Search Engine Optimization). SEOnerd Switzerland organizes events in person and in webinars.
Join the community of SEO enthusiasts.
Follow us on Twitter @SEOnerdSwitz where we share slides, nexts events and articles we enjoyed.
Full transcript of the webinar with Rith Everett
Sara Moccand Sayegh: Hello everybody! Ah! Can you hear us? Not all together to answer, please. We could have the feeling that you are really hearing us. Okay! Okay! They answered, yeah! That should gives a good sign.
Isaline Muelhauser: So we have a working setup. Half of the webinar is okay now. It’s the easy parts the rest, right?
Sara: Okay! So, do you want to start or do you want to wait a few minutes? Okay, anyway let’s start. Anyway, our part is probably less interesting than what will come after, so… Even if… it’s still interesting. Okay. So let me share the screen. Okay!
Isaline: Welcome everybody at SEOnerd Switzerland. We are really happy to see you tonight. Well, see you or have you with us, I should say. We welcome Ruth tonight! And she will be talking about ‘ Accessibility’. So, we are really, really excited about this. It’s a subject very dear to us. And so, few words about the association. SEOnerd Switzerland is a non-profit. It aims at sharing knowledge about SEO in Switzerland and beyond. Thanks to Zoom! Sara and I founded the association a few years ago now. Because we wanted to discuss with fellow SEOs but we found no meetup close to us to actually meet some other people So we just founded the meetup and started organizing it. It used to be a local chapter. So, we started with in-person meeting. But then, you know, with Corona virus and everything so, we are live. And the good thing with the live is that we have no limitation with geography. So, we can invite great speakers from all over the world. And then, we can connect with you even though you don’t leave close by. So, I suppose they are like really positive things as well in this situation. Thank you for being here tonight. In case anything goes wrong just tell us in the chats if there’s a gut or a burger or something.
Yeah! And thank you to our dear sponsors, LIIP and PILEA.ch They help us pay for the fees and the transcripts and this kind of thing. Sara and I work totally for free just for the happiness of being here. But then, we are really happy to have support to provide transcripts and subtitles for every webinar. So, you if you don’t want to listen you can just read.
And another last announcement before we start. We have the next meeting, April 29th, and we welcome Kristina Azarenko. It’s going to be about eCommerce. So, if you haven’t signed up, please do. It’s going to be fun. Kristina is really fun. So, I’m hoping to see you there. I will share the link in the chat now so you can see what it’s all about in more details. Thank you.
Sara: Okay. So, let me introduce our speaker. But before that, yes, you still have to listen to us. So, how will it work? So you will have the opportunity to ask questions through. You can ask any question related to SEO, obviously, in the Q&A and in the chat, if you want. Mainly, we would prefer in the Q&A. Like we said, so we are sure that we can see it. And at the same time, we often realize that people are like, want to share knowledge or have some fact that they want to say. So it would be good if you can share them in the chat. And you select ‘all panelists and attendees’ because that means that everybody can see the question and not just us. It would be so sad if you give the information just to us. So yes, and Isaline also share the recording of the last webinar if ever you want to check it and yes, there is also the transcript on that. So, thank you so much.
And now let’s speak about Ruth. Yeah, we can do it. So oh, yes. So, Ruth, she’s a Technical Analyst at DeepCrawl. Yeah! And everybody probably knows Ruth because of her knowledge of Python. She probably inspired quite a bit of people to start also with Python. So, that is great! We know her for her love for dogs because if you ever saw one of her presentation, you’d know that she really loves dogs, really a lot. She obviously also, correct me if I’m wrong, but she also volunteers for an association for dogs. So, yes! To help other people, she’s also on Python. She also has a newsletter, Hello World So, we are also a subscriber by the way. And so, thank you. But today we will not speak about that even if she’s well known for that. That is another subject probably for another meet up. But Isaline and I are so happy that she’s here and speaking about ‘Accessibility’ because it was something really important for us. And we also read a blog post at the time that she wrote about ‘Accessibility’ and then we were, “Okay, she should speak at our meetup about Accessibility.” We would like it so much and we are so happy because she’s here and speaking about ‘Accessibility’. We did it, Isaline! So, okay. So, please Ruth, the stage is yours.
Ruth Everett: Perfect, thank you. Thank you so much for having me. I’m so excited to talk about acce- So I’m going to share my screen. Hopefully, you’re able to see this? Awesome! Cool! So… woop, okay. Hello, everyone. I’m Ruth. I’m a Technical SEO at DeepCrawl. And I’m super excited to be here talking with you today all about Accessibility, and how it intersects with the work that we do as SEOs.
So the main aim of this presentation and I guess my main aim in life is to help make the internet accessible and usable for everyone. So what we’re going to cover today is the importance of Web Accessibility, the intersections of Accessibility and SEO, how we can go about testing our website’s accessibility and then build a business case to get others invested in accessibility.
So, the first time I came across accessibility professionally, I guess, was in the Lighthouse Audit I’m sure we’ve all seen it. There’s like a subsection in Lighthouse which shows your Accessibility Score. And what Google actually say themselves is that this is just a subset of issues and they recommend further manual testing. And this was like the first step for me in realizing that accessibility is so much bigger than just the metrics that are seen here and I guess what we see as SEOs as being accessible.
So, the more I researched and looked into accessibility, I realized that there’s so many parts of the work that we do as SEOs that also impact the accessibility of our websites. And if we just take like a slightly different view to our work, we can actually have a direct impact on that accessibility for so many users.
So, let’s start with what Accessibility is. So essentially, it’s the act of making sure that websites are accessible and usable for everyone. And this ensures that our websites are perceivable that users can understand them. They can navigate and they can interact with them. And encompasses all kinds of usability So auditory, we have cognitive, physical, neurological, and visual impairments making sure that everyone can use our websites. But it also benefits users who have temporary impairments. So for example, someone who has a broken arm or is recovering from surgery or maybe they’ve lost their glasses. For example, there’s also situational impairments. So this might be a user on a moving train or someone that has a limited internet connection. And then also environmental, so this could be if you’re in a brightly lit room or you’re unable to play audio aloud.
So in order to be accessible, website must meet four principles and this is known as POUR. So they must be Perceivable, Operable, Understandable, and Robust. So, let’s go through those four things now.
So in order to be ‘Perceivable’, this encompasses removing any barriers that a user may have to accessing content. So that includes making sure that our websites are accessible for screen readers, supplying alternative text and a logical structure. So an example of being perceivable would be having clear and descriptive alt text. So you can see the bad example here is not a descriptive alt text. This is just telling us the name of the file, essentially. What’s also bad is if it’s completely empty because it’s not telling us anything. A better description is kind of telling us sort of what’s in the picture. But the best description is one that’s telling us exactly what is happening in the picture.
So in order to be ‘Operable’, this is mainly focusing on like the interface and the navigation. Making sure that a user can use the website regardless of the device they’re on. So, this is things like allowing enough time to complete a task, for example. So yeah, giving users enough time to read content or perform an action. So you want to avoid having kind of like moving or blinking content, any alerts or like pop-ups that you can’t minimize or are not easy to minimize if the minimize button is really small or it’s really hard to see. As well as having like a time alert to perform a task no one likes that.
Okay, so to be ‘Understandable’, obviously, users need to be able to understand the information that’s on the page. They need to be able to navigate and very interact with the interface. So this includes things like having predictable navigation. And then, also ensuring that content is easy to read. It follows a logical structure. So you’re breaking up content with headings and utilizing bullet points and lists that are correctly marked up.
And finally, in order to be ‘Robust’, So website needs to be accessible by all technologies and platforms including things like screen readers. And then, it must remain accessible throughout updates to platforms. So if you’re doing a migration, for example, sometimes the code might change and it’s no longer as accessible for assistive technologies. So, ensuring that it remains accessible throughout any changes and that it’s marked up with the correct components for additional information. So, now we know that.
Why is Accessibility so important? Ensuring the websites that we work on are accessible for everyone should be a primary concern for anyone who works on websites. And that’s SEOs, developers, designers, content writers, everyone, we should all care about accessibility. And there’s a number of reasons for this. But an accessible website is going to help all users. It’s going to help them easily navigate the site, improve their experience, help them find information they’re looking for, and complete the actions that we want them to take. And obviously, with the coronavirus pandemic, it’s causing the use of the web to increase even further. The need for an accessible website has never been greater really. In a report that was undertaken last March and April, 62% of the accessibility practitioners that were surveyed actually said that COVID-19 has raised the awareness and impact of accessibility on the digital channel. So we know that it’s becoming even more important.
And it’s imperative for user experience because when websites aren’t accessible it makes it incredibly difficult for some users to perform necessary tasks or find information they’re looking for. And we know that Google is shifting their focus towards rewarding sites that provide a good user experience. And they’re taking accessibility seriously. We know they want to display the best sites in search. And accessible sites are the best because they are the easiest to understand. And looking even beyond rankings, we want to ensure that a website is usable for everyone. That anyone could come to a website and feel like they can use it in the best way possible.
And in addition to that, it’s also required by law in most case. So in the EU, accessibility is covered under the European Accessibility Act. So this kind of prevents any products or systems from not being usable. So they must be able to be used by assistive technologies and presented in a format that any user can understand.
In the US, accessibility is covered by the Americans Disability Act (ADA). So within that act, inaccessible websites can be seen as in violation of the terms of that.
And then, in the UK we have the UK Equality Act. So this also covers accessibility. And within that law, it basically states that site owners need to anticipate the needs of potential disabled customers and provide a reasonable experience for them.
And there’s been some famous website compliance lawsuits in the past. You might have heard of some of these. For example, Domino’s Pizza in 2016. They had a lawsuit filed against them. Both their website and their app were inaccessible for screen reading software. And this prevented users from being able to order customized pizzas and also take advantage of discount codes. Also, Nike, so in 2018, Nike was sued for being inaccessible to screen readers. And the lawsuit for that one was cited, I think it was empty links and missing alt text. And Beyonce’s website also had a lawsuit filed by a user who was looking to buy concert tickets. But they discovered numerous accessibility errors. There was no alt text for the images. There was a denial of keyboard access and there was a lack of accessible menus.
So, we know about the legal side. Now, where does SEO play into this? So while our work typically focuses on ensuring websites are accessible for search engines, a lot of the areas we focus on to make them accessible for search engines actually also impacts accessibility for users. And in February 2020, WebAIM undertook an investigation using their accessibility engine. They analyzed the rendered DOM of all the pages after scripts and styles were applied to assess any end-user accessibility barriers and failures. And they found that 98% of home pages had detectable failures. In addition, 97% of deeper content pages also failed the accessibility testing. That’s a huge amount of pages. And the biggest factors that caused these failures were low contrast text, missing alt text and empty links. And obviously, as SEOs, we have control over two of those factors, alt text and empty links. We deal with them on a daily basis, some of us. So with this in mind, let’s explore the areas of overlap between SEO and accessibility and talk about how we can make a positive impact through our work.
Cool! So starting with Page Titles, obviously, we know as SEOs, these provide context to users and search engines about what the web page is about. And obviously, they appear as that main headline in search results. But not only the titles allow users to identify whether the information on a page is relevant to them. And if they want to click on the page and follow through after a search result, they also help to differentiate content when multiple tabs or pages are open. I’m sure as SEOs, we all have so many tabs open. And if we’re using a screen reader, screen readers will rely on those page titles to explain to users what the page is, if they’re navigating between pages. So by optimizing our titles with users in mind rather than keyword stuffing them for bots those old school tactics, SEO best practice and accessibility are going hand-in-hand.
So here’s an example of an unoptimized page title. It’s not very informative. It only tells me the title of the book. It doesn’t tell me the author or the shop that I’m considering buying from. Whereas this page title is much more descriptive. It tells me the name of the book. It tells me the series the book is a part of, the author, and also the shop that I’m considering buying from.
Okay, next up is Headings. So obviously, search engines use headings to understand content. We have our h1 tags before our overview. And then, our h2 to h6 tags which can further define the structure. And just like search engine crawlers, assistive technologies also use headings so they can quickly navigate to a page. Inform users what that section of the page is going to be about. And similar to SEO, best practice when writing headings for accessibility, it’s important to only have one h1. And to make sure that all the headings beneath, follow a structure that they’re relevant to the content that’s going to be written beneath them. And that you’re only using headings if you’re going to have content beneath it. Also, you don’t want to use styles to create fake headings, I guess.
So all of these sentences in this example are sentences that are marked up with bold or some kind of styling to make them better. But none of these will be treated as headings by screen readers or search engines. Whereas this structure, this is much better. This has one h1. And then, it’s got our structure that follows with our h2 and our h3 tags so that we’re setting that structure for both search engines, screen readers and users.
Cool, next is On-site Sitemaps. So these are useful obviously for users to find content especially if you have a really complex navigation. And they’re also obviously useful for pages which aren’t linked anywhere else so they still are being able to be found by search engines. But they’re particularly important for accessibility because they provide like a really clear overview and access to all of the pages on the site. And this helps obviously, users to be able to find all of the pages that they’re looking for.
So here’s an example of an on-site sitemap. This includes like each location and then a list and a link to each restaurant that’s within those locations. All in one place, it’s easy to see, it’s easy to find what you’re looking for.
Okay, so Anchor Text. So obviously, anchor text we’re using that to describe the content of a page that we’re linking to. Describe the purpose, and then obviously, help search engine crawlers to understand the context of the destination page. And Google have said that themselves that they use it to understand where we’re linking to. But it’s also really useful for users to determine whether they want to click through to that link. So just a ‘Click Here’ or ‘Find out more’ isn’t really as useful as telling you exactly what the page is going to be when you click through to it. And typically, if a user is on a screen reader, this will read through the page and it will inform users when a link’s been found. And it will announce the anchor text, say that it’s a link and then if users deem that to be something that they think will be useful they’ll be able to click, enter, and follow that link.
So here’s an example of anchor text being used really descriptively to explain exactly what page is being linked to. So you know exactly what you’re going to find when you click through to that page.
Breadcrumb Links, so we use these mainly as kind of like a secondary navigation to help improve internal linking for complex and large websites. But they’re also really useful for helping users to navigate back where they’ve been or where they’ve come from or track back or find like a top-level category. And they also show screen readers how a site is structured. So there are a few factors to take into consideration to making sure that breadcrumbs are accessible for all users. So this is things like making sure that in the same place across every page so that users know where to look for them. And then, similar to our internal link anchor text making sure that the links are descriptive so if a screen reader was tabbing through them it’s telling users exactly what the link is going to take them back to.
And here’s some examples of some different breadcrumb links for a couple of different sectors.
Okay, perhaps the most well-known SEO and accessibility intersection is our image Alt Text. So this provides that textual alternative helps search engines understand the context of an image which obviously can help us with image search. And it’s important to remember especially with alt text that machine learning algorithms that are used by search engines are progressing so rapidly. They can now understand if keyword stuffing is being used in alt text. And this is super important for accessibility because it’s providing that textual alternative for users. And if we’re stuffing our alt text with a bunch of keywords just to get it to rank that’s going to be read out to a user and that’s not useful. That’s not telling them what the image is about which is a really bad experience for everyone. It might be that the image just can’t be loaded and a user can’t see it or if it’s being read aloud to them and explaining to them what the image shows.
So here’s an example of bad alt text. This doesn’t tell us anything about what is in the image. It’s just the name of the image file. And this is how a lot of alt text typically looks. It just takes the name of the image file. And if that image isn’t named properly or appropriately, it’s not telling us anything. Whereas this, this better explains the image. It’s telling me exactly what is within the image. So if I am unable to see it I still know what the image contains. And I know alt text is like one of those things of, “Ahh,” you know, “do I have to do it. Do I really need it?” The answer is, yes! But it’s never been easier to add alt text to images. Advancements with things like computer vision, this can identify exactly what is in an image and it can create alt text for you. You don’t even need to write them yourself. You can literally run it through a machine learning model and this can create alt text for you. They are becoming so advanced that they can tell exactly what’s within an image. And it’s super easy to identify missing alt text too. We can’t use that excuse. If you use a crawler, I’m sure everyone does, obviously, I use DeepCrawl but any crawler that can crawl image resources, you’ll be able to do that. As long as you turn that on, so you make sure you’re crawling those. And you have some form of custom extraction that can help you to find that missing alt text. And this is you’re going to generate, a list of all the pages which have alt images with alt text that’s missing. And then, all of those images, you can easily identify which ones they are and go in and add an alt text to them.
And a bonus for alt text, I know a lot of us SEOs live on Twitter, they also give us the ability to add alt text to our images. So if we’re uploading an image of a graph or a website that we’ve worked on we’re able to mark that up with a description so that everyone can understand what that image is about.
Cool, so next up is Navigation. So, we know with the navigation, it can help users to find what they’re looking for, display the most important pages on the site, and help search engines to determine that structure. General best practice is to make sure that you only include the primary key pages in that navigation. Otherwise, we’re going to cause a lot of confusion and overwhelm for users and for search engines. They might just see that as being like a flat structure, no structure going on. But that’s also super important for accessibility. Navigation links are usually built to be tabable so that if you’re using a keyboard or a screen reader you can tab through the navigation. And if that was just like a super long navigation that’s always going to take a long while for users to find all of the different pages and find what they’re looking for. So in order to make sure that it’s accessible, make sure you’re including just those primary pages rather than the entire site.
So here’s an example of navigation which is sharing the most important relevant pages and then it’s kind of got that “See All” if you were interested in finding out more. but it’s kind of that it’s broken down into some sub navigations so that you can find exactly what you’re looking for. But it’s not giving you everything all at once.
Readability, so making sure content on the site is readable and digestible is important for users and search engines, of course. And this includes things like having readable URLs. So broken up with like a spacer, a dash rather than all kinds of numbers and weird letters because this helps users know what the page is going to be about. But also gives that context to search engines to understand what that page is about. Especially if it’s a new page that’s just going live that can be a really good way of giving that context. But also having like a reading if someone has a reading level that’s lower, it’s the best way to help users who may have a cognitive disability. Having a really readable, easy to understand site that’s structured in the best way. It’s not using jargon language. It’s left aligned and lists are utilized bullet points. This will help users with cognitive disabilities or also users whose first language isn’t the language that’s being used on that page. It just makes it readable for everyone.
And here’s an example. This is an article on readability fortunately in a readable format. So this includes our relevant headings, we’ve got easy to read paragraphs and it’s utilizing those numbered lists. And if you’re writing content in an HTML format, making sure that you’re using the correct markup is super useful and super helpful for accessibility. So we’re using ‘h’ tags for our headings. If we’ve got lists, we’re using the proper list elements for ordered or unordered lists. For links, we’re using the ‘a’ elements and the ‘href’ attributes. If you have buttons, making sure that they’re marked up correctly as being buttons. And using like a table element, if you’ve got table data and that you’re using the correct table heading elements so that users will know exactly how the table is structured.
Cool, and then last up, everyone’s favorite, the User Interactions. So we know if we have a drop down or an accordion on the site if we want that content to be found by search engines we know that that needs to be contained within the source code or somewhere that they’re able to read because they cannot interact with those. But again, those hidden text all old school methods, we don’t want to do that. We want to make sure that it’s reflective of what’s on the page. And this again, just like Googlebot, if you’re using a screen reader, you’re unable to kind of perform physical interactions unless directed to do so by the user. So cutting down on the number of interactions needed or making sure that all of the content is able to be seen or read by a screen reader is best practice and obviously, that’s useful for SEO as well. And again, avoiding any like hover actions to reveal any content, again unless that’s hidden content that’s within the source code. But making sure that it’s still relevant to what’s on the page and telling you everything you need to know.
And then, here’s an example of an accessibly marked up accordion element. So this is using like the correct section names and the correct controls and has the content within it.
And just a few other things to consider that aren’t directly related to SEO but still important for accessibility. So color contrast, this is a big one for accessibility. And definitely, if you’re interested in accessibility something to look into more. So having a low color contrast can make it really difficult to discern elements that are in the foreground from the background And this can make things like headings, links call to actions or buttons really hard to read and hard to see. So general best practice is ensuring that text has a contrast ratio of 4.5:1 and that’s the AA standard.
And if you’re interested to know how your website, how your colors are performing there’s this free Color Contrast Checker by WebAIM. In here, you can put in your foreground color and your background color. And this will tell you if with normal text, large text or if it’s like graphic, if this is going to pass or fail. So if you’re interested, I definitely recommend putting in your website colors and seeing how it performs for color contrast.
Other things visually, try to avoid using like color or style to convey meaning. So use it correctly marked up. So I correctly marked up headings rather than relying on using color or styles to do that. Use safe fonts when you can so that they’re able to be readable and viewable by everyone. Don’t put core content into iframes. This is, I guess, a given for SEO as well because you want to make sure that content is found and it might not be able to be found if it’s in those iframes And if you’re using a table, make sure that it’s device-friendly. So if you’re on a small laptop screen a phone screen or a big desktop that the table still fits and is nice in the page.
And then, there’s motor requirements. So some users won’t be able to use a mouse. They might be using a mouthstick, or another way of tabbing through. So don’t require a mouse to have to be used on your site. If you have links, make sure that they’re large enough so that they can be clicked by any user. And that they have focus states so it’s clear that they are a link. And for tabbing, so if you’re on a keyboard or a screen reader and you’re tabbing through, make sure that the order is the correct way so that it’s giving users the correct experience rather than taking them all around the page and not in the correct way. And then, auditory requirements, so if you’re going to have videos make sure you provide captions. If you have any audio, make sure that you’ve got transcripts for those. Adding functional controls for any media that you have playable on your website. And don’t autoplay videos No one likes that surprise when you land on a website and something plays automatically. It’s not a good experience for anyone.
Okay, so now we know the importance of accessibility and how it intersects with the work that we do in SEO. How can we go about testing accessibility on our websites? So there’s a few. I use Chrome, so these are chrome extensions but I’m sure whatever browser you use there’ll be some extensions that you can use. This first one is by WebAIM. It’s the WAVE Accessibility Evaluation Tool similar to the tool they use to perform their study. And this provides visual feedback about accessibility. And will put like indicators on the page to tell you which parts of the page fail their accessibility testing. And this will provide like a summary of the issues. It will tell you where the specific areas are and you can drill down and find out more.
There’s also the axe Web Accessibility Testing. So this uses the open source JavaScript library. And you can run this within your DevTools. And this is going to run like the test on that page kind of like how we run a Lighthouse Test. And this is going to display the accessibility issues that were detected and then where they were found on the page.
And then, we also have the Siteimprove Accessibility Checker. Again, another free extension, this takes a page and again tells you the issues with explanations of how they affect users. But what I really like about this one is that it will give you recommendations for fixing that issue. So it’s going to tell you exactly what the issue is, exactly where the issue was found. And it will give you recommendations for how you can fix it.
And something really exciting that we’re working on at DeepCrawl is being able to combine the testing tool with some JavaScript and some custom extractions. And then, we can pull out accessibility errors at scale. So rather than having to do it on a page-by-page basis we can pull this out for the whole site. So this is going to give you like an extraction where you can view the violations across the site and it will give you a score. It will tell you which URLs have passed and failed and exactly where they’re passing and where they’re failing.
And then, I’d also recommend installing a screen reader if you want to understand how a user with a screen reader is interacting with your website. I definitely recommend installing one and just trying to navigate through your website using it. And these are some recommendations. But I definitely recommend giving that a go or there’s some YouTube videos as well which can kind of explain and show you how a screen reader uses different elements of the site in order to voice that back to the user.
Okay, so we know the importance of accessibility, how we can go about working towards implementing it and how we can test it. But, of course, with everything we have to get some kind of buy-in so we need to build a business case. Hopefully, people care enough but sometimes we have to build that business case to get everyone as invested as we are in accessibility. So I found this really cool quote from the Web Accessibility Initiative W3. It’s, “Businesses that integrate accessibility are more likely to be innovative, inclusive enterprises that reach more people with a positive brand message and it meets global legal requirements.” And that’s what we want from our websites, right? That’s what we want our websites to be seen as.
So let’s break this down. Driving innovation, so thinking with accessibility is going to provide a more varied and flexible way for users to interact with the sites. And this is all users. So putting user experience first and defining and delivering like a more intuitive experience. Making sure that it’s human-centered and more friendly is going to help everyone. It’s going to make us make our website seem a lot more innovative and a lot more friendly and accessible.
It’s also going to help enhance brand awareness. We know that a clear commitment to accessibility is demonstrating that a business really cares. It’s that whole social responsibility side. And this can help enhance brand image, reputation, and even increased sales and customer loyalty.
And then, we have increasing market reach. So at least, one billion people in the world have a recognized disability. And that is a lot of people that we’re potentially excluding from our sites that are unable to access really important things that are going to help them answer their questions or do something they really want to do. But we’re almost stopping them from being able to do that if we have an inaccessible website. So it’s going to increase that reach and that ability to use our websites.
And then of course, improving customer experience and loyalty. And this again is for users with or without impairments. So making sure that everyone has equal access, everyone is able to access it. But this is also those temporary impairments that we spoke about before. You know, people that are on a smaller device, with limited internet connection, as people age abilities change or if they have a temporary impairment, if they’ve lost their glasses or they’re in a bright or loud environment. It’s making sure that the website is accessible for them, too, and everyone. And of course, those legal requirements that we spoke about. If you have to whip that one out just say we’re breaking the law by not having an accessible website.
And some case studies, I know sometimes we need some numbers to back this up. So I found some case studies. So the first is NPR, they had some new regulations around like broadcast media. So they created transcripts for their entire archive of recorded programs. And six months after that, they saw they had an increase in search traffic of almost 7%. They also had the ability now to search for reference to specific sections of audio. They saw a seven percent increase of visitors that viewed at least one transcript. And their unique visitors also increased by 4%. So they were able to open themselves up to a wider audience and get even more people on the website.
And then also, legal and general group, so they implemented changes to improve their online accessibility. And they saw a positive impact, a really positive impact. They doubled their visitor numbers. They cut their maintenance costs. And they increased their search traffic by 50%.
Okay, so I know we went through a lot. Hopefully, I gave you some things to think about. But I do have three key takeaways that if you take anything away this is what I hope you take away from that. So approaching our work as SEOs with more consideration and a different perspective can help to ensure our websites become more accessible and user-friendly for everyone. And accessibility is not extra work and effort. It’s just having more understanding and a bit more empathy towards everyone. Accessibility and SEO complement each other in the best way. And I hope I’ve been able to share some reasons and inspiration for that today.
There’s so much more to learn about accessibility though. So if you’re interested in coming on that journey with me and learning even more, here’s some resources that I would recommend for getting started. The first is Ally Project. Ally Project, in general is a great website. But they have a checklist which basically uses the web content accessibility guidelines as a reference point. And they have points which you can kind of tick off to ensure that being able to use your website and being able to read your website and understand your website is accessible, friendly.
And then there’s also the full Web Content Accessibility Guidelines. So these have like a range of recommendations for making sure that all content on the web is more accessible. And they structure their criteria as like testable statements so you can test each one when on your own website.
And then these are some resources for reading and checking out if you’re interested in learning more. I’ll leave that on the screen for a while. I got told off last time I shared resources because I didn’t leave them on the screen long enough So I’ll just leave these on for a bit if you’re interested in taking a screenshot. But I will share all of this afterwards. I’ll share the slides and everything. Awesome. Thank you everyone! If you want to chat more, you can find me on Twitter. Yeah, I really hope you enjoyed.
Sara: Thank you so much. It was excellent. And I’ve seen a couple of questions coming. And by the time that you arrive, yeah, and you answer the question. so that was the good news. And let’s start with the questions. Okay first of all, the profit of getting credits, “Thank you Ruth, very interesting.” “You did an excellent talk.” Read a little bit, be proud of yourself. But okay so I will start with the Q&A and then, I will go back to the chat. Isaline, if you want to intervene and help and you saw some great questions and you want like to ask, go for it.
So, is there a word or a character count limit for the alt text?
Ruth: Not that I know of. I mean obviously, you want to make sure that it isn’t super long and that it takes ages to read out. But I think, in general and Google have said this just making sure that it’s descriptive as possible rather than trying to stick to like a character count just making sure that it’s as descriptive as possible.
Sara: So the second question is again from the same person but as I had exactly the same question then I’m decided that I will take this too. Okay. So, how do you respond to accessibility- okay, this is the abbreviation in English and I have no clue- W-R-T, and then, I can read Dyslexia. So imagine if somebody has this kind of sick, what can you do? Is there a special font that is needed? Or is there like a special size probably for the font? And do you have an option to suggest?
Ruth: Yeah, I’m not entirely sure what the best font is but I think it’s just making sure that it’s kind of like open sans font so that it’s really easy to use rather than that really fan- I know it can be really tempting to have like fancy design and fancy elements, but making sure that it’s open sans and like a standard text. And there is a size, I can’t remember off the top of my head. But I will find it and get back to you on the kind of size. And just yeah, making sure that options available. Obviously, you do kind of have to play that like design versus accessible but you can find that balance. There is a way, many people have done it. There is a way to find that balance so… And testing as well, testing out different things and seeing which is best and most liked by users. If you’re into that kind of thing I think that would be a good way to go about it as well.
Sara: Okay, so we answer this question, fantastic! So even through technical side touch upon UX and help generate some SEO improvements, how do you convince the customer and to assign budget for this? This is a complicated one. So, and how to prioritize your position accessibility task in your project? Okay. Too many questions in one.
Ruth: Yeah, so I’m going to start to kind of the how to go about with the numbers and the budget and everything. But I think prioritizing it is based on like the things that are affecting your website. So I don’t want to say it but it depends on the issues that your website are facing. So if you have a real issue with alt text Obviously, we know that’s important. And that’s something that we might even be able to do as SEO. That doesn’t need developer time. But obviously some of these things we need to get develop a resource for. So I think it’s taking it case-by-case for each website But making sure that it’s kind of the most the issues that are affecting your website, the most are kind of prioritized. That is how I would do it, personally.
Isaline: And I have something to add. I think it depends on how you frame it. If you frame it like, “Yeah, let’s do that for accessibility.” Sometimes it doesn’t work very well. But if you frame it in terms of, ” Oh, this is a low hanging fruit because it does not require to rewrite an entire page. So you don’t need a copywriter for the whole day and it doesn’t require a developer for the whole day. So in terms of investments…” So it doesn’t work for all accessibility issues but it works for some of them. Just to frame it in terms of these are improvements that require less resources investments than other improvements and can change a lot and bring some positive, have a positive impact. So…
Ruth: Definitely.
Sara: At first you can always treat your client if it is in the U.S. to remember what happened to Pizza Hut. That’s Pizza Hut, yes?
Ruth: Yeah.
Sara: Because I think that they have to pay a bomb because they were not respecting accessibility. Scare the client.
Ruth: Yes!
Sara: So, okay. Okay, so that’s your answer. Isaline, do you want to add something on that? If not, we go on the chat question because I saw some question passing. How to forecast the accessibility? Okay, these were already answered. An excellent talk, blah, blah, blah. I really appreciate…
Ruth: Yeah, I saw that point from Christina. And I think that’s one that’s worth saying as well. Like working with folks that have disabilities and paying them and getting them to test and to make sure that your website is accessible for them and getting their feedback. But as she says, making sure that you pay them well and you compensate them for their time.
Sara: So, then we have some treats that are nice. So, okay. I think that we answer all the questions. If somebody have like a one last question. Do you have it? Okay, let’s go. Is the new to- Ah okay, that is directly for you because it’s about the new DeepCrawl tool. Oh, no. DeepCrawl is a…
Ruth: Oh yeah, it’s just the API from WebAIM. But as we test it, it would be really cool to work with different people. So yeah, that would be really cool. I’d love to be able to work with the people to make sure that it’s as accessible as possible. Thank you, Christina.
Sara: Okay, so she will send you the information. So, okay. So let’s take the last one. How do you solve this issue, <aria-hidden=”true”>?
Ruth: Oh, I’m not sure, that’s… Maybe that’s a bit above my pay rate. I think that’s kind of a developer question. But yeah, I think as long as it’s there it should be accessible for screen readers. As long as you have ‘aria’ on there. So assistive technologies can confine them. But that is a good question. I’m going to look into that and get back to you on that one.
Sara: Okay, so we have it again. How can we count the forecast of the accessibility?
Ruth: Yeah. How many issues you’ve got? What it’s going to look like to fix that? And what that’s going to look like once it’s fixed? Based on how we, I guess, do our normal forecasting for SEO. Just take that kind of mentality and apply that to everything that you need to do for accessibility.
Isaline: And probably you can test out. Like run a few- Before you start to do everything, maybe test, fixing a few issues on a few pages and then, you have a sample of results.
Ruth: Yeah!
Isaline: And then go back to the person with the budget with the sample of example and the results.
Ruth: Exactly.
Isaline: And then, you can prove your case and show what happens. So that usually works quite well.
Sara: Okay. So I think then that’s cool and that you answered all the questions. And yes, as you say if somebody want to interact more with you it would be on Twitter, if I’m correct?
Ruth: Yeah!
Sara: They can follow you and asks several questions on Twitter. But I think that you answer to everything. So I imagine, my guess is that you will not have extra questions. So okay, that’s all? And thank you so much. Yes, so I also saw the issue about the slide. You do not receive our emails. That is very disappointing. But we will see. We will see why. Thank you to the meet-up platform. And we hope that you will receive the email with the slide of Ruth and the recording. So, thank you so much Ruth. It was fantastic presentation. I don’t know what to say more than that because it was fantastic. Thank you so much.
Ruth: Thank you for having me.
Sara: Okay. So, bye. Oh no, wait a second. Everybody’s still saying, “Hey, thank you, thank you so much.” So profit of this moment.
Isaline: We’ll take the love. We’ll take all the love there is and share a little bit of love. So I’m a cat person. I’m not a dog person.
Sara: Yeah, but so Ruth, you should show your dog now, right?
Sara: Okay, now it’s really time to close. So, thank you so much.
Ruth: Thank you.
Sara: And for participating. Ciao, Ruth. Ciao, Isaline.
Ruth: Thank you.
Isaline: Bye.