Accessibility

When working with Power BI, consider making your reports accessible for different types of users who may interact with your reports.

Title and tab index

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

Title attribute

In order to set the title attribute of the embed component, setComponentTitle can be used.

setComponentTitle(title: string): void

Sample code:

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

Learn more about the title attribute

Tab index attribute

In order to set the tab index attribute of the embed component, setComponentTabIndex can be used.

setComponentTabIndex(tabIndex?: number): void

You can remove the tab index attribute, by using removeComponentTabIndex

removeComponentTabIndex(tabIndex?: number): void

Sample code:

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

Learn more about the tab index attribute

Keyboard shortcuts in Power BI Embedded

To show keyboard shortcuts, focus on the embedded report and press Shift + ?.

See more keyboard shortcuts in Power BI

High contrast mode

In order to enable users who may have visual or physical impairments to benefit from your reports, you can set your embedded reports to use a high contrast theme.

High contrast mode can be set for your embedded report by adding a single parameter to the embed configuration of your application. 

var embedConfig = { 
    … 
    contrastMode: models.contrastMode.HighContrast1 
}; 

The contrast modes available are:

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

The default is None.

Important: if both a theme and a contrast mode are provided, only the contrast mode will be applied. This is because both cannot be applied at the same time.