Accessibility of HTML5 and Rich Internet Applications (Part 2)
HTML5 for SEO and accessibility in 2016
-
Upload
myriam-jessier -
Category
Marketing
-
view
838 -
download
0
Transcript of HTML5 for SEO and accessibility in 2016
SEARCH ENGINE RANKINGS
HTML5 brings changes to two close digital practices : SEO and accessibility in various ways that will be presented today.
HTML5SEO ACCESSIBILITY
2016GET STARTED
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
Browser update
3
SEARCH ENGINE RANKINGS
SEO
4
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 « definition of SEO » :
5
Positioning your content in search
engine result pages
Backlinks
Good content
Great dev work
Key takeawayNo 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 MEDIAWEBSITES
CODE BLOAT
UNDERSTANDINGCONTENT
MAKING AJAXSEO FRIENDLY
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
Fun facts• Short of a website made in Frontage using tables, SEOs hate nothing more than a website made in Flash.• And right above that, we have parallax and other one pager websites that do not use History API.
Fun Facts
8
Code bloatSimpler HTML Doctype & HTML5 file specification
Rich media
Great ALT supportAudio and video
elements
Content Semantic markup helps crawlers get what blocks of code are doing in the page
AjaxChanging the URL in the address bar without refreshing 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 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
9
SEMANTICS &
CONTEXT
Semantic markup speaks to software…and in turn allows webmasters to speak to search engines
Importance for SEOSemantic HTML speaks louder than a thousand divs.
10
<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.
HTML5 allows for the use of labels, captions, and subtitles on video content
SO STOP USING FLASH
Myth 2: HTML5 and VSEO
12
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
1. You can use multiple H1 tags without killing your SEO
2. RULE OF THUMB: One H1 per section3. 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
The great H1 debate
15
Oftentimes, if you take care of the SEO technical checklist, you’ve managed to cover 70% of the accessibility technical checklist as well.
16
SEARCH ENGINE RANKINGS
Accessibility
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
18
cognitive
visual
hearing
mobility
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 W3CPOUR MODEL
P = PerceivableO = OperableU = UnderstandableR = Robust
BETTER CONTENT NAVIGATION
UI
Disabilities – a few statistics
20
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
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
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 2014Level AA – deadline for January 2021Level AAA
Norms and standards
22
Quick Test: Check Comprehension LevelUsing these tools you can check the reading level of your written content.Quick Test: Check contrast with your mobile deviceUsing an ordinary mobile device you can check your site's readability.Quick Test: Navigate using just your keyboardA 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
A Github Repository
24
http://thepaciellogroup.github.io/AT-browser-tests/test-files/datalist.html
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).
Creating an Accessible Web Site
25
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
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.
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
SEARCH ENGINE RANKINGS
Concrete examples
28
SIMPLIFIED DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html>
29
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.
Figure element for images
31
VIDEO
32
https://www.youtube.com/html5
HEADER
33
FOOTER
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
Get in Touch
WebEmail: [email protected]
Social MediaTwitter: twitter.com/myriamjessierLinkedIn: linkedin.com/in/myriamjessier
36