Ga naar hoofdinhoud
Logo Appt Light

Accessibility link on Flutter

Links should be accessible for users of assistive technologies. When accessibility is not taken into account, users might not be able to find or activate links.

In Flutter, links should have the semantic property link.

To create text links, you can use the RichText widget. You can pass multiple TextSpan widgets as it's children.

The url_launcher package can be used to open links.

RichText(
    text: TextSpan(
        children: [
            TextSpan(
                text: 'Learn more about ',
            ),
            Semantics(
                link: true,
                label: 'Appt',
                hint: 'External link',
                child: TextSpan(
                    text: 'Appt',
                    style: TextStyle(
                        decoration: TextDecoration.underline, 
                        color: Colors.blue
                    ),
                    recognizer: TapGestureRecognizer()..onTap = () {
                        final url = Uri.parse('https://appt.org')
                        launchUrl(url)
                    },
                ),
            ),
        ],
    ),
);
Bijdragen

Feedback?

Laat 't ons weten!