Accessibility Doesn’t Accessibility Doesn’t Have To Mean DullHave To Mean Dull

Using web technologies to provide Using web technologies to provide visually attractive pages while visually attractive pages while

maintaining accessibility. maintaining accessibility.

How do I make An Accessible Site?How do I make An Accessible Site?

Don’t use graphicsDon’t use graphics Don’t use soundsDon’t use sounds Don’t…Don’t… Create “text only” pages for complex Create “text only” pages for complex

pages or for the entire sitepages or for the entire site http://www.resna.org/PracInAT/http://www.resna.org/PracInAT/

CertifiedPractice/Directory/CredentialData/CertifiedPractice/Directory/CredentialData/ATPATS.txt ATPATS.txt

Content Versus PresentationContent Versus Presentation

The intent of HTML is to separate the The intent of HTML is to separate the content from the presentation for content from the presentation for documents on the webdocuments on the web

The HTML language allows the The HTML language allows the author/designer to specify the logical author/designer to specify the logical organization of the information to be organization of the information to be delivereddelivered

Content Versus PresentationContent Versus Presentation

In an effort to gain greater control over In an effort to gain greater control over presentation, designers use a number of presentation, designers use a number of approaches approaches

Content Versus PresentationContent Versus Presentation

These include These include The use of non-standard HTML tags added by The use of non-standard HTML tags added by

browser vendors (Internet Explorer and browser vendors (Internet Explorer and Netscape)Netscape)

The use of HTML tags in ways that do not The use of HTML tags in ways that do not match their logical intentmatch their logical intent

The use of non-HTML presentation The use of non-HTML presentation approachesapproaches

Non-Standard HTML TagsNon-Standard HTML Tags

FONTFONT Font was an acceptable tag, but is now Font was an acceptable tag, but is now

“deprecated”“deprecated”• At some point in the future, it will stop working, so At some point in the future, it will stop working, so

designing pages using FONT not only limits designing pages using FONT not only limits accessibility, it limits longevity!accessibility, it limits longevity!

Non-Standard HTML TagsNon-Standard HTML Tags

MARQUEEMARQUEE Places scrolling text on the pagePlaces scrolling text on the page Included in IE, but not the HTML specificationIncluded in IE, but not the HTML specification Causes substantial problems for those with Causes substantial problems for those with

vision or cognitive limitationsvision or cognitive limitations

Non-Standard HTML TagsNon-Standard HTML Tags

BLINKBLINK Works in Netscape Navigator, but not IEWorks in Netscape Navigator, but not IE Makes text blink on and offMakes text blink on and off At some speeds, can cause individuals with At some speeds, can cause individuals with

some conditions to experience seizures!some conditions to experience seizures!

Content Versus PresentationContent Versus Presentation

Presentation can be controlled via Presentation can be controlled via Cascading Style Sheets (CSS)Cascading Style Sheets (CSS)

None of the changes made in a CSS style None of the changes made in a CSS style sheet changes the logical organization of a sheet changes the logical organization of a page or sitepage or site As a result, if a visitor’s browser fails to As a result, if a visitor’s browser fails to

understand part of CSS, the page may not be understand part of CSS, the page may not be rendered as the designer intended, but will be rendered as the designer intended, but will be logically accuratelogically accurate

Content Versus PresentationContent Versus Presentation

In the parlance of the W3C, CSS In the parlance of the W3C, CSS “degrades gracefully”“degrades gracefully”

CSS allows the author/designer to specify CSS allows the author/designer to specify how the page how the page shouldshould be displayed be displayed

Content Versus PresentationContent Versus Presentation

If the visitor’s browser cannot do what is If the visitor’s browser cannot do what is requested, the page will still be usable to requested, the page will still be usable to the visitorthe visitor

CSS also allows the visitor to specify how CSS also allows the visitor to specify how the page should be rendered to meet the page should be rendered to meet his/her special needs through a custom his/her special needs through a custom stylesheetstylesheet

CSS and Visual InterestCSS and Visual Interest

Delivery as you like itDelivery as you like it

Fonts and Type FacesFonts and Type Faces

