{"id":206371,"date":"2021-09-21T02:43:54","date_gmt":"2021-09-20T18:43:54","guid":{"rendered":"https:\/\/seo-hacker.com\/?p=206371"},"modified":"2022-04-18T16:40:05","modified_gmt":"2022-04-18T08:40:05","slug":"website-accessibility-seo","status":"publish","type":"post","link":"https:\/\/seo-hacker.com\/website-accessibility-seo\/","title":{"rendered":"Website Accessibility Practices for SEO"},"content":{"rendered":"<p><span style=\"font-family: helvetica;\"><a href=\"https:\/\/seo-hacker.com\/website-accessibility-seo\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"fpi-shvzz\" class=\"alignnone wp-image-206384 size-full lazyload\" data-src=\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/Website-Accessibility-Practices-for-SEO_cover-photo.png\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/Website-Accessibility-Practices-for-SEO_cover-photo.png\" alt=\"Website Accessibility Practices for SEO\" width=\"600\" height=\"450\" data-wp-pid=\"206384\" data-srcset=\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/Website-Accessibility-Practices-for-SEO_cover-photo.png 600w, https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/Website-Accessibility-Practices-for-SEO_cover-photo-300x225.png 300w\" data-sizes=\"(max-width: 600px) 100vw, 600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 600px; --smush-placeholder-aspect-ratio: 600\/450;\" \/><\/a><\/span><\/p>\n<p><span style=\"font-family: helvetica;\">Website accessibility is the ethical practice of ensuring that your website can be understood and navigated easily by disabled users. There are four reasons why you should be adding website accessibility to your SEO list:<\/span><\/p>\n<p><span style=\"font-family: helvetica;\"><!--more--><\/span><\/p>\n<ol>\n<li><span style=\"font-family: helvetica;\">A significant aspect of SEO is optimizing for people, meaning we should be optimizing for <em>everyone<\/em>, including disabled users. Websites that are not optimized can lead to less searches and less visibility, since people will generally stay away from them.<\/span><\/li>\n<li><span style=\"font-family: helvetica;\">According to the <a href=\"https:\/\/www.w3.org\/\" target=\"_blank\" rel=\"noopener,nofollow noopener\">World Wide Web Consortium (W3C)<\/a>, &#8220;Case studies show that accessible websites have better search results, reduced maintenance costs, and increased audience reach, among other benefits.&#8221; This shows that website accessibility is an integral part of SEO.<\/span><\/li>\n<li><span style=\"font-family: helvetica;\">Google values website accessibility. According to their <a href=\"https:\/\/www.google.com\/accessibility\/\" target=\"_blank\" rel=\"noopener,nofollow noopener\">Accessibility page<\/a>, &#8220;Everyone should be able to access and enjoy the web. We\u2019re committed to making that a reality.&#8221;<\/span><\/li>\n<li><span style=\"font-family: helvetica;\">It\u2019s the right thing to do. Foregoing accessibility means willfully barring entire groups from accessing communication and information and hindering them from fully participating in society.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-family: helvetica;\">In this blog post, I will discuss five of the usual SEO practices we perform and how they contribute to website accessibility, and I will add five more practices you can adopt to make your website accessible to everyone.<\/span><\/p>\n<p><span style=\"font-family: helvetica;\"><em><strong>Note:<\/strong> I made use of assistive technology to ensure the accuracy of this article.<\/em><\/span><\/p>\n<h2><span style=\"font-family: helvetica;\">Optimizing title tags<\/span><\/h2>\n<p><span style=\"font-family: helvetica;\">The <a href=\"https:\/\/seo-hacker.com\/title-tag-optimization-tutorial\/\" target=\"_blank\" rel=\"noopener\">title tag<\/a> is your webpage title. It describes your webpage to the users and the search engines. This helps with website accessibility since for visually impaired users, the title tag is read by the screen reader as the page loads, making it their introduction to your website.<\/span><\/p>\n<p><span style=\"font-family: helvetica;\"><img decoding=\"async\" class=\"alignnone wp-image-206383 size-full lazyload\" data-src=\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/SEO-Hacker-title-tag.png\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/SEO-Hacker-title-tag.png\" alt=\"Optimizing title tags for website accessibility\" width=\"365\" height=\"142\" data-wp-pid=\"206383\" data-srcset=\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/SEO-Hacker-title-tag.png 365w, https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/SEO-Hacker-title-tag-300x117.png 300w\" data-sizes=\"(max-width: 365px) 100vw, 365px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 365px; --smush-placeholder-aspect-ratio: 365\/142;\" \/><\/span><\/p>\n<p><span style=\"font-family: helvetica;\">For example, the photo above shows the <a href=\"https:\/\/seo-hacker.com\/\" target=\"_blank\" rel=\"noopener\">SEO Hacker<\/a> title tag. Aside from the title tag containing a keyword we want to rank for, it also signals to visually impaired individuals that they are in a Philippine SEO agency website.<\/span><\/p>\n<h2><span style=\"font-family: helvetica;\">Editing the URL slug to be descriptive and accurate<\/span><\/h2>\n<p><span style=\"font-family: helvetica;\">A <a href=\"https:\/\/seo-hacker.com\/url-seo-tutorial\/\" target=\"_blank\" rel=\"noopener\">URL slug<\/a> that is unoptimized or confusing will be difficult not just for search engines to understand, but also people. First, it will be very difficult to remember. Second, they could be gibberish and as a result, frustrating to listen to. Check out this Forbes article URL:<\/span><\/p>\n<p><span style=\"font-family: helvetica;\"><img decoding=\"async\" class=\"alignnone wp-image-206372 size-full lazyload\" data-src=\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/Forbes-URL-slug.png\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/Forbes-URL-slug.png\" alt=\"Editing Forbes URL slug for website accessibility\" width=\"600\" height=\"127\" data-wp-pid=\"206372\" data-srcset=\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/Forbes-URL-slug.png 600w, https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/Forbes-URL-slug-300x64.png 300w\" data-sizes=\"(max-width: 600px) 100vw, 600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 600px; --smush-placeholder-aspect-ratio: 600\/127;\" \/><\/span><br \/>\n<span style=\"font-family: helvetica;\">Now, imagine that you are using a screen reader. It will read the entire URL to you, so before and after you listen to the important part of the URL slug, you will also have to listen to the unhelpful portions.<\/span><\/p>\n<p><span style=\"font-family: helvetica;\">On the other hand, there are descriptive URLs that are still unhelpful because they are inaccurate. As a rule, ensure your URL slug is descriptive and accurate to help your user know they are on the correct page of your website. Check out this example from the <a href=\"https:\/\/leadershipstack.com\/blog\/how-to-avoid-employee-burnout\/\" target=\"_blank\" rel=\"noopener\">Leadership Stack blog post<\/a>:<\/span><\/p>\n<p><span style=\"font-family: helvetica;\"><img decoding=\"async\" class=\"alignnone size-full wp-image-206376 lazyload\" data-src=\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/Leadership-Stack-URL-slug.png\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/Leadership-Stack-URL-slug.png\" alt=\"Optimized Leadership Stack URL slug for website accessibility\" width=\"525\" height=\"46\" data-wp-pid=\"206376\" data-srcset=\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/Leadership-Stack-URL-slug.png 525w, https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/Leadership-Stack-URL-slug-300x26.png 300w\" data-sizes=\"(max-width: 525px) 100vw, 525px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 525px; --smush-placeholder-aspect-ratio: 525\/46;\" \/><\/span><\/p>\n<p><span style=\"font-family: helvetica;\">Based on the URL above, you know exactly what webpage you will be accessing. This helps with website accessibility as it gives quick and accurate information to the users, and they can move on to other areas of the page quickly.<\/span><\/p>\n<h2><span style=\"font-family: helvetica;\">Adding alt text to images<\/span><\/h2>\n<p><span style=\"font-family: helvetica;\">The <a href=\"https:\/\/seo-hacker.com\/image-seo-tutorial\/\" target=\"_blank\" rel=\"noopener\">alt text<\/a> is what users encounter when the image does not load properly. The alt text is also read by screen readers, so this helps visually impaired people know that there is an image and what it\u2019s about. Not putting an image alt text removes your chances of having your image rank in image search, and it becomes a barrier for visually impaired users to understand your content better.<\/span><\/p>\n<p><span style=\"font-family: helvetica;\">For example, in the photo below the image has an alt text that says &#8220;Know The Signs Of Employee Burnout.&#8221;<\/span><\/p>\n<p><span style=\"font-family: helvetica;\"><img decoding=\"async\" class=\"alignnone wp-image-206374 size-full lazyload\" data-src=\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/Leadership-Stack-image-alt-text.png\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/Leadership-Stack-image-alt-text.png\" alt=\"Leadership stack image alt text for website accessibility\" width=\"600\" height=\"199\" data-wp-pid=\"206374\" data-srcset=\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/Leadership-Stack-image-alt-text.png 600w, https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/Leadership-Stack-image-alt-text-300x100.png 300w\" data-sizes=\"(max-width: 600px) 100vw, 600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 600px; --smush-placeholder-aspect-ratio: 600\/199;\" \/><\/span><br \/>\n<span style=\"font-family: helvetica;\">This means that alt texts should be descriptive not just for SEO but also website accessibility, as it helps the visually impaired understand the image itself.<\/span><\/p>\n<h2><span style=\"font-family: helvetica;\">Adding proper headings to content<\/span><\/h2>\n<p><span style=\"font-family: helvetica;\">The <a href=\"https:\/\/seo-hacker.com\/html-header-tags\/\" target=\"_blank\" rel=\"noopener\">headers of your page<\/a> structure content for the search engine and the users. This practice is not just good for rankings, but it helps with website accessibility. Putting proper headers on your page ensures website accessibility for the visually impaired because the screen readers will be able to interpret the page more accurately. Hence, it will help them not just to understand the organization of your content, but to navigate it easier as well.<\/span><\/p>\n<p><span style=\"font-family: helvetica;\">For example, in the photo below you will see two highlighted headers. The header saying &#8220;Before you begin&#8221; is in H2, while the &#8220;Create your findings document first&#8221; heading is in H3. A visually impaired user utilizing a screen reader and a keyboard will hear these texts read as &#8220;H2, before you begin&#8221; and &#8220;H3, create your findings document first.&#8221;<\/span><\/p>\n<p><span style=\"font-family: helvetica;\"><img decoding=\"async\" class=\"alignnone size-full wp-image-206386 lazyload\" data-src=\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/SEO-Hacker-blog-headers-1.png\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/SEO-Hacker-blog-headers-1.png\" alt=\"Adding proper headings to content for website accessibility\" width=\"496\" height=\"236\" data-wp-pid=\"206386\" data-srcset=\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/SEO-Hacker-blog-headers-1.png 496w, https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/SEO-Hacker-blog-headers-1-300x143.png 300w\" data-sizes=\"(max-width: 496px) 100vw, 496px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 496px; --smush-placeholder-aspect-ratio: 496\/236;\" \/><\/span><\/p>\n<p><span style=\"font-family: helvetica;\">Rule of thumb: Your main header must be in H1, then the sub-headers must be in H2, H3, and so on.<\/span><\/p>\n<h2><span style=\"font-family: helvetica;\">Limiting intrusive interstitials<\/span><\/h2>\n<p><span style=\"font-family: helvetica;\">Interstitials are the annoying interruption marketing tactic where ads pop up on the page. Some <a href=\"https:\/\/seo-hacker.com\/intrusive-interstitials-seo\/\" target=\"_blank\" rel=\"noopener\">intrusive interstitials<\/a> can negatively affect your SEO, pulling your rankings down. But that is not the only reason why you should be limiting these pop-ups. Aside from the obvious downsides, they also restrict website accessibility.<\/span><\/p>\n<p><span style=\"font-family: helvetica;\">Pop-ups that cover a page, YouTube videos automatically playing in the sidebar\u2014these can make your page a nightmare for users with developmental disabilities and even anxiety. If you get stressed when you have all these &#8220;noisy&#8221; elements on and around a webpage, what more users who have to navigate a page through sound, have trouble with sudden sounds, or those who have to take extra steps to close the pop-ups?<\/span><\/p>\n<p><span style=\"font-family: helvetica;\">One of my team members, for example, feels physically ill whenever they access a website that has multiple interstitials because they trigger sensory overload. As a result, they avoid those sites as much as possible to avoid triggering their anxiety.<\/span><\/p>\n<p><span style=\"font-family: helvetica;\">Limiting interstitials can help with website accessibility because all kinds of users will have an easy time accessing and staying in your website.<\/span><\/p>\n<h2><span style=\"font-family: helvetica;\">Making your website screen reader-friendly<\/span><\/h2>\n<p><span style=\"font-family: helvetica;\">There are instances in which the content layout of our webpage suddenly shifts due to ads and other elements of our page. This is called a Cumulative Layout Shift or CLS.<\/span><\/p>\n<p><span style=\"font-family: helvetica;\">These layout shifts can be frustrating for visually impaired users. Since they are reliant on screen readers, these layout shifts can cause them to miss content or be confused due to the screen reader suddenly changing what they are reading.<\/span><\/p>\n<p><span style=\"font-family: helvetica;\">Screen readers such as <a href=\"https:\/\/www.nvaccess.org\/\" target=\"_blank\" rel=\"noopener,nofollow noopener\">NVDA<\/a> don\u2019t just read the contents of the page, they also read specifically what the user\u2019s cursor is pointing at. So if the content of the area to which the cursor is pointing suddenly shifts, the user will have to take extra steps to figure out where they were originally in your page.<\/span><\/p>\n<p><span style=\"font-family: helvetica;\">For website accessibility, ensure your webpage has a reserved area for dynamic content, specific dimensions for images and videos, and optimized fonts. You can learn more by checking out our <a href=\"https:\/\/seo-hacker.com\/cumulative-layout-shift\/\" target=\"_blank\" rel=\"noopener\">CLS tutorial here<\/a>.<\/span><\/p>\n<h2><span style=\"font-family: helvetica;\">Making the text legible<\/span><\/h2>\n<p><span style=\"font-family: helvetica;\">There are two aspects of text aesthetics that we need to focus on so we can make them more readable.<\/span><\/p>\n<h3><span style=\"font-family: helvetica;\">Font and font size<\/span><\/h3>\n<p><span style=\"font-family: helvetica;\">Have you ever landed on a website where you could barely read the text either because they\u2019re too small or too stylized? It\u2019s bad practice in general to make the text of your website hard to read as this makes potential leads leave your page in frustration. When we create our websites, we want them to be as easy to navigate and understand as possible. Overly stylized fonts and small font sizes go against that principle.<\/span><\/p>\n<p><span style=\"font-family: helvetica;\">On the other hand, some visually impaired individuals who don\u2019t make use of screen readers may still have trouble with your site even if the font size is large enough for other users. In this case, we want to ensure our website does not break when users zoom in.<\/span><\/p>\n<p><span style=\"font-family: helvetica;\">A good example of this would be the SEO Hacker blogs. I will show you my recently published article on conducting an <a href=\"https:\/\/seo-hacker.com\/beginners-guide-on-page-seo-audit\/\" target=\"_blank\" rel=\"noopener\">on-page SEO audit<\/a>.<\/span><\/p>\n<p><span style=\"font-family: helvetica;\"><img decoding=\"async\" class=\"alignnone size-full wp-image-206381 lazyload\" data-src=\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/SEO-Hacker-blog.png\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/SEO-Hacker-blog.png\" alt=\"SEO Hacker blog font and font size for website accessibility\" width=\"600\" height=\"234\" data-wp-pid=\"206381\" data-srcset=\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/SEO-Hacker-blog.png 600w, https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/SEO-Hacker-blog-300x117.png 300w\" data-sizes=\"(max-width: 600px) 100vw, 600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 600px; --smush-placeholder-aspect-ratio: 600\/234;\" \/><\/span><\/p>\n<p><span style=\"font-family: helvetica;\">This is what a blog post usually looks like when we click on it. But if you press &#8220;CTRL&#8221; and &#8220;+&#8221; together to zoom:<\/span><\/p>\n<p><span style=\"font-family: helvetica;\"><img decoding=\"async\" class=\"alignnone wp-image-206388 size-full lazyload\" data-src=\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/SEO-Hacker-blog-zoom.gif\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/SEO-Hacker-blog-zoom.gif\" alt=\"SEO Hacker blog zoom\" width=\"600\" height=\"288\" data-wp-pid=\"206388\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 600px; --smush-placeholder-aspect-ratio: 600\/288;\" \/><\/span><\/p>\n<p><span style=\"font-family: helvetica;\">This is what the blog post looks like at 150% magnification. There is no need to navigate left and right using a scrollbar because everything you need is right there in front of you.<\/span><\/p>\n<p><span style=\"font-family: helvetica;\">To make the design responsive, you can add the following to your webpages:<\/span><\/p>\n<p><span style=\"font-family: helvetica;\">&lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width, initial-scale=1.0&#8243;&gt;<\/span><\/p>\n<p><span style=\"font-family: helvetica;\">You can see that in our blog post. Right-click then choose &#8220;Inspect&#8221; and search for &#8220;viewport.&#8221;<\/span><\/p>\n<h3><span style=\"font-family: helvetica;\">Color scheme<\/span><\/h3>\n<p><span style=\"font-family: helvetica;\">Some people try to get creative with their color scheme but end up with a website that uses low contrast between the text and the background. This makes it difficult to read both for seeing and visually impaired individuals. Designers should also focus on CTAs and links and ensure that proper color contrast is employed to make them easy to spot.<\/span><\/p>\n<p><span style=\"font-family: helvetica;\">The recommended colors would still be black text on white backgrounds, but with CTAs we need to be more creative. The rule of thumb is to avoid red and green combinations to make them readable for colorblind individuals.<\/span><\/p>\n<p><span style=\"font-family: helvetica;\">For example, check out this CTA from the <a href=\"https:\/\/leadershipstack.com\/podcasts\/\" target=\"_blank\" rel=\"noopener\">Leadership Stack podcast<\/a>.<\/span><\/p>\n<p><span style=\"font-family: helvetica;\"><img decoding=\"async\" class=\"alignnone size-full wp-image-206373 lazyload\" data-src=\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/Leadership-Stack-CTA.png\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/Leadership-Stack-CTA.png\" alt=\"Leadership Stack color scheme for website accessibility\" width=\"385\" height=\"421\" data-wp-pid=\"206373\" data-srcset=\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/Leadership-Stack-CTA.png 385w, https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/Leadership-Stack-CTA-274x300.png 274w\" data-sizes=\"(max-width: 385px) 100vw, 385px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 385px; --smush-placeholder-aspect-ratio: 385\/421;\" \/><\/span><\/p>\n<p><span style=\"font-family: helvetica;\">Aside from being clear message-wise, the contrast of black text on a yellow background makes the call pop, making it easier to see and read.<\/span><\/p>\n<h2><span style=\"font-family: helvetica;\">Making keyboard navigation easy<\/span><\/h2>\n<p><span style=\"font-family: helvetica;\">Your website may be aesthetically pleasing, but is it easy to navigate for motor impaired people? A simple test you can do is to navigate your website using your keyboard <em>only<\/em>. The most commonly used keys are the tab and arrow keys. When you test your website, ask yourself the following questions:<\/span><\/p>\n<ol>\n<li><span style=\"font-family: helvetica;\">Does it take too long to navigate your webpage?<\/span><\/li>\n<li><span style=\"font-family: helvetica;\">Are there interactive elements you can\u2019t access?<\/span><\/li>\n<li><span style=\"font-family: helvetica;\">Is it hard to tell where you are on the page?<\/span><\/li>\n<\/ol>\n<p><span style=\"font-family: helvetica;\">If your answer is yes to any one of them, you should optimize your navigation for website accessibility.<\/span><\/p>\n<p><span style=\"font-family: helvetica;\">First is to add a &#8220;skip navigation&#8221; or &#8220;skip to main content&#8221; button at the top of the page to help keyboard-only users skip the various navigation links when they don\u2019t need them. Next is to ensure that all drop-downs are navigable using arrow keys, and that the various buttons and links are reachable by the tab button. Lastly, add &#8220;keyboard focus&#8221; to help the users see where they are on the page. It could be a highlight such as in the SEO Hacker navigation bar:<\/span><\/p>\n<p><span style=\"font-family: helvetica;\"><img decoding=\"async\" class=\"alignnone wp-image-206382 size-full lazyload\" data-src=\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/SEO-Hacker-keyboard-focus.png\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/SEO-Hacker-keyboard-focus.png\" alt=\"SEO Hacker Keyboard navigation\" width=\"502\" height=\"136\" data-wp-pid=\"206382\" data-srcset=\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/SEO-Hacker-keyboard-focus.png 502w, https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/SEO-Hacker-keyboard-focus-300x81.png 300w\" data-sizes=\"(max-width: 502px) 100vw, 502px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 502px; --smush-placeholder-aspect-ratio: 502\/136;\" \/><\/span><\/p>\n<p><span style=\"font-family: helvetica;\">Or it could be an obvious dotted line around the link.<\/span><\/p>\n<h2><span style=\"font-family: helvetica;\">Adding subtitles to videos or attaching a transcript<\/span><\/h2>\n<p><span style=\"font-family: helvetica;\">Videos can make your content dynamic, but some accommodations need to be taken into consideration for website accessibility. Some of our site users are either hearing impaired or have sensory issues. In that case, there are two things you can do: first is to add subtitles to your videos, and second is to create a transcript.<\/span><\/p>\n<p><span style=\"font-family: helvetica;\"><img decoding=\"async\" class=\"alignnone wp-image-206375 size-full lazyload\" data-src=\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/Leadership-Stack-subtitles.png\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/Leadership-Stack-subtitles.png\" alt=\"Adding subtitles to Leadership Stack video\" width=\"551\" height=\"279\" data-wp-pid=\"206375\" data-srcset=\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/Leadership-Stack-subtitles.png 551w, https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/Leadership-Stack-subtitles-300x152.png 300w\" data-sizes=\"(max-width: 551px) 100vw, 551px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 551px; --smush-placeholder-aspect-ratio: 551\/279;\" \/><\/span><\/p>\n<p><span style=\"font-family: helvetica;\">There are a variety of options that you can choose to create a transcript. My go-to for making transcripts for videos that are already published and are lacking subtitles is to use the dictation feature in Microsoft Word. When the video is mine, my other option is to create a script before making the video and attach it to the page as a transcript.<\/span><\/p>\n<p><span style=\"font-family: helvetica;\">A great example of this is in online courses such as Google Analytics Academy where the transcripts are in the form of either links or PDF attachments.<\/span><\/p>\n<h2><span style=\"font-family: helvetica;\">Avoiding videos with flashing lights<\/span><\/h2>\n<p><span style=\"font-family: helvetica;\">Lastly, we need to make sure that our videos are easy on the eyes. Some users have photosensitivity and flashing lights can trigger an epileptic attack or a seizure. Trigger warnings may be a good idea, but that still means certain users won\u2019t be able to access the content that is in your video. So to go back to the principle of website accessibility and also just to be safe, make sure to just avoid putting flashing lights on your videos altogether.<\/span><\/p>\n<h2><span style=\"font-family: helvetica;\">Key takeaway<\/span><\/h2>\n<p><span style=\"font-family: helvetica;\">Website accessibility is an ethical practice that web developers must adopt to accommodate all kinds of people. Some of our SEO practices already contribute to website accessibility for everyone, but there are other practices available that we can add to our arsenal to ensure our websites are friendly to disabled users.<\/span><\/p>\n<p><span style=\"font-family: helvetica;\">Did this guide help you with website accessibility? Let me know your thoughts by commenting below.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"wl_entities_gutenberg":"","footnotes":""},"categories":[100008],"tags":[200210,200211,200209,200212],"wl_entity_type":[102583],"class_list":["post-206371","post","type-post","status-publish","format-standard","hentry","category-seo","tag-accessibility-practices","tag-how-to-make-your-website-accessible","tag-website-accessibility","tag-website-accessibility-for-disabled-users","wl_entity_type-article"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Website Accessibility Practices for SEO<\/title>\n<meta name=\"description\" content=\"Website accessibility enables everyone to use your site, promoting social inclusion. Why practice it? It&#039;s ethical, and it&#039;s integral to SEO.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/seo-hacker.com\/website-accessibility-seo\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Website Accessibility Practices for SEO\" \/>\n<meta property=\"og:description\" content=\"Website accessibility enables everyone to use your site, promoting social inclusion. Why practice it? It&#039;s ethical, and it&#039;s integral to SEO.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/seo-hacker.com\/website-accessibility-seo\/\" \/>\n<meta property=\"og:site_name\" content=\"SEO Services Agency in Manila, Philippines\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-20T18:43:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-18T08:40:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/Website-Accessibility-Practices-for-SEO_cover-photo.png\" \/>\n<meta name=\"author\" content=\"Sean Si\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/seo-hacker.com\\\/website-accessibility-seo\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/seo-hacker.com\\\/website-accessibility-seo\\\/\"},\"author\":{\"name\":\"Sean Si\",\"@id\":\"https:\\\/\\\/seo-hacker.com\\\/#\\\/schema\\\/person\\\/5565b7823135bb49dd1618bbcaec2dbf\"},\"headline\":\"Website Accessibility Practices for SEO\",\"datePublished\":\"2021-09-20T18:43:54+00:00\",\"dateModified\":\"2022-04-18T08:40:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/seo-hacker.com\\\/website-accessibility-seo\\\/\"},\"wordCount\":2070,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/seo-hacker.com\\\/website-accessibility-seo\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/seo-hacker.com\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/Website-Accessibility-Practices-for-SEO_cover-photo.png\",\"keywords\":[\"accessibility practices\",\"how to make your website accessible\",\"website accessibility\",\"website accessibility for disabled users\"],\"articleSection\":[\"SEO\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/seo-hacker.com\\\/website-accessibility-seo\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/seo-hacker.com\\\/website-accessibility-seo\\\/\",\"url\":\"https:\\\/\\\/seo-hacker.com\\\/website-accessibility-seo\\\/\",\"name\":\"Website Accessibility Practices for SEO\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/seo-hacker.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/seo-hacker.com\\\/website-accessibility-seo\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/seo-hacker.com\\\/website-accessibility-seo\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/seo-hacker.com\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/Website-Accessibility-Practices-for-SEO_cover-photo.png\",\"datePublished\":\"2021-09-20T18:43:54+00:00\",\"dateModified\":\"2022-04-18T08:40:05+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/seo-hacker.com\\\/#\\\/schema\\\/person\\\/5565b7823135bb49dd1618bbcaec2dbf\"},\"description\":\"Website accessibility enables everyone to use your site, promoting social inclusion. Why practice it? It's ethical, and it's integral to SEO.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/seo-hacker.com\\\/website-accessibility-seo\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/seo-hacker.com\\\/website-accessibility-seo\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/seo-hacker.com\\\/website-accessibility-seo\\\/#primaryimage\",\"url\":\"https:\\\/\\\/seo-hacker.com\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/Website-Accessibility-Practices-for-SEO_cover-photo.png\",\"contentUrl\":\"https:\\\/\\\/seo-hacker.com\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/Website-Accessibility-Practices-for-SEO_cover-photo.png\",\"width\":600,\"height\":450,\"caption\":\"Website Accessibility Practices for SEO\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/seo-hacker.com\\\/website-accessibility-seo\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/seo-hacker.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Website Accessibility Practices for SEO\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/seo-hacker.com\\\/#website\",\"url\":\"https:\\\/\\\/seo-hacker.com\\\/\",\"name\":\"SEO Services Agency in Manila, Philippines\",\"description\":\"SEO Hacker is an SEO Agency and SEO Blog in the Philippines. Let us take your website to the top of the search results with our holistic white-hat strategies. Inquire today!\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/seo-hacker.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/seo-hacker.com\\\/#\\\/schema\\\/person\\\/5565b7823135bb49dd1618bbcaec2dbf\",\"name\":\"Sean Si\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3225fbc3fa29eafa997934ff429b9b1949121b469f7a110079f055ad4eeffd25?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3225fbc3fa29eafa997934ff429b9b1949121b469f7a110079f055ad4eeffd25?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3225fbc3fa29eafa997934ff429b9b1949121b469f7a110079f055ad4eeffd25?s=96&d=mm&r=g\",\"caption\":\"Sean Si\"},\"description\":\"Sean Si is a Filipino motivational speaker and a Leadership Speaker in the Philippines. He is the head honcho and editor-in-chief of SEO Hacker. He does SEO Services for companies in the Philippines and Abroad. Connect with him at Facebook, LinkedIn or Twitter. Check out his new project...\",\"sameAs\":[\"https:\\\/\\\/sean.si\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Website Accessibility Practices for SEO","description":"Website accessibility enables everyone to use your site, promoting social inclusion. Why practice it? It's ethical, and it's integral to SEO.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/seo-hacker.com\/website-accessibility-seo\/","og_locale":"en_US","og_type":"article","og_title":"Website Accessibility Practices for SEO","og_description":"Website accessibility enables everyone to use your site, promoting social inclusion. Why practice it? It's ethical, and it's integral to SEO.","og_url":"https:\/\/seo-hacker.com\/website-accessibility-seo\/","og_site_name":"SEO Services Agency in Manila, Philippines","article_published_time":"2021-09-20T18:43:54+00:00","article_modified_time":"2022-04-18T08:40:05+00:00","og_image":[{"url":"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/Website-Accessibility-Practices-for-SEO_cover-photo.png","type":"","width":"","height":""}],"author":"Sean Si","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/seo-hacker.com\/website-accessibility-seo\/#article","isPartOf":{"@id":"https:\/\/seo-hacker.com\/website-accessibility-seo\/"},"author":{"name":"Sean Si","@id":"https:\/\/seo-hacker.com\/#\/schema\/person\/5565b7823135bb49dd1618bbcaec2dbf"},"headline":"Website Accessibility Practices for SEO","datePublished":"2021-09-20T18:43:54+00:00","dateModified":"2022-04-18T08:40:05+00:00","mainEntityOfPage":{"@id":"https:\/\/seo-hacker.com\/website-accessibility-seo\/"},"wordCount":2070,"commentCount":0,"image":{"@id":"https:\/\/seo-hacker.com\/website-accessibility-seo\/#primaryimage"},"thumbnailUrl":"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/Website-Accessibility-Practices-for-SEO_cover-photo.png","keywords":["accessibility practices","how to make your website accessible","website accessibility","website accessibility for disabled users"],"articleSection":["SEO"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/seo-hacker.com\/website-accessibility-seo\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/seo-hacker.com\/website-accessibility-seo\/","url":"https:\/\/seo-hacker.com\/website-accessibility-seo\/","name":"Website Accessibility Practices for SEO","isPartOf":{"@id":"https:\/\/seo-hacker.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/seo-hacker.com\/website-accessibility-seo\/#primaryimage"},"image":{"@id":"https:\/\/seo-hacker.com\/website-accessibility-seo\/#primaryimage"},"thumbnailUrl":"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/Website-Accessibility-Practices-for-SEO_cover-photo.png","datePublished":"2021-09-20T18:43:54+00:00","dateModified":"2022-04-18T08:40:05+00:00","author":{"@id":"https:\/\/seo-hacker.com\/#\/schema\/person\/5565b7823135bb49dd1618bbcaec2dbf"},"description":"Website accessibility enables everyone to use your site, promoting social inclusion. Why practice it? It's ethical, and it's integral to SEO.","breadcrumb":{"@id":"https:\/\/seo-hacker.com\/website-accessibility-seo\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/seo-hacker.com\/website-accessibility-seo\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/seo-hacker.com\/website-accessibility-seo\/#primaryimage","url":"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/Website-Accessibility-Practices-for-SEO_cover-photo.png","contentUrl":"https:\/\/seo-hacker.com\/wp-content\/uploads\/2021\/09\/Website-Accessibility-Practices-for-SEO_cover-photo.png","width":600,"height":450,"caption":"Website Accessibility Practices for SEO"},{"@type":"BreadcrumbList","@id":"https:\/\/seo-hacker.com\/website-accessibility-seo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/seo-hacker.com\/"},{"@type":"ListItem","position":2,"name":"Website Accessibility Practices for SEO"}]},{"@type":"WebSite","@id":"https:\/\/seo-hacker.com\/#website","url":"https:\/\/seo-hacker.com\/","name":"SEO Services Agency in Manila, Philippines","description":"SEO Hacker is an SEO Agency and SEO Blog in the Philippines. Let us take your website to the top of the search results with our holistic white-hat strategies. Inquire today!","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/seo-hacker.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/seo-hacker.com\/#\/schema\/person\/5565b7823135bb49dd1618bbcaec2dbf","name":"Sean Si","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3225fbc3fa29eafa997934ff429b9b1949121b469f7a110079f055ad4eeffd25?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3225fbc3fa29eafa997934ff429b9b1949121b469f7a110079f055ad4eeffd25?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3225fbc3fa29eafa997934ff429b9b1949121b469f7a110079f055ad4eeffd25?s=96&d=mm&r=g","caption":"Sean Si"},"description":"Sean Si is a Filipino motivational speaker and a Leadership Speaker in the Philippines. He is the head honcho and editor-in-chief of SEO Hacker. He does SEO Services for companies in the Philippines and Abroad. Connect with him at Facebook, LinkedIn or Twitter. Check out his new project...","sameAs":["https:\/\/sean.si"]}]}},"_wl_alt_label":[],"jetpack_featured_media_url":"","wl:entity_url":"http:\/\/data.wordlift.io\/wl0320\/post\/website_accessibility_practices_for_seo","_links":{"self":[{"href":"https:\/\/seo-hacker.com\/wp-json\/wp\/v2\/posts\/206371","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/seo-hacker.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/seo-hacker.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/seo-hacker.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/seo-hacker.com\/wp-json\/wp\/v2\/comments?post=206371"}],"version-history":[{"count":0,"href":"https:\/\/seo-hacker.com\/wp-json\/wp\/v2\/posts\/206371\/revisions"}],"wp:attachment":[{"href":"https:\/\/seo-hacker.com\/wp-json\/wp\/v2\/media?parent=206371"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/seo-hacker.com\/wp-json\/wp\/v2\/categories?post=206371"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/seo-hacker.com\/wp-json\/wp\/v2\/tags?post=206371"},{"taxonomy":"wl_entity_type","embeddable":true,"href":"https:\/\/seo-hacker.com\/wp-json\/wp\/v2\/wl_entity_type?post=206371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}