1 / 58

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

Télécharger la présentation

Accessibility Doesn’t Have To Mean Dull

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.


Presentation Transcript

  1. Accessibility Doesn’t Have To Mean Dull Using web technologies to provide visually attractive pages while maintaining accessibility.

  2. 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

  3. 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

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

  5. 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

  6. 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!

  7. 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

  8. 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!

  9. 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

  10. 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

  11. 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

  12. CSS and Visual Interest Delivery as you like it

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

  14. 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

  15. 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

  16. Body Text • Because of the desire for control of typefaces, there was, for an interval, an approved <FONT> tag • The <FONT> 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

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

  18. Body Text • If the visitor required larger text because of vision problems, the <FONT> 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 <FONT> tag will override those as well

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

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

  21. 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

  22. 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

  23. 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!

  24. Body Text • Where the <B> (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.

  25. 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

  26. 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

  27. 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

  28. 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

  29. 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?

  30. 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!

  31. 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/

  32. 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

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

  34. White Space • Margins • Padding • Text Spacing

  35. 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

  36. 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

  37. 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)

  38. 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.

  39. 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

  40. 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

  41. 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

  42. 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!

  43. 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

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

  45. 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

  46. 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

  47. 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

  48. 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/

  49. 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

  50. 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

More Related