Making your website accessible

AccessibilityAccessibility The The Web Content Accessibility Guidelines (WCAG)Web Content Accessibility Guidelines (WCAG) provide provide

an international set of guidelines. They are developed by an international set of guidelines. They are developed by the Worldwide Web Consortium (W3C), the governing the Worldwide Web Consortium (W3C), the governing body of the web. These guidelines are the basis of most body of the web. These guidelines are the basis of most web accessibility law in the world. Version 2.0 of these web accessibility law in the world. Version 2.0 of these guidelines, published in December 2008, are based on four guidelines, published in December 2008, are based on four principles:principles:

PerceivablePerceivable: Available to the senses (vision and hearing : Available to the senses (vision and hearing primarily) either through the browser or through assistive primarily) either through the browser or through assistive technologies (e.g. screen readers, screen enlargers, etc.) technologies (e.g. screen readers, screen enlargers, etc.)

OperableOperable: Users can interact with all controls and : Users can interact with all controls and interactive elements using either the mouse, keyboard, or interactive elements using either the mouse, keyboard, or an assistive device. an assistive device.

UnderstandableUnderstandable: Content is clear and limits confusion and : Content is clear and limits confusion and ambiguity. ambiguity.

RobustRobust: A wide range of technologies (including old and : A wide range of technologies (including old and new user agents and assistive technologies) can access the new user agents and assistive technologies) can access the content.content.

AccessibilityAccessibility Screen readers are audio interfaces. Rather than Screen readers are audio interfaces. Rather than

displaying web content visually for users in a displaying web content visually for users in a "window" or screen on the monitor, screen readers "window" or screen on the monitor, screen readers convert text into synthesized speech so that users convert text into synthesized speech so that users can listen to the content.can listen to the content.

https://www.youtube.com/watch?v=o_mvO6EQ0tMhttps://www.youtube.com/watch?v=o_mvO6EQ0tM https://www.youtube.com/watch?v=IK97XMibEwshttps://www.youtube.com/watch?v=IK97XMibEws

AccessibilityAccessibility Interaction design: Interaction design:

Design convention such as underlined Design convention such as underlined links should be followed links should be followed

Scrolling and other mouse activities Scrolling and other mouse activities are a learned behaviour and becomes are a learned behaviour and becomes more difficult with age making pull-more difficult with age making pull-down menus, scrolling lists, and down menus, scrolling lists, and scrolling pages difficult for some users scrolling pages difficult for some users

Understanding, and accessing, what is Understanding, and accessing, what is clickable can be problematic for some clickable can be problematic for some elderly users elderly users

Feedback in multiple modes (visual and Feedback in multiple modes (visual and auditory) may be beneficialauditory) may be beneficial

AccessibilityAccessibility

Information architecture: Information architecture: Clear labeling (of links, headings Clear labeling (of links, headings

and menu items) seems to be more and menu items) seems to be more important for older users than important for older users than younger users younger users

Breadth vs. depth - shallow Breadth vs. depth - shallow information hierarchies seemed to information hierarchies seemed to work better for older users work better for older users

Redundant links – the studies they Redundant links – the studies they reviewed leant both waysreviewed leant both ways


Visual design: Visual design: Experienced older users can scan pages as Experienced older users can scan pages as

well as younger users, but newer elderly users well as younger users, but newer elderly users can find busy pages and pages with irrelevant can find busy pages and pages with irrelevant material (such as adverts) distracting material (such as adverts) distracting

Older users generally prefer larger text – Older users generally prefer larger text – naturally naturally http://www.cnib.ca http://www.cnib.ca

Older adults with vision deficits need to be Older adults with vision deficits need to be accommodated with suitable contrast along accommodated with suitable contrast along with headings to help them narrow their with headings to help them narrow their visual searchvisual search


Information design: Information design: Skimming and scanning is common Skimming and scanning is common

across all age groups and vision across all age groups and vision abilities abilities

Content development, plain Content development, plain language and ‘writing for the web’ language and ‘writing for the web’ are criticalare critical

AccessibilityAccessibility1. Choose a content management system that supports 1. Choose a content management system that supports

accessibility.accessibility.

There are many content management systems available to help There are many content management systems available to help you build your website. Common examples include Drupal and you build your website. Common examples include Drupal and Wordpress, but there are many other options available.Wordpress, but there are many other options available.

