Betting Entertainment Tools

Widgets Demo

Live Match Tracker Accessibility

Accessibility can be enabled for Live Match Tracker Widget by specifying additional settings in SIR function when adding a widget.

On how to include widget on a page please read Getting Started Guide.

Widgets Settings

These are accessibility related widget props:

Name Type Default Description
accessibilityEnabled boolean false When set to true, widget web accessibility support is enabled.
accessibilityLiveRegionsEnabled boolean true When set to true, live match track pitch live announcer is enabled.
accessibilityHeadingLevel number 1 Accessibility aria headings level, valid inputs are numbers 1,2,3,4,5,6

accessibilityEnabled

When enabled, web accessibility support for navigation and components is added to a widget. All buttons, tabs and dropdowns are reachable by keyboard navigation and can be activated with the keyboard.

accessibilityLiveRegionsEnabled

The visual parts of the main LMT component are hidden from the screen readers, but a hidden live region component can be enabled for announcing live events to the screen reader, containing a screen reader accessible only button that can be used by the user to silence the LMT announcing.

accessibilityHeadingLevel

All accessible Live Match Tracker components contains headers, making navigation easier for screen reader users. Header tags are only screen reader visible.

This setting gives you an option to set accessibility aria headings level for widget to match the headings context of your site (ex. 1 if widget is a main element, 3 for widgets in sidebars etc).

Code

<body>
    <script>
        (function(a,b,c,d,e,f,g,h,i){a[e]||(i=a[e]=function(){(a[e].q=a[e].q||[]).push(arguments)},i.l=1*new Date,i.o=f,
        g=b.createElement(c),h=b.getElementsByTagName(c)[0],g.async=1,g.src=d,g.setAttribute("n",e),h.parentNode.insertBefore(g,h)
        )})(window,document,"script", "https://widgets.sir.sportradar.com/betradar/widgetloader", "SIR", {
            theme: false, // using custom theme
            language: "en"
        });
        SIR("addWidget", ".sr-widget-1", "match.lmtPlus", {
            accessibilityEnabled: true,
            accessibilityLiveRegionsEnabled: true,
            accessibilityHeadingLevel: 3,
            matchId: match_id_here
        });
    </script>
    <div class="widgets">
         <div><div class="sr-widget sr-widget-1"></div></div>
    </div>
</body>