At Solo, we automatically implement several accessibility features to make your websites more accessible and improve the overall user experience for everyone. This includes the following:
Semantic HTML Structure #
Proper Heading Hierarchy
This helps screen readers navigate and understand your content structure:
- We use semantic HTML headings (h1, h2, h3, etc.) to create a clear content structure
- Your main website title automatically becomes an h1 heading
- Section titles use appropriate heading levels to maintain the content hierarchy
Language Support
This helps screen readers use the correct pronunciation and language rules:
- We automatically set the language attribute (lang=”en”) on your website – unless you select a different language in onboarding or via Settings.
Form Accessibility #
Accessible Contact Forms
This informs screen readers on how they communicate the emphasized information:
- All form fields have proper labels associated with them using the htmlFor attribute
- Form validation includes clear error messages with role=”alert”
- Success messages also use role=”alert” to announce form submission results
- Required fields are clearly marked with asterisks
Newsletter Signup Forms
- Email input fields have proper labels and validation
- Form submission feedback is announced to screen readers as we use role=”alert”
Text Color Accessibility #
Theme colors are chosen to meet WCAG 2.2 minimum contrast ratio (Level AA). This means that normal text (below 18pt or, below or 14pt bold has a contrast ratio of at least 4.5:1, and larger text has a contrast ratio of at least 3:1.
Image Accessibility #
Automatic Alt Text
This helps screen readers describe images to visually impaired users:
- Unsplash stock images automatically include alt text. If you upload a custom image that already has an alt text, screen readers can use that too.
- Logo images include the descriptive word “logo” as the alt text
- Images load with lazy loading to improve performance
Navigation and Interaction #
Clear Button Labels
- All buttons have clear, descriptive text
- Interactive elements provide clear feedback when activated
Development and Quality Assurance #
Accessibility Linting
This catches common accessibility issues before they reach your live website
- We use ESLint with the jsx-a11y plugin during development
- Automated checking for proper ARIA attributes and semantic HTML
User Experience Enhancements #
Focus Management
- Smooth scrolling and browser focus handling
- Animation triggers respect user preferences for reduced motion which is handled by your operating system (e.g. Windows, MacOS…
- Loading states and transitions provide clear feedback
Additional Accessibility Features #
Cookie Banners
- Cookie consent banners follow accessibility best practices
- Clear accept/reject options with suggested button labeling that users can further edit
Social Media Links
- Social media icons include proper labels
- Links open appropriately and provide context about their destination
While Solo automatically implements these accessibility features, you can further audit and improve your website’s accessibility by using the WAVE Web Accessibility Tool.