ACCESSIBILITY An Introduction. Accessibility Accessibility is the degree to which a product, device,...
-
Upload
elinor-atkinson -
Category
Documents
-
view
220 -
download
4
Transcript of ACCESSIBILITY An Introduction. Accessibility Accessibility is the degree to which a product, device,...
ACCESSIBILITYAn Introduction
Accessibility• Accessibility is the degree to which a product, device,
service, or environment is available to as many people as possible. Accessibility can be viewed as the “ability to access” and benefit from some system or entity.
Accessibility• Use up-to-date, well-formed HTML and CSS
• Use all recommended tags (!DOCTYPE, title, meta, etc.)• Make sure all tags are properly nested and closed• Make sure styles written correctly• Don’t use deprecated tags like <font>, <center>• Don’t use deprecated attributes like align=“”
• See http://www.tutorialspoint.com/html/html_deprecated_tags.htm
Accessibility• Make sure each page has a unique, descriptive title
Poor Good
Accessibility• Provide metadata that identifies author, type of content,
keywords, character set, etc.
Accessibility• Make proper hierarchical use of headings (h1 first,
followed by h2 for the first level of subheading, etc.).
Accessibility• Mark up quotations properly; use <q> tags around
quotes and <blockquote> around actual blockquotes. Do not use quotation markup for formatting effects such as indentation.
• Place the <abbr> tag with a title attribute around any (and every) abbreviation. For example: <abbr title="Keep it simple, stupid">KISS</abbr>.
• Use real horizontal rules <hr>, not images.
Accessibility• Make sure all images have alt attributes. For example:
<img src="flower.jpg" alt="Photo of a red rose”>
Accessibility• Clearly identify the target of each link. For example, don't
write:
“For more information about baseball click here.”
• Instead write something more specific like:
“See more information about baseball.”
Accessibility• Add title attributes to link tags, especially if the target of
the link is not clear from the context. For example:
<a href="myBaseballPage.html" title= "Information about baseball history and players">See more information about baseball</a>
Accessibility• Navigation menus should be grouped and labeled. For
example, use an ordered or unordered list with an ID
• Another possibility is surrounding a group of links with a either a set of <div> tags or <nav> tags with an ID
Accessibility• Provided non-link, printable characters (surrounded by
spaces) between adjacent links. For example:
Home | Search | Contact
–or–
[Home] [Search] [Contact] [Site map]
Accessibility• Use navigation mechanisms in a consistent manner—
navigation menus should look and behave the same on all pages (persistent navigation).
• Don’t use images as links
Accessibility• If you choose to use graphic text—whether it be page
titles, site ID's, fancy headings or buttons—make sure there is a text alternative, either visible on the page, or hidden in such a way that it will become visible when images are hidden and/or CSS turned-off. One way we can accomplish this by using a CSS-based image replacement method.
Accessibility• Use high contrast for text.
Good Bad
Accessibility• Dark text on light backgrounds is preferable to light text on
dark backgrounds
Good Bad
Accessibility• Organize documents so they may be read without style
sheets. For example, when an HTML document is rendered without associated style sheets, it must still be possible to read the document.
Accessibility• Put navigation links and menus after
the page's main content in the markup. You can reposition the navigation using CSS.
Accessibility• Put navigation links and menus after the page's main
content in the markup. You can reposition the navigation using CSS.
Accessibility• Put navigation links and menus after the page's main
content in the markup. You can reposition the navigation using CSS.
• Alternatively, you could provide a "skip to main content" link at the top of each page.