We’re seeing many trends this year with artisans considering building their own websites. I’m writing a series this year for Handmade Seller to share an often overlooked area of website technology- accessibility. This is a topic that many people don’t fully understand. This series will help you understand what’s behind the topic of accessibility, what different platforms have to offer to meet accessibility guidelines, and how to help you make the decisions that make the most sense for your business. This month, we are digging into User Interface design and accessibility.
Creating your website with an accessibility-first mindset not only benefits your users, but also makes the Google Gods happy. We’ve previously discussed semantic code, accessible media and user interface design for another (selfish) reason: Search Engine Optimization.
First, WTF is SEO?
Search Engine Optimization (SEO) is the method for indexing digital content across the web for the purpose of delivering perceived value to a user. Google, for example, “reads” the content on your website and assigns a numerical value which it uses in an ever-changing algorithm. That calculated value determines where you fall in search results.
And, having an accessible website contributes to the over 200 ranking factors that go into Google’s algorithm!
How SEO and Semantic Code Fit Together
Just like accessibility tools, search engines also rely on semantic code to understand the structure and relevance of web content, which, in turn, can positively impact search engine rankings. Properly structured semantic markup, including headings, lists, and other elements, helps search engines index and rank web pages more accurately.
- This includes:
Using the <img> tag with appropriate alternative text (ALT attribute), you can provide descriptive information about the content depicted in an image. - Structuring navigation elements such as <nav> tags enable users to quickly locate and access important links or menu options.
<address> represents contact information for the author or owner of a webpage. - The <main> content area contains primary information that is relevant to that page’s topic.
- Using the proper headline tag (e.g. <h1>, <h2>, <h3>) in ascending order to correctly organize the structure of your content.
- Using <p> (paragraph) tags to organize longform text.
- Using anchor links and buttons according to their purpose
- Not having too many nested <div> tags
The Impact of Accessibility on User Experience and Engagement
Users who have a positive experience on your site are more likely to explore additional pages, interact with content, and complete desired actions (such as filling out a form or making a purchase).
For example: A website with clear, accessible navigation allows users with visual impairments to find information quickly. This ease of use reduces frustration and keeps users engaged, resulting in a lower bounce rate.
Search engines consider user behavior metrics such as bounce rates—when people abruptly leave your site without taking action—when ranking websites. A lower bounce rate, driven by a positive user interface design with good accessibility, can signal to search engines that your site provides valuable content.
Accessibility Best Practices for SEO
In addition to using semantic code to the best of your ability (especially when you’re relying on a popular website management platform) you should also be mindful of using descriptive language, creating accessible forms, double checking mobile accessibility, and *bonus points* implementing structured data.
Creating Accessible Forms
To get this out of the way: We can agree that creating forms where the label for the field living inside the input box is clean and chic… But it’s not accessible. Please be sure to include clearly defined labels above each input field on your forms!
Also, absolutely no one enjoys a form not submitting, and having no idea why it didn’t submit. In addition to field labels, add tooltips to explain what input is needed. And, if an error does occur, clearly state that error in close proximity to where the error occurred.
Ensuring Mobile Accessibility
t’s a given that people use their smartphones and tablets to browse the web, making mobile accessibility a critical aspect of web design and SEO. Search engines, particularly Google, use mobile-first indexing, meaning they primarily use the mobile version of a website for indexing and ranking. If your site isn’t mobile-friendly, it can negatively impact your search engine rankings.
Implementing Structured Data
Structured data helps search engines interpret the context and meaning of your content (Think recipes or movie showtimes, two different types of content that have very specific formatting.) Structured data is a powerful tool for enhancing SEO and accessibility, as it helps search engines understand and index your content more effectively. By implementing it, you provide search engines with additional context about your content, which can improve your site’s visibility in search results and make your content more accessible to users.
Use PageSpeed Insights as a Quick and Free Tool
Google PageSpeed Insights (yes, another Google tool) is a performance-based tool that scans and scores your website based on certain criteria, including both SEO and accessibility.
You can use PageSpeed Insights to identify accessibility issues, see recommendations on how to fix broken elements, and check basic WCAG Compliance.
Additionally, you can see your performance metrics to evaluate loading times, ensure your website is fully responsive and mobile friendly, and even compare against Google’s Core Web Vitals.
Making Your Website Accessible (Selfishly) Boosts SEO
By focusing on accessibility elements like clear alt text, semantic HTML, and mobile optimization, you enhance both user experience and search engine performance. This dual approach not only helps you reach a wider audience but also keeps visitors engaged. Prioritizing accessibility alongside SEO ensures that your site stands out, performs well, and serves every user effectively.
Want to read the whole series? Check out these articles:
Part 1:How to improve accessibility for your website
Part 2: Improving website accessibility- who creates the standards?
Part 3: Semantic code- what is it, and why is it important for accessibility?
Part 4:Website accessibility in Popular Platforms
Part 5: The issue with website accessibility overlays
Part 6: Equal Access, Diverse Content: Navigating Accessibility in Media
Interested in a subscription to the magazine?
Interested in a digital or print subscription to our quarterly magazine? Or are you interested in reading back issues of the magazine?
