IV' Regular Web Pages: HTML

1
IV. Regular Web Pages HTML
A Web Accessibility Primer Usability for
Everyone Office of Web Communications
2
HTML Authoring Tools

• Dreamweaver
• One of the best tools
• Turn on accessibility prompts
• FrontPage/Expression Web Designer
• Expression Web (as more recent) better

.html
3
HTML Accessibility Topics

• Content and Structure
• Forms
• Images in HTML Pages
• Keyboard Accessibility
• Frames
• Tables

.html
4
Content and Structure headings and lists

• Use Real Heading Codes (lth1gt lth2gt 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 (ltulgt ltolgt ltdlgt)
• Ordered (1, 2, 3) only if really sequenced.
• Never use just for layout or indenting.

.html
5
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
6
Content and Structure Skip Navigation
http//nys4h.cce.cornell.edu/WhoWeAre/Who_We_Are.p
hp

• Start pages with a link that lets users skip to
  main content.

.html
7
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
8
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 Cornells templates, which have
  accessibility features such as skip navigation
• http//cornelllogo.cornell.edu/templates

.html
9
HTML Forms

• Keyboard accessible
• Organized logically
• Linear
• Every element labeled (ltlabelgt)
• Associated elements grouped with ltfieldsetgt,
  described with ltlegendgt
• Accessible form controls

.html
10
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
11
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
12
Images reminders

• Use real text, not graphical text.
• Dont use flashing/strobing images.
• Avoid background images.
• Provide color contrast, but dont rely on color
  alone.

.html
13
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
  lttabindexgt to set correct order.
• JavaScript DHTML menus. Use only with equivalent
  text menus on destination page.
• WYSIWYG absolute positioning.

.html
14
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
15
Tables for data

• Follow all general table guidelines.
• Summarize contents with alt-text or long
  descriptions.
• Designate headers with ltthgt tag.
• Associate the headers with the correct rows and
  columns using the scope attribute
• e.g., ltth scope"col"gtNamelt/thgt to identify and
  associate a column called name
• Use the caption tag to describe, or name, the
  table.
• E.g., ltcaptiongtBiology 100 Gradeslt/captiongt

.html
16
Tables for layout

• Again, CSS usually better for layout than tables.
• If using tables to create your page layout
• Do not use ltthgt 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 lttabindexgt if needed.

.html