SEARCH ENGINE RANKINGS

HTML5 brings changes to two close digital practices : SEO andaccessibility in various ways that will be presented today.

HTML5SEO ACCESSIBILITY

01/28/15

GET STARTED

Introduction

Quick presentation

Potential of HTML5

SEO and HTML5

Accessibility and HTML5

Concrete examples

Key presentation points

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’shappening specifically here, at Notman.

When: The deadline for accessibility laws is looming in Canada and the importance ofSEO can’t be ignored (SEOs do get really loud about their practice).

Introduction

3

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

And now for a less pleasant reality check

5

Reality check

NO PROVEN IMPACT ON SEO

BROWSERS DON’T FULLY SUPPORT IT

NOT USED BY SEARCH ENGINESTO UNDERSTAND

CONTENT

SEARCH ENGINE RANKINGS

SEO

6

Search engine optimization (SEO) isthe process of affecting the visibility ofa website or a web page in a searchengine's "natural" or un-paid("organic") search results.

A quick and dirty definition of SEO

If you Google « definition of SEO » :

7

Positioning your content in search

engine result pages

Backlinks

Good content

Great dev work

Key takeaway

No evidence that HTML5 affects SEO but it has great potential to change the waysearch engines index and understand content.

WHY SEO KEEPS AN EYE ON HTML5

8

RICH MEDIAWEBSITES

CODE BLOAT

UNDERSTANDINGCONTENT

MAKING AJAXSEO FRIENDLY

Fun facts

• ShortofawebsitemadeinFrontageusingtables,SEOshatenothingmorethanawebsitemadeinFlash.

• Andrightabovethat,wehaveparallaxandotheronepagerwebsitesthatdonotuseHistoryAPI.

Fun Facts

9

Code bloatWe love the simpler HTML DoctypeAnd HTML5 file specification

Rich mediaHTML5 gives ALT text great support Audio and video elements bring a lot

Content Semantic markup helps crawlersunderstand what each block of code istrying to accomplish within the page.

AjaxChanging the URL in the address barof the browser without refreshing thepage is great with History API.

<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 theheader section of a self-contained block of content.

<footer> for an entire HTML document or thefooter of an <article>.

<nav> for main site navigation, previous/nextarticle links, pagination.

<aside> for content related but not part of themain document

<video> to provide a cross-browser compatibleway to display video.

Tags that will be critical to the SEO success of a website

10

SEMANTICS & CONTEXT

Semantic markup speaks to software

…and in turn allows webmasters tospeak to search engines

Importance for SEO

Semantic HTML speaks louder than a thousand divs.

11

<video> specifies a standard way to embeda video in a web page.

SEOs can tell search engines about contentrelated to the video, such as <captions>and <subtitles>.

Rich content

Video

12

<audio> means that ultimately, we willno longer have to rely upon third partyplugins in order to render audio.

Audio

Images

<figure> and <figurecaption> allow SEOsto explain images better to searchengines& users.

For SEO optimization purposes, it is oftenrecommended to use unique H1 tags in orderto communicate clearly the overall theme ofthe page. Multiple H1 tags can be used withina page, but it must be done very carefully (sowe often recommend to use a single H1 toavoid problems).

This debate is present in SEO and accessibility.

Also, navigation menus and footers should notbe part of the content hierarchy as H tags asthey often add nothing to help understand theoverall theme of a page.

The great H1 debate

H1 tags clarify the theme of your content

13

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 checklist as well.

15

SEARCH ENGINE RANKINGS

Accessibility

16

Accessibility for the web means makingsure that our web pages andapplications are available to everyone,including people with disabilities.

A website is accessible when it iscompatible with adaptationtechnologies (software).

A comprehensive definition of accessibility

17

cognitive

visualhearing

mobility

Semantic HTML means the HTMLtags in a page should describe thecontent in a way that has to do withits meaning rather than itspresentation.

Ajax – HTML5 enables a refreshingof the page without reloading thecontent which in turns allows theuser to continue browsing withoutstarting all over again.

Using semantic HTML improves accessibility

18

VIDEO CAPTIONING RESPECT THE W3CPOUR MODEL

BETTER CONTENT NAVIGATION

UI

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 significant difficulties in functioning. That’s roughly 15% of the world’s population.

Clear statistics are hard to find with the World Health Organization

Clear statistics are hard to find with the World Health Organization

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

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

SECTORSPublic

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

Creating an Accessible Web Site

23

HEADER AREA WITH LOGO

HOMEPAGE ABOUT PAGE WITHVIDEO

FAQ PAGE

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.

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

SEARCH ENGINE RANKINGS

Concrete examples

26

SIMPLIFIED DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html>

27

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.

Figure element for images

29

VIDEO

30

https://www.youtube.com/html5

HEADER

31

FOOTER

Forms allow for a new required attribute, whichspecifies, naturally, whether a particular input isrequired. 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 supportthis 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

Get in Touch

WebEmail: jessiermyriam@gmail.com

Social MediaLinkedIn: twitter.com/siliconelifeLinkedIn: linkedin.com/in/myriamjessier

34