Accessible SEO 2021: Building Your Roadmap for a Stronger User Experience
•Download as PPTX, PDF•
0 likes•97 views
Google is poised to launch a user experience algorithm update in 2021, but if 20% of your traffic can’t access your website, can you truly say that your website has a strong user experience? This session will dive deep into the overlap between SEO and Accessibility and address proven approaches for including accessibility in your SEO arsenal. After this session you will be able to: Articulate the importance of accessibility on your website from a search engine perspective Determine what web resources are negatively impacting your user experience Provide accessible content that still supports SEO initiatives
Recommended
Recommended
More Related Content
What's hot
What's hot (7)
Recently uploaded
Recently uploaded (20)
Accessible SEO 2021: Building Your Roadmap for a Stronger User Experience
Editor's Notes
- Hi all, and thank you for that kind introduction. I am so excited to be with you all today! (click)
- As mentioned, my name is Diane Kulseth and I’m the Senior SEO Consultant over at Siteimprove. But, we have a full agenda for this session, so enough about me, let’s dive right in. (click)
- Today, we’re here to talk all about building accessibility into your SEO process. To do that, we’ll cover three areas: first, making the case for accessibility by talking about the integration of search engines and accessibility. Then, we’ll quickly cover known basics in Content SEO and Accessibility and what you need to remember in your optimizations. Finally, we’ll talk about the different code considerations to approach when looking at optimizing your website for both SEO and Accessibility.
- So often, a statement that I hear from customers is “I know accessibility can be important, if not helpful for our website initiatives, but I just don’t have time for it. If a lawsuit is filed against our company, I’ll definitely prioritize it then.” I’m here to make the case that Google, Bing, the other search engines all do care about website accessibility (click)
- But first, let’s address a common misconception. Accessibility isn’t just about optimizing your website for people that are blind. It’s more than that. Of course, it does also pertain to those that are hard of hearing, but those that also those that suffer from cognitive impairments, or even motor weaknesses, or paralysis. Imagine an adult trying to access your ecommerce store after recovering from a concussion. Or, a business professional that just had wrist surgery on their dominant hand. Your parents or grandparents trying to work facebook from their mobile phone with shaky hands. These are all instances where accessibility comes into play.
- How often have you clicked on the wrong thing when navigating a website? How often have you had to deal with pages taking forever to load on your 4G network?
- Mobile first – relying on the mobile version of the page when navigating and documenting the webpage
- On Google’s Webmaster blog we see that they’re focused on helping people access the information they’re looking for. On Google’s Accessibility pages, they state the following: Everyone should be able to access and enjoy the web. We’re committed to making that a reality.
- On Google’s Webmaster blog we see that they’re focused on helping people access the information they’re looking for. On Google’s Accessibility pages, they state the following: Everyone should be able to access and enjoy the web. We’re committed to making that a reality.
- Let’s talk a little bit about Google Lighthouse. For those of you that don’t know, Google Lighthouse is an open source tool that helps to measure the quality of web pages, especially as it pertains to Accessibility, SEO, and web performance. Google Lighthouse publicly mentions of accessibility as a component of user experience in September 2017…since then Google Lighthouse now tracks 41 items on their Accessibility audit ranging from alt attributes to contrast ratios. Think they’re tracking those metrics “just because?” Or perhaps Google is gathering data to prepare a ranking algorithm update. Either way, it’s never been more important to focus on accessibility. In fact, (click)
- With that said, it’s important to “future proof your SEO for later, by focusing on your accessibility now.” Not only will this help the experience of 20% of your website visitors, but it will also improve that usability for literally everyone on your website. So what do you need to do? (click)
- First, let’s tackle content SEO and how Accessibility plays into that
- If you’ve ever familiarized yourself with the basics of Accessibility, they are very much the same, using the acronym of POUR. (briefly cover each - then click)
- I’m going to add another acronym to your arsenal to remember your content: THAT
- When in doubt, POUR THAT This Photo by Unknown Author is licensed under CC BY-SA
- After running through these things to remember from a content perspective, many people are apt to ask us: well, can’t we just use an accessibility overlay? I wish it were that simple.
- Let’s now move into code and accessibility, and why that is going to be key to excelling at your SEO initiatives in 2021
- Most are third party, you don’t have the ability to make changes Control panels to manage the accessibility overlay may be inaccessible so visitors would not be able to adjust functions to what they need Most assistive technology users already have those settings enabled, so it benefits only your marketing and legal teams
- Let’s also discuss auto-generated alt attribute technology, which is common in a variety of tools, accessibility overlays, enterprise SEO tools, to PowerPoint Here’s an example of a picture of a colleague and I at a summer office party (back when we had those). When I was preparing this session, powerpoint tried to help me with the alt text. Here’s what I would have used – remember I’m focusing not on the keywords here but describing what’s in the picture. (click)
- Instead of generating anything that was remotely descriptive, the alt text merely said “a group of people sitting at night”. If this was used on a Siteimprove careers page, it wouldn’t have helped in either generating alt text with respect to targeted keywords or the purpose of trying to recruit new employees!
- Overlays and these similar auto-generated features truly make it easy for marketers to think they have the bases covered, when often times, they don’t!
- Obviously, we know that Google Lighthouse is not simply a valuable audit for Accessibility, but also page performance which has certainly been a focus of the search engine as previously mentioned
- Google’s data again supplements this fact. So what does this have to do with accessibility? Quite everything.
- See when we start to break down Core Web Vitals – the metrics that Google is considering in their upcoming user experience report, we see items that once again focus on page performance, such as loading contentful paint or how long it takes the web page to load the main content, first input delay, or how long it takes the web page to respond to user interaction, and finally cumulative layout shift which measures how often a user experiences sudden changes on the page. When you’re thinking about accessibility, it’s now going to be crucial that the accessible content is loaded quickly and that accessible environments don’t shift the content for the web visitor too drastically.
- Going back to our accessibility overlay example here. Let’s say a website you support does have one of these elements on it, and to prevent any form of page performance issues, your web team has decided to lazy load the overlay and its corresponding selector.
- For an assistive technology user, this would be incredibly detrimental on two of the core web vitals: the first input delay as the visitor would not be able to toggle the control panel to enable accessibility settings It would also shift the content after page load impacting the Cumulative Layout Shift measure. Thus, any elements that you’re loading first on a page should be as accessible as possible. If you’re loading a video, a text script or enabled captions should be loaded alongside the video. Image carousels should have alt text, and code articulating the element. Which brings me to my next point.
- The work that you do to advance your accessibility initiatives isn’t simply important for today’s standard SEO practices but also helping to bring more context to your website’s semantic HTML. Using markup such as ARIA labels can provide context to the design elements on your page much like schema markup helps to bring context to types of content on your page. Together, these two practices can provide for a much stronger experience for search engines to understand the design and content elements of a page as search continues to evolve especially in the realm of voice search. As adoption increases around these devices (I won’t name any names less my devices start talking),the search engines will rely more and more on clean semantic HTML backed by markup such as ARIA and schema markup where necessary. To close things out, let me dive in quick into these ARIA labels so you can add these to your arsenal
- Two of the most common ARIA elements are the aria-label and aria-labelledby. Aria-label helps to specify particular elements, such as buttons or forms on your site and provide a better idea as to their purpose for a screenreader. In this example, you can see that the hamburger menu navigation has simply been labeled as a button, with a class of “hamburger”. While many of us would rightly assume that we’d be seeing a hamburger menu, an assistive technology user may not understand that functionality. By adding in the aria-label of menu, it allows the visitor to understand that is an element to navigate.
- Aria-labelledby helps to expand on this, isn’t just referring to the page element but also the current labels used for said elements. In this example, we see a radio group of options, and its given an ID of “rg-label”. When later specifying the role of this functionality, we can then add in the aria-labelledby to reference the original rg-label ID. There are several more elements when it comes to accessibility, but these are among the most important as again, they help to build more context to your HTML.
- So to recap …and once again, as a final reminder
- Thank you for your time today, please let me know if you have any questions