Web Application Topics:

Accessibility, SEO, HTML5

Technologies for Web Applications
300582 Autumn 2015
Week 13
 Accessible Web Applications
How do people with disabilities use the web?
What prevents them from accessing the web?
How do you make your site more accessible?
 The Potential of the Accessible Web
The web has real potential to remove barriers
for people with disabilities:
E.g. a blind person reading with a screen reader
should be able to read almost anything on the
web without Braille
But if web developers arent careful, the web
becomes a problem
Eg using graphics instead of text
 Laws and Guidelines
Disability Discrimination Act makes it illegal to
discriminate on grounds of disability when
providing a service
That includes information on the internet
Human Rights & Equal Opportunity
Commission (HREOC) guidelines to help you
W3C Web Content Accessibility Guidelines
(WCAG)
 WCAG principles
POUR
Perceivable
Mainly vision/hearing
Via browser or other assistive technologies
Operable
All controls or interactive elements can be operated
Keyboard, mouse, assistive device
Understandable
Content clear and unambiguous
Robust
Wide range of technologies can be used to access content
 General rules
useful alternative text for non-text content
Appropriate document structure
Good for keyboard navigation
Good structure for data tables
Table headers help
Structure for forms
Associate labels with form elements
 More General Rules
Links should make sense if read on their own
(some screen readers do this)
Video and audio should have captions and
transcripts
Accessibility of non-HTML files
Eg pdf files can be marked up with tags
Shortcuts to skip repetitive content
Eg skip navigation
 And some more
Do not rely on colour for meaning
Write your content clearly
People with disabilities often have to work harder to
read your content. Dont waste their time.
Accessible JavaScript
Event handlers should not rely eg on a mouse
Can your page function without JavaScript?
HTML and CSS standards
Separation of content from presentation helps
accessibility
 Visual Disabilities
Blindness
Usually some vision, but not enough to use vision
to access the web
Screen readers
Read web content
Cant describe images
Cant describe visual layout
Keyboards
Used instead of mouse
 Visual Disabilities
Low vision: Vision cannot be fully corrected by
glasses
Screen magnifiers
Use proper text, not images of text
Use percentages, not numbers of pixels, in page layout
Colour blindness: some colours are
indistinguishable from one another
Do not rely on colour alone to convey information
 Auditory Disabilities
Deafness
The web is primarily a visual medium, but media
content (audio and video) should have captions
and/or transcripts available
 Motor Disabilities
Injury
Spinal cord
Loss of limbs
Diseases
Accessibility is mainly around operability
Dont rely on the mouse
Make it possible to skip over content
 Cognitive Disabilities
Useful to consider functional disabilities
Memory
Problem-solving (eg navigation)
Attention
Reading/linguistic comprehension
Mathematical comprehension
Visual comprehension
 Seizure disorders
Strobing, flickering or flashing lights can cause
seizures
Its unlikely that web content will do this
But the effect is so serious that you need to be
aware of it!
WCAG: avoid
>3 times a second (3 Hz)
Large
Bright contrast
 Accessible Tables
Tables include a lot of html overhead
Does your table have to be a table?
Dont use tables for text layout; keep them for data
How do you help a reader keep track of what a
table data element means?
Use <th scope=col> to markup the table heading as
a column heading
The screen reader can then say Price: 20 instead of
cell 4: 20
An example of Semantic Markup!
Caption your table so the reader knows what it is!
 Accessible Forms
Navigating through a form can be difficult
Use <label> in your forms
Associate each <label> with a control, using
<label for=form1-control1>, and then e.g.
<input id=form1-control1>
Select label to move focus to control
 References
Fundamentals of Web Development 4.5
Webaim.org
 Search Engine Optimisation
Search Engines are how most people get to
websites
Search Engines want to provide accurate,
useful results
You want people who are interested in your
site to find you
So providing useful, accurate information to
the Search Engine is good for everyone!
 SEO principles:
Provide useful information in places where the
search engine can find it
Use the context to make the information more
helpful
Provide text-based information
Js and images dont provide information
Semantic Markup!
 Page Titles
