ECA 228 InternetIntranet Design I Accessibility accessibility issues

  • Slides: 30
Download presentation
ECA 228 Internet/Intranet Design I Accessibility

ECA 228 Internet/Intranet Design I Accessibility

accessibility issues l some users – – – can’t see, hear, or move the

accessibility issues l some users – – – can’t see, hear, or move the way we do may not mentally process information easily may have difficulty reading may not be able to use keyboard or mouse may have a text-only screen, or very small screen may have a voice browser ECA 228 Internet/Intranet Design I

accessibility issues l making your site accessible to users with disabilities may benefit all

accessibility issues l making your site accessible to users with disabilities may benefit all users – l cont … EG, your choice to use stylesheets to control style across your site may benefit a user with low vision, but may actually decrease download time for all users by law, some sites must be accessible to more than just sighted, hearing users ECA 228 Internet/Intranet Design I

Web Accessibility Initiative l l WAI attempts to make the web more accessible to

Web Accessibility Initiative l l WAI attempts to make the web more accessible to everyone 5 primary areas 1. 2. 3. 4. 5. Technology Guidelines Tools Education and Outreach Research and Development ECA 228 Internet/Intranet Design I

guidelines Guidelines address 2 general themes: l Graceful Transformation – – separate structure from

guidelines Guidelines address 2 general themes: l Graceful Transformation – – separate structure from presentation provide text alternatives, such as the alt attribute in <img> tags create documents that work even if users cannot see or hear – include information that serves the same purpose as audio or video create documents that do not rely on one type of hardware, eg, large monitors ECA 228 Internet/Intranet Design I

guidelines l cont … Making Content Understandable and Navigable – – make language clear

guidelines l cont … Making Content Understandable and Navigable – – make language clear and simple provide understandable mechanisms for navigating through site some users cannot use image maps, frames, graphics some users may lose contextual information when they can view only a portion of the page l l l put important information above fold eg, magnified images only display one word at a time Braille readers ECA 228 Internet/Intranet Design I

guidelines l cont … checkpoints – each guideline may contain one or more checkpoints

guidelines l cont … checkpoints – each guideline may contain one or more checkpoints l – explanations of how the guideline applies in real-world scenario each checkpoint is assigned a priority level ECA 228 Internet/Intranet Design I

priority levels l Level 1 – l Level 2 – l site must satisfy

priority levels l Level 1 – l Level 2 – l site must satisfy this checkpoint, otherwise it will be impossible for some groups to access information site should satisfy this checkpoint – significant barriers may be removed Level 3 – site may address this checkpoint – will improve overall accessibility ECA 228 Internet/Intranet Design I

conformance A document may be rated on its compliance to the 3 priority levels

conformance A document may be rated on its compliance to the 3 priority levels l 3 levels of conformance standards 1. 2. 3. LEVEL A: all Priority 1 checkpoints are satisfied LEVEL Double-A: all Priority 1 and 2 checkpoints are satisfied LEVEL Triple_A: all Priority 1, 2, and 3 checkpoints are satisfied Know Your Audience ECA 228 Internet/Intranet Design I

Guideline 1 Provide equivalent alternatives to auditory and visual content. – – – if

Guideline 1 Provide equivalent alternatives to auditory and visual content. – – – if a user cannot use images, movies, sounds, etc, provide equivalent information guidelines do not suggest avoiding using the above, but providing a text equivalents may be used as synthesized speech, Braille, visually displayed text ECA 228 Internet/Intranet Design I

Guideline 1 – – cont … text equivalent must serve the same function or

Guideline 1 – – cont … text equivalent must serve the same function or purpose as an image EG, the purpose of image of earth from outer space l decoration alt = “photograph of earth from outer space” l illustration of world geography alt = “the polar caps can clearly be seen from outer space” l link to information about the earth alt = “click this link for more information about the earth” ECA 228 Internet/Intranet Design I

Guideline 1 – – cont … if the text conveys the same purpose for

Guideline 1 – – cont … if the text conveys the same purpose for a user with a disability as the image does for other users, it can be considered equivalent consider using non-text equivalents (pictures, video, audio) for users who have difficulty reading – Checkpoints: l Provide text equivalent for every non-text element, including images, applets, ascii art, animations, buttons, image map regions, etc ECA 228 Internet/Intranet Design I

Guideline 2 Don't rely on color alone. – – ensure that text and graphics

Guideline 2 Don't rely on color alone. – – ensure that text and graphics are understandable when viewed without color foreground and background should not be too close to the same hue some users may not be able to differentiate colors Checkpoints: l Make sure any information conveyed with color is also conveyed other ways as well ECA 228 Internet/Intranet Design I

Guideline 3 Use markup and style sheets and do so properly. – – markup

Guideline 3 Use markup and style sheets and do so properly. – – markup documents with proper structural elements control presentation with style sheets rather than presentational elements l – – – <font> invalid HTML hinders accessibility using a table to lay out a page may cause problems do not use presentational markup to convey structure ECA 228 Internet/Intranet Design I

Guideline 4 Clarify natural language usage. – identify predominant natural language of the document

Guideline 4 Clarify natural language usage. – identify predominant natural language of the document using meta tags – Checkpoints: l Identify changes in the natural language of a documents text. EG, if you include a non-English word in an English document, identify the language with the lang attribute. ECA 228 Internet/Intranet Design I

Guideline 5 Create tables that transform gracefully. – – tables should be used to

