Accessible web page structure and web standards
Download
Report
Transcript Accessible web page structure and web standards
Structure, Presentation
and Navigation
http://www.netskills.ac.uk/
© Netskills, Quality Internet Training
University of Newcastle
Netskills is a trademark of Netskills, University of Newcastle.
1
© Netskills Quality Internet Training, University of Newcastle
Topics
Writing good HTML
XHTML for structure
Validation
CSS for presentation
Effective navigation
Keyboard access
2
© Netskills Quality Internet Training, University of Newcastle
Writing Good HTML
Separate structure and presentation
Use HTML for the structure only
Use CSS for presentation (style and layout)
Validate documents against a DTD
Document Type Definition states the formal set of
rules for the language
3
Order of elements
Nesting sequence
Permissible attribute
Validation checks against the rules
© Netskills Quality Internet Training, University of Newcastle
Which Version of HTML
HTML 4.01
Introduced use of style sheets
Identified elements and attributes for deprecation,
e.g. <font size="4"> or <center>
www.htmlhelp.com/reference/html40/deprecated.html
XHTML 1.0
4
Web access no longer limited to web browsers
PDAs, Mobile phones
New mark-up languages written in XML
The future is XML
XHTML is the reformulation of HTML 4.01 in XML
A stricter and tidier version of HTML
Better again for accessibility
© Netskills Quality Internet Training, University of Newcastle
XHTML Template
The DTD or rules
for the version of HTML
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head><title></title>
<meta http-equiv="Content-Type"
content="text/html;charset=ISO-8859-1" />
</head>
Namespace, gives nested elements
<body>
context when sourced from a document
</body>
using more than one mark-up language
</html>
Two attributes to specify
Character encoding
the natural language
Necessary HTML elements
5
© Netskills Quality Internet Training, University of Newcastle
More on XHTML
All elements
Names in lower case <p>
Properly nested
Properly closed
<p>Hello</p>
When no element content: <br />
All attributes
Names in lower case
Space for compatibility
Values quoted
with Netscape
Minimisation forbidden
e.g. multiple="multiple", noresize="noresize"
The "id" has replaced "name" attribute
www.w3schools.com/xhtml
6
© Netskills Quality Internet Training, University of Newcastle
XHTML Example
Element names in lower case
..<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head><title>Simple document</title>
<meta http-equiv="Content-Type"
content="text/html;charset=ISO-8859-1" />
</head>
Attribute names in lower case
<body>
Attribute values quoted
<h1>A simple XHTML page</h1>
<p>XHTML is the next generation of HTML
<img src="picture.gif" id="picture" alt="" /></p>
Use of "id" attribute
<form action="dummy.asp">
<p><input type="radio" checked="checked" /></p>
</form>
</body>
No minimisation
</html>
of attributes
7
© Netskills Quality Internet Training, University of Newcastle
And the DTD
A DTD exists for all official versions of HTML
HTML 4.01 and XHTML have three different DTDs:
Strict
Transitional
Allows deprecated tags
Better for backwards compatibility
Frameset
Deprecated element names have been removed
Better for accessibility
Defines use of frames
Validate against a DTD
validator.w3.org
8
© Netskills Quality Internet Training, University of Newcastle
Cascading Style Sheets
Style sheets specify presentational rules
May be held
External style sheet
9
In the <head> section of the web page
Or in an external file
Text file saved with .css extension
Affects whichever pages link to it
Many web pages can link to the same style sheet
Only one master to maintain
Most versatile
Today, we will focus on external style sheets
© Netskills Quality Internet Training, University of Newcastle
How Do Style Sheets Work?
Style sheets specify formatting rules
Consist of selectors and property:value pairs.
Selectors are HTML tags, classes or IDs
selector{property:value;}
body{background-color:blue;}
Classes and IDs are named groups of styles
Use once, ID (not supported in Netscape 4)
Re-use, class
Validate CSS
jigsaw.w3.org/css-validator
HTML pages link to the style sheet
<link rel="stylesheet" type="text/css"
href="colors.css" />
10
© Netskills Quality Internet Training, University of Newcastle
Style Sheets in Action
Stylesheet:
body{background-color:blue;color:yellow;}
.reusable{font-size:2em;}
#unique{background-color:yellow;color:blue;}
Web page:
Selectors identify
where to apply styles
Result when
viewed in web browser
..
<head><title></title>
<link rel="stylesheet" type="text/css"
href="colors.css" />
</head>
<body>
<p>This page should display yellow text
on a blue background.</p>
<p class="reusable">Large text.</p>
<p id="unique">Reverse colors.</p>
<p class="reusable">More large text.</p>
</body>
</html>
11
© Netskills Quality Internet Training, University of Newcastle
Style Sheets for Layout
Is the W3C Recommendation
Set margins, borders, padding
Create columns using CSS Positioning
Use relative units (em or %)
Page flow is the content sequence defined by the
HTML
Use CSS Positioning to change content sequence for
graphical display
Ensure the page downgrades gracefully
12
Not well supported in older browsers (Netscape 4, IE3)
Reads logically without CSS
Is usable (Dynamic HTML?)
© Netskills Quality Internet Training, University of Newcastle
Tables and Frames for Layout
Tables for layout
Not supported in XHTML (but can do it)
Ensure that layout tables linearise
http://www.w3.org/WAI/Resources/Tablin/form
Do not use table header tags <th>
Use relative units
Use the simplest configuration
Frames for layout
Avoid if possible
VLEs use frames
13
At best Priority 2
Necessary?
Screen Readers read frame names
Inability to change frame names
© Netskills Quality Internet Training, University of Newcastle
Effective Navigation
In the site
Site map or contents list (structural or alphabetical)
www.useit.com/alertbox/20020106.html
Accessibility statement
Feedback mechanism
On each page:
Search facility for all content
Navigation system
Plan your page
14
Main menu
Breadcrumbs menu
Top ten guidelines for homepage usability (Jakob Nielsen)
www.useit.com/alertbox/20020512.html
© Netskills Quality Internet Training, University of Newcastle
Navigation Menu
Simple, intuitive, consistent, not deep
Based on
Don’t use
Visible for everyone
Use accesskey and tabindex
If using CSS Positioning for layout:
15
JavaScript to follow links
Flash
Option to skip-navigation
Text
Images/rollover images (with alt attributes)
Page flow:
Search
facility
Content
Navigation
Change graphical display using CSS Positioning
© Netskills Quality Internet Training, University of Newcastle
Use Links Effectively
Don’t override default styles
Familiarity enhances usability
Screen readers list links
Use descriptive standalone text
Don’t assume mouse usage
No technical details or verbs in actual link
Click here
Follow link to go to Netskills home page
Tell me more about Netskills
Don’t break the back button by
Don’t overpopulate your page
Opening new windows
Automatic redirection
Tips from the W3C:
www.w3.org/2001/06tips
16
© Netskills Quality Internet Training, University of Newcastle
Keyboard Access
To links, form controls, objects
Logical tab order
By default follow page flow
<input type="test" tabindex="1" ..
Keyboard shortcuts
<a href="" accesskey="s">
Browser
Tab index
Keyboard shortcut
IE5+
Y
<ALT>+s, <ENTER>
IE4,Netscape 6+
Y
<ALT>+s
IE5 for MAC
Y
<CTRL>+s
Opera
N
N
Recommendations for Government sites:
www.cabinet-office.gov.uk/accesskeys.asp
17
© Netskills Quality Internet Training, University of Newcastle
Summary
Use HTML for structure and validate
Use CSS for style and layout
Navigation should be simple and intuitive
Screen readers read links in the order of
"page flow"
Page structure is essential for accessibility
18
© Netskills Quality Internet Training, University of Newcastle