The <title> is in the <head>
Not displayed by browser
Displayed in search results
Page title should have the necessary information
to help a searcher decide if theyre looking for
you
Accurate description
Unique for each page (do not use identical titles
across your site)
Brief but descriptive
 <meta> tags
<meta name=description content=stuff
about your page>
Like a title, but longer (sentences rather than
words)
Extra information that the engine can use to
match queries, and that might be displayed in
results
In addition to main page text
Accurate summary
Unique to page (As for title)
 URLs
URLs contain the path for the page with your
filesystem
URLs are visible in search results or browsers,
so use them to provide information
Use words, not numbers
Create a broad, flat, informative directory
structure
Use a unique URL for each page or document (you
can use canonical if you really cant do this)
 Site Navigation
Your site is being crawled by a robot, so make it
easy to navigate
Navigation helps the search engine to understand
the context of the page ie what role it plays in
your site
Create an XML sitemap (SE-friendly) as well as a
text one (human-friendly)
Use text for navigation (not drop-downs,
images)
Have a useful 404 not-found page
 Content
Content is King
People want good quality content
They want to find it with search engines
Search engines want to provide it
Good content beats gaming the system
Good content:
Easy to read (good writing)
Well-organised
Original
Created for people, not search engines!
 Anchor text for links
Helps users and search engines to know where
the link goes
Descriptive text (not click here!)
Concise text (few words)
Anchor text format should be distinctive (doesnt
have to be blue, underlined, but should be
different to main text)
Use good anchor text for internal links too
Helps users and search engines to understand site
structure
 Images
Search engines dont understand whats in
images
But they understand filenames and alt attribute
Filenames should be brief but descriptive
An xml image sitemap tells the search engine
about your images
 Headings
Headings eg <h1>, <h6> not <head>
Headings signify important information that
helps you understand the following text
Search engines use this too
Use useful text in headings
Dont use headings for emphasis
Dont use too many; just enough to define
structure
 Robots.txt
Robots.txt is a text file in the root directory
that tells search engines whether or not they
can access any given page
Use this if you have content that is not useful for
users
Robots.txt is based on etiquette, not security
Not everyone obeys it
Could password-protect instead
 Guard your reputation
Links on your site get to share your reputation
Hence, comment spam with links embedded
<a rel=nofollow > prevents the search
engine from following the link and sharing
your reputation
 References
Googles Search Engine Optimisation Starter
Guide
Fundamentals of Web Development ch 20
 HTML5
More than just required form fields and
shorter doctypes!
There are a large number of new web
technologies which are generally known as
HTML5
 Difference from HTML4
Online and Offline Apps
No presentational attributes
Canvas not Flash
Hardware accelerated -Browsers
Local Storage
Reduced need for external Plugins
Multithreading
 Canvas 2D
Alternate solution to Flash
Resolution-dependent
Render Graphics on the Fly

<canvas id="myCanvas" width="800" height="600"></canvas>

 Canvas 2D
Use Javascript to Draw anything you want

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
 WebGL
Exposed through the Canvas element
Standard for a low-level 3D graphics
API based on OpenGL ES 2.0

WebGL has been Implemented on most

mobile/desktop browsers that have a capable graphics
card
 WebSockets
Full-duplex single socket connection
Can be used by any client or server application
Independent TCP-based protocol
 CSS3

move, scale, turn, spin, and stretch elements

Change shape, size and position
Transition effects when changing styles
Create animations
 CSS3
@font-face
any licensed TrueType .tff or OpenType .otf

@font-face {
font-family: 'Colaborate Light';
src: url('ColabLig.eot');
font-weight:normal;
font-style:normal;
font-variant:normal;
}
 CSS3
Border-radius
gives us the coveted rounded corners

.roundcorners {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
 CSS3
Box-shadow
generates drop-shadows on elements

box-shadow: 3px 3px 10px #333;

box-shadow: <position> <x-offset>, <y-offset>, <blur radius>;

 CSS3
Gradient
Generates a Gradient Background

background: linear-gradient(to right,

#c40303 0%,#028427 47%,#0011aa 100%);
 HTML5 and new tech
Most new web technologies are accessible to
JS, and many of them use it routinely
So JS is central to the modern experience of
the web
One description is: making WebApps not
Webpages