LearnFree Video: Building Accessible Charts


writes on April 11, 2012

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:

  1. Forms
  2. Tables
  3. Charts and Graphs

Other topics on Treehouse include topics like …


Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Get Started

7 Responses to “Free Video: Building Accessible Charts”

  1. Informative post. You explain very well in the video. Thank you so much for sharing. Great work keep it up.

  2. Recently I started to be interested in accessibility …nice video … PS: there’s a small mistake, the percentage ads up to 110 %;)

  3. 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).

  4. Ainoscataavlis on April 11, 2012 at 4:34 pm said:

    After I post a comment i was thinking about a simple graph but horizontal, and I made this – (that’s its far from perfect, but any comments are welcome!)

    width:400px;display:none;position:absolute;margin-top:10px;margin-left:15px;border-bottom:#699 1px solid;z-index:5;
    ul#navlist li,ul#navlist li a
    {padding-left: 12px;text-align: left;font: bold 10px arial, verdana, lucida, sans-serif;text-decoration: none;color: #699;line-height: 22px;margin: 0;
    text-transform: uppercase;}
    ul#navlist li:hover{color: #666;}
    #navlist{margin: 0 0 0 65px;padding: 0;text-align: left;list-style-type: none;position: relative;padding-left: 20px;border-bottom:#333333 solid 1px;width:40%;
    ul#subnavlist li
    {float:left;list-style-type: none;margin-right: 5px;margin-left: 5px;}
    ul#subnavlist li
    {width:30px;bottom:0px; position:absolute;border:#666666 1px solid;}
    #subnavlist{text-align: left;
    margin: 0;
    padding-left: 0;border-bottom:#333333 solid 1px;
    margin-left: 20px;}
    ul#navlist ul{position: absolute;
    bottom: 0;
    left: 4em;}


  5. Ainoscataavlis on April 11, 2012 at 3:02 pm said:

    VERY nice!! 😀 thanks 🙂

Leave a Reply

You must be logged in to post a comment.

man working on his laptop

Are you ready to start learning?

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Start a Free Trial
woman working on her laptop