Accessibility

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

Title and tab index

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

Title attribute

In order to set the title attribute to 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 to the embed component, setComponentTabIndex can be used.

setComponentTabIndex(tabIndex?: number): void

It is possible to 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

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 simply 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 as they cannot be applied at the same time.