Body TextBody Text HeadingHeading ColorsColors TransparencyTransparency Text-DecorationText-Decoration

Body TextBody Text

Designers commonly want a high degree Designers commonly want a high degree of control over the “look” of a developed of control over the “look” of a developed documentdocument Printers offer type libraries of hundreds or Printers offer type libraries of hundreds or

thousands of different fonts, many of which thousands of different fonts, many of which are very similarare very similar

Fonts range from Fonts range from plainplain to to veryvery elaborateelaborate

Body TextBody Text

This level of control cannot be obtained on This level of control cannot be obtained on the webthe web The font must be present on the visitors The font must be present on the visitors

computer in order to be displayedcomputer in order to be displayed If it is not present, the display will revert to the If it is not present, the display will revert to the

“default” font of the computer“default” font of the computer

Body TextBody Text

Because of the desire for control of Because of the desire for control of typefaces, there was, for an interval, an typefaces, there was, for an interval, an approved <FONT> tagapproved <FONT> tag The <FONT> tag allows the designer to The <FONT> tag allows the designer to

specify the display font, color, size and weight specify the display font, color, size and weight of a section of textof a section of text

The displayed font will over-ride the The displayed font will over-ride the preferences set by the visitor to the websitepreferences set by the visitor to the website

Body TextBody Text

If the specified font is not on the visitors If the specified font is not on the visitors computer, the display defaults to the font computer, the display defaults to the font that is availablethat is available

Body TextBody Text If the visitor required larger text because of If the visitor required larger text because of

vision problems, the <FONT> tag vision problems, the <FONT> tag overridesoverrides the user’s preferences, and the user’s preferences, and forces the desired sizeforces the desired size This essentially makes a page deliberately This essentially makes a page deliberately

inaccessible!inaccessible! If the visitor requires specific colors for If the visitor requires specific colors for

visual contrast, the <FONT> tag will visual contrast, the <FONT> tag will override those as welloverride those as well

Body TextBody Text

The alternative Cascading Style Sheet The alternative Cascading Style Sheet specifications allow suggesting font specifications allow suggesting font families, styles, variants, weight, and sizefamilies, styles, variants, weight, and size

Body TextBody Text

Font families can include a list of preferred Font families can include a list of preferred type faces, and end with a general type faces, and end with a general categorycategory SerifSerif Sans-serifSans-serif MonospaceMonospace CursiveCursive FantasyFantasy

Body TextBody Text

If the desired typeface is not available, the If the desired typeface is not available, the browser will search for a font on the list browser will search for a font on the list that is, and finally any font that is in the that is, and finally any font that is in the general category before using the default general category before using the default fontfont This gives the designer an added measure of This gives the designer an added measure of

controlcontrol

Body TextBody Text

Font Styles include:Font Styles include: NormalNormal ItalicItalic ObliqueOblique

• This is very similar to italic, with slight variationsThis is very similar to italic, with slight variations• In most browsers, it will be displayed the same as In most browsers, it will be displayed the same as

italicitalic

Body TextBody Text

Font-Variant allows the designer to specify Font-Variant allows the designer to specify that text should appear in normal or Small-that text should appear in normal or Small-CapsCaps Small Caps isn’t supported by all browsers, Small Caps isn’t supported by all browsers,

but the font will remain readable regardless!but the font will remain readable regardless!

Body TextBody Text

Where the <B> (bold) tag allows only one Where the <B> (bold) tag allows only one degree of boldness, the Font-Weight degree of boldness, the Font-Weight property allows 13 different values property allows 13 different values Again, not all browsers will render all values Again, not all browsers will render all values

as different, but all will follow the general as different, but all will follow the general intent.intent.

Body TextBody Text

Font sizes, using the Font-Size property, Font sizes, using the Font-Size property, can be an absolute size (12 point or 14 can be an absolute size (12 point or 14 pixels), a relative size (“larger” or pixels), a relative size (“larger” or “smaller”), or a percentage value (120% or “smaller”), or a percentage value (120% or 1.2em)1.2em) Relative sizes will retain their emphasis level Relative sizes will retain their emphasis level

