Accessibility Doesn’t Have To Mean Dull

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 • http://www.resna.org/PracInAT/CertifiedPractice/Directory/CredentialData/ATPATS.txt

Content Versus Presentation • The intent of HTML is to separate the content from the presentation for documents on the web • The HTML language allows the author/designer to specify the logical organization of the information to be delivered

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

Content Versus Presentation • These include • The use of non-standard HTML tags added by browser vendors (Internet Explorer and Netscape) • The use of HTML tags in ways that do not match their logical intent • The use of non-HTML presentation approaches

Non-Standard HTML Tags • FONT • Font was an acceptable tag, but is now “deprecated” • At some point in the future, it will stop working, so designing pages using FONT not only limits accessibility, it limits longevity!

Non-Standard HTML Tags • MARQUEE • Places scrolling text on the page • Included in IE, but not the HTML specification • Causes substantial problems for those with vision or cognitive limitations

Non-Standard HTML Tags • BLINK • Works in Netscape Navigator, but not IE • Makes text blink on and off • At some speeds, can cause individuals with some conditions to experience seizures!

Content Versus Presentation • Presentation can be controlled via Cascading Style Sheets (CSS) • None of the changes made in a CSS style sheet changes the logical organization of a page or site • As a result, if a visitor’s browser fails to understand part of CSS, the page may not be rendered as the designer intended, but will be logically accurate

Content Versus Presentation • In the parlance of the W3C, CSS “degrades gracefully” • CSS allows the author/designer to specify how the page should be displayed

Content Versus Presentation • If the visitor’s browser cannot do what is requested, the page will still be usable to the visitor • CSS also allows the visitor to specify how the page should be rendered to meet his/her special needs through a custom stylesheet

CSS and Visual Interest Delivery as you like it

Fonts and Type Faces • Body Text • Heading • Colors • Transparency • Text-Decoration

Body Text • Designers commonly want a high degree of control over the “look” of a developed document • Printers offer type libraries of hundreds or thousands of different fonts, many of which are very similar • Fonts range from plain to veryelaborate

Body Text • This level of control cannot be obtained on the web • The font must be present on the visitors computer in order to be displayed • If it is not present, the display will revert to the “default” font of the computer

Body Text • Because of the desire for control of typefaces, there was, for an interval, an approved tag • The tag allows the designer to specify the display font, color, size and weight of a section of text • The displayed font will over-ride the preferences set by the visitor to the website

Body Text • If the specified font is not on the visitors computer, the display defaults to the font that is available

Body Text • If the visitor required larger text because of vision problems, the tag overrides the user’s preferences, and forces the desired size • This essentially makes a page deliberately inaccessible! • If the visitor requires specific colors for visual contrast, the tag will override those as well

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

Body Text • Font families can include a list of preferred type faces, and end with a general category • Serif • Sans-serif • Monospace • Cursive • Fantasy

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

Body Text • Font Styles include: • Normal • Italic • Oblique • This is very similar to italic, with slight variations • In most browsers, it will be displayed the same as italic

Body Text • Font-Variant allows the designer to specify that text should appear in normal or Small-Caps • Small Caps isn’t supported by all browsers, but the font will remain readable regardless!

Body Text • Where the (bold) tag allows only one degree of boldness, the Font-Weight property allows 13 different values • Again, not all browsers will render all values as different, but all will follow the general intent.

Body Text • Font sizes, using the Font-Size property, can be an absolute size (12 point or 14 pixels), a relative size (“larger” or “smaller”), or a percentage value (120% or 1.2em) • Relative sizes will retain their emphasis level even if the visitor uses a custom stylesheet to render pages in a non-standard way for visibility

Body Text • Text-Decoration allows the designer to specify underlined, overlined, strike-out, or blinking text • Blink still doesn’t work in IE, but shouldn’t be used in any case • Overall, CSS control of fonts provides a greater degree of control over the appearance of characters on the screen that the deprecated tags