Once you've chosen a CMS that suits your needs, make sure to Once you've chosen a CMS that suits your needs, make sure to choose a theme/template that is accessible. Consult the theme's choose a theme/template that is accessible. Consult the theme's documentation for notes on accessibility and tips for creating documentation for notes on accessibility and tips for creating accessible content and layouts for that theme. Be sure to follow accessible content and layouts for that theme. Be sure to follow the same guidelines when selecting modules, plugins, or widgets. the same guidelines when selecting modules, plugins, or widgets. http://chronicle.com/blogs/profhacker/accessibility-ready-http://chronicle.com/blogs/profhacker/accessibility-ready-wordpress-themes/55683 wordpress-themes/55683

For elements like editing toolbars and video players, make sure For elements like editing toolbars and video players, make sure that they support creating accessible content. For example, that they support creating accessible content. For example, editing toolbars should include options for headings and editing toolbars should include options for headings and accessible tables, and video players should include closed accessible tables, and video players should include closed captioning. The CMS administration options (such as creating a captioning. The CMS administration options (such as creating a blog post or posting a comment) should be accessible as well.blog post or posting a comment) should be accessible as well.

AccessibilityAccessibility2. Use headings correctly to organize the structure of your 2. Use headings correctly to organize the structure of your

content.content.

Screen reader users can use heading structure to navigate Screen reader users can use heading structure to navigate content. By using headings (<h1>, <h2>, etc.) correctly and content. By using headings (<h1>, <h2>, etc.) correctly and strategically, the content of your website will be well-organized strategically, the content of your website will be well-organized and easily interpreted by screen readers.and easily interpreted by screen readers.

Be sure to adhere to the correct order of headings, and Be sure to adhere to the correct order of headings, and separate presentation from structure by using CSS (Cascading separate presentation from structure by using CSS (Cascading Style Sheets). Do not pick a header just because it looks good Style Sheets). Do not pick a header just because it looks good visually (which can confuse screen reader users); instead, visually (which can confuse screen reader users); instead, create a new CSS class to style your text.create a new CSS class to style your text.

Examples of proper use of headings:Examples of proper use of headings: Use <h1> for the primary title of the page. Avoid using an Use <h1> for the primary title of the page. Avoid using an

<h1> for anything other than the title of the website and the <h1> for anything other than the title of the website and the title of individual pages. title of individual pages.

Use headings to indicate and organize your content structure. Use headings to indicate and organize your content structure. Do not skip heading levels (e.g., go from an <h1> to an <h3>), Do not skip heading levels (e.g., go from an <h1> to an <h3>),

as screen reader users will wonder if content is missing.as screen reader users will wonder if content is missing.

AccessibilityAccessibility3. Include proper alt text for images. www.sfoautisme.ca3. Include proper alt text for images. www.sfoautisme.ca

Alt text should be provided for images, so that screen Alt text should be provided for images, so that screen

reader users can understand the message conveyed by reader users can understand the message conveyed by the use of images on the page. This is especially the use of images on the page. This is especially important for informative images (such as important for informative images (such as infographics). When creating the alt text, the text infographics). When creating the alt text, the text should contain the message you wish to convey through should contain the message you wish to convey through that image, and if the image includes text, that text that image, and if the image includes text, that text should also be included in the alt.should also be included in the alt.

The exception to this rule is when an image is used The exception to this rule is when an image is used purely for decoration; in this case, the alt text can be purely for decoration; in this case, the alt text can be left empty so that the screen reader user is not left empty so that the screen reader user is not distracted from the more important content on the distracted from the more important content on the page.page.

If an image is the only content of a link, the screen If an image is the only content of a link, the screen reader will read the file name if alt text is not provided. reader will read the file name if alt text is not provided. Always provide alt text for images that are used as links.Always provide alt text for images that are used as links.

AccessibilityAccessibility4. Give your links unique and descriptive names.4. Give your links unique and descriptive names.

When including links in your content, use text that properly When including links in your content, use text that properly describes where the link will go. Using "click here" is not describes where the link will go. Using "click here" is not considered descriptive, and is ineffective for a screen reader considered descriptive, and is ineffective for a screen reader user.user.

Just like sighted users scan the page for linked text, visually-Just like sighted users scan the page for linked text, visually-impaired users can use their screen readers to scan for links. impaired users can use their screen readers to scan for links. As a result, screen reader users often do not read the link As a result, screen reader users often do not read the link within the context of the rest of the page. Using descriptive within the context of the rest of the page. Using descriptive text properly explains the context of links to the screen reader text properly explains the context of links to the screen reader user.user.

