Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
SEARCH ENGINE RANKINGS
HTML5 brings changes to two close digital practices : SEO and
accessibility in various ways that wi...
Introduction
Quick presentation
Potential of HTML5
SEO and HTML5
Accessibility and HTML5
Concrete examples
Key presentatio...
Who: Myriam Jessier
What: SEO and accessibility
Why: Because without people like you, we can’t do our job
Where: it’s happ...
Potential of HTML5
4
NEW TAGS TO
CLASSIFY CONTENTIMPROVED
FORMS
USED IN
APPS
USED IN
GAMES
BOOST SITES
IN RICH MEDIA
IMPRO...
And now for aless pleasant reality check
5
Reality check
NO PROVEN
IMPACT ON SEO
BROWSERS DON’T
FULLY SUPPORT IT
NOT USED ...
SEARCH ENGINE RANKINGS
SEO
6
Search engine optimization (SEO) is
the process of affecting the visibility of
a website or a web page in a search
engine'...
Key takeaway
No evidence that HTML5 affects SEO but it has great potential to change the way
search engines index and unde...
Fun facts
• ShortofawebsitemadeinFrontageusingtables,SEOshatenothingmorethanawebsitemadeinFlash.
• Andrightabovethat,wehav...
<article> for an independent block of content.
<section> for a subsection of a block of content.
<header> to specify the h...
Semantic markup speaks to software
…and in turn allows webmasters to
speak to search engines
Importance for SEO
Semantic H...
<video> specifies a standard way to embed
a video in a web page.
SEOs can tell search engines about content
related to the...
For SEO optimization purposes, it is often
recommended to use unique H1 tags in order
to communicate clearly the overall t...
The great H1 debate
14
Oftentimes, if you take care of the SEO technical checklist, you’ve managed to
cover 70% of the accessibility technical ch...
SEARCH ENGINE RANKINGS
Accessibility
16
Accessibility for the web means making
sure that our web pages and
applications are available to everyone,
including peopl...
Semantic HTML means the HTML
tags in a page should describe the
content in a way that has to do with
its meaning rather th...
Disabilities – a few statistics
19
Deafness
Visual Impairment
Cognitive
Mobility
360 million people have disabling hearing...
Disabilities – Canadian statistics
20
13.7%
When your
website is not
accessible, you
disregard
13.7% of the
country’s adul...
WCAG 2.0 (Web Accessibility Content Guidelines)
In Québec, there are 3 standards :
SGQRI-008-01
SGQRI-008-02
SGQRI-008-03
...
SECTORS
Public
SGQRI-008
– 70 requirements
– 3 levels of accessibility
Private
WCAG 2.0
– W3C recommended
– 12 rules and 6...
Creating an Accessible Web Site
23
HEADER AREA
WITH LOGO
HOMEPAGE ABOUT PAGE WITH
VIDEO
FAQ PAGE
Key takeaways:
Give access to all the information needed to fill out a form.
Required field allows screen readers to give ...
HTML5 – Audio & Video Accesibility
25
Providing details on
rich content
Natively play audio
and video files in
browser
Mor...
SEARCH ENGINE RANKINGS
Concrete examples
26
SIMPLIFIEDDOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-t...
Figure element for images
28
There isn't any easy or semantic way to associate the caption, wrapped in
a paragraph tag, wi...
Figure element for images
29
VIDEO
30
https://www.youtube.com/html5
HEADER
31
FOOTER
Forms allow for a new required attribute, which
specifies, naturally, whether a particular input is
required. Dependent up...
Get in Touch
Web
Email: jessiermyriam@gmail.com
Social Media
LinkedIn: twitter.com/siliconelife
LinkedIn: linkedin.com/in/...
Upcoming SlideShare
Loading in …5
×

HTML5 for SEO and Accessibility

1,727 views

Published on

Search Engine Optimization (SEO) represents 60% of online traffic coming to most websites. The impact of search engines in our world are such that “to google” has been a verb in the Oxford and Merriam Webster dictionnary for almost a decade now. SEO is one of the practices that are heavily impacted by HTML5 along with accessibility. Accessibility aims to help individuals who have difficulties navigating the Web. In Canada, nearly 1 in 10 Canadians benefit form a website compliant with accessibility standards.
This presentation will show how HTML5 can dramatically improve accessibility and what it could mean for the future of SEO.

Published in: Technology
  • Be the first to comment

