Explaining 5 Methods to Achieve 'Reading' on Websites

2024/11/28

As accessibility compliance is now required for all websites,'Website Read Aloud'features and tools that perform 'Website Read Aloud' are essential elements for accessibility compliance and improving user experience.

The website read-aloud function not only supports diverse users, including those with visual impairments, to equitably access information on the web, but it is also gaining attention as a tool that supports 'multitasking'.

There are five representative methods for reading aloud websites:

Method 1: Utilize Browser Read-Aloud Function
Method 2: Utilize Screen Readers
Method 3: Integrate Plugins
Method 4: Use Speech Synthesis APIs
Method 5: Provide Video and Audio Content

This article introduces these five representative methods for reading aloud, explaining their features, implementation methods, and the challenges faced by read-aloud functions in detail.

Five Methods for Reading Aloud a Website

First, let’s introduce the five methods for implementing website read-aloud. The table below summarizes a comparison of each method.

◆ Comparison Table of the Five Methods for Website Read-Aloud

Method	Features	Application Scope	Advantages	Disadvantages
1. Utilize Browser Read-Aloud Function	Equipped as a standard feature in web browsers, available through settings	Whole Browser	・No Implementation CostAvailable for Use ・Can be easily activated from browser settings, allowing users to use it immediately.	・Often read in a monotonous voice. ・Not available on certain browsers or OS.
2. Utilize Screen Readers	A support technology primarily designed for visually impaired users, available across the entire OS and applications.	System-wide and General Applications	・Supports overall accessibilityAvailable system-wide. ・Some support braille output.	・Requires setup and installation, which may be cumbersome for able-bodied individuals. ・Some tools are paid.
3. Integrate Plugins	Embedding script codes on the website to read specific content aloud.	Specific Websites or Pages	・Optimized for specific contentto function. ・Customization is possible.	・Implementation can be labor-intensive. ・The range of functions depends on the integrated plugins.
4. Use Speech Synthesis APIs	Capable of generating high-quality, more natural-sounding voices, usable in any situation requiring narration.	Ranges from websites and apps to IoT devices, content creation, chatbots, and more.	・Advanced customization is available.Capable of generating natural-sounding voices. ・Excellent support for multiple languages.	・Developer-oriented with high technical barriers for implementation. ・Operational costs can be high.
5. Provide Video and Audio Content	Providing read-aloud information as audio or video content.	Limited to specific content (audio/videos).	・Not only voice, but alsoutilizes visuals and music.Can do. ・Can focus on specific content.	・Content creation can be labor-intensive. ・Lacks real-time capabilities.

Primarily, website read-aloud is realized through these methods. For methods 3, 4, and 5, it is possible to provide high-precision read-aloud, yet,website operators must engage in development or production.This is necessary.

On the other hand, methods 1 and 2 utilize browser settings and tools on the user side for read-aloud, thus no special development is needed from the website, but for the browser read-aloud functions and screen readers to operate correctly,the structure of the website and the method of writing HTML, etc., should comply with accessibility standards such as WCAG.This is necessary.

We will explain each method in detail, including how to implement them below.

Method 1: Utilize Browser Read-Aloud Function

We will utilize the read-aloud function built into web browsers such as 'Google Chrome' and 'Safari'.There is no need to install special apps or softwareand users can provide text to speech just by doing simple settings. It is useful not only for visually impaired users but also for able-bodied individuals who are multitasking to obtain information.

However, it only functions within the browser,and unlike screen readers that function system-wide, its functionalities are limited for visually impaired individuals.It can be said.

◆ Representative Services

・Microsoft Edge
・Safari(Mac)
・Google Chrome

Implementation Methods

Activate the read-aloud function from each browser's settings menu. When using additional browser extensions, they can be utilized by installing the extension on the browser and enabling the functions. For example, in Chrome,'Read Aloud'and other extensions are available.

Method 2: Utilize Screen Readers

Screen readers are assistive technologies designed for visually impaired individuals that convert on-screen information into speech or braille. They can be used not only in web browsers, but also inacross the entire system, including OS and applications.This is a characteristic feature.

◆ Representative Tools

NVDA Japanese Version
Narrator
PC-Talker
JAWS 2024 Japanese Version
ZoomText 2024 Japanese Version

Implementation Methods