The most unique content of the link should be presented first, The most unique content of the link should be presented first, as screen reader users will often navigate the links list by as screen reader users will often navigate the links list by searching via the first letter.searching via the first letter.

For example, if you are pointing visitors to a page called For example, if you are pointing visitors to a page called "About Us":"About Us":

Try not to say: "Try not to say: "Click hereClick here to read about our company." to read about our company." Instead, say: "To learn more about our company, read Instead, say: "To learn more about our company, read About UsAbout Us

."."

AccessibilityAccessibility5. Use color with care.5. Use color with care.

The most common form of color deficiency, red-green color The most common form of color deficiency, red-green color deficiency, affects approximately 8% of the population. deficiency, affects approximately 8% of the population. Using ONLY colors such as these (especially to indicate Using ONLY colors such as these (especially to indicate required fields in a form) will prevent these individuals required fields in a form) will prevent these individuals from understanding your message.from understanding your message.

Other groups of people with disabilities, particularly users Other groups of people with disabilities, particularly users with learning disabilities, benefit greatly from color when with learning disabilities, benefit greatly from color when used to distinguish and organize your content.used to distinguish and organize your content.

To satisfy both groups, use color, but also be sure to use To satisfy both groups, use color, but also be sure to use other visual indicators, such as an asterisk or question other visual indicators, such as an asterisk or question mark. Be sure to also distinguish blocks of content from mark. Be sure to also distinguish blocks of content from one another using visual separation (such as whitespace or one another using visual separation (such as whitespace or borders).borders).

There are several There are several tools you can use to evaluate color contrasttools you can use to evaluate color contrast , , which will assist you in making your page as visually usable as which will assist you in making your page as visually usable as possible to individuals with low vision or varying levels of color possible to individuals with low vision or varying levels of color blindness.blindness.

AccessibilityAccessibility5. Use color with care.5. Use color with care.

The most common form of color deficiency, red-green color The most common form of color deficiency, red-green color deficiency, affects approximately 8% of the population. deficiency, affects approximately 8% of the population. Using ONLY colors such as these (especially to indicate Using ONLY colors such as these (especially to indicate required fields in a form) will prevent these individuals required fields in a form) will prevent these individuals from understanding your message.from understanding your message.

Other groups of people with disabilities, particularly users Other groups of people with disabilities, particularly users with learning disabilities, benefit greatly from color when with learning disabilities, benefit greatly from color when used to distinguish and organize your content.used to distinguish and organize your content.

To satisfy both groups, use color, but also be sure to use To satisfy both groups, use color, but also be sure to use other visual indicators, such as an asterisk or question other visual indicators, such as an asterisk or question mark. Be sure to also distinguish blocks of content from mark. Be sure to also distinguish blocks of content from one another using visual separation (such as whitespace or one another using visual separation (such as whitespace or borders).borders).

There are several There are several tools you can use to evaluate color contrasttools you can use to evaluate color contrast , , which will assist you in making your page as visually usable as which will assist you in making your page as visually usable as possible to individuals with low vision or varying levels of color possible to individuals with low vision or varying levels of color blindness.blindness.

AccessibilityAccessibility 6. Design your forms for accessibility.6. Design your forms for accessibility. When form fields are not labeled appropriately, the screen reader user does not have the same When form fields are not labeled appropriately, the screen reader user does not have the same

cues available as the sighted user. It may be impossible to tell what type of content should be cues available as the sighted user. It may be impossible to tell what type of content should be entered into a form field.entered into a form field.

