Steps to reproduce

1. Create a RichText widget with multiple TextSpan or WidgetSpan elements, each representing a clickable link.

2. Wrap each link in a Semantics widget to ensure accessibility support.

3. Add GestureDetector to handle onTap events for each link.

4. Test using a screen reader (TalkBack on Android or VoiceOver on iOS).

   Code sample:

MergeSemantics(
            child: RichText(
              text: TextSpan(
                style: const TextStyle(color: Colors.black, fontSize: 16.0),
                children: [
                  const TextSpan(
                    text:
                        'Android is a mobile operating system based on a modified version of the ',
                  ),
                  WidgetSpan(
                    child: Semantics(
                      label: 'Linux kernel',
                      button: true,
                      //link: true,
                      child: GestureDetector(
                        onTap: () {
                          print("Link 1 tapped!");
                        },
                        child: const Text(
                          'Linux kernel',
                          style: TextStyle(
                            color: Colors.blue,
                            decoration: TextDecoration.underline,
                          ),
                        ),
                      ),
                    ),
                  ),
                  const TextSpan(
                    text: ' and other ',
                  ),
                  WidgetSpan(
                    child: Semantics(
                      label: 'open-source',
                      button: true,
                      //link: true,
                      child: GestureDetector(
                        onTap: () {
                          print(" link 2 tapped!");
                        },
                        child: const Text(
                          'open-source',
                          style: TextStyle(
                            color: Colors.blue,
                            decoration: TextDecoration.underline,
                          ),
                        ),
                      ),
                    ),
                  ),
                  const TextSpan(
                    text: ' software.',
                  ),
                ],
              ),
            ),

Expected results

Whole content should be readable in a single tap and each link should be clickable.

Actual results

The screen reader only selects or announces the first link consistently.

The second link is often skipped or merged with surrounding text, making it inaccessible.

Steps to reproduce

1. Create a RichText widget with multiple TextSpan or WidgetSpan elements, each representing a clickable link.

2. Wrap each link in a Semantics widget to ensure accessibility support.

3. Add GestureDetector to handle onTap events for each link.

4. Test using a screen reader (TalkBack on Android or VoiceOver on iOS).

   Code sample:

MergeSemantics(
            child: RichText(
              text: TextSpan(
                style: const TextStyle(color: Colors.black, fontSize: 16.0),
                children: [
                  const TextSpan(
                    text:
                        'Android is a mobile operating system based on a modified version of the ',
                  ),
                  WidgetSpan(
                    child: Semantics(
                      label: 'Linux kernel',
                      button: true,
                      //link: true,
                      child: GestureDetector(
                        onTap: () {
                          print("Link 1 tapped!");
                        },
                        child: const Text(
                          'Linux kernel',
                          style: TextStyle(
                            color: Colors.blue,
                            decoration: TextDecoration.underline,
                          ),
                        ),
                      ),
                    ),
                  ),
                  const TextSpan(
                    text: ' and other ',
                  ),
                  WidgetSpan(
                    child: Semantics(
                      label: 'open-source',
                      button: true,
                      //link: true,
                      child: GestureDetector(
                        onTap: () {
                          print(" link 2 tapped!");
                        },
                        child: const Text(
                          'open-source',
                          style: TextStyle(
                            color: Colors.blue,
                            decoration: TextDecoration.underline,
                          ),
                        ),
                      ),
                    ),
                  ),
                  const TextSpan(
                    text: ' software.',
                  ),
                ],
              ),
            ),

Expected results

Whole content should be readable in a single tap and each link should be clickable.

Actual results

The screen reader only selects or announces the first link consistently.

The second link is often skipped or merged with surrounding text, making it inaccessible.

• flutter
• accessibility

Share Improve this question Follow edited Nov 19, 2024 at 12:10 Nishore kumar asked Nov 19, 2024 at 8:23 Nishore kumarNishore kumar 122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Try using recognizer in TextSpan instead of using WidgetSpan and GestureDetector

MergeSemantics(
        child: RichText(
      text: TextSpan(
        style: const TextStyle(color: Colors.black, fontSize: 16.0),
        children: [
          const TextSpan(
            text:
                'Android is a mobile operating system based on a modified version of the ',
          ),
          TextSpan(
              text: 'Linux kernel',
              recognizer: TapGestureRecognizer()
                ..onTap = () {
                  print("Link 1 tapped!");
                }),
          const TextSpan(
            text: ' and other ',
          ),
          TextSpan(
              text: 'open-source',
              recognizer: TapGestureRecognizer()
                ..onTap = () {
                  print(" link 2 tapped!");
                }),
          const TextSpan(
            text: ' software.',
          ),
        ],
      ),
    ));
  }