Free Video: Building Accessible Charts

Treehouse●Accessibility 6 Comments

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 …

Start Learning Web Design, Coding, How To Start A Business & More for Free!

Learn More

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

  • Ainoscataavlis

    VERY nice!! :D thanks :)

  • Ainoscataavlis

    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

  • Kieren

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

  • http://twitter.com/#!/Essay___Writer essaywriter.org

    Thanks for great info! 

  • http://www.kreativtheme.com KreativTheme

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

  • http://www.cyberdesignz.com/ Web Design Firm USA

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