The implementation methods vary by tool, but generally, they can be downloaded from official websites, or installed after purchasing a license. Additionally,smartphones come with built-in screen readers,In the case of iOS, access the accessibility menu in settings to'VoiceOver'and for Android, you can turn on 'TalkBack'.'TalkBack'to enable the read-aloud function.

Regarding screen readers,we have explained them in detail in the article below, so please check it out alongside this article.。

Related Articles:Explains how to use screen readers and five typical tools

Method 3: Integrate Plugins

Plugins can easily add read-aloud functions to the website.They provide read-aloud functions specialized for specific content (e.g., product descriptions, articles, FAQs)so administrators can flexibly customize the functions according to the site's objectives. Additionally, by customizing the settings, for example,they can provide intuitive and user-friendly interfaces with specifications for the reading range or buttons to start/stop the speech.This is also possible for users.

◆ Representative Plugins

UniWeb
ReadSpeaker
BrowseAloud

Implementation Methods

The general implementation method involves selecting suitable plugins from the service site andimplementing them simply by inserting the provider's script code into the HTML header.。It is possible to customize the text range and button design in the management interface.

Method 4: Use Speech Synthesis APIs

Speech synthesis APIs are used to convert input textinto natural-sounding voices in real-time.as a technical foundation, enabling the integration of advanced read-aloud functions into websites and applications.It allows for voice adjustments according to emotions and contexts, and excels in multilingual support.This is a characteristic feature.

◆ Representative Services

Google Cloud Text-to-Speech
Amazon Polly
IBM Watson Text-to-Speech

Implementation Methods

First, create an account with API providers such as Google Cloud, Amazon AWS, and IBM Watson, and enable the API. You can achieve this by integrating the obtained API key into your development environment, implementing the program, sending text to the API, and playing back the generated audio data.

Method 5: Provide Video and Audio Content

This is a way to deliver information on your site in audio format as video or audio content.By combining with visual elements, you can convey information from multiple angles.Creating content such as video editing takes effort and time, but with proper editing,it can become the most reliable way to convey the intended message clearly.It can also be the case.

Implementation Methods

First, create content using audio recording software or video editing tools. Upload the files to the server, andyou can either directly embed tags into the website or upload to YouTube or SoundCloud, obtaining the embed code to integrate into the site.There are also ways to enhance accessibility by providing subtitles or transcriptions.

Both methods are beneficial for improving user convenience and ensuring accessibility, but there are several considerations and challenges when implementing and operating them.There are several notes and challengesto be aware of. Next, let's discuss the challenges that site reading functions face.

Five Challenges of Website Read-Aloud Functions

Reading features are useful for a diverse range of users, but there are also several challenges. Here we will discuss five representative issues.

Challenge 1: Limitations of Voice Quality and Naturalness

In recent years, advanced synthesis technologies such as AI voice have made it possible to generate more natural voices, but many commonly used browser reading features and screen readers tend toproduce monotonous and mechanical voices..

When users seek quality in audio, monotonous voices and unnatural intonation can be problematic, especially whenthe target text is lengthy, leading to fatigue.This presents a challenge.

Challenge 2: Certain Characters and Symbols Not Recognized Correctly

Certain special characters, symbols, and abbreviations might not be read correctly,which can make it difficult for users to understand the content, and also causesa decline in the overall accessibility of the site.It can also be the case.

For example, in specialized notations like program code, equations, and chemical formulas, intended readings may not occur, confusing users. Abbreviations like NASA or HTML may also be mispronounced, making their meanings less clear to users.

Additionally, when decorative symbols and emojis are frequently used, the reading engine may attempt to read out all emoji names, resulting in lengthy and unclear outcomes. (For instance, it may read 😊 as 'smiling emoji'.)

Challenge 3: Difficulties in Multilingual Support

On multilingual websites, failing to properly switch languages can lead toincorrect pronunciations or unnatural readings.Additionally, if language codes (such as lang='en', lang='ja', etc.) are not set correctly, the speech engine may not function properly.

Proper setting of language codes and switching of speech synthesis engines representsa technically complex issue that increases operational labor.This is a common challenge for multilingual sites.

Challenge 4: Response to Dynamic Content

Dynamic content such as comment sections, chats, and pop-upsis very effective and useful because it can update information in real-time, butit doesn't work well with the site reading functionality.

