Blogger Accessibility Checklist 2026 | WCAG 2.1 AA Guide for Google Blogger
Last updated: 2026-04-18
Blogger is Google's long-running free blog hosting platform, still used by millions of hobbyists, educators, independent writers, and small businesses who appreciate its zero-cost publishing model and integration with Google accounts. While Blogger no longer receives major feature updates, it remains a popular choice for personal blogs, niche content sites, and long-tail SEO projects. The platform's template system dates back to an earlier era of web design, and many default themes ship with accessibility issues that affect readers using screen readers, keyboard navigation, or low-vision tools. Compounding this, the post editor does not prominently surface alt text fields, heading controls are often used inconsistently, and third-party widgets added to sidebars frequently fail basic accessibility requirements. Accessibility obligations apply to Blogger sites just as they do to any other website. If your Blogger site serves customers in the EU, the European Accessibility Act's enforceability as of June 2025 means you must meet WCAG 2.1 AA standards. In the United States, ADA lawsuits continue to target small publisher websites whose readership includes people with disabilities. This checklist walks through the most common accessibility issues on Blogger sites and provides practical fixes you can implement through the theme designer, post editor, and HTML/CSS customization panels. Issues are ordered from critical to moderate severity so you can prioritize the fixes with the greatest impact on real users.
Common Accessibility Issues
Blogger's image upload dialog includes an alt text field, but it is tucked away in a 'Properties' panel that most bloggers never notice or open. As a result, the vast majority of images on Blogger posts ship without meaningful alt attributes. For content-heavy blogs built around photography, recipes, tutorials, or product reviews, this means the main visual information is completely inaccessible to screen reader users and harms image SEO.
When inserting an image, click on it after upload and select 'Properties' to reveal the Title text and Alt text fields. Fill in the Alt text with a description of what the image shows and why it matters to the post. For decorative images such as divider graphics, leave the alt text completely empty so screen readers skip the element. For existing posts, open each one in edit mode and update image alt text retroactively. Prioritize the posts that receive the most traffic.
The Blogger compose editor offers heading levels through a dropdown labeled with names like 'Heading', 'Subheading', and 'Minor heading' rather than the underlying H2, H3, H4 tags. This leads many bloggers to pick headings based on how they look visually rather than document structure. Commonly, posts skip from an H2 title straight to an H4 subheading, or use bold paragraph text where a heading belongs. Screen reader users navigating by headings encounter a broken outline that makes long posts hard to scan.
Treat Blogger's 'Heading' as H2 (since the post title is already H1 in most themes), 'Subheading' as H3, and 'Minor heading' as H4. Do not skip levels. For visual style adjustments, change font size through the format menu rather than demoting a heading level. Review existing long-form posts using the HeadingsMap browser extension on the published page to confirm the hierarchy is logical.
Several of Blogger's built-in themes (particularly the 'Contempo', 'Soho', and some 'Simple' variants) use light gray body text, muted link colors, and low-contrast date/meta text that fails the 4.5:1 ratio required by WCAG 2.1 AA. Users with low vision or anyone reading on a sunlit screen struggle to parse the text. The issue is especially severe on mobile where ambient light conditions vary.
Use a contrast checker such as WebAIM's Contrast Checker to test your theme's body text, link text, and metadata (dates, author, labels) against their background colors. In the Theme > Customize panel, open the Advanced section and darken any color that falls below the minimum ratio. Pay particular attention to visited link colors and hover states, which are often neglected. If your theme does not expose a color you need to change, use Blogger's Edit HTML option to add custom CSS overrides.
Blogger's sidebar widgets (Popular Posts, Labels, Archive, Blog Archive, Search Box) generate HTML that often uses div and span elements where semantic list or nav markup would be correct. The Archive widget in particular renders as a nested set of expandable divs without the aria-expanded state that collapsible controls require. Keyboard users cannot determine whether a section is open or closed, and screen reader users have no way to understand the structure as a list of links.
Open the Theme > Edit HTML editor and locate the widget template sections. Wrap widget contents in proper semantic markup: use ul/li for label clouds and archive lists, add aria-label to landmark elements. For the Archive widget's expand/collapse controls, add aria-expanded attributes that are toggled via the existing JavaScript. If editing the theme XML feels risky, consider switching to a more modern third-party Blogger template that uses semantic HTML by default.
Blogger's built-in comment form relies on placeholder text for the name and comment fields rather than visible labels. When a user tabs into a field, the placeholder disappears and the field has no accessible name for screen readers to announce. Users with cognitive disabilities also lose the context of what information each field is requesting.
In the Theme > Edit HTML editor, find the b:includable for comment-form and add explicit label elements tied to each input with matching for/id attributes. Make labels visible above the fields rather than using placeholder-only patterns. Alternatively, replace the Blogger comment system with a more accessible third-party option such as Disqus (with its latest accessibility-improved commenting widget) or Isso, though this involves trade-offs around moderation and data control.
Some Blogger themes use CSS to reposition the sidebar beneath the main post on mobile but do not adjust the underlying DOM order. Depending on the theme, this can mean screen reader users on mobile hear sidebar content before the post, or encounter the post title in an unexpected location relative to its body.
Test your theme on a mobile device using TalkBack (Android) or VoiceOver (iOS). Swipe through the content linearly and verify that the reading order matches the visual order. If not, edit the theme XML to reorder the b:section elements so that the main post content appears before sidebar widgets in the DOM. Use CSS Grid or Flexbox with the 'order' property for visual positioning instead of physically rearranging via absolute positioning.
Blogger-Specific Tips
- Blogger's Theme Designer exposes surprisingly few accessibility-relevant settings in the visual panels. Expect to use the Edit HTML option and add custom CSS or modify widget templates directly for most substantive fixes.
- When adding any image to a post, form the habit of clicking the image after upload and filling in the Properties > Alt text field before publishing. Going back and retrofitting alt text on years of posts is far more tedious than doing it right the first time.
- Blogger's built-in search widget is limited and its results page often has poor semantic structure. Consider supplementing with a Google Custom Search or linking to label/tag archive pages for more accessible discovery.
- If your Blogger site is more than a few years old, audit it against current WCAG 2.2 requirements. Several criteria have been added since Blogger's peak popularity, and older themes were never updated to meet them.
Recommended Tools
WAVE Web Accessibility Evaluator
A free web-based tool and browser extension that visually highlights accessibility issues directly on your Blogger pages. Particularly effective at surfacing missing alt text, empty headings, and contrast problems in legacy themes.
WebAIM Contrast Checker
A simple web tool for verifying that text/background color combinations in your Blogger theme meet WCAG AA requirements. Useful when tuning custom colors in the theme designer.
HeadingsMap
A browser extension that visualizes the heading outline of any page. Essential for identifying skipped heading levels in long-form Blogger posts where authors often picked heading styles based on visual size.
Further Reading
Other CMS Checklists
Get our free accessibility toolkit
We're building a simple accessibility checker for non-developers. Join the waitlist for early access and a free EAA compliance checklist.
No spam. Unsubscribe anytime.