Body Text • Font appearance can be applied to the entire document, to sections, to paragraphs, to individual words or letters! • None of the visual changes affects the basic accessibility of the page • An individual using a screen reader can access a basic HTML document • A person with cognitive limitations can elect to turn off CSS, and receive the basic HTML document

Menus • Historically, HTML navigation was done via lists of links, rendered as text • With graphical browsers, it became possible to create graphic buttons, and use sets of them to create stylish menus • Or even a single large graphic that acts as an image map

Menus • With the introduction of FLASH, dynamic menus could “unfold” or “pop-out” • These menus are, however, less usable, and less accessible, as shown in our study, than simple menus • Do you want to dazzle your visitors, or assist them?

Menus • Accessible pages are often thought to be relegated to conventional, text-only, boring menus • So pervasive is this attitude that it is recommended that pages have a “separate but equal” text-only navigation • However, it is very possible to create static or dynamic menus that are visually interesting, but which are fully accessible!

Menus • Vertical or Horizontal Menus • http://www.webmaster-toolkit.com/css-menu-generator.shtml • http://www.webcredible.co.uk/user-friendly-resources/css/css-navigation-menu.shtml • http://e-lusion.com/design/menu/ • Nested Menus • http://www.udm4.com/

Menus • All of these menus are simple lists of links, which have been modified by CSS (and some Javascript) to provide visually attractive menus • All are fully accessible, regardless of the browser being used

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

White Space • Margins • Padding • Text Spacing

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

Margins • To overcome this, some developers use tables, with blank rows and columns or cell padding to position text with separation • http://www.w3schools.com/html/html_layout.asp • This practice introduces all of the accessibility problems of tables to simple layout

Margins • Alternatively, the designer can use the CSS margin property to reformat a conventional HTML page into one with margins • http://www.resna.org/ProfResources/Publications/Proceedings/2005/Research/CAC/Anson.php (access code: 521221)

Padding • Padding, like margins, is a way of separating content on a page so that it becomes more readable. • When tables are used for layout, it is common to include padding in the cells so that columns of text don’t collide.

Padding • But, when a graphic is inserted into a document, the text often flowed directly against the graphic, which can make the page hard to interpret. • http://www.resna.org/ProfResources/Publications/Proceedings/2004/Papers/Research/SM/PressureSores.php

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

Padding • Alternatively, it is possible to apply padding to virtually any page element using CSS Styles • http://www.resna.org/ProfResources/Publications/Proceedings/2005/Research/SM/Jan.php

Text Spacing • Conventional text pages present dense visual stimuli that can be very difficult to decode for a person with reading difficulty • http://www.gutenberg.org/catalog/world/readfile?pageno=15&fk_files=35083 • This is especially true since the default font is not particularly easy to decode!

Text Spacing • As an alternative, it is possible to use CSS to display a page with spacing between the lines • http://www.resna.org/ProfResources/Publications/Proceedings/2005/Research/OUT/Fennema-Jansen.php

Backgrounds • Colors • Whole page • Regions • Borders • “Buttons”

Colors • Pages of black text on a white background are generally dull. • Even books often have bits of color or decoration on the pages to make them easier to manage

Colors • To make pages more interesting, the designer can use background graphics to provide visual interest • Large graphics can take a long time to load, reducing usability of the site • Small graphics can be “tiled” to look like a large, colored background, to assist in overcoming this

Colors • Busy backgrounds can make the foreground content difficult to interpret • http://www.sfsu.edu/~jtolson/textures/sort/blue/tustripe/7.htm • The color patterns that assist some visitors can make access more difficult for others

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

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

Colors and Borders • In order to make a specific region of a page more visually interesting, the designer might want to put a border around it. • Since tables allow cell borders to be specified, this is one way apply a border, but can cause accessibility problems

Accessibility Doesn’t Have To Mean Dull