Transcript “Regular” Web Pages

IV. “Regular” Web Pages: HTML
A Web Accessibility Primer: Usability for Everyone Office of Web Communications
HTML Authoring Tools
• Dreamweaver
– One of the best tools
– Turn on accessibility prompts
• FrontPage/Expression Web Designer
– Expression Web (as more recent) better
.html
HTML Accessibility Topics:
• Content and Structure
• Forms
• Images in HTML Pages
• Keyboard Accessibility
• Frames
• Tables
.html
Content and Structure – headings and lists
• Use Real Heading Codes (<h1> <h2> etc.)
– Test at http://validator.w3.org/detailed.html
• Enter URL, check “show outline”, click “validate
this page.”
• Skip to bottom of page for results.
• Use Real Lists Codes (<ul> <ol> <dl>)
– Ordered (1, 2, 3) only if really sequenced.
– Never use just for layout or indenting.
.html
Content and Structure – Links
• Navigable by keyboard only (no mouse)
• Links should look like links
• Follow other link guidelines discussed
• Separate adjacent links, e.g., with | or *
• Link phrases and words rather than write out
URLs, e.g.:
– “Education Department Academic Programs” not
– “http://education.cornell.edu/academics/index.cfm”
.html
Content and Structure – Skip Navigation
http://nys4h.cce.cornell.edu/WhoWeAre/Who_We_Are.php
• Start pages with a link that lets users skip
to main content.
.html
Content and Structure – Skip Navigation
• Start pages with a link that lets users skip to
main content. Options include:
– Visible “skip navigation” or “skip to main content” links
at the top of the page.
– Visible skip links elsewhere on page, but indexed with
‘tabindex’ to be the first link users would tab to.
– Make skip link invisible to anyone but screen reader
users. Put a small invisible .gif image at the top of the
page with alt="Skip navigation" as the alternative text.
.html
Content and Structure – Templates
• Advantages include:
– Users gain familiarity with how your site works.
– Can apply accessible navigation across all pages.
– Can fix problems globally, instead of on each page.
• Start with Cornell’s templates, which have
accessibility features such as skip navigation:
– http://cornelllogo.cornell.edu/templates
.html
Form labels
labels
Form
Placethe
thelabel
labeladjacent
adjacentto
tothe
theform
form
HTML Forms
Place
element
element
• Keyboard accessible
LastName:
Name:
Last
• Organized logically
First
First
• Linear
• Every element labeled
Correc
Correct
Last
Last
Incorr
Incorre
Provide
Providegood,
good,clear
clearinstructions
instructionsabout
about

informationdesired
desired
information
(<label>)
Ensure
Ensurelogical
logicalorder
orderof
ofform
formelements
elements

• Associated elements grouped with <fieldset>,
described with <legend>
CopyrightNortheast
NortheastADA
ADA&&ITITCenter
Center
Copyright
• Accessible form controls
.html
Images – description options
• Alternative text (alt-text): up to 150 characters
to describe object or image.
• Null alt-text: blank alt-text (alt=“”). Because
some screen readers will read image file name if
no alt-text is provided.
• Long descriptions: describe an image with
over 150 characters (e.g., a graph) on a
separate web page. Either:
– Link caption with normal hyperlink, or
– Use the “longdesc” attribute of HTML Image tag
.html
Images – image maps
• Create alt-text for overall map and for each hot
spot.
• All image maps must be client side to be
accessible.
.html
Images – reminders
• Use real text, not graphical text.
• Don’t use flashing/strobing images.
• Avoid background images.
• Provide color contrast, but don’t rely on color
alone.
.html
Keyboard Access
• Some people cannot use a mouse, and
navigate sites with tab and enter.
• Thus sites must be entirely keyboard
accessible.
• Common barriers to avoid:
– Incorrect tab order in forms/tables. Use
<tabindex> to set correct order.
– JavaScript DHTML menus. Use only with
equivalent text menus on destination page.
– WYSIWYG absolute positioning.
.html
Frames
• Better to use cascading style sheets (CSS).
• If committed to frames:
– Title each appropriately for its content (e.g.,
“navigation links”)
– Provide noframes content. Content in the
noframes tag should always be available if the
user cannot or chooses not to view frame content.
– Use proper frameset document type (doctype) to
tell browsers and screen readers that you are
using frames.
.html
Tables – for data
• Follow all general table guidelines.
• Summarize contents with alt-text or long descriptions.
• Designate headers with <th> tag.
• Associate the headers with the correct rows and columns
using the scope attribute
– e.g., <th scope="col">Name</th> to identify and associate a
column called “name”
• Use the caption tag to describe, or name, the table.
– E.g., <caption>Biology 100 Grades</caption>
.html
Tables – for layout
• Again, CSS usually better for layout than tables.
• If using tables to create your page layout:
– Do not use <th> tags for headers.
– Keep layout simple. Your table lines are not invisible to
screen reader users.
– Make sure a screen reader will read in the right order,
use <tabindex> if needed.
.html