HTML5 for SEO and Accessibility

Editor's Notes

• #5: Here are some of the HTML5 benefits often discussed in our line of work : Improved UX New tags to classify content Great alternative to Flash & Silverlight Heavily used in apps and games Improved crawling and indexing Improved Forms http://searchengineland.com/seo-best-practices-for-html5-truths-half-truths-outright-lies-99406
• #6: None of the popular Internet browsers fully support all of the features and codes in HTML5. Today’s browsers will render HTML5, but there are still many aspects of HTML5 that are not fully supported by or compatible with all Internet browsers. Since Google doesn’t use it as a means of understanding content better, it means that your clients will not be favoring HTML5 for SEO purposes.
• #9: Someday, HTML5 will make a great difference but as of now, no one is providing evidence about the effects of HTML5 on organic traffic. Still, once Search Engines take notice, HTML5 has the potential to change the way crawlers index the Web and how they understand content
• #10: It’s a new feature called the History API. It lets developers change the URL in the address bar of the browser without refreshing the page. This subtle change helps search engines tie AJAX content to a unique URL, which is crucial for their ranking algorithms. http://www.searchenginejournal.com/html5-an-essential-weapon-for-seos/62512/ 
• #11: Article : The contents of an article tags should be entire self-contained. A blog post or new article could be wrapped in an <article> tag, for example. Section : If a blog post was broken into several sections by subheaders, each section could be wrapped with a <section> tag. Just as books have chapters, blocks of content can have section. Footer : This may contain things like footer navigation or meta-data about an article Header : <header> tags might contain navigation, branding or the document headline. Aside : In other words, could be used on a website sidebar or it could be used within an <article> for special call outs – like the “did you know” call outs found in many books.
• #12: http://www.searchenginejournal.com/html5-an-essential-weapon-for-seos/62512/ HTML5 is semantic HTML. It provides meaning to the structure of the page. A div doesn’t do that. New semantic markup helps search engines understand what each block of code is trying to accomplish within the page. HTML5 provides several new ways for webmasters to instruct search engines on how to handle links. Identifying the most important links on your page is possible with page nav, footer and other tags. Links in the header and navigation get a little more of a boost compared to those in the footer.
• #13: http://code.tutsplus.com/tutorials/28-html5-features-tips-and-techniques-you-must-know--net-13520 https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video The controls attribute adds video controls, like play, pause, and volume. It is a good idea to always include width and height attributes. If height and width are not set, the browser does not know the size of the video. The effect will be that the page will change (or flicker) while the video loads. Text between the <video> and </video> tags will only display in browsers that do not support the <video> element. Multiple <source> elements can link to different video files. The browser will use the first recognized format. Currently, there are 3 supported file formats for the <audio> element: MP3, Wav, and Ogg Because the HTML5 spec doesn't specify a specific codec for video, it's left to the browsers to decide. When displaying HTML5 video, you must offer both H.264 format (used by Safari and IE9+) and the Theora and Vorbis formats (used by Firefox and Opera)
• #14: http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824
• #15: http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824
• #17: Point important : un audit SEO soulève 70% des problèmes d’accessibilité
• #18: http://www.clarissapeterson.com/2012/11/html5-accessibility/ The four key areas disability accessibility seeks to address are: Hearing Mobility Cognitive Visual
• #19: People who are visually impaired often use assistive technology such as screen reader software or a braille display. For the hearing impaired, most of the web is accessible, except for video and audio content, so for those we need to provide a text alternative, such as captioning or a transcription. For example, skipping to different sections of a page is easier when using heading levels appropriately (H1 through H6). In short, to be accessible, content for the Web needs to be made perceivable, operable, understandable and robust. Together, these attributes comprise the World Wide Web Consortium (W3C) POUR model, which mandates that the information and UI elements being presented to users must be perceivable to their senses; that there must be a way for them to operate the UI; that they must be able to understand the information and how to use the interface elements; and that the content be robust enough so they can access it using a variety of user agents, including assistive technologies (ATs).
• #20: http://www.who.int/mediacentre/factsheets/fs282/en/ blindness and visual impairment last updated August 2014 http://www.who.int/mediacentre/factsheets/fs300/en/ deafness last updated February 2014 http://www.who.int/mediacentre/factsheets/fs352/en/ December 2014
• #21: http://www.statcan.gc.ca/pub/89-654-x/89-654-x2013002-eng.htm
• #22: http://www.tresor.gouv.qc.ca/en/ressources-informationnelles/standards-sur-laccessibilite-du-web/
• #24: Header area with logo Navigation menu Main graphics Main content Blocks of information Contact form help with navigation : level 0, level 1, level 2 to see all the aspects of the navigation in the website a page that has all types of contents to see how components work. We work in components
• #25: Forms can cause problems for people using screen readers if you don’t make sure it’s possible for them to access all the information they need to fill out the form. With a required attribute, the browser will check a field and provided an error message if it is not filled in. Screen readers interpret it and let the user know that the field is required when it’s initially encountered. http://code.tutsplus.com/tutorials/28-html5-features-tips-and-techniques-you-must-know--net-13520http://www.html5rocks.com/en/tutorials/forms/html5forms/ http://www.clarissapeterson.com/2012/11/html5-accessibility/
• #26: http://www.searchenginejournal.com/html5-an-essential-weapon-for-seos/62512/ HTML5 allows browsers to natively play audio and video files. One of the great things for accessibility when you use these elements is that since the browser provides the controls, they are much more likely to be accessible.
• #31: YouTube announced a new HTML5 video embed for their videos, for browsers which support it. Unfortunately, again, because the HTML5 spec doesn't specify a specific codec for video, it's left to the browsers to decide. While Safari, and Internet Explorer 9 can be expected to support video in the H.264 format (which Flash players can play), Firefox and Opera are sticking with the open source Theora and Vorbis formats. As such, when displaying HTML5 video, you must offer both formats. Chrome can correctly display video that is encoded in both the "ogg" and "mp4" formats. There are a few things worth noting here. We aren't technically required to set the type attribute; however, if we don't, the browser has to figure out the type itself. Save some bandwidth, and declare it yourself. Not all browsers understand HTML5 video. Below the source elements, we can either offer a download link, or embed a Flash version of the video instead. It's up to you. The controls and preload attributes can be found online
• #32: It's appropriate to have multiple headers and footers in your projects. Try not to confuse these elements with the "header" and "footer" of your website. They simply refer to their container. As such, it makes sense to place, for example, meta information at the bottom of a blog post within the footer element. The same holds true for the header.