Each field in your form should have a well-positioned, descriptive label. For example, if the Each field in your form should have a well-positioned, descriptive label. For example, if the field is for a person's name, it should be labeled appropriately as either "Full Name" or have field is for a person's name, it should be labeled appropriately as either "Full Name" or have two separate fields labeled as "First Name" and "Last Name." Use the <label> tag or an ARIA two separate fields labeled as "First Name" and "Last Name." Use the <label> tag or an ARIA property (see tip #9) to associate the label text with the form field.property (see tip #9) to associate the label text with the form field.

As you are going through a form field, a person should be able to tab through the form and fill As you are going through a form field, a person should be able to tab through the form and fill out all the fields before getting to the "Submit" button, or they may not even realize that out all the fields before getting to the "Submit" button, or they may not even realize that additional fields exist. Essentially, the tab order should follow the visual order.additional fields exist. Essentially, the tab order should follow the visual order.

If you have fields that are related or similar, consider grouping them together using fieldsets. If you have fields that are related or similar, consider grouping them together using fieldsets. For example, fields like "Full Name" and "Date of Birth" could be grouped together as For example, fields like "Full Name" and "Date of Birth" could be grouped together as "Personal Information." This type of form organization can help a screen reader user keep "Personal Information." This type of form organization can help a screen reader user keep track of progress, and can provide the context that might be lost while filling out the form.track of progress, and can provide the context that might be lost while filling out the form.

If certain form fields are required, the field should be labeled accordingly, and configured to If certain form fields are required, the field should be labeled accordingly, and configured to alert the screen reader user. Commonly, required fields are noted as such with an asterisk, alert the screen reader user. Commonly, required fields are noted as such with an asterisk, which will not be spoken by some screen readers. Asterisks (or similar visual indications) which will not be spoken by some screen readers. Asterisks (or similar visual indications) should still be used for sighted users, people with learning disabilities or people who speak should still be used for sighted users, people with learning disabilities or people who speak English as a second language. Indicating that a field is required to a screen reader can be English as a second language. Indicating that a field is required to a screen reader can be accomplished by adding ARIA required="true" and ARIA required="false" for optional fields. accomplished by adding ARIA required="true" and ARIA required="false" for optional fields. After submitting the form, user will need to be alerted to submission confirmation and any After submitting the form, user will need to be alerted to submission confirmation and any submission errors. We recommend including any error counts in the page title (after the user submission errors. We recommend including any error counts in the page title (after the user has submitted), so the user will immediately be informed that there are errors on the page. If has submitted), so the user will immediately be informed that there are errors on the page. If a user submits a form with errors, the user should be brought to a submission page that a user submits a form with errors, the user should be brought to a submission page that indicates what the errors are, and provides an easy way to navigate to those errors.indicates what the errors are, and provides an easy way to navigate to those errors.

Finally, the use of CAPTCHA is inaccessible and should not be used to validate submissions. Finally, the use of CAPTCHA is inaccessible and should not be used to validate submissions. WebAIMWebAIM has a helpful summary of accessible alternatives (link is external) has a helpful summary of accessible alternatives (link is external) to CAPTCHA to keep to CAPTCHA to keep forms free of spam submissions.forms free of spam submissions.

AccessibilityAccessibility6. Design your forms for accessibility.6. Design your forms for accessibility. When form fields are not labeled appropriately, the screen reader When form fields are not labeled appropriately, the screen reader

user does not have the same cues available as the sighted user. It user does not have the same cues available as the sighted user. It may be impossible to tell what type of content should be entered into may be impossible to tell what type of content should be entered into a form field.a form field.

Each field in your form should have a well-positioned, descriptive Each field in your form should have a well-positioned, descriptive label. For example, if the field is for a person's name, it should be label. For example, if the field is for a person's name, it should be labeled appropriately as either "Full Name" or have two separate labeled appropriately as either "Full Name" or have two separate fields labeled as "First Name" and "Last Name."fields labeled as "First Name" and "Last Name."

As you are going through a form field, a person should be able to tab As you are going through a form field, a person should be able to tab through the form and fill out all the fields before getting to the through the form and fill out all the fields before getting to the "Submit" button, the tab order should follow the visual order."Submit" button, the tab order should follow the visual order.

If form fields are required, it should be labeled accordingly. Asterisks If form fields are required, it should be labeled accordingly. Asterisks will not be spoken by some screen readers. Asterisks should still be will not be spoken by some screen readers. Asterisks should still be used for sighted users. Indicating that a field is required to a screen used for sighted users. Indicating that a field is required to a screen reader is essential. If a user submits a form with errors, the user reader is essential. If a user submits a form with errors, the user should be brought to a submission page that indicates what the should be brought to a submission page that indicates what the errors are, and provides an easy way to navigate to those errors.errors are, and provides an easy way to navigate to those errors.

Finally, the use of CAPTCHA is inaccessible and should not be used Finally, the use of CAPTCHA is inaccessible and should not be used to validate submissions. to validate submissions. WebAIMWebAIM has a helpful summary of accessible alternatives (link is external) has a helpful summary of accessible alternatives (link is external) to to CAPTCHA to keep forms free of spam submissions.CAPTCHA to keep forms free of spam submissions.

AccessibilityAccessibility7. Use tables for tabular data, not for layout.7. Use tables for tabular data, not for layout.

Using tables for page layout adds additional verbosity to Using tables for page layout adds additional verbosity to screen reader users. Whenever a screen reader encounters screen reader users. Whenever a screen reader encounters a table, the user is informed that there is a table with "x" a table, the user is informed that there is a table with "x" number of columns and rows, which distracts from the number of columns and rows, which distracts from the content. Also, the content may be read in an order that content. Also, the content may be read in an order that does not match the visual order of the page. Do not create does not match the visual order of the page. Do not create the layout of a website using a table; instead, use CSS for the layout of a website using a table; instead, use CSS for presentation.presentation.

When a data table is necessary (i.e. you have a set of data When a data table is necessary (i.e. you have a set of data that is best interpreted in a table format, such as a bank that is best interpreted in a table format, such as a bank statement), use headers for rows and columns, which helps statement), use headers for rows and columns, which helps explain the relationships of cells. Complex tables may have explain the relationships of cells. Complex tables may have several cells within the table that have a unique several cells within the table that have a unique relationship to each other, and these should be identified relationship to each other, and these should be identified by using the "scope" attribute in HTML. Table captions by using the "scope" attribute in HTML. Table captions (HTML5) can be used to give additional information to (HTML5) can be used to give additional information to users about how best to read and understand the table users about how best to read and understand the table relationships.relationships.

AccessibilityAccessibility8. Ensure that all content can be accessed with the keyboard alone in a 8. Ensure that all content can be accessed with the keyboard alone in a

logical way.logical way. Users with mobility disabilities, including repetitive stress injuries, may Users with mobility disabilities, including repetitive stress injuries, may

not be able to use a mouse or trackpad. These people are able to access not be able to use a mouse or trackpad. These people are able to access content through the use of a keyboard by pressing the "tab" or "arrow" content through the use of a keyboard by pressing the "tab" or "arrow" keys, or through the use of alternative input devices such as single-keys, or through the use of alternative input devices such as single-switch input or mouth stick. As a result, the tab order should match the switch input or mouth stick. As a result, the tab order should match the visual order, so keyboard-only users are able to logically navigate visual order, so keyboard-only users are able to logically navigate through site content.through site content.

Long pages with lots of content should be broken up with anchor links Long pages with lots of content should be broken up with anchor links (jump lists (jump lists http://webaim.org/techniques/screenreader/#linearizationhttp://webaim.org/techniques/screenreader/#linearization ), ), allowing keyboard-only users to skip to relevant portions of the page allowing keyboard-only users to skip to relevant portions of the page without having to negotiate through other content. "Skip to main without having to negotiate through other content. "Skip to main content" should be provided at the top of each page, so keyboard-only content" should be provided at the top of each page, so keyboard-only users won't have to tab through the page navigation in order to get the users won't have to tab through the page navigation in order to get the main content.main content.

For pages with local menus and multiple levels and sub-items, the For pages with local menus and multiple levels and sub-items, the menus should be configured so that all menu items can be accessed with menus should be configured so that all menu items can be accessed with the keyboard. Do not use elements that only activate when a user hovers the keyboard. Do not use elements that only activate when a user hovers over items with a mouse, as keyboard-only or screen readers users will over items with a mouse, as keyboard-only or screen readers users will not be able to activate them.not be able to activate them.

Form example Form example https://www.zoho.com/creator/online-form-builder/gallery.htmlhttps://www.zoho.com/creator/online-form-builder/gallery.html

AccessibilityAccessibility9. Use ARIA roles and landmarks.9. Use ARIA roles and landmarks. ARIA (Accessible Rich Internet Applications) is an easy and ARIA (Accessible Rich Internet Applications) is an easy and

powerful technical specification for ensuring your site powerful technical specification for ensuring your site structure is accessible. By assigning ARIA roles and landmarks structure is accessible. By assigning ARIA roles and landmarks to web elements, you enhance the ability of screen reader users to web elements, you enhance the ability of screen reader users to navigate and interact with your content. ARIA roles and to navigate and interact with your content. ARIA roles and landmarks can be easily added to your HTML, in the same way landmarks can be easily added to your HTML, in the same way that you add classes to HTML in order to load attributes from that you add classes to HTML in order to load attributes from CSS.CSS.

Examples of common ARIA usage include:Examples of common ARIA usage include: Roles of "navigation" and "menu": Used to identify the site's Roles of "navigation" and "menu": Used to identify the site's

primary navigation and individual page menus. primary navigation and individual page menus. Landmarks of "banner" and "main content": Used to identify Landmarks of "banner" and "main content": Used to identify

the header and main content sections of a webpage. the header and main content sections of a webpage. Alerts of "live" and "atomic": Used to help screen reader users Alerts of "live" and "atomic": Used to help screen reader users

with dynamic page changes, such as stock tickers and search with dynamic page changes, such as stock tickers and search filters. filters.

Forms: ARIA allows the addition of descriptive text to a form Forms: ARIA allows the addition of descriptive text to a form field ("described by" or "labeled by") and the identification of field ("described by" or "labeled by") and the identification of buttons and required controls (more information under tip #6).buttons and required controls (more information under tip #6).



AccessibilityAccessibility10. Make dynamic content accessible.10. Make dynamic content accessible. When content updates dynamically (i.e. without a page When content updates dynamically (i.e. without a page

refresh), screen readers may not be aware. This includes refresh), screen readers may not be aware. This includes screen overlays, lightboxes, in-page updates, popups, and screen overlays, lightboxes, in-page updates, popups, and modal dialogs. Keyboard-only users may be trapped in page modal dialogs. Keyboard-only users may be trapped in page overlays. Magnification software users might be zoomed in overlays. Magnification software users might be zoomed in on the wrong section of the page.on the wrong section of the page.

These functions can easily be made accessible. Options These functions can easily be made accessible. Options include ARIA roles and alerts, as well as front-end include ARIA roles and alerts, as well as front-end development frameworks that specifically support development frameworks that specifically support accessibility.accessibility.

Ensure that video players do not auto-play (non-consensual Ensure that video players do not auto-play (non-consensual sound), and that the players can be used with a keyboard. sound), and that the players can be used with a keyboard. Additionally, all videos must have options for closed Additionally, all videos must have options for closed captioning and transcripts for the hearing-impaired.captioning and transcripts for the hearing-impaired.

If your site contains a slideshow, make sure that each If your site contains a slideshow, make sure that each photo has alt text and can be navigated via the keyboard. If photo has alt text and can be navigated via the keyboard. If you are using any unique widgets (such as a calendar you are using any unique widgets (such as a calendar picker or drag-and-drops), be sure to test for accessibility.picker or drag-and-drops), be sure to test for accessibility.

Key Tips for Making Your Key Tips for Making Your Website Senior FriendlyWebsite Senior Friendly

Break information into short sections. Break information into short sections. Give instructions clearly and number each step. Give instructions clearly and number each step. Minimize the use of jargon and technical terms. Minimize the use of jargon and technical terms. Use single mouse clicks. Use single mouse clicks. Allow additional space around clickable targets. Allow additional space around clickable targets. Use 12- or 14-point type size, and make it easy for users Use 12- or 14-point type size, and make it easy for users

to enlarge text. to enlarge text. Use high-contrast color combinations, such as black type Use high-contrast color combinations, such as black type

against a white background. against a white background. Provide a speech function to hear text read aloud. Provide a speech function to hear text read aloud. Provide text-only versions of multimedia content. Provide text-only versions of multimedia content. Minimize scrolling. Minimize scrolling. Choose a search engine that uses keywords and doesn't Choose a search engine that uses keywords and doesn't

require special characters or knowledge of Boolean require special characters or knowledge of Boolean terms. terms.

Visit Visit www.NIHSeniorHealth.govwww.NIHSeniorHealth.gov for an example of a website for an example of a website that incorporates these senior-friendly guidelines.that incorporates these senior-friendly guidelines.

sourcessources

http://webaccess.berkeley.edu/resouhttp://webaccess.berkeley.edu/resources/tips/eldersrces/tips/elders

http://www.webcredible.com/blog-rehttp://www.webcredible.com/blog-reports/web-accessibility/big-websites-ports/web-accessibility/big-websites-accessibility.shtmlaccessibility.shtml

BADBAD

http://majors.uat.edu/Game-Productihttp://majors.uat.edu/Game-Production/on/

http://www.alfredsung.com/eyewear/http://www.alfredsung.com/eyewear/eyewear3.phpeyewear3.php

GOODGOOD

http://community.sitepoint.com/http://community.sitepoint.com/t/list-of-best-accessible-t/list-of-best-accessible-websites/1838websites/1838

www.NIHSeniorHealth.govwww.NIHSeniorHealth.gov