How HTML5 Impacts SEO and Accessibility
•Download as PPTX, PDF•
1 like•1,403 views
HTML5 brings changes to search engine optimization (SEO) and accessibility in various ways. It introduces new semantic tags that make it easier for search engines to understand content. While there is no evidence HTML5 directly impacts rankings, semantic elements help crawlers understand pages better. HTML5 also improves accessibility by allowing things like embedded video and audio, form validation, and screen reader support. Overall, HTML5 has the potential to positively change how search engines index content and make websites more usable for those with disabilities.
Recommended
More Related Content
What's hot
What's hot (19)
Similar to How HTML5 Impacts SEO and Accessibility
Similar to How HTML5 Impacts SEO and Accessibility (20)
Recently uploaded
Recently uploaded (20)
How HTML5 Impacts SEO and Accessibility
- 1. SEARCH ENGINE RANKINGS HTML5 brings changes to two close digital practices : SEO and accessibility in various ways that will be presented today. HTML5 SEO ACCESSIBILITY 2016 GET STARTED
- 2. Potential of HTML5 2 NEW TAGS TO CLASSIFY CONTENTIMPROVED FORMS USED IN APPS USED IN GAMES BOOST SITES IN RICH MEDIA IMPROVED CRAWLING AND INDEXING IMPROVED UX ALTERNATIVE TO FLASH AND SILVERLIGHT
- 5. Search engine optimization (SEO) is the process of affecting the visibility of a website or a web page in a search engine's "natural" or un-paid ("organic") search results. A quick and dirty definition of SEO If you Google « definitionof SEO » : 5 Positioning your content in search engine result pages Backlinks Good content Great dev work
- 6. Key takeaway No evidence that HTML5 affects SEO but it has great potential to change the way search engines index and understand content. WHY SEO KEEPS AN EYE ON HTML5 6 RICH MEDIA WEBSITES CODE BLOAT UNDERSTANDING CONTENT MAKING AJAX SEO FRIENDLY
- 7. Search Engines are not forthcoming on the impact HTML5 has on rankings. However, they are going the semantic route so semantic elements make it easier for crawlers to understand the intent of each element. Myth 1:Rankings 7
- 8. Fun facts • ShortofawebsitemadeinFrontageusingtables,SEOshatenothingmorethanawebsitemadeinFlash. • Andrightabovethat,wehaveparallaxandotheronepagerwebsitesthatdonotuseHistoryAPI. Fun Facts 8 Codebloat SimplerHTMLDoctype& HTML5 file specification Rich media GreatALT support Audioandvideo elements Content Semantic markup helps crawlers get what blocks ofcodearedoingin thepage Ajax ChangingtheURLin theaddress bar without refreshing isgreatwith History API
- 9. <article> for an independent block of content. <section> for a subsection of a block of content. <header> to specify the header of a page or the header section of a self-contained block of content. <footer> for an entire HTML document or the footer of an <article>. <nav> for main site navigation, previous/next article links, pagination. <aside> for content related but not part of the main document <video> to provide a cross-browser compatible way to display video. Tags that willbe criticalto the SEOsuccess of a website 9 SEMANTICS & CONTEXT
- 10. Semantic markup speaks to software …and in turn allows webmasters to speak to search engines Importance for SEO Semantic HTML speaks louder than a thousand divs. 10
- 11. <video> specifies a standard way to embed a video in a web page. SEOs can tell search engines about content related to the video, such as <captions> and <subtitles>. Rich content Video 11 <audio> means that ultimately, we will no longer have to rely upon third party plugins in order to render audio. Audio Images <figure> and <figurecaption> allow SEOs to explain images better to search engines & users.
- 12. HTML5 allows for the use of labels, captions, and subtitles on video content SO STOP USING FLASH Myth 2: HTML5 and VSEO 12
- 13. Google supports Rich Snippets for other data types including products, recipes, reviews, events and software application information. HTML5 supports geolocation micro data when location-based content is marked-up semantically which is great for mobile and local SEO. Rich Snippets HTML5 Microdata 13 HTML HTML5
- 14. 1. You can use multiple H1 tags without killing your SEO 2. RULE OF THUMB: One H1 per section 3. RULE OF DUMB: SEO experts often recommend a single H1 because clients never implement content hierarchy properly. This is where SEO and Accessibility may differ in opinions: navigation menus and footers should not be part of the content hierarchy as H tags as they often add nothing to help understand the overall theme of a page. Myth 3: The great H1 debate 14
- 15. The great H1 debate 15
- 16. Oftentimes, if you take care of the SEO technical checklist, you’ve managed to cover 70% of the accessibility technical checklist as well. 16
- 18. Accessibility for the web means making sure that our web pages and applications are available to everyone, including people with disabilities. A website is accessible when it is compatible with adaptation technologies (software). A comprehensive definition of accessibility 18 cognitive visual hearing mobility
- 19. Semantic HTML means the HTML tags in a page should describe the content in a way that has to do with its meaning rather than its presentation. Ajax – HTML5 enables a refreshing of the page without reloading the content which in turns allows the user to continue browsing without starting all over again. Using semantic HTML improves accessibility 19 VIDEO CAPTIONING RESPECT THE W3C POUR MODEL P = Perceivable O = Operable U = Understandable R = Robust BETTER CONTENT NAVIGATION UI
- 20. Disabilities – a few statistics 20 Deafness Visual Impairment Cognitive Mobility 360 millionpeoplehave disablinghearingloss 285 millionpeopleare visually impaired Between 110 million and 190 million adults have significant difficulties in functioning. That’s roughly 15% of the world’s population. Clear statistics are hard to findwith the World Health Organization Clear statistics are hard to findwith the World HealthOrganization
- 21. Disabilities – Canadian statistics 21 13.7% When your website is not accessible, you disregard 13.7% of the country’s adult population 3.8 million adult Canadians live with a disability. That’s nearly 1 in 10 Canadians. More than 8 out of 10 persons with disabilities use aids and assistive devices
- 22. Worldwide Standard - WCAG 2.0 (Web Accessibility Content Guidelines) In Québec, there are 3 standards : SGQRI-008-01 SGQRI-008-02 SGQRI-008-03 Ontario has an accessibility law based on the characteristics of companies. Level A– put into effect in January 2014 Level AA – deadline for January 2021 Level AAA Norms and standards 22
- 23. Quick Test: Check Comprehension Level Using these tools you can check the reading level of your written content. Quick Test: Check contrast with your mobile device Using an ordinary mobile device you can check your site's readability. Quick Test: Navigate using just your keyboard A quick 5 second accessibility test that you can run on your sites right now. 3 Quick accessibility tests you can do with a11yproject.com in under 10 minutes 23
- 24. A Github Repository 24 http://thepaciellogroup.github.io/AT-browser-tests/test-files/datalist.html
- 25. Tip: test a page on your website that has all types of contents to see how components work (navigation menu, main graphics, main content, blocks of information, contact form). Creatingan Accessible WebSite 25 HEADER AREA WITH LOGO HOMEPAGE ABOUT PAGE WITH VIDEO FAQ PAGE
- 26. Key takeaways: Give access to all the information needed to fill out a form. Required field allows screen readers to give out information on a mandatory field. HTML5 Forms – Required attributes 26 Data validation keeps your data clean and improves UX.Forms allow for a required attribute that specifies if a particular input is required. Input types give hints to the browser about the type of keyboard layout to display for on-screen keyboards.
- 27. HTML5 – Audio & Video Accessibility 27 Providing details on rich content Natively play audio and video files in browser More control and more accessibility ! NEW TAGS NEW POSSIBILITIES MORE ACCESSIBILITY
- 28. SEARCH ENGINE RANKINGS Concrete examples 28
- 29. SIMPLIFIEDDOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html> 29
- 30. Figure element for images 30 There isn't any easy or semantic way to associate the caption, wrapped in a paragraph tag, with the image element itself. HTML5 rectifies this, with the <figure> element. When combined with the <figcaption> element, we can now semantically associate captions with their image counterparts.
- 31. Figure element for images 31
- 33. HEADER 33
- 34. FOOTER
- 35. Forms allow for a new required attribute, which specifies, naturally, whether a particular input is required. Dependent upon your coding preference, you can declare this attribute in one of two ways: <input type="text" name="someInput" required> Or, with a more structured approach. <input type="text" name="someInput“ required="required"> With this code, and within browsers that support this attribute, a form cannot be submitted if that "someInput" input is blank. The example on the right can be found here : http://wet- boew.github.io/wet-boew/demos/formvalid/formvalid-en.html Required attribute 35
- 36. Get in Touch Web Email: jessiermyriam@gmail.com Social Media Twitter: twitter.com/myriamjessier LinkedIn: linkedin.com/in/myriamjessier 36
Editor's Notes
- 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
- http://www.html5accessibility.com/
- 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
- http://www.htmlgoodies.com/html5/other/html5-and-seo-myths.html#fbid=pW4XnS7TG1m
- 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/
- 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.
- 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.
- 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)
- http://www.freshegg.co.uk/blog/technical-seo/the-benefits-of-html5-for-seo-and-ux https://developers.google.com/custom-search/docs/structured_data#microdata
- http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824 http://www.htmlgoodies.com/html5/other/html5-and-seo-myths.html#fbid=pW4XnS7TG1m as new rules are in place that dictate the proper - or better put, "best" - use of the tags within a document. For starters, you can absolutely use more than one h1 tag on your page. In fact, if your content calls for it, you should use multiple h1 tags. The general rule of thumb is this: for each new "content section", you can use an h1 to label your section. Note that you do not have to use an h1 - you can use any header tag you deem necessary. However, as a best practice, I advise that you do. If you need more than one label or header in an article section, you should use the traditional h tag heirarchy (for example, h2, h3, and so forth).
- http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824
- Point important : un audit SEO soulève 70% des problèmes d’accessibilité
- http://www.clarissapeterson.com/2012/11/html5-accessibility/ The four key areas disability accessibility seeks to address are: Hearing Mobility Cognitive Visual
- 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).
- 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 March 2015 http://www.who.int/mediacentre/factsheets/fs352/en/ December 2015
- http://www.statcan.gc.ca/pub/89-654-x/89-654-x2013002-eng.htm
- http://www.tresor.gouv.qc.ca/en/ressources-informationnelles/standards-sur-laccessibilite-du-web/
- 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
- 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-13520 http://www.html5rocks.com/en/tutorials/forms/html5forms/ http://www.clarissapeterson.com/2012/11/html5-accessibility/
- 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.
- 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
- 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.