![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
amazonvBoost Your Accessibility Compliance and SEO At The Same Time
Type: Breakout
Track: Wildcard
Learning and implementing accessibility techniques require extra time and budget. If you are struggling to get approval from your supervisors highlighting the SEO benefits of accessibility techniques can help you get the much-needed approval from the decision-makers to make your content accessible. This presentation discusses how adopting accessibility principles for content, title, links, images, list, and video can help your content to be accessible for assistive technologies and search engines alike. Examples in this presentation are drawn from the redesign project of the Penn State world campus site for online education.
I've been doing accessibility work for the last 12 years, today I'll be sharing my experience of accessibility compliance in higher education, co-presenting with me is my colleague, Levi.
>> Thank you Ritu. I am Levi Bloom, I work in the search engine marketing team at Penn State. At normal times I would've been sitting only about 10 feet away from Ritu. My specialty is search engine optimization. Or SEO as we will refer to it. I've been doing this about five years at Penn State but €16 total. I'm excited to talk about how accessibility and SEO can work together.
>> At the end of the presentation be able to identify the common ground that reinforces both accessibility and SEO. This includes elements of navigation, and responsive features. Hopefully you'll get one or two tips to get for your managers for spending time and money doing accessibility practice for your digital content, which also benefits SEO. What is common in search engine optimization and accessibility, WCAG standards are accepted by all the universities across higher education institutions. College and university focus on providing equal access to information, programs, activities. There are web-based applications and online instruction. All digital content should be accessible to all users no matter what browser, device or assistive technology they use. Accommodating the needs of students with different ability is the right thing to do. And it also helps education institutes save a lot of time and money from litigations.
>> To compare SEO and accessibility, first, SEO. SEO is hard to define. Anything that you do in order to get your website ranked highly in search engines can all be considered SEO. Comparing accessibility to SEO we have accessibility which advocates for ease-of-use and equal access to information by people with different abilities. We have SEO which is what rankings and click to see a lot more profit motive on the side. Specifically, the overall go with as many visitors to your website as possible ranking highly in search engine results. Because these people are actively searching for what you offer, and clicking on your website in the search results, they should be highly targeted and very valuable. Once these people arrive, we don't want to give them any reason to leave. If a site is not accessible, it could be a good reason to leave. Therefore, the website should be accessible to everyone. Meaning there is great SEO value to accessibility work.
>> There are different reasons why accessibility and SEO practices are in higher Ed marketing. Both strive for the user base and both want to be readable by machines. These machines can be screen readers or search bots. SEO and accessible to have a common goal of reaching as many users as possible. To achieve this goal they need to develop machine compatible interface.
>> On the technical side we also have two audiences when it comes to SEO not just the people visiting the site. Because if we could get actual people visiting your site from search engines, you have to get your website index and ranking in the search engines. To do that you realize something called search engine spiders. Essentially, these are machines that visit your website and crawl through it and render it and decide they will index your pages. Google bought for instance the name of their web crawler. botWe really want Google bot -- you can spend a lot of time learning about just this piece of SEO better off talking to Google engineers when it comes to that? I will not get into the specifics. The point is, are the similarities between search engine bots and technology excessively super important for SEO and having accessible website will help ensure that your website is indexed by all the major search engines. Google, Bing, Yahoo, and more.
>> Accessibility practices is based on four principles. Perceivable. No matter what he uses to access the content, it should be perceivable. Operable. They should be able to understand and interact with content using keyboard or mouse. Content is simple and understandable. -- Content across different backgrounds, devices like laptops, phone, iPad. It is very easy to implement these principles if you adopt them proactively and integrate them in the initial design discussions. Information architect and website code. We've adopted such an approach our institution. Majority of accessibility needs are met if we provide relevant title for each page, follow heading hierarchy on the page with meaningful links, accessible files, PDF's navigation, keyboard from the interaction, non-text elements like audio and video have alternative text, transcripts and captions. That can be read by different assistive technologies. Overall, websites should be built with clean and valid -- using the practice designs in mind.
>> If you look at the list for SEO as is practically a mirror image of what you should be doing for accessibility. The reasoning behind each piece is not necessarily the same. Because of slightly different outcome goals usually, but for the work you're doing to the website it's all very similar. A large portion of SEO really is a simple as making accessible and user-friendly website. There many other areas to SEO, a very broad field. In addition to this on page SEO there's also off page SEO. You work with factors generally outside of your control. Today will focus on the technical side of things and the on page SEO where we overlap. Next we look at each one of these in detail.
>> Title, the first page element. Each webpage has a title that describes the topic for the purpose of the page. Titles are not very obvious and hardly used by our sighted users. They can have multiple tabs open on the same window and still navigate with ease from one to the other. But screen reader uses depending on the title of the page, to move to the correct tab. If titles are duplicated or missing it would be very difficult for screen reader to find the right page. Best practice is to add accurate and concise title that refers to the content of the page. Do not rely on your CMS to pick the title for you. Set the title, tag structure to something like page title followed by the site title. Which will help screen readers read new information first. Like admission Penn State versus Penn State and so on.
>> While most people already on the website will hardly notice that page title, the page title is front and center. The search engine results pages are said in a fancy way of saying search results, but refer specifically to the presentation of the results for the users. Anyway your page is the first thing people see and as a factor in whether or not they will click to the website. Both a descriptive title of the page, and advertisement for your page. It has to do double duty. It needs to include relevant keywords. Especially your most important keyword. It should be enticing enough to make people want to click. He just so the example of our home page title. It works for people familiar with our brand, searching for Penn State world campus. As well as other people in the target market who might be looking for degree certificates and courses offered online. No click bait needed though! Keep in mind, the search engines only a lot you so many pixels. You only have approximately 55 to 60 characters to work with when writing your titles. Anything beyond 55 or 60 characters is usually truncated and replaced by an… In the SERPs. If you have accessibility and top of mind and title is accurate and concise you are all set! To make it easier you might want to use some type of SEO plug-in that goes with your CMS. In our case, we use meta-tag module and -- for word press.
>> Headings. Headings organize. They can be edited in two ways. By changing the font size and type and color. Second is by adding a markup. In both cases it will look exactly the same and for sighted users they will have no problem. There have a satisfaction but not for the screen reader users. Without markups it will be full of continuous text. Screen readers will read the entire text from top left to the bottom of the page. They will not be able to scan the page using shortcut keys to find the headings. -- proper hierarchy of heading is important. With sections and subsections. Rule of thumb is to have at least one -- and not skip levels of headings to avoid confusion.
>> All of your page content is important for SEO. Due to the extra prominence of headings, many people believe they are extra important for SEO. Get your important keywords in here too. What keywords are we talking about? Plenty of options. You could use the main keywords or use variations of them. Or you can use other important subtopics. They are all good ideas, just think about what your user would want to find out. The main point here is to use the headings in the first place. Probably the biggest case for using headings is that they make a page more user-friendly. They make the page scannable and easier to digest and being scannable is good for all users because almost everyone wants a page they can scan through quickly because time is valuable. Who isn't in a hurry to get the information they are looking for? You want to make the information easy to find so that people will stick around until they find it. People show up to your site and immediately hit the back button to go back to the Google search results, ultimately choose a different website, Google can use as a signal that your website shouldn't be ranking so highly for the search. There is also a theme here with keyword usage when it comes to ranking search engines, Google is smart. It knows if a keyword is here in the title and the headings it must be important. There is no faking it. As opposed to a bunch of keywords in a footer and a very small font size, or keywords the same color as the background. It is a snake and cures into your site like that are long gone. And that's good news for accessibility as we will explain shortly.
>> Content. Content is a thing of the digital world. Many attributes -- contribute to the regal status like -- the language used. Keep the language simple, jargon free, concise and help with readability of the page and minimize the cognitive load on the user. Best practices to choose font which makes it easy to distinguish the number and letters. And nothing too small. Research shows that left aligned text is easier to read as it has the predictable starting point for each line. Avoid justified text which is more difficult to read because of the extra spacing in between. Color the font is important as all users see the color equally car is ignored by this screenreader. Make sure that color is not the only medium to convey information in the text or graph, use good contrast within background and foreground. As you know, guidelines are teased 4.5:1. Line spacing also contributes to better readability. Recommendations that have spacing of 1.5 times in between the lines.
>> Everything that you're doing for accessibility and improving readability, making content easy to understand, reducing cognitive load, it all makes it less likely for user to bounce and that's a good thing for SEO. Don't give your readers a recently pierced to much presented the content. We couldn't cover everything in this presentation but I really want to emphasize the jargon piece. Because often times, especially for us in higher education, we are very guilty of this. We write in these ways to demonstrate our expertise and vocabulary. Rather than writing language that our site visitors will easily understand. It is marketing content not a thesis, not an application. I also highly suggest that you do some keyword research to find out what your target market is searching for. If you're not doing basic keyword research you might end up putting a lot of effort into writing content that no one ever reads. Then you're just wasting your time. Their free keyword research tools are pretty good. You can get ideas from some things might be using already. Like Google analytics, internal site search data that you can collect, Google search console is provided by Google their free, no excuse to skip this step. If you make your content accessible and remember that your writing to prospective visitors, you should do well.
>> A picture is worth a thousand words. -- All non- textual content photos, graphs and illustrations need to be developed for assistive technology. Adding alternative text which is inclusive and visible on the pages help machines read these visual elements. As you all know, images used can be ignored by the machines are properly tagged. If not, screen readers read the names.
>> All text can be very helpful for SEO as well. Yet another place to put your important keywords. You have to do this in a considerate manner though. Because if you do stuff keywords into the text it will be annoying for someone with a screenreader. You want to balance SEO and accessibility. You can place keywords in their but still have the old text so the true function of describing the image. There is even a potential SEO benefit for making the keywords part of your file name. For example you can have keyword-keyword- 0027.jpg. It's probably better than image 0027.jpg. And if you have is to help your content writers and editors find relevant images within your media libraries all the better! And alt text can also help potentially opens up your site to more visitors. Finally, make sure the images are optimized to ensure fast loading pages, impact on your page load speed and Google is prioritizing web titles this year and really, who would not appreciate fast loading website?
>> Like images, videos are an excellent medium to tell stories or to bring a class lecture online. As was mentioned yesterday, nowadays, a popular trend is to upload videos more often online. Adding the transcript and captions helps screenreader with these videos people with cognitive and learning disabilities can also benefit from it. And so, our ESL learners. Most popular platforms like YouTube a lot to add transcript and captions for videos. Users can control the transcript and captions. And video controls. If you're adding video is good practice to the title after that the screenreader can announce it in the state of reading the filing of the video. Similar to the image example I mentioned earlier.
>> We always want more content in our pages. Because in general, more content means more opportunities to rank in the search engines. Text content is just the easiest content for search engines to process. Having transcript for the video and/or audio provides a lot of text content for the page. This could even be really simple to implement because you can probably take your closed captioning file and post that text as a transcript.
>> Links, it's safe to say that links have revolutionized the information. They connect text, audio, video. But not all links are the same. Some links can be more accessible. Best practice is to add -- it is beneficial on two counts. Visually, click here instead of the scholarship, the user would not know the purpose of the link. Avoid linking the content that is not related to the link. Secondly, screen readers use keyboard -- to pop up a link is multiple click here links are confusing and require complicated -- to understand the page and purpose of the links. The complete URL, screenreader will read out each letter number and-making a different understand the destination of the link. Make links user-friendly. Good contract color would help low-vision users to visually add links, best practice is to have a contrast. As mentioned earlier, links are interactive elements and keyboard users need a clue to know when they go to links or browsers have default but is different across browsers. Adding custom focus to links can provide similar experience across browsers. And easy identification of links. Another best practice is to open links in a single window. As much as possible. If links open in a new window, user cannot use the back button or navigate back without closing the new window. Which can be more confusing in interfaces. If you have to open a link in a new window, add that it is your indication for screenreader. Link opens in a new window or external link.
>> Links serve many purposes. They are so critical to SEO. If I could I would wrap this part of the presentation in a H1 heading and make it strong. I would even make it blank or Marquis across the stage of was not such a terrible user experience. Instead I'll just say please, please pay very close attention to your links. Why is that? First, they aid in crawling and discovery. Helping the search engine bots find your pages. Will be a navigation menu which we will talk about more in a moment. As well as other links throughout your content. Quick aside while we're on the topic. Must not forget your URL structure. Google recommends you use single human readable and logical your will paths. Basically they are saying to use words rather than a bunch of question marks and parameters because those to put you in situations where Google may have trouble crawling and indexing your content. If you have a simple URL and links they should be able to crawl the site. Links also help determine the authority or importance or popularity of your webpages. In the simplest terms, the more links a page has, the more important the page. Search engines use popular things like this to help them rank the best pages. They are very secretive of details though. Links provide context. The link anchor text signals the relevance of the page. Use actual descriptive keywords in your text. Not just click here or read more. There is no context from that. Make sure that the anchor text is long enough that the user knows what they are clicking to, but not so long that it includes extraneous words and ends up diluting the meeting. Those are the basics of linking. If you can get that right you are better off than most websites. Even that is just the tip of the iceberg.
>> Navigation. Easy, predictable navigation enhances the experience. Keep the diverse user base in mind. Remember people with low vision can zoom the page by 200 percent. Check the design to make sure no information is lost or overlapping and there is no horizontal score bar at the bottom. And no functionality of the page is compromised. Best user experience for keyboard user is to access all page elements without keyboard traps. Tab from top left of the page in sequential order with a visible focus. Focus house used to identify the active elements. Which is possible only with visible change in design like a border, background, color, or combination of these. The default, browser setting or focus are not keeping up with the modern page designs.
>> You want to keep a diverse user base in mind while designing a navigation. We talked about Google bot early. As part of that user base. Just like a person, Google bot needs a way to find your webpages. As mentioned earlier, it uses links to do that. You need the links on your website and what better way to accomplish that that with the navigation menu? You simply need regular hyperlinks nothing fancy. Just your trustee -- no extra work is required. Your site is keyboard navigable it will be easy for the bot to travel to.
>> Use of mobile devices on the rise. According to research 81 percent of Americans own smart phones and roughly, one in five American adults today have smart phone only Internet users. The survey shows that this is a ready popular among people with disabilities. It is important to make sure that the webpage are more friendly. Some assistive technologies require a device on a certain orientation. So it is important that content and orientation is independent. -- These days because of mobile device usage Google is using mobile first indexing. That means when they're looking at your website, they looking at the mobile version. If you have a responsive website that meets accessible requirements and the content or links on the same regardless of the screen says you should be fine. But if not your Google rankings could suffer. I'd make it a top priority to improve mobile friendliness. There is some overlap between accessibility and SEO. Something that you do for accessibility have no impact on SEO and vice versa. It is not a total overlap. Your labels, the description, but for the things that do overlap, those are key. Because they can benefit both SEO and accessibility. If you're having trouble getting buy-in for your projects, make sure you add in all the relevant SEO benefits that can be realized by doing your accessibility work. Combined, they cleaved more traffic to your site and less risk for an accessibility violation. Working in SEO and feel your pain. If similar struggles getting buy-in. A lot want clear-cut results and hard numbers. They want to know they can invest X amount of dollars and get Y amount of exposure. With SEO we don't have that clarity. There are a lot of estimates, a lot of work to be done behind the scenes before you even begin to reap the rewards. And things change all the time. Search engines are always moving the goalpost. With the uncertainty not everyone jump on the bandwagon. Especially when I tell them I can't get results overnight. I might need to stress the SEO benefits. It is so important for SEO and accessibility coworkers to join forces.
>> There is much more to SEO and accessibility than what we cover here. But we hope that you found some common practices that you can implement to boost accessibility and SEO of your websites. Here are some free resources which which we use and find useful as you can see, some common tools like lighthouse, screaming frog which are used for both SEO and accessibility. We would like your feedback and comments. Or any questions that you have for me or Levi. Thank you.
>> Thank you!
>> All right, thank you guys so much! Let's, we have gotten a good 19 minutes for questions. And we have a lot of them. Again, if participants see them questions that you like in the Q&A upload them because I'm going to, not similar to SEO sort of use that to rank the popularity of the questions. Then I will post them to the speakers. Let's take this one from John. He asks, do you know any concrete examples of improved SEO for company post accessibility and I assume remediation or consideration. Like where it companies views improved but they solely on accessibility considerations, this information will be awesome if -- ammunition.
>> I will start on that one. That is a fantastic question. The one thing that I will start off with is unfortunately, I don't have any great data to share in that one. If I find some I will be very happy, let me know if you find any! Because one thing that I typically say in a situation like this, is just that, and I think I alluded to it so many SEO projects because SEO ties into accessibility and content, the rest of the web development team, there are so many little pieces all around and you have to get really, all the little pieces right and in place to really see the results. Unfortunately, I think it would be more rare that you find a situation where just adding SEO to accessibility would have the concrete results. It is more possible if you have, if you do a large project all at the same time. You could probably get it but unfortunately, in our case, we are so many projects and we just, we have to get the little bits of accessibility and SEO in there when we can so there's usually no big influx of SEO and accessibility work that we get to see the results right away.
>> Okay I gotcha. So look you have to almost except that is burned up beforehand to get the real data rate because it is hard to measure. Here's another really popular question, bot say that identical text and image links close together like a product listing should be combined into a single link or one link should be hidden from the screen readers so that those assistive technology users avoid repeated content. Are there negative implications to this? Especially hiding one of the links. And by hiding I believe that the person means from unit like a heading or something like that.
>> I would say no. I was so there's no issue with that. Having one link instead of two would be totally fine. And having in general, hidden content is something to be careful of but when it is done, in a way for accessibility, I think Google is usually good a lot of the representatives are usually very fond of accessibility work. And I don't think. I think in general, you would be safe to do that. I can't speak for every scenario. As far as I know you would not run into SEO issues with that.
>> Gotcha. This will be a little curveball but I'm staying true to this voting it is popular and I don't know anything about this myself. It says how big of a role will good web accessibility scores play in the May 2021 Google SEO algorithm update. Which I did not know until this question was posted. Can you speak to that?
>> Yes I can give you just a quick background on the upcoming May update. It is going to be based on what Google is calling court web vitals, which is essentially, the user experience like your page load time, and whether or not the layout shifts while you are using a website. Things like that, there are three specific things they are looking at. No, that's a really good question because I have not tried to tie this to what I know about accessibility, we have not chatted about this either, we do have the rest of our web developers working on it. -- Do you think performance is a big part of it? Load and other factors that could have accessibility overlap. But unsure exactly which is the best criteria that fits there.
>> Yeah. I would say definitely, tie the two together I think that there is enough correlation that they could really make the case for it and it would be a very solid argument. That accessibility should be considered if you're putting changes in place in advance of the web vitals update in May.
>> Yes, also I think everything is getting reinforced by that you know because the content will be on different view independent because it is more willing to face you have to be mindful of that and another thing, the touch area you know, 40 8X, which is, we are making sure that all of the new designs follow the pattern so that corrective process has really begun.
>> Great, thank you. Quite a lot of questions about transcription in media. Here is one from Gina. Is it redundant or considered duplicate content if you have a transcript on a video page in HTML as well as closed captioning within the video player itself. I think the question is leaning towards is it considered duplicate content for SEO purposes?
>> My thoughts on this one, another great question. You guys are really on fire with some of these questions. I think in a lot of situations, the close caption file might not be easily read by a bot or other search engine spiders so they probably only going to see the text transcript. I think if you put both and they were reading both, most likely and of course, it could defer in certain situations, sometimes we just have no idea how Google will take something. I think in general, they would figure out that you are doing it I think will be easy to see that is two different types of content and is not really done in a malicious manner.
>> Like write this the SRT we know why they are doing this and of course until people start to abuse it and then they may adjust accordingly, right?
>> That's true. As soon as everything gets abused, the whole game to change and everything you know -- Chris will remove that white on white text from back in the day, right?
>> That's a good answer. Thank you. There's another question from John and I think this is more of a tactical question think that he knows the technical answer but more about how you approach this. It says regarding page titles, and convince clients not to -- to be descriptive of the content on the page?
>> This is a great point of view you have to have a small title so that it does not read like a sentence.
>> Yeah.
>> It will get truncated if it's too big or too long.
>> Would you say that would be where you compare the two together? I think that it was Levi who talked about balance, kind of a dance there because the keyword stuffing search engines are not going to fall for that these days anyway right? And it will create a bed experience for assistive technology user.
>> Totally! Working with clients and stakeholders and convincing them especially if they have certain ideas that contradict yours could be very interesting. It's one of the challenges you always run into even when you have, if you ever SEO skills down managing the relationship with clients is always interesting. doing this for 16 years is not a good enough answer? [LAUGHTER]
>> That doesn't often work. One of the tips I have is just to see if they have, if there's anything in particular they like so I know, I work with a lot of people who very interested in what competitors are doing. Say that your client is you know like to keep on top of competitors. I would look for other competitors that might have, they might be using titles that are more practical and more not just a keyword. I think there are a lot of examples even if you had to go to different industry. You can find a lot of good examples of companies that have much more desirable page titles and get screenshots and show how they look. And then compare that to the visual presentation of more keyword self title, maybe Photoshop some software there are some keyword stuff titles and with others that look a lot better. And then by putting them next to each other, you can kind of see you know, you don't want the client to have their website get a bad reputation or look shady compared with the other competitors are doing there. I would try examples like that if you could.
>> Interesting angle! That's always a way to get a response if the technical answer to work. I think we have time for a couple more. Here's one this interesting. If my JPEG or -- image consists of a photo with words or text of a poem, what is a best practice? Should I have alt text plus the description? Assuming images -- a poem about birds, that's an interesting question.
>> There are various ways. It's a very interesting topic, simple but still very complex because it depends literally, to give all tags of the image. But it's reference. You know like why you are using it. If it's an image of the palm after it all the text on it but depending on what page were including we tried to give an example of trying you can talk about the shrine or who was the sculpture or the practices about Penn State football. Yet to see in which the pages are is the relevance of the image on the page would it carries can be two different things. The same image can have a different --
>> Any best practices on character limits they feel are important. The screen reader behavior has changed a bit but from a SEO perspective.
>> I usually go with tried to follow the accessibility guidelines, off the top of my head hit the 12 words is probably the max that you could fit in there.
>> And if you break it up you put too many and it do word stuff like that. That's interesting. Those are pretty good overlap between the best practices.
>> Let's see. What we have left, here's one. I might've countered this by mentioning the white on white text earlier. This just came in. Do you consider white on white text -- would be treated as poor from a SEO perspective? A lot of times is used for accessibility purposes. Like offscreen text or something. Some technique like that. Definitely now with the shift to mobile, this was a big issue for a while, I think it's mostly ironed out with Google I wouldn't be surprised if they have issues with some things. I think that in general, any time that your putting the text off of the screen or hiding it for legitimate purposes, waiting for the right time to show up for the user and things like that. I think in general, that will be fine. I think Google is most looking at that and I think it's one of the reasons they like to have access to your JavaScript and CSS files. They can really look at how you're displaying it. I think at this point they will make a good distinction between when you're doing that properly versus the malicious style. I would assume if you are it also ends up being proper content versus a list of keywords that might've been more common --
>> I don't envy these people, and my doing this for good or bad reasons? I think we might have time for one more. This is interesting. I'd actually like to know the correct answer to this. This is from anonymous. He says, and you've known for an element -- will be considered from a search engine bot as a traditional H1?
>> My initial answer for this, and I'm not claiming it to be absolutely correct. I am pretty sure the search engines will skip over those labels. I think for them would be a lot easier if you have an actual H1 tag in there.
>> Maybe, I've seen this technique quite a bit when the content is over the lock semantically. People would use JavaScript to apply the declarations to get into an accessible state. The team -- maybe Google might not be as adhering to that? Is that what you're saying?
>> Yes, this is just based on comments I've heard and I've read from some Google spokespeople. The webmaster analyst, they personally advocate for accessibility but in terms of how it gets used in the algorithms and how they are analyzing in your pages, it is probably just skipped over. Not for good or bad, just not something they are taking into consideration.
>> When in doubt, use the traditional heading element whenever possible, one through six. I can vouch for this technique for accessibility but you might not get the SEO that you would like. Okay! With that, I think that we are going to be out of time for questions. We got through most of them. Again, you can download these slides from the session page and the contact information that you see on the screen. It will also be in there so if you want to reach out to our wonderful speakers, please feel free to do that and thank you so much for the talk today! I hope everyone enjoys the rest of Axe-Con. I will not sign off because our production guy asked to wait for the all clear! Two and right on time!
