LearnFree Video: Building Accessible Charts

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 …

7 Responses to “Free Video: Building Accessible Charts”

  1. Web Design Firm USA on May 7, 2012 at 12:23 pm said:

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

  2. KreativTheme on April 25, 2012 at 4:33 am said:

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

  3. essaywriter.org on April 18, 2012 at 11:00 am said:

    Thanks for great info! 

    • Essaywriter.org is your company? If so, it’s bad! I’ve trusted the review http://essayservicejudge.com/review-essaywriterorg.php that it’s reliable, but my essay was awful! For what I payed my money!?

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

  5. 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;}


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

    VERY nice!! 😀 thanks 🙂

Leave a Reply

Learning to code can be fun!

Get started today with a free trial and discover why thousands of students are choosing Treehouse to learn about web development, design, and business.

Learn more