WAC Tutorial: Best Practices

Description

WAC Tutorial: Best Practices
Accessible Design: Best
Practices
A comprehensive guide to the best
design practices for accessible and
usable web pages.
Introduction
This guide is intended as an introduction to both good accessible and good usability
web design for those in the OSU community planning to build a first site or
considering a revision of an existing web site. It seeks to bring together the best
techniques and standards for accessible design, typically found in a variety of
resources and explain, in plain language, how web designers can implement these
guidelines, in most cases, using simple HTML solutions. Whenever possible,
guidelines are followed with real-life examples and include code-snippets for easier
understanding.
The guidelines and suggestions presented here are adapted from several sources
and cover OSU requirements for accessible web design as established by the OSU
Web Accessibility Policies and Standards and based on Section 508 of the
Federal Rehabilitation Act, as well as recommendations based on the World
Wide Web Consortium's Web Content Accessibility Guidelines, and usability
standards supported by industry experts Jacob Nielsen and Vincent Flanders.
For more information about the guidelines referenced, including a key to the
guideline symbols, see the About the Guidelines section at the end of this
tutorial.
About the WAC
The OSU Web Accessibility Center (WAC) analyzes web pages for their accessibility
to people ...

Sujets

• Label rouge
• TDMoIP
• Guidelines international network
• Osun-Oshogbo
• Recherche et sauvetage
• Calligraphie

Informations

• Publié par: Disun
• Nombre de lectures: 166
• Langue: English

Extrait