In many cases, reading functions and screen readers do not recognize newly added information in real-time,resulting in issues such as 'not reading to the end' or 'overlapping readings', hindering effective communication of information to users.Consequently, new information may be ignored, or users may hear outdated information at unintended times.

Challenge 5: Costs and Burdens of Accessibility Compliance

For the reading function to work correctly,the website's HTML and structure must be appropriately documented according to accessibility standards.However, in practice, there are numerous cases where incorrect HTML writing, lack of alternative text, and unconfigured ARIA attributes cause the reading function to malfunction.

To resolve such issues, modifications to the website are necessary, but this entailsfinancial costs and time.This can be a significant burden, especially forsmall businesses with budget or personnel constraints, where addressing accessibility may often be delayed.This is often the current situation.

These challenges are unavoidable when implementing and operating reading functions. However,recent advancements in AI technology have opened up possibilities for addressing these challenges.Next, we will discuss the evolution of site reading functions brought about by AI technology.

Evolution of Site Read-Aloud Functions Brought by AI Technologies

In recent years, advancements in AI technology have led to significant progress in site reading functions.Voice synthesis models utilizing deep learning (technology that automatically learns features from vast amounts of data)generate audio from text by incorporating intonation based on emotion and context,producing more natural and human-like voices rather than traditional mechanical readings.。

Moreover, AI canunderstand the context of the text and the relationships between words.For example, it can use a formal tone for news articles and an emotionally expressive voice for story content, achieving readings that suit the content.

Additionally, multilingual support has also evolved through AI,with voice synthesis technologies like Google Cloud TTS accommodating dozens of languages.This allows for smooth transitions between different languages; for instance, even on pages that mix English and Japanese,it can automatically discern the text and read it in appropriate pronunciations and intonations for each language or read it in the target language while translating the text.This has become possible.

Such technologies can be integrated into existing reading methods,such as browsers, screen readers, and plugins, significantly enhancing their respective functionalities.and it has the potential to greatly enhance user experience.

Reference: Latest Voice Synthesis Technologies and Their Applications: Futures Voices Created by AI / 2024 Latest! Advances in Voice Synthesis Technology and Amazing Use Cases（Reinforz Insight）、Realizing multilingual synthesized voices without compromising speaker voice quality; the voice synthesis solution 'FutureVoice Crayon' features cross-lingual voice synthesis technology, marking the first commercial offering in Japan.（NTT TechnoCross）

Efficient Site Read-Aloud Solutions Realized by UniWeb

In this article, we introduced various methods for site reading features, but our company offersthe accessibility tool 'Uniweb',which is a powerful tool designed to achieve accessibility compliance on websites in a short time.

As it is a plugin tool,by simply inserting one line of code into your website,you can easily implement specific accessibility improvement features such as text-to-speech functionality, color adjustments, and text size modifications.

Uniweb's site reading function includesnot only the standard 'screen reader' function but also a 'partial reader' function.The following is the partial reader feature, which can be activated with one click, and allows for speed adjustments in reading.

By clicking on the section you want to hear, it will read that part only, making it useful not only for accessibility purposes but also for obtaining information while multitasking.

◆Uniweb's 'Partial Reader'

Typically, to ensure that a site's reading function works correctly, you need to use a screen reader to check for issues page by page and manually correct the HTML or structure, but with Uniweb,it is possible to automatically analyze the entire site and efficiently identify problem areas and optimize the structure..

Uniweb is a reliable and cost-effective tool for web accessibility that includes voice reading.Click the 'pink icon' at the bottom right of this article,and the Uniweb accessibility menu will appear, so please try out the functions.

Conclusion

The reading function of websites plays an important role inimproving user experience and accessibility.. In this article, we introduced the characteristics and implementation methods of five reading methods, but in the future, when considering read-aloud functionality,it is important to choose methods that match the site's objectives and user demographics while also giving adequate consideration to challenges.

Additionally, to be compatible with browser features and screen readers,it is important to ensure that the site's structure and HTML coding comply with accessibility standards.By doing so, the reading function will work accurately, providing an environment where all users can comfortably access the content.

In today's world, where all websites are required to be accessible, the reading function on sites will increasingly gain attention, especially to ensure that users with visual impairments and the elderly can use the sites without inconvenience.

If you aim for efficient and effective accessibility compliance, considering solutions like Uniweb could be one of your options.