HTML5 for SEO and Accessibility

  1. 1. SEARCH ENGINE RANKINGS HTML5 brings changes to two close digital practices : SEO and accessibility in various ways that will be presented today. HTML5 SEOACCESSIBILITY 01/28/15 GET STARTED
  2. 2. Introduction Quick presentation Potential of HTML5 SEO and HTML5 Accessibility and HTML5 Concrete examples Key presentation points
  3. 3. Who: Myriam Jessier What: SEO and accessibility Why: Because without people like you, we can’t do our job Where: it’s happening all over the world but if you want to get technical, it’s happening specifically here, at Notman. When: The deadline for accessibility laws is looming in Canada and the importance of SEO can’t be ignored (SEOs do get really loud about their practice). Introduction 3
  4. 4. Potential of HTML5 4 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. 5. And now for aless pleasant reality check 5 Reality check NO PROVEN IMPACT ON SEO BROWSERS DON’T FULLY SUPPORT IT NOT USED BY SEARCH ENGINES TO UNDERSTAND CONTENT
  6. 6. SEARCH ENGINE RANKINGS SEO 6
  7. 7. 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 » : 7 Positioning your content in search engine result pages Backlinks Good content Great dev work
  8. 8. 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 8 RICH MEDIA WEBSITES CODE BLOAT UNDERSTANDING CONTENT MAKING AJAX SEO FRIENDLY
  9. 9. Fun facts • ShortofawebsitemadeinFrontageusingtables,SEOshatenothingmorethanawebsitemadeinFlash. • Andrightabovethat,wehaveparallaxandotheronepagerwebsitesthatdonotuseHistoryAPI. Fun Facts 9 Code bloat WelovethesimplerHTMLDoctype AndHTML5 filespecification Rich media HTML5givesALTtextgreatsupport Audioandvideo elementsbring a lot Content Semantic markup helps crawlers understand what each block of code is tryingtoaccomplish withinthepage. Ajax Changing the URL in the address bar of the browser without refreshing the pageisgreatwith History API.
  10. 10. <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 will be critical to the SEO success of a website 10 SEMANTICS & CONTEXT
  11. 11. 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. 11
  12. 12. <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 12 <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.
  13. 13. For SEO optimization purposes, it is often recommended to use unique H1 tags in order to communicate clearly the overall theme of the page. Multiple H1 tags can be used within a page, but it must be done very carefully (so we often recommend to use a single H1 to avoid problems). This debate is present in SEO and accessibility. Also, 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. The great H1 debate H1 tags clarify the theme of your content 13
  14. 14. The great H1 debate 14
  15. 15. Oftentimes, if you take care of the SEO technical checklist, you’ve managed to cover 70% of the accessibility technical checklist as well. 15
  16. 16. SEARCH ENGINE RANKINGS Accessibility 16
  17. 17. 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 17 cognitive visualhearing mobility
  18. 18. 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 improvesaccessibility 18 VIDEO CAPTIONING RESPECT THE W3C POUR MODEL BETTER CONTENT NAVIGATION UI
  19. 19. Disabilities – a few statistics 19 Deafness Visual Impairment Cognitive Mobility 360 million people have disabling hearing loss 285 million people are visually impaired Between 110 million and 190 million adults have significantdifficulties in functioning. That’s roughly 15% of the world’s population. Clear statisticsare hard to find with theWorld Health Organization Clear statisticsare hard to find with the World Health Organization
  20. 20. Disabilities – Canadian statistics 20 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
  21. 21. 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 21
  22. 22. SECTORS Public SGQRI-008 – 70 requirements – 3 levels of accessibility Private WCAG 2.0 – W3C recommended – 12 rules and 61 criterias Rich content 03 Website 01 Downloadable Documents 02 Perceptible Usable Comprehensi ble Robust
  23. 23. Creating an Accessible Web Site 23 HEADER AREA WITH LOGO HOMEPAGE ABOUT PAGE WITH VIDEO FAQ PAGE
  24. 24. 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 24 Data validation keeps your data clean and improves UX.Forms allow for a required attribute that specifies if a particular input it required. Input types give hints to the browser about the type of keyboard layout to display for on-screen keyboards.
  25. 25. HTML5 – Audio & Video Accesibility 25 Providing details on rich content Natively play audio and video files in browser More control and more accessibility ! NEW TAGS NEW POSSIBILITIES MORE ACCESSIBILITY
  26. 26. SEARCH ENGINE RANKINGS Concrete examples 26
  27. 27. SIMPLIFIEDDOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html> 27
  28. 28. Figure element for images 28 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.
  29. 29. Figure element for images 29
  30. 30. VIDEO 30 https://www.youtube.com/html5
  31. 31. HEADER 31
  32. 32. FOOTER
  33. 33. 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 33
  34. 34. Get in Touch Web Email: jessiermyriam@gmail.com Social Media LinkedIn: twitter.com/siliconelife LinkedIn: linkedin.com/in/myriamjessier 34

×