Small Biz Website Accessibility Checklist

Running a small business means wearing countless hats – from accounting to social media to inventory management. So when someone mentions "website accessibility," it might feel like yet another overwhelming task on your never-ending to-do list. We get it. Between serving customers and keeping the lights on, the last thing you need is a complicated technical challenge.

But making your website welcoming to everyone doesn't have to be a massive undertaking. We’ve created a website accessibility checklist to make your site a place where everyone feels at home.

Before getting into the nitty gritty…

Here’s a Super-Duper Quick Checklist for Basic Accessibility:

• All pages have a MAIN landmark.
• Forms have labels associated with their respective input fields.
• All images have ALT text.
• SVG elements have ARIA labels.
• All embedded iframes have TITLE text.
• PDF documents available for download should also be accessible; Otherwise, have a web page option.
• All links have TITLE text.
• Links that open in a new window alert the user.
• Links (or buttons) should have a hover effect to affirm its an active element.
• Underlined text should only be used for text-based links.
• Headline structure is semantically structured (and there are no skipped headling levels).
• Text colors have a high contrast ratio against their background.
• Large blocks of text are set up as paragraphs
• No justified text.
• 12pt (16px) is the smallest font size.

Understanding Each Accessibility Element

Technical Elements

All pages have a MAIN landmark.

The MAIN landmark (typically implemented as <main>) is a crucial accessibility feature that identifies the primary content area of a webpage. This helps screen reader users quickly navigate to the most important part of your page, skipping past repeated elements like navigation menus.

Every page should have exactly one MAIN landmark containing:

• A header (typically <header>) that introduces the content and often contains elements like page titles and introductory content
• The main content itself
• A footer (typically <footer>) that provides supporting information like copyright notices, related links, or contact information

Note: Depending on the website builder you are using, this may be configured automatically, like in Squarespace or Shopify. However, you may need to double-check your WordPress theme, or page builder, to see if you need to set it up manually.

Forms have labels associated with their respective input fields.

When building forms, each input field should have a properly associated label that clearly describes what information is being requested. Using the for attribute that matches the input's id.

Example: 

• <label for="username">Username</label>
• <input id="username" type="text">

Images and Media

All images have ALT text.

Well-written alt text pulls double duty: it helps screen readers describe your images to visitors with visual impairments while giving search engines the context they need to understand and rank your content. By including relevant keywords naturally in your descriptions, you'll improve both your site's accessibility and its search engine performance.

The art of writing good ALT text comes down to keeping things short, simple, and essential.

Here are two examples:

• ✓ 'Golden retriever puppy sleeping in a basket' 
• ✗ 'Image of a golden retriever puppy sleeping in a decorative basket'

Skip describing icons next to obvious labels – if there's a phone icon next to 'Phone Number,' the icon doesn't need alt text. Your users already have the context to know what's up.

Decorative images? Please leave them blank. The swirly design in your header? That textured background? Skip the alt text. Any assets that only provide visual interest are unnecessary to screen reader users.

Alt text basics:

• Describe what's important
• Skip saying phrases like 'image of' or 'picture of'
• Add important labels/text in the image to ALT text
• Leave icons next to labels blank
• Don't describe decorative images
• Consider relevant SEO keywords when they fit naturally
• Keep it brief but informative

Note: When web builder tools - like Oxygen or Elementor - add SVG icons to your webpage, you might not be able to edit the SVG code to add a title. Instead, simply treat the SVG like a regular image by adding role="img" and an aria-label to make it accessible to screen readers. See below!

SVG elements have ARIA labels.

