Free 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 …

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from either HTML, CSS or Wordpress.

Start learning

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

6 comments on “Free Video: Building Accessible Charts

  1. 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!)

    hr{
    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;}
    .red{
    background-color:#CC0033}
    .green{left:50px;background-color:#66CC33}
    .yellow{left:100px;
    background-color:#FFFF99}
    #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;}

    20
    15
    10

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

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