Since this is about a bar chart in HTML, I'm going to suggest an implementation that should be accessible to screen reader users.
The bar chart itself is a single image, embedded by means of a normal
<img src="chart.png" alt="distribution of employees who came late to work, by minutes of delay" id="chart" />
(This can optionally be wrapped in a
figure element with caption.)
Above the image, you put an instruction such as, "Click on the individual bars in the chart to see the corresponding list of employees."
Then you add an image map with an "area" for each bar in the chart, and connect it to the bar chart (using the attribute
usemap on the
<p>Click on the individual bars in the chart to see the corresponding list of employees.</p>
alt="distribution of employees who came late to work, by minutes of delay"
id="chart" usemap="barchartmap" />
<area alt="10 minutes late" shape="rect" coords="[fill in coordinates here]"
<area alt="11 minutes late" shape="rect" coords="[fill in coordinates here]"
<!--areas for other bars to be added here -->
alt attributes on the
area elements tell screen reader users which bar they are at, and they can then decide whether to follow the link or not. This is essentially an example of the WCAG 2.0 technique Providing text alternatives for the area elements of image maps.
A somewhat related question on UX SE is Chart drill-down affordance?.
The Wall Street Journal has a clickable bar chart representing what Greece owes when; the individual bars don't take you to a different page but (strictly speaking) a different graph (though technically it swaps charts in place). After clicking on a bar in the chart, the instruction "Show all years" appears above the chart.