even if the visitor uses a custom stylesheet to even if the visitor uses a custom stylesheet to render pages in a non-standard way for render pages in a non-standard way for visibilityvisibility

Body TextBody Text Text-Decoration allows the designer to Text-Decoration allows the designer to

specify underlined, overlined, strike-out, or specify underlined, overlined, strike-out, or blinking textblinking text Blink still doesn’t work in IE, but shouldn’t be Blink still doesn’t work in IE, but shouldn’t be

used in any caseused in any case Overall, CSS control of fonts provides a Overall, CSS control of fonts provides a

greater degree of control over the greater degree of control over the appearance of characters on the screen appearance of characters on the screen that the deprecated tagsthat the deprecated tags

Body TextBody Text Font appearance can be applied to the Font appearance can be applied to the

entire document, to sections, to entire document, to sections, to paragraphs, to individual words or letters!paragraphs, to individual words or letters!

None of the visual changes affects the None of the visual changes affects the basic accessibility of the pagebasic accessibility of the page An individual using a screen reader can An individual using a screen reader can

access a basic HTML documentaccess a basic HTML document A person with cognitive limitations can elect to A person with cognitive limitations can elect to

turn off CSS, and receive the basic HTML turn off CSS, and receive the basic HTML document document

MenusMenus

Historically, HTML navigation was done Historically, HTML navigation was done via lists of links, rendered as textvia lists of links, rendered as text

With graphical browsers, it became With graphical browsers, it became possible to create graphic buttons, and possible to create graphic buttons, and use sets of them to create stylish menususe sets of them to create stylish menus Or even a single large graphic that acts as an Or even a single large graphic that acts as an

image mapimage map

MenusMenus

With the introduction of FLASH, dynamic With the introduction of FLASH, dynamic menus could “unfold” or “pop-out”menus could “unfold” or “pop-out” These menus are, however, less usable, and These menus are, however, less usable, and

less accessible, as shown in our study, than less accessible, as shown in our study, than simple menussimple menus

Do you want to dazzle your visitors, or assist Do you want to dazzle your visitors, or assist them?them?

MenusMenus Accessible pages are often thought to be Accessible pages are often thought to be

relegated to conventional, text-only, boring relegated to conventional, text-only, boring menusmenus

So pervasive is this attitude that it is So pervasive is this attitude that it is recommended that pages have a recommended that pages have a “separate but equal” text-only navigation“separate but equal” text-only navigation

However, it is very possible to create static However, it is very possible to create static or dynamic menus that are visually or dynamic menus that are visually interesting, but which are fully accessible!interesting, but which are fully accessible!

MenusMenus

Vertical or Horizontal MenusVertical or Horizontal Menus http://www.webmaster-toolkit.com/css-menu-ghttp://www.webmaster-toolkit.com/css-menu-g

enerator.shtmlenerator.shtml http://www.webcredible.co.uk/user-friendly-reshttp://www.webcredible.co.uk/user-friendly-res

ources/css/css-navigation-menu.shtmlources/css/css-navigation-menu.shtml http://e-lusion.com/design/menuhttp://e-lusion.com/design/menu//

Nested MenusNested Menus http://www.udm4.com/http://www.udm4.com/

MenusMenus

All of these menus are simple lists of links, All of these menus are simple lists of links, which have been modified by CSS (and which have been modified by CSS (and some Javascript) to provide visually some Javascript) to provide visually attractive menusattractive menus

All are fully accessible, regardless of the All are fully accessible, regardless of the browser being usedbrowser being used

MenusMenus

Most will work (with some limitations in Most will work (with some limitations in browsers that don’t fully support CSS2) in browsers that don’t fully support CSS2) in all major browsersall major browsers

White SpaceWhite Space

MarginsMargins PaddingPadding Text SpacingText Spacing

MarginsMargins

The default for HTML places text to the The default for HTML places text to the borders of its “container”borders of its “container” This produces a very busy, hard to read pageThis produces a very busy, hard to read page http://www.astro.ucla.edu/~wright/relatvty.htmhttp://www.astro.ucla.edu/~wright/relatvty.htm

