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. 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 CLS tutorial here. Making the text legible that we need to focus on so we can make them more readable. Font and font size Have you ever landed on a website where you could barely read the text either because they’re too small or too stylized? It’s 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. On the other hand, some visually impaired individuals who don’t 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. A good example of this would be the SEO Hacker blogs. I will show you my recently published article on conducting an on-page SEO audit. SEO Hacker blog font and font size for website accessibility This is what a blog post usually looks like when we click on it.
But if you press “CTRL” and “+” together to zoom:
SEO Hacker blog zoom 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. To make the design responsive, you can add the following to your webpages: <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> You can see that in our blog post. Right-click then choose “Inspect” and search for “viewport.” Color scheme 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. 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. For example, check out this CTA from the Leadership Stack podcast. Leadership Stack color scheme for website accessibility 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.
Making keyboard navigation easy Your
website may be aesthetically benin phone number library 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 only. The most commonly used keys are the tab and arrow keys. When you test your website, ask yourself the following questions: Does it take too long to navigate your webpage? Are there interactive elements you can’t access? Is it hard to tell where you are on the page? If your answer is yes to any one of them, you should optimize your navigation for website accessibility. First is to add a “skip navigation” or “skip to main content” button at the top of the page to help keyboard-only users skip the various navigation links when they don’t 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 “keyboard focus” to help the users see where they are on the page. It could be a highlight such as in the SEO Hacker navigation bar: SEO Hacker Keyboard navigation Or it could be an obvious dotted line around the link. Adding subtitles to videos or attaching a transcript 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 30 years of sms the story videos, and second is to create a transcript. Adding subtitles to Leadership Stack video 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. 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.
Avoiding videos with flashing lights
Lastly, we need to make sure that our uk data 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’t 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. rollout is now complete. The gradual rollout started on June 15, 2021, and was supposed to be finished by the end of August 2021 but was delayed for a few days.