Favorite Pen of the Week: Animated Flag and Web Accessibility

Each week I look through hundreds of Pens on CodePen, looking for what I feel is the best. Things I look for are creativity, innovation, simplicity, functionality, etc. This weeks pen is an animated flag. Upon first glance, this pen may not seem all that impressive, however the message from the author is quite honorable. I'll talk about the message from the author later, but for right now it's time to get to the preview.

The Pen

See the Pen Animated GIF American Flag by Mark Sottek (@ShizzleTips) on CodePen.

Note: This is the .gif version because the javascript version caused google to improperly index this page

Why I like it

In case you didn't already know, I'm very patriotic so anything that remotely resembles an American flag is cool to me. When it comes to the code, this pen makes use of the HTML5 Canvas element. One of the drawbacks of using canvas is that they can be Javascript heavy ultimately slowing down page load times, however, you only use one line of code in html for the Canvas. Not to mention, as long as the delivery of the Javascript is optimized, page load times shouldn't be a problem.

Another thing that I like about this Pen is how well it is commented. Mark does a great job of commenting the CSS and Javascript making it easier for him and for anyone looking to utilize the code. While some of you may think, that is no big deal, I can assure you that it cuts out time that you may have otherwise spent scouring your browser's developer tools and makes the code way easier to understand. That leads me to my next point and the real reason why this is the Favorite Pen of the Week.

The Importance of Accessibility

Accessibility on the web is a subject that is sensitive to some and one that isn't talked about as much as it should be. Most of us forget that there are people who are visually impaired. According to the World Health Organization (WHO) fact sheet on Visual impairment and blindness, 285 million people are estimated to be visually impaired worldwide. Out of that 285 million, 39 million are completely blind.

As Mark shared in his html comment, he had to watch a friend of his who was a programmer slowly go blind. I often think about what would happen if I were to go blind and it has to be just about the scariest thing I could ever imagine. And for those whose livelihood depends on being able to see a computer screen, having that taken away is beyond the definition of fear. For those in similar situations, I am truly sorry. I wouldn't wish that upon even my worst of enemies.

Now why should it be okay to make your websites only accessible to those that don't suffer from impairments such as this? The answer is, it isn't. I too, am guilty of not making sure my sites are accessible. Can you imagine life where you can't visit the websites that you need to for information? Neither can I, which is why I am going to make sure my sites are accessible. As I've begun to learn, something as simple as adding descriptive alt text to your images can go a long way.

There all also benefits to putting a little extra work in making your site accessible, as Mark explains.

When you make your site accessible, your SEO score goes way up because your content is visible to search engine crawlers and you have the opportunity to add relevent info for them to index. Hence, not every good deed goes unpunished.

- Mark Sottek

Want more web accessibility info?

There are a lot of free tools and resources online for web accessibility. I would highly recommend reading and learning what you need to do to ensure that your websites are accessible to everybody. At this day in age, it would be selfish not to make sure your site was accessible.

Some resources to get you started:

• Introduction to Web Accessibility by WebAIM
• Web Accessibility Evaluation Tool by WebAIM

Make sure to show Mark some love!

• Mark's Codepen

Think I'm wrong or think a different Pen deserves the top spot? Drop a comment below and let me know how you really feel...