MarginsMargins

To overcome this, some developers use To overcome this, some developers use tables, with blank rows and columns or cell tables, with blank rows and columns or cell padding to position text with separationpadding to position text with separation http://www.w3schools.com/html/html_layout.ahttp://www.w3schools.com/html/html_layout.a

spsp This practice introduces all of the This practice introduces all of the

accessibility problems of tables to simple accessibility problems of tables to simple layoutlayout

MarginsMargins

Alternatively, the designer can use the Alternatively, the designer can use the CSS margin property to reformat a CSS margin property to reformat a conventional HTML page into one with conventional HTML page into one with marginsmargins http://www.resna.org/ProfResources/Publicatihttp://www.resna.org/ProfResources/Publicati

ons/Proceedings/2005/Research/CAC/Anson.ons/Proceedings/2005/Research/CAC/Anson.phpphp (access code: 521221) (access code: 521221)

PaddingPadding

Padding, like margins, is a way of Padding, like margins, is a way of separating content on a page so that it separating content on a page so that it becomes more readable.becomes more readable.

When tables are used for layout, it is When tables are used for layout, it is common to include padding in the cells so common to include padding in the cells so that columns of text don’t collide.that columns of text don’t collide.

PaddingPadding

But, when a graphic is inserted into a But, when a graphic is inserted into a document, the text often flowed directly document, the text often flowed directly against the graphic, which can make the against the graphic, which can make the page hard to interpret.page hard to interpret. http://www.resna.org/ProfResources/http://www.resna.org/ProfResources/

Publications/Proceedings/2004/Papers/Publications/Proceedings/2004/Papers/Research/SM/PressureSores.phpResearch/SM/PressureSores.php

PaddingPadding

When padding is applied to table cells, it is When padding is applied to table cells, it is possible to produce text separation, but at possible to produce text separation, but at the cost of introducing table formatting, the cost of introducing table formatting, which is deprecatedwhich is deprecated

PaddingPadding

Alternatively, it is possible to apply Alternatively, it is possible to apply padding to virtually any page element padding to virtually any page element using CSS Stylesusing CSS Styles http://www.resna.org/ProfResources/http://www.resna.org/ProfResources/

Publications/Proceedings/2005/Research/Publications/Proceedings/2005/Research/SM/Jan.php SM/Jan.php

Text SpacingText Spacing

Conventional text pages present dense Conventional text pages present dense visual stimuli that can be very difficult to visual stimuli that can be very difficult to decode for a person with reading difficultydecode for a person with reading difficulty http://www.gutenberg.org/catalog/world/http://www.gutenberg.org/catalog/world/

readfile?pageno=15&fk_files=35083 readfile?pageno=15&fk_files=35083 This is especially true since the default This is especially true since the default

font is not particularly easy to decode!font is not particularly easy to decode!

Text SpacingText Spacing

As an alternative, it is possible to use CSS As an alternative, it is possible to use CSS to display a page with spacing between to display a page with spacing between the linesthe lines http://www.resna.org/ProfResources/http://www.resna.org/ProfResources/

Publications/Proceedings/2005/Research/Publications/Proceedings/2005/Research/OUT/Fennema-Jansen.php OUT/Fennema-Jansen.php

BackgroundsBackgrounds

ColorsColors Whole pageWhole page RegionsRegions

BordersBorders ““Buttons”Buttons”

ColorsColors

Pages of black text on a white background Pages of black text on a white background are generally dull.are generally dull. Even books often have bits of color or Even books often have bits of color or

decoration on the pages to make them easier decoration on the pages to make them easier to manageto manage

ColorsColors

To make pages more interesting, the To make pages more interesting, the designer can use background graphics to designer can use background graphics to provide visual interestprovide visual interest Large graphics can take a long time to load, Large graphics can take a long time to load,

reducing usability of the sitereducing usability of the site Small graphics can be “tiled” to look like a Small graphics can be “tiled” to look like a

large, colored background, to assist in large, colored background, to assist in overcoming thisovercoming this

ColorsColors