Guideline 5 Create tables that transform gracefully. – – tables should be used to mark up tabular data, not to lay out a page Checkpoints: l l For data tables having 2 or more logical levels of rows or columns ( header cells, body, footer) use markup to designate those levels ( thead, tbody, tfoot ) Identify row and column headers ECA 228 Internet/Intranet Design I

Guideline 5 – cont … some screen readers reads table cells straight across Abraham

Guideline 5 – cont … some screen readers reads table cells straight across Abraham Lincoln's Gettysburg Four score and seven years ago Address, delivered 19 November, our fathers brought forth upon 1863 this continent a new nation … – will be read as Abraham Lincoln's Gettysburg Four score and seven years ago Address, delivered 19 November, our fathers brought forth upon 1863 this continent a new nation … ECA 228 Internet/Intranet Design I

Guideline 6 Ensure that pages featuring new technologies transform gracefully. – – ensure that

Guideline 6 Ensure that pages featuring new technologies transform gracefully. – – ensure that pages are accessible even when newer technologies are not supported or are turned off Checkpoints: l l Organize the structure of your document so that it still makes sense even if style sheets are not working as you expect Ensure that pages are usable even when scripts, applets, and other objects are turned off ECA 228 Internet/Intranet Design I

Guideline 7 Ensure user control of time-sensitive content changes. – ensure that moving, blinking,

Guideline 7 Ensure user control of time-sensitive content changes. – ensure that moving, blinking, scrolling, or auto-updating objects or pages may be paused or stopped – Checkpoints: l Avoid causing the screen to flicker – some people with epilepsy can have seizures triggered by flickering or flashing in the 4 to 59 flashes per second range ECA 228 Internet/Intranet Design I

Guideline 8 Ensure direct accessibility of embedded user interfaces. – when you have an

Guideline 8 Ensure direct accessibility of embedded user interfaces. – when you have an embedded object that has its own interface, make sure that interface as well is accessible – Checkpoints: l Make programmatic elements such as scripts and applets compatible with assistive technologies ECA 228 Internet/Intranet Design I

Guideline 9 Design for device-independence. – – – use features that enable activation of

Guideline 9 Design for device-independence. – – – use features that enable activation of page elements via a variety of input devices don’t rely on one device (mouse, keyboard, etc) to navigate through site Checkpoints: l Provide client-side image maps rather than server-side image maps ECA 228 Internet/Intranet Design I

Guideline 10 Use interim solutions. – – Use interim accessibility solutions so that assistive

Guideline 10 Use interim solutions. – – Use interim accessibility solutions so that assistive technologies and older browsers will operate correctly interim means that the W 3 considers these issues at the moment, but expect these will not be a problem in the future, when web technologies come out with certain anticipated features ECA 228 Internet/Intranet Design I

Guideline 11 Use W 3 C technologies and guidelines. – – – use W

Guideline 11 Use W 3 C technologies and guidelines. – – – use W 3 C technologies (according to specification) and follow accessibility guidelines W 3 C technologies include built-in accessibility features avoid non-W 3 C and non-standard features ( proprietary code ) ECA 228 Internet/Intranet Design I

Guideline 12 Provide context and orientation information. – – – group elements and provide

Guideline 12 Provide context and orientation information. – – – group elements and provide contextual information about the relationship between elements complex relationships between parts of a page may be difficult for people with disabilities to interpret Checkpoints: l Title each frame to facilitate identification and navigation ECA 228 Internet/Intranet Design I

Guideline 13 Provide clear navigation mechanisms. – provide clear and consistent navigation mechanisms to

Guideline 13 Provide clear navigation mechanisms. – provide clear and consistent navigation mechanisms to increase the likelihood that a person will find what they are looking for at a site l l l orientation information navigation bars site map ECA 228 Internet/Intranet Design I

Guideline 14 Ensure that documents are clear and simple. – – – ensure that

Guideline 14 Ensure that documents are clear and simple. – – – ensure that documents are clear and simple so they may be more easily understood consistent page layout, recognizable graphics, and easy to understand language benefits all users Checkpoints: l Use the clearest and simplest language appropriate for a site’s content ECA 228 Internet/Intranet Design I

validation l to check for accessibility, use: – – automated tools human review l

validation l to check for accessibility, use: – – automated tools human review l l l invite individuals with disabilities to review the document invite both experienced and novice users get feedback from users with a wide range of disabilities hearing impaired – visually impaired – motor impairments – ECA 228 Internet/Intranet Design I

validation methods l l l use automated validation tools validate syntax of HTML validate

validation methods l l l use automated validation tools validate syntax of HTML validate style sheets view document in text-only browser view document in several browsers, old and new view document in screen reader, with magnification, on a small display, etc ECA 228 Internet/Intranet Design I

validation methods l use spelling and grammar checking – – l cont … speech

validation methods l use spelling and grammar checking – – l cont … speech synthesizers may not be able to decipher misspelled words grammar problems may make document incomprehensible review the document for clarity and simplicity – – ask a human editor to review document identify cultural barriers ECA 228 Internet/Intranet Design I

Bobby l l http: //bobby. watchfire. comprehensive web accessibility software tool – l enter

Bobby l l http: //bobby. watchfire. comprehensive web accessibility software tool – l enter a url to check one page at a time – – l identifies barriers to accessibility generates a report listing violations of Priority 1, 2, and 3 issues generates a list of user checks Bobby is available for purchase ECA 228 Internet/Intranet Design I