SVGs (Scalable Vector Graphics) are special graphics that stay sharp no matter their size (that's the 'scalable' part!). To make these graphics navigable, you’ll need to add ARIA labels to their HTML element tag. ARIA labels are like invisible name tags for screen readers.

You know those clickable icons on websites—like the hamburger menu (those three lines that open the navigation), social media buttons, or the magnifying glass for search? These are often SVGs. By adding ARIA labels to these interactive icons, we ensure everyone can use them, including people who rely on screen readers or other assistive technologies.

All embedded iframes have TITLE text.

Whenever you click that little share icon to embed something on your website, you’ll be copying over a bunch of code that usually includes something about an <iframe>. These embeds are not inherently accessible because they usually lack a title So… You’ll need to add descriptive titles to your embedded content so screen readers can announce what's coming up – like 'Company Location Map' or 'Product Demo Video'.

Here are some examples of what you might get from YouTube or Google Maps:

<!-- Video -->
<iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315" > </iframe>

<!-- Google Maps -->
<iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450" > </iframe>

See? Neither have a TITLE included. Here’s how you add it in:

<!-- Google Maps -->
<iframe title="Our Coffee Shop Location in Downtown Seattle" src="https://www.google.com/maps/embed?pb=..." width="600" height="450" > </iframe>

For YouTube specifically, consider also adding a text description or transcript below the video since YouTube's auto-captions aren't always accurate. Most website builders have dedicated embed blocks for YouTube, Vimeo, and Google Maps - look for the title/accessibility settings within these blocks.

PDF documents available for download should also be accessible; Otherwise, have a web page option.

When sharing documents on your site, don't just stop at accessible web pages. Your downloadable PDFs need to be accessible too! Creating an accessible PDF is similar to creating an accessible webpage. 

Can't make your PDFs accessible right away? Another option is to provide the same information as a webpage—this ensures everyone can access your content, regardless of their needs.

Links

All links have TITLE text.

Make sure every link has descriptive title text that explains where it goes. Do your best to avoid vague phrases like 'read more' or 'click here'—instead, use specific text like 'view product details' or 'schedule a consultation.’ This is especially helpful for screen reader users, who often navigate by scanning through a list of links on your page.

When creating links in WordPress or Squarespace, you'll find an option to add "title text" - extra information that appears when someone hovers over the link. Look for this in the link settings, usually near where you paste the URL. This TITLE text can provide helpful details like "Learn our 5-minute method for perfect French press coffee."

Links that open in a new window alert the user.

Links opening up in new tabs can be a major accessibility issue, especially for those navigating with assistive technology. An unexpected tab opening can cause confusion. This also goes for external links (links going to a different website).

It’s best practice to have some sort of an indicator for external links. You could:

• Add a ‘(opens in new tab)’ after your link text
• Use ARIA labels to provide this info to screen readers

You also have the option of having the link open in the same tab, even if the link is external, and let the user decide for themself if they want it to open it in a new tab.

Text Formatting

Headline structure is semantically structured.

Heading levels typically look like H1, H2, H3, and so on. An assistive technology user will navigate your page based on a semantical hierarchy of this heading structure. Headings laid out in a non-logical order will throw the user off and confuse them. Machines are very literal, so it’s best practice to lay out your content in a way that makes sense to you and a screen reader.

Here’s an example of how you might structure content on your homepage:

If your site is in Squarespace DO NOT be tempted by choosing a headline type based on aesthetics 😐. (We know you’ve done it before, but we won’t tell anyone.) This creates a poor semantic structure, which means poor accessibility… Even if it is pretty.

No justified text.

Think of justified text like trying to make puzzle pieces fit perfectly between two straight edges. It stretches or squishes the spaces between words to make each line exactly the same length, touching both the left and right margins. 

While this might look neat and tidy (like in newspapers), it can create:

• Some lines end up with awkward gaps between words
• When these gaps line up vertically, they create distracting patterns down the page
• The uneven spacing makes it harder for your eyes to move naturally from word to word

This is especially challenging for people with dyslexia or other reading difficulties, who may struggle to track text with inconsistent spacing. That's why left-aligned text (like what you're reading right now) is the more accessible choice—it keeps even spacing between words while maintaining a consistent starting point for each line with no unnecessary gaps.

12pt (16px) is the smallest font size.

The smallest usable font size is 12pt (16px). It’s best to avoid using any text smaller than that, as it would be unreadable.

Text colors have a high contrast ratio against their background.

While everyone benefits from good contrast, it's crucial for visitors with vision impairments.

Personally, we use a tool like Colour Contrast Checker to help us determine what color combos are the most accessible for our websites. There are many options for tools like this to use and suggest you explore what’s available to find the best fit for you. It takes the guesswork out of creating a readable website.

It’s most important for color contrast to be high on text, but icons can also benefit from having good contrast 😉.

Improving Website Accessibility One Element at a Time

While these accessibility improvements might take a little time to implement, they're an investment in both your business's future and your community. Remember, you don't have to tackle everything at once. Start with one change this week, then build from there. Every step toward better accessibility is a step toward a more inclusive and successful business.