Text to Speech: Making Digital Content Accessible to Everyone

What Is Text to Speech and Why Is It Important?

Text-to-speech technology, also known as speech synthesis, converts written text into audible speech using artificial intelligence. The technology has evolved tremendously in recent years, and modern solutions deliver naturally sounding voices that make digital content accessible to millions of people worldwide. This technology is an important part of modern web design and a powerful tool for reaching more users.

In Norway, over 15% of the population uses assistive technology when navigating online. For these users, text-to-speech technology is often the difference between being able to participate fully in the digital society or being excluded. The technology is especially important for:

• People with visual impairments who use screen readers
• People with dyslexia or other reading and writing difficulties
• Users who prefer auditory learning over visual
• People who want to consume content while doing other activities
• Elderly users experiencing age-related vision challenges
• People with cognitive disabilities

For public organizations, universal design is not just a moral responsibility – it is mandated by the regulations on universal design of ICT. Private businesses targeting the general public also have an obligation to follow guidelines for universal design of digital solutions. Violations of these requirements can result in significant fines and damage to reputation. At Mementor, we have extensive experience helping businesses meet these requirements effectively.

Technical Requirements and WCAG Standards

WCAG (Web Content Accessibility Guidelines) 2.1 sets clear guidelines for how digital content should be designed to be accessible. The standard is internationally recognized and forms the basis for legislation on universal design in Norway and the EU.

You can find the complete overview of the WCAG standard at Uutilsynet or explore the interactive WCAG 2.1 Quick Reference. When it comes to text-to-speech and screen reader compatibility, the following principles are particularly relevant:

1. Text Alternatives for Non-text Content

All images, graphics, and other visual elements must have descriptive alternative text (alt text) that can be read by screen readers. This is fundamental for visually impaired people to understand the content on a webpage. The requirements include:

• Informative images that convey important content must have descriptive alt text
• Complex diagrams and infographics require detailed descriptions
• Decorative images should be marked as such to avoid unnecessary reading
• Icons and buttons with functionality must have text describing the action
• Images of text should be avoided, but if used, the text must be reproduced in the alt attribute

2. Correct Semantic Structure

Webpages must be coded with proper HTML structure for screen readers to interpret and navigate the content effectively. This means that developers must be careful about how they structure the code:

• Headings must use correct HTML tags (h1-h6) in hierarchical order
• Lists must be marked as ordered or unordered lists
• Tables must have proper headers and relationships defined
• Navigation elements must be clearly marked with nav tags
• Main content must be marked with the main tag
• Page footer and header must use footer and header tags

3. Keyboard Navigation

All functionality must be accessible via keyboard, as many screen reader users navigate without a mouse. This is a fundamental principle for accessibility and requires thoughtful implementation:

• All interactive elements must be reachable with the tab key
• Focus indicators must be clear and have sufficient contrast
• Skip links to main content should be available as the first element
• Tab order must be logical and follow visual order
• Keyboard shortcuts must not collide with screen reader commands
• Modal dialogs must handle focus correctly

Implementing Screen Reader Support

To ensure that webpages work well with screen readers such as JAWS, NVDA, and VoiceOver, developers must follow best practices and test thoroughly throughout the development process. Here are the most important areas to focus on:

WAI-ARIA Implementation

ARIA (Accessible Rich Internet Applications) attributes provide additional information to assistive technology. Proper use of ARIA can significantly improve the user experience for screen reader users, but incorrect use can make things worse. W3C has extensive documentation on WAI-ARIA standards and guidelines. The following principles are important:

• Use role attributes to define the element's function when semantic HTML is not sufficient
• Implement aria-label and aria-describedby for additional context
• Mark dynamic content with aria-live regions for important updates
• Use aria-expanded for elements that can be expanded/collapsed
• Implement aria-current to indicate the current page in navigation
• Avoid overriding semantic HTML with ARIA when not necessary

Testing with Screen Readers

Regular testing is crucial for ensuring quality. Testing should be an integrated part of the development process, not just something done at the end. Here is a systematic approach:

• Test with multiple screen readers (NVDA on Windows, VoiceOver on Mac/iOS, TalkBack on Android)
• Navigate using only the keyboard throughout the entire website
• Check that all information is available and understandable without visual context
• Verify that interactive elements are announced correctly with role and state
• Test with different reading speeds to ensure comprehensibility
• Include actual users with disabilities in the testing process

Practical Examples of Speech Synthesis Solutions

There are many different solutions for text to speech, from built-in system functions to specialized programs. The choice of solution depends on the user's needs and technical skills. For WordPress websites, we offer a powerful text to speech plugin that can be easily integrated into your website.

For Webpages and Documents

Modern browsers and operating systems have built-in support for reading aloud that is continuously improving. The most commonly used solutions include:

• Windows: Narrator (built-in) and NVDA (free, open source)
• macOS/iOS: VoiceOver (built-in with extensive functionality)
• Android: TalkBack (built-in) and Voice Access
• Chrome/Edge: Built-in reading functions and extensions
• JAWS: Professional screen reader with advanced features
• Audio and Braille displays for combined auditory and tactile feedback