Busy backgrounds can make the Busy backgrounds can make the foreground content difficult to interpretforeground content difficult to interpret http://www.sfsu.edu/~jtolson/textures/sort/http://www.sfsu.edu/~jtolson/textures/sort/

blue/tustripe/7.htm blue/tustripe/7.htm The color patterns that assist some visitors The color patterns that assist some visitors

can make access more difficult for otherscan make access more difficult for others

ColorsColors

CSS allows the creation of pages with CSS allows the creation of pages with user-selectable style sheets that can be user-selectable style sheets that can be applied across an entire siteapplied across an entire site http://brothercake.com/site/home/ http://brothercake.com/site/home/

ColorsColors

Such sites allow visitors to choose among Such sites allow visitors to choose among the color settings provided by the the color settings provided by the developer, so that a site best meets the developer, so that a site best meets the visitors needs, but also matches the visitors needs, but also matches the designers artistic visiondesigners artistic vision

Colors and BordersColors and Borders

In order to make a specific region of a In order to make a specific region of a page more visually interesting, the page more visually interesting, the designer might want to put a border designer might want to put a border around it.around it.

Since tables allow cell borders to be Since tables allow cell borders to be specified, this is one way apply a border, specified, this is one way apply a border, but can cause accessibility problems but can cause accessibility problems

Colors and BordersColors and Borders

The combination of CSS and HTML allows The combination of CSS and HTML allows the inclusion of sections of text with the inclusion of sections of text with colored backgrounds and colored borderscolored backgrounds and colored borders http://danson.misericordia.edu/~siteb/http://danson.misericordia.edu/~siteb/

Meetings/MYMeeting/MeetingBrochure.htm Meetings/MYMeeting/MeetingBrochure.htm Individual sections of text can be given Individual sections of text can be given

different background colorsdifferent background colors

Colors and BordersColors and Borders

Sections can be given borders in a variety Sections can be given borders in a variety of sizes and shapesof sizes and shapes

The features can be nested, so that a The features can be nested, so that a section of text within a colored background section of text within a colored background can have a border, and a section within can have a border, and a section within the border can have a different the border can have a different backgroundbackground

Positioning and OrganizationPositioning and Organization

The “Standard” web design for many sites The “Standard” web design for many sites has a title bar at the top, and navigation at has a title bar at the top, and navigation at the leftthe left

Because this content is generally the Because this content is generally the same for all pages of a site, it becomes a same for all pages of a site, it becomes a barrier for the person who wants to access barrier for the person who wants to access the content of a pagethe content of a page

Positioning and OrganizationPositioning and Organization

The “standard” approach is to place a link The “standard” approach is to place a link at the top of the page to jump to the at the top of the page to jump to the contentcontent This link can be presented in text the same This link can be presented in text the same

color as the background so as not to distract color as the background so as not to distract from the visual visitorfrom the visual visitor

When the page is accessed with a text-only or When the page is accessed with a text-only or aural browser, the link will be readaural browser, the link will be read

Positioning and OrganizationPositioning and Organization

An alternative approach is to design pages An alternative approach is to design pages with the content first, and the navigation with the content first, and the navigation and title “logically” at the end of the pageand title “logically” at the end of the page

CSS can then be used to place the title CSS can then be used to place the title information at the top of the page, and the information at the top of the page, and the menu on the left for visual presentationmenu on the left for visual presentation http://atri.misericordia.edu/Papers/http://atri.misericordia.edu/Papers/

HeadPointers.php HeadPointers.php

SummarySummary

Accessible, and visually Accessible, and visually compelling by designcompelling by design

Accessible and Visual by DesignAccessible and Visual by Design

As designers are becoming more involved As designers are becoming more involved with the capabilities of CSS, they are with the capabilities of CSS, they are creating highly artistic, but fully accessible creating highly artistic, but fully accessible pagespages

Accessible and Visual by DesignAccessible and Visual by Design

This CSS site was created to show how This CSS site was created to show how creative a site can be when designed with creative a site can be when designed with CSSCSS http://www.csszengarden.com/?cssfile=/http://www.csszengarden.com/?cssfile=/

147/147.css&page=3147/147.css&page=3