Accessibility for your embedded solution

  • Article

When working with Power BI, consider making your embedded reports accessible to different types of users who might interact with them. A few easy ways to make your reports more accessible is to use the title and tabindex attributes, keyboard shortcuts, and high contrast mode.

How to use title and tabindex attributes

After you call the powerbi.embed or the powerbi.bootstrap method, you get a component of the type you embedded.

Title attribute

The title attribute lets you add text to the element it belongs to. If someone is using a screen reader, it reads the additional information about the element for them. In order to set the title attribute of the embed component, use setComponentTitle.

setComponentTitle(title: string): void

Title attribute example

let component = powerbi.embed(…);
component.setComponentTitle(“Analytics report”);

To learn more about the title attribute, see the MDN Web Docs title article.

Tabindex attribute

People can use their keyboard to navigate through your embedded reports. You can use the tabindex attribute to add tabbed focus to elements in your report that would otherwise be skipped over when the user presses Tab. In order to set the tabindex attribute of the embed component, use setComponentTabIndex.

setComponentTabIndex(tabIndex?: number): void

You can remove the tabindex attribute, by using removeComponentTabIndex

removeComponentTabIndex(tabIndex?: number): void

Tabindex attribute example

let component = powerbi.embed(...);
component.setComponentTabIndex(0);

To learn more about the tabindex attribute, see the MDN Web Docs tabindex article.

Keyboard shortcuts in embedded Power BI reports

For the people who use their keyboards to explore your embedded reports, a list of keyboard shortcuts is an invaluable tool. If you'd like to show the keyboard shortcuts, focus on the embedded report and press Shift+?.

To learn more, see Keyboard shortcuts in Power BI Desktop.

High contrast mode in embedded Power BI reports

In order to help users with visual or physical impairments benefit from your embedded reports, you can set them to use a high contrast theme.

You can set high contrast mode by adding a single parameter to the embed configuration of your application.

let embedConfig = {
    …
    contrastMode: models.ContrastMode.HighContrast1
};

The contrast modes available are:

enum ContrastMode {
    None = 0,
    HighContrast1 = 1,
    HighContrast2 = 2,
    HighContrastBlack = 3,
    HighContrastWhite = 4
}

The default is None = 0.

Important

If you provide both a high contrast mode and a theme, Power BI will only apply the high contrast mode. It can't apply both at the same time.

Adjust zoom level for Power BI reports

In order to help users with visual or physical impairments benefit from your embedded reports, you can adjust the report zoom level to be higher or lower than the default level.

You can set the zoom level of the report by adding a single parameter to the embed settings, or by using the setZoom API after the report loads.

Zoom level is calculated based on the report's actual size. See Change the display of a report page to learn more about the report display options.

let embedConfig = {
    …
    settings: {
        zoomLevel: 2 // 200% zoom
    }
};

To get the current zoom level or to change it after the report has loaded you can use the getZoom and setZoom APIs.

let currentZoom = await report.getZoom();
await report.setZoom(0.5); // 50% zoom

Note

The zoom level must be between 0.25 (25%) and four (400%).

Related content