| ** Screen enlargers/magnification (i.e. MAGic and Zoom Text)
|
| ** High (or different) contrast settings (i.e. white text on a blue background)
|
| * Auditory AT
|
| -** Hearing aids & other similar devices don’t impact web design significantly
|
| +** Hearing aids & other similar devices don’t impact web design significantly |
| ** Web developers should take note of how using multimedia can pose an obstacle to this audience
|
| ** People with auditory difficulties require visual representation of auditory information
|
| * Mobility AT
|
| ** Keyboard access
|
| ** Breath control devices
|
| ** Retinal scanning devices
|
| -** Voice input/recognition^
|
| -!!Benefits of Accessible Design
|
| -^Many people may not use a graphical browser or may turn graphics off. This may be due to hardware limitations such as:
|
| +** Voice input/recognitio |
| + |
| +!! Benefits of Accessible Design |
| +Many people may not use a graphical browser or may turn graphics off. This may be due to hardware limitations such as: |
| * Older computers or browser versions
|
| * Slow modem connection
|
| * High per-minute charges for internet connection
|
| * Connection via a mainframe/dumb terminal
|
| -*Wireless connection (i.e. cell phone or PDA)
|
| +* Wireless connection (i.e. cell phone or PDA) |
|
|
| -Some users may prefer to read content rather than display a complex presentation format. By creating accessible websites, a greater audience is being reached, thereby extending the range of communication.^
|
| -!Developing Accessible Websites
|
| -!!Introduction
|
| -^The focus of this presentation is on designing Web pages that are compliant with section 508. However, there are additional recommendations beyond section 508 that concern accessibility. Where applicable, these additional techniques are placed at the end of the appropriate section.^
|
| -!!Keep it Separated
|
| -^To design accessible websites one must separate the key elements of a page.
|
| +Some users may prefer to read content rather than display a complex presentation format. By creating accessible websites, a greater audience is being reached, thereby extending the range of communication |
| + |
| +! Developing Accessible Website |
| + |
| +!! Introduction |
| +The focus of this presentation is on designing Web pages that are compliant with section 508. However, there are additional recommendations beyond section 508 that concern accessibility. Where applicable, these additional techniques are placed at the end of the appropriate section |
| + |
| +!! Keep it Separated |
| +To design accessible websites one must separate the key elements of a page. |
|
|
| Distinguish the content and structure of a page, then separate it from the presentation (content versus layout):
|
|
|
| -• Content is what you say
|
| -• Structure is how you organize it
|
| -• Presentation is how it appears, feels, sounds ^
|
| -!!Section-508 Guidelines & Applying it to Tiki
|
| -!!!Color
|
| -^ ''Although colorful elements can richly enhance a Web page for a sight-dependent user, the content must still be accessible to those who cannot interpret colors.''
|
| +* Content is what you say |
| +* Structure is how you organize it |
| +* Presentation is how it appears, feels, sound |
|
|
| -__Guideline (c): Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.__
|
| +!! Section-508 Guidelines & Applying it to Tik |
|
|
| -* Don’t rely on color alone to convey meaning: use it as a secondary indicator only
|
| +!!! Color |
| +''Although colorful elements can richly enhance a Web page for a sight-dependent user, the content must still be accessible to those who cannot interpret colors.'' |
| + |
| +__Guideline (c): Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.__ |
| +! Don’t rely on color alone to convey meaning: use it as a secondary indicator only |
| * Though not required by 508, use high-contrast color schemes
|
| -**Background patterns and color should contrast well with lettering
|
| -**Avoid similar color combinations in the interface and graphics
|
| -**__Never__ contrast red and green^
|
| -!!!CSS
|
| -^''All of the design and formatting issues discussed previously apply to the design of style sheets.''
|
| +** Background patterns and color should contrast well with lettering |
| +** Avoid similar color combinations in the interface and graphics |
| +** __Never__ contrast red and gree |
|
|
| -__Guideline (d): Documents shall be organized so they are readable without requiring an associated style sheet.__
|
| +!!! CSS |
| +''All of the design and formatting issues discussed previously apply to the design of style sheets.'' |
|
|
| -* CSS is designed to complement HTML by separating content from layout
|
| +__Guideline (d): Documents shall be organized so they are readable without requiring an associated style sheet.__ |
| +! CSS is designed to complement HTML by separating content from layout |
| ** Since content (text) is accessible, separating the formatting elements removes inaccessible barriers
|
| ** Provides the additional benefit of easier content revision
|
| -* Use remote style sheets since browsers & assistive technology might display the local styling in-line, or at the top of the rendered page
|
| -* Ensure the page is readable without the use of the style sheet^
|
| -!!!Flash
|
| -^ ^
|
| -!!!Forms
|
| -^''Typically, web-based forms are not easy for a person with a disability to complete. Complicated navigation and ambiguous instructions can create a frustrating experience.''
|
| +* Use remote style sheets since browsers & assistive technology might display the local styling in-line, or at the top of the rendered page |
| +* Ensure the page is readable without the use of the style shee |
| + |
| +!!! Flash |
| + |
| +!!! Forms |
| +''Typically, web-based forms are not easy for a person with a disability to complete. Complicated navigation and ambiguous instructions can create a frustrating experience.'' |
|
|
| __Guideline (n): When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.__
|
|
|
| (...more to follow...)
|
| -^
|
| -!!!Frames
|
| -^ ^
|
| -!!!Java
|
| -^''To develop accessible code, only use the Java Foundation Classes/Swing Set (version 1.8 or newer) and:
|
| + |
| +!!! Frames |
| + |
| +!!! Java |
| +''To develop accessible code, only use the Java Foundation Classes/Swing Set (version 1.8 or newer) and: |
| * Ensure event handlers are structured so they are input device-independent
|
| -* Set accessible descriptions for all components, particularly icons & graphics
|
| +* Set accessible descriptions for all components, particularly icons & graphics |
| * Set the focus
|
| * Label components
|
| * Name logical groups
|
| * Be sufficiently multithreaded
|
| -* Provide a logical layout^
|
| -!!!JavaScript
|
| -^While very handy & powerful, JavaScript does have limitations, particularly when it comes to accessibility. The following details common event handlers & commonly accepted practices when using JavaScript, with accessibility in mind.
|
| -* When using JavaScript links in conjunction with a graphic to invoke a function (i.e. href="javascript: function()"), use the ALT attribute, not TITLE.
|
| +* Provide a logical layou |
| + |
| +!!! JavaScript |
| +While very handy & powerful, JavaScript does have limitations, particularly when it comes to accessibility. The following details common event handlers & commonly accepted practices when using JavaScript, with accessibility in mind. |
| +* When using JavaScript links in conjunction with a graphic to invoke a function (i.e. href="javascript: function()"), use the ALT attribute, not TITLE. |
| * Test your event handlers using assistive technology. These have been found to work:
|
| ** onClick
|
| ** onLoad
|