WAC Tutorial: Bse trPcaitecs 5::982A 2/00 401 66)6/17tm (1 ofcitch.seseb/arptctraesic/blstpesroait/tue.udatetio-sc.ohw.wa//ww:ptth

A comprehensive guide to the best design practices for accessible and usable web pages.

The OSU Web Accessibility Center (WAC) analyzes web pages for their accessibility to people with disabilities. The WAC offers this as a free service to OSU faculty and staff in order to further its mission to expand opportunities for people with disabilities through the innovative uses of computer technology. The WAC's goal is to ensure that all distance education and online courses at OSU are fully accessible to persons with disabilities.

Accessible Design: Best Practices

M

About the WAC

For more information about the guidelines referenced, including a key to the guideline symbols, see theAbout the Guidelinessection at the end of this tutorial.

The guidelines and suggestions presented here are adapted from several sources and cover OSU requirements for accessible web design as established by theOSU Web Accessibility Policies and Standardsand based onSection 508 of the Federal Rehabilitation Act, as well as recommendations based on theWorld Wide Web Consortium's Web Content Accessibility Guidelines, and usability standards supported by industry expertsJacob NielsenandVincent Flanders.

This guide is intended as an introduction to both good accessible and good usability web design for those in the OSU community planning to build a first site or considering a revision of an existing web site. It seeks to bring together the best techniques and standards for accessible design, typically found in a variety of resources and explain, in plain language, how web designers can implement these guidelines, in most cases, using simple HTML solutions. Whenever possible, guidelines are followed with real-life examples and include code-snippets for easier understanding.  

Introduction  

AWtcciP arsetoriC TuBestal:  tpht.www/w:/ 104207//1)666f 

To receive a copy of this tutorial in an alternate format, please contact the WAC at [phone] or email us:uedu.oss@esccabew.

MA 82:95:0

Contents

After you have reviewed this tutorial, if you would like to have your web site analyzed, e-mail the URL of the home page of the site that you want the WAC staff to examine [e-mail]. The WAC will report any accessibility and/or browser compatibility errors found on the page. Once your site receives WAC approval, you are entitled to display a WAC approved icon on your site.

For more help with accessibility issues, visit the WAC online athttw.ww//p:c.wa ohio-state.edu.

l       Organizing and Naming Your Site. m       Site Structure. m       Organizing Files and Folders. m       Default and Index Pages. m       Naming Conventions. l       Layout. m       rOaginazitno. m       Using Style Sheets for Consistency. m       Standard Page Elements. l       Header Information. m       DOCTYPE Declaration. m       Language Declaration. m       Title. m       pircnoitTAMEes-d. m       MordskeywETA-. l       noagitaNiv. m       Understanding the Function of Navigation. m       Skip Navigation Link. m       Using Image Navigation. m       Repeating Link Text. m       Plug-in Links

atstede..oaco-hi/slatsebut/uirots/bestprpracticeth m2(o caitec.s

.cho.waw//wwtt:phatetois-t/tue.udls/boriaractestpseb/secicitcarpt (tm.hes6) 6of3 /6712/00 4015::928 AM

m       Mystery Meat Navigation. m       Link Order. m       Keyboard Shortcuts. l       Scripts m       Script Content m       Script Links m       Time-Out Scripts l       Color. m       Color used for layout. m       Contrast Colors. l       Cascading Style Sheets. m       Using Style Sheets for Consistency. m       Linked v Embedded Styles. m       Guidelines for Using Style Sheets. m       Using Relative Sizes. m       Color and Links. m       Spacing and Positioning. m       Creating User-Friendly Style Sheets. m       CSS Guides and Tutorials. l       Lists. l       Images and Multimedia. m       Text Equivalents for Images, Media, and Scripts. m       Spacer Images. m       Testing for ALT tags. m       Captioning Multimedia. m       Flicker. m       Providing Equivalent Versions. l       Imagemaps m       deClient-Si m       dieeSvrreS- l       Layout and Data Tables. m       Types of Tables.

scetiB :lairocarP tse TutWAC

/2174 00:510289:mth. 4( 6 fo/6)6es/bestpracticesaislb/septartcci

Site Structure

It is a good idea to organize your site files into folders, but you should avoid making too many "levels" in your site, as each level adds a slash (/) to the URL needed to access that file.

Web sites consist of a collection of files. These files may or may not be organized within a directory structure of folders. The location of files in the web site corresponds with the URL.

A M

Organizing and Naming Your Site

 

Site Structure||Organizing Files and Folders|| Default and Index Pages||Naming Conventions

itca m secseB rP torutl:iaW TAC .s m        roT baelmaries f       Sum Refenes deli Guit ehobtu    A  l s    leit Tmera   F     m semarF      l .srCharacteholding     lPca-e tu.s  m   Shd tcorey   Karbo m .re      daeRdrO  .senillibisiesdeui GtyW   beC noettnA cc ection 508. m     rotu.lai   m   S     ncre iedthn  Tis  detaiverbbA      or   F      s l eradHe       .  m lbse eaT es m  Tabllex Comp tuoybaT of saL r   S    plim s.le      m  eiSizgnR   letavi uideline . m      G . m lsbeLa re   C       a gnita lacigoL     P . m   ioniositro mgnF or loCtn or F. m ms      or   FoC mortnaL lsleb ms.  m      Genera luGdilenisef ro tths-atete.udt/turop://www.wac.ohio

cetisse trPcaroai:lB WAC Tut 401 /7022: 8:095(5 ohtm )6/1f 66

http://www.sample.edu/tutorials/tutorial2.htm.

This is because each folder within a site is represented by the folder name and a slash (/) in the URL of the corresponding web address.

http://www.sample.edu/resources/presentations/sectionone/tutorial1.htm.

Yet, if we wanted to visit the tutorial2 page, we would only need to go to:

Within the site, there are two files (web pages): tutorial1.htm and tutorial2.htm. Let's say that this web site is stored on a server located at http://www.sample.edu. In order to reach the tutorial1 page, we would have to go to:

AM

return to contents

Consider this Sample site:

 

While it is not a good idea to have too many levels (embedded folders) within your site, it is also not a good idea, unless you have a very simple site, to have no folders.

Here is an example of a site with no organizing structure:

The address to the tutorial1 page is also called a "deep link" because it directs the visitor several levels into the web site. Deep links can be useful for pages you don't intend visitor's to arrive at directly (when you want to control the order in which visitor's view pages). However, because they result in long URLs that are difficult to remember, they should be used sparingly for information that will be regularly accessed or expect to be a high-traffic page. Shorter URLs are easier to advertise (better for you) and easier to remember (better for your users).

Organizing Files and Folders.

u/tutoristate.edcao.ih-o/:w/www.tiacs.cebes/prstcarpecit/slatsebtpht

m)ht(.s  he tnd   a segami  .)fig.(siteBut n grs caiukcwoq yl: ,lla ti i etms sfiifltcu nis dotniugsi ht  oidts h t t h t e p  pagebetween  ritoTuC WAtcciP areBtsla : e sie thcaus es Be 401 /7022: 8:095(6 ohtm )6/1f 66

Consider, instead, this organized site:

The image on the left is only a partial view of a site that has all its files in a single folder. Can you see how difficult it might be to manage a site like this? Which page leads to which other pages? What documents are linked to what html files? What images belong on what pages?

AMtsta.ede/uutotir://www.wac.ohio-eb/srptsitca.secs/alstbeacprceti

:p//httwac.www.-staohiotcciseb/b/septarutorialste.edu/t/6)62/71 7( 6 foesictm.htpesctra

Each folder within your site should have a default or index page within it. If a folder contains a default or index page, when a user types the URL using the folder name, this page will be displayed. Without a default or index page, users must specify the exact file name they want to visit.

For example, let's consider again the sample site from “Site Structure” above. There is no default or index page in the "sectionone" folder. This URL will work:

return to contents

In the organized site, images are located in one central folder, and all html pages are organized using a directory structure that is easy to understand.

Default and Index Pages

Note that all the training-related pages are in the "training" folder and only five pages reside in the top-level of the site: default, links, mission, stafflist, and suggestions. 

 AM9:2810:5004 

WAC TutoriasB :l tsecarPecit iho.ts-owww/caw.ht:/tpcaitec/s/sebtsrptutorialate.edu//71/6)66 fo 8( mhts.cetiacprstbe

return to contents

l       Use only lower-case characters. l       Do not use spaces: the underscore (_) or dash (-) can be used instead. l       Do not use special characters such as punctuation marks, dollar signs, or other characters like: @, #, ^, *, [, ( l       Shorter names are better -- remember it will be included in the URL of the page (e.g., webtutorialone.htm v tutorial1.htm). However . . . l       Avoid cryptic or non-descript names (e.g., t1s5c7.htm v tutorial1sec5chp7. htm)-- users will not be able to remember them and they can be confusing when managing the site.

Thus, it is good design practice to name one file in each folder within the site either default or index. Note: if you have a folder with both a default and an index page, the browser will display the default page.

Layout

return to contents

This URL will not:

http://www.sample.edu/resources/presentations/sectionone/tutorial1.htm.

Depending on the server settings, the user who types the second URL will see a "File Not Found" message or a plain-text display of an alphabetical list of all the files in that folder -- without indication of which page the user should look at first. However, if we copy and rename tutorial1.htm to default.htm or index.htm, both URLs will work.

http://www.sample.edu/resources/presentations/sectionone

Naming Conventions

Organization|Using Style Sheets for Consistency| Standard Page Elements:header information,link to home page,navigation to major sections,search option, and alink to OSU home page.

For best results across various servers and with different browsers, when naming files and folders within your web site:

8 AM59:2 10:2004

AM8 /71/4002:01 2:95s.htm (9 of 66)6ec/sebtsrpcaitec  enap gaudec dere nus th of mberm swollamoor eroex tor fhe tont  of ralet.rT eht op- heavy design  thginaw ot tirp  ont aut snde av tutoedu/ate.o-stcaittsrp/sebirlaht ):deui Ghy Wnd iho.caw.www//:pt s layoute of thiehH woa ( rfmot gepa Hs.inprd texe nlpma erea si top,the e pa hom rahc :esa  tb xo eor futgepah acab emas oyal cis  and content on oi nnot ehl fe,t-lopt,efav natigl eg knit tat eh ht eo  fubklht even nd es, a barnoitagivan ,sogo lash uc ss,ntme suset ehCAs ti ee, the W instanc ereh roF .ht pt mend   aee k ntcot,en gap eht  sihT .e ignside feduss  na dgo o agitanivo thon tp ofe to rofnitama now dnexe ctpese u mrs rop gaset ah tocntain a lot of  i  pksin LAC Whe t ec ,revewoH :)egaere't. Hrigh the  rfmoel( aspm s a s hitotue os tint evl ehlairom ,ges in ortain pal ki ehtrus ti,e not ah tsic noisstent across pag .se ACW(41 G T )3. opo miti tze uheilytasiboyruo  fe: p sita plick  rof ecaa elbatseaep rnd le   e ngti AWuT C PraBestal: tori azitagin se rO tcci ty s ateeaCr .   on itatneserp fo el