accessibility doesn’t have to mean dull
DESCRIPTION
Accessibility Doesn’t Have To Mean Dull. Using web technologies to provide visually attractive pages while maintaining accessibility. . How do I make An Accessible Site?. Don’t use graphics Don’t use sounds Don’t… Create “text only” pages for complex pages or for the entire site - PowerPoint PPT PresentationTRANSCRIPT
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