For Specialized Needs

Tibi (formerly the Norwegian Library of Talking Books and Braille) is the library for you who have difficulty reading visual text due to disability or illness. They have developed specially adapted solutions for Norwegian users, and their speech synthesizers are optimized for Norwegian language and dialects:

• Clara for Bokmål - natural and clear voice
• Hulda for Nynorsk - adapted to Nynorsk language melody
• Specialized solutions for study materials and textbooks
• Support for mathematical formulas and special characters
• Integration with e-book systems for seamless reading experience

Common Challenges and Solutions

Implementing good screen reader support comes with several technical and design challenges. Here are the most common problems and how they can be solved:

Challenge 1: Complex Interactive Elements

Modern web applications often use JavaScript-based components that can be difficult for screen readers to interpret. Particularly challenging are custom-developed components that don't follow established patterns.

Solution: Use progressive enhancement and ensure that basic functionality works without JavaScript. Implement ARIA attributes correctly for dynamic elements. Test thoroughly with actual screen readers, not just automated tools. Consider using established component libraries that have good accessibility support built in.

Challenge 2: PDF Documents

PDF files are often problematic for screen readers if they are not properly tagged. Many PDFs are essentially images of text, completely inaccessible to assistive technology.

Solution: Use tools like Adobe Acrobat Pro to ensure that PDFs are semantically correctly tagged. Add heading structure, alternative text for images, and correct reading order. Always consider offering HTML alternatives for important documents. For forms, use interactive PDF fields that are accessible.

Challenge 3: Multimedia Content

Videos and audio clips require special adaptation to be accessible. This goes beyond just captioning and includes several aspects.

Solution:

• Provide captions for all video with audio, synchronized and accurate
• Create transcriptions for pure audio clips that can be read with a screen reader
• Implement audio description for videos published after February 2024
• Ensure that video players are accessible with keyboard controls
• Provide the ability to adjust playback speed
• Avoid autoplay that can disrupt screen reader use

Challenge 4: Multilingual Content

Screen readers need to know which language is being used for correct pronunciation. Incorrect language settings can make content incomprehensible.

Solution: Use the lang attribute consistently both at the document level and for text in languages other than the main language. For example: <span lang="en">“Hello world”</span> in a Norwegian document. This ensures that the screen reader switches to the correct voice and pronunciation.

Challenge 5: Dynamic Content and Single Page Applications

Modern frameworks like React, Vue, and Angular create challenges for screen readers when content changes dynamically without page loading.

Solution: Implement ARIA live regions for important updates. Handle focus correctly during route changes. Use announcements to inform about state changes. Test thoroughly with screen readers throughout the entire user journey.

The Future of Text-to-Speech Technology

Artificial intelligence is driving development forward at an impressive pace. In recent years, we have seen dramatic improvements in naturalness and intelligibility. Here are some of the most exciting developments:

• More natural voices that are difficult to distinguish from human speech
• Better handling of Norwegian dialects and unique expressions
• Smarter context understanding for more precise reading of abbreviations and numbers
• Integration with new platforms and devices, including IoT
• Real-time translation combined with speech synthesis
• Personalized voices tailored to individual preferences

The National Library has developed NB-Whisper, a Norwegian speech-to-text model that demonstrates the potential for tailored solutions adapted to Norwegian language and culture. This type of national initiative is important to ensure that Norwegian-speaking users get solutions as good as English-speaking ones. In addition to technical solutions, it is also important to consider how content is presented, which is central to work with AEO optimization where accessibility and user experience go hand in hand.

Best Practices for Implementation

Successful implementation of text-to-speech support requires a holistic approach. Here are concrete steps to get started:

1. Start with Basic Accessibility

• Conduct an accessibility audit of existing content
• Implement semantic HTML as a foundation
• Add missing alt texts to all informative images
• Check and correct the heading hierarchy
• Ensure sufficient color contrast (at least 4.5:1 for normal text)

2. Test Continuously

• Integrate accessibility testing in CI/CD pipeline
• Use automated tools like axe or WAVE
• Conduct manual tests with screen readers
• Include users with disabilities in user testing
• Document and follow up on found problems systematically

3. Build Competence in the Organization

• Arrange workshops on universal design
• Share knowledge and experiences across teams
• Establish guidelines and checklists
• Ensure that all new employees receive training
• Stay updated on new requirements and best practices

Conclusion

Text-to-speech technology is no longer a luxury but a necessity for creating an inclusive digital society. By following WCAG guidelines and implementing thoughtful solutions for screen reader support, businesses can ensure that their digital content is accessible to all users, regardless of ability.

Universal design is not just about following legal requirements – it's about giving all people equal opportunities to participate in the digital society. It's about respect for diversity and the recognition that when we design for those with the greatest needs, we create better solutions for everyone.

Start with small steps: check that your images have good alt text, test your website with a screen reader, and gradually build up competence in the organization. Every improvement, no matter how small, makes a difference for someone.