In this 6 minute video, you’ll learn how to create a simple bar graph from scratch by using HTML and CSS. This bar graph is made with screen readers in mind, and doesn’t make use of images or browser plugins.

This video is the third video in the Accessibility: Web Apps badge from Treehouse, a high-quality video training site with hundreds of short videos. The entire Accessibility: Web Apps badge consists of the following videos:

Interesting technique but I think the specific example could be made more accessible.

You use CSS to represent the percentage relationship between the four items so a sighted user can see the relationship between any of the items at a glance.

However, a user using a screen reader would need to do the mental arithmetic to work out the relevant percentages of the total only after all four items have been read out and the total number of farms counted up. So, the content of the list items might be better written to include the percentage value as well as the number of farms (the percentage information then being available for each item in the list and not only available following calculation by the user once the entire list is read out).