Highlights of Week 12/2010
Posted by Michael Gaigg
I'm still feeling enriched by the exciting sessions presented at the Web App Masters Tour in San Diego. Check out Luke's notes of all the 9 sessions presented - fantastic!
- Techniques for Squeezing Images for All They’re Worth (by Ben Gremillion) - image optimization is key to fast loading web sites.
- UX Design Versus UI Development (by Mike Hughes) - who designs and who builds and where do they overlap? Is it about data?
- Board Releases Draft Refresh of Section 508 Standards and Section 255 Guidelines (by Tim Creagan) - a major step towards WCAG 2.0 becoming a law.
- 20 Portable Applications Web Designers Should Have On Their USB Sticks (by Joel Reyes) - go get a memory stick
- Understanding the Power of Social Media with Infographics (by Paul Andrew) - some real gems there.
- Adobe expanding the accessibility of Acrobat and Flash! (by Jeff Singleton) - don't know how they relate exactly to WCAG but surely welcome to see.
- The Impossible Bloomberg Makeover (by Dominique Leca) - a great example of the kitchen-cabinet problem.
- 10 Principles of UX (by Joshua Porter) - very nice top 10 collection.
Best Practices for Accessible Frames
Posted by Michael Gaigg
Frames are hardly used anymore (thanks God) but they can be useful and a good method to organize huge sites with lots of content, e.g. document libraries, API documentation, etc.
The 508 standard has no objection against frames and screen readers can handle frames well even though it might be difficult to comprehend the structure. The following basic rules and best practices outline how one can make frames accessible:
Basic Rules
- Title frameset and frames with meaningful names (descriptive instead of location, i.e. ‘navigation’ instead of ‘left’)
- Provide an alternative (NOFRAMES tag)
Best Practices
Level 1
| Description | W3C | 508 | Example |
|---|---|---|---|
| Provide a text equivalent for every non-text element | 1.1 | a | <FRAMESET cols="50%,50%" title="...">
<FRAME src="sitenavbar.htm" ...> <FRAME src="story.htm" ...> <NOFRAMES> [<A href="sitenavbar.htm" title="...">Table of Contents</A>] [<A href="story.htm" title="...">Story</A>] </NOFRAMES> </FRAMESET> |
| Title each frame to facilitate frame identification and navigation | 12.1 | i | <FRAMESET cols="10%, 90%" title="Our library of electronic documents">
<FRAME src="nav.html" title="Navigation bar"> <FRAME src="doc.html" title="Documents"> </FRAMESET> |
Level 2
| Description | W3C | 508 | Example |
|---|---|---|---|
| Describe the purpose of frames and how frames relate to each other if it is not obvious by frame titles alone | 12.2 | i | <FRAME src="sitenavbar.htm" name="navbar" title="Sitewide navigation bar" longdesc="frameset-desc.htm#navbar">
<FRAME src="story.htm" name="story" title="Selected story - main content" longdesc="frameset-desc.htm#story"> |
Template
<frameset cols="50%,50%" title="Our library of electronic documents">
<frame src="navigation.htm" title="Navigation bar">
<frame src="start.htm" title="Main Content">
<noframes>
[<a href="navigation.htm" title="Navigation bar">Table of Contents</a>]
</noframes>
</frameset>
References
- WebAIM; Creating Accessible Frames; http://webaim.org/techniques/frames/
Section 508: WCAG 1.0 or WCAG 2.0?
Posted by Michael Gaigg
Answer
In short: WCAG 1.0, at least for the next couple of years.
Standards Compliancy - Pro's and Con's.
The Web Content Accessibility Guidelines (WCAG) 2.0 are a final Web Standard "W3C Recommendation" and offer many advantages over WCAG 1.0. Blogs like Opera Developer Network suggest to use WCAG 2.0 rather than 1.0 because "[it] is easier and clearer to use, contains test statements (known as Success Criteria), can be applied to all web technologies (and not just W3C technologies like WCAG 1.0) and comes with lots of supporting documentation".
Standards compliancy will benefit your project in many ways, from code maintenance (faster code review/debugging) and repurpose (separate content from presentation) to bandwidth (master stylesheet helps reducing size of individual pages).
On the flip-side standards add load and thus expenses to projects and developers and are controversial in many cases.
Section 508 is a US law
Philosophy aside, Section 508 is a US law that renders above discussion obsolete and needs to be taken seriously. Not directly related but still a wake-up call is Target's non-compliance with the Unruh Civil Rights Act, California Civil Code §§ 51 et seq., the Disabled Persons Act, California Civil Code §§ 54 et seq., and the Americans with Disabilities Act, 42 U.S.C. §§ 12181 et seq. which resulted in a six million dollars settlement this month. Sorry to get you down to earth so quickly.
Timeline for Section 508 to adapt WCAG 2.0
Gregg Vanderheiden:
508 is undergoing a revision over the next couple years.
The first stage of that was an Advisory committee (TEITAC) that came up with recommendations
http://www.access-board.gov/sec508/update-index.htmThe advisory committee contained several WCAG Working group members and both TEITAC and WCAG worked together to harmonize. And, though they weren't completely harmonized (since both changed a bit at the end) all comments from members to access board were to continue harmonization in further steps.
Jim Tobias:
The Access Board's advisory committee on 255/508 (TEITAC) recommended that any new regs harmonize with WCAG 2.0, and the report's own proposed provisions themselves were pretty well harmonized, as Judy Brewer, Gregg Vanderheiden, and others from WCAG were on TEITAC. Expect Access Board action in 2009. View the report here:
http://www.access-board.gov/sec508/refresh/report/
Scott Plumlee:
Short version is that the recommendation is that 508 be harmonized with WCAG 2.0. You can subscribe to updates from the Access Board (I think, I can't find the link now) at access-board.gov. If you allow 2.5 years from the turning in of the report to the actual date the new guidelines take effect, look for 2011 or so. IIRC, the 2.5 years is how long it took for 508 to really go into effect the first time, but I could be wrong.
Outlook
Don't get me wrong, W3C WAI (and myself) recommends using WCAG 2.0, instead of WCAG 1.0 but to satisfy the law one needs to comply with WCAG 1.0.
That doesn't mean your company shouldn't prepare for the transition, not at all. To help you move to WCAG 2.0, WAI currently offers the following tutorials/articles:
- How WCAG 2.0 Differs from WCAG 1.0
- Comparison of WCAG 1.0 Checkpoints to WCAG 2.0
- How to Update Your Web Site from WCAG 1.0 to WCAG 2.0
What are your experiences?
Best Practices for accessible Images
Posted by Michael Gaigg
Graphics can be of great benefit to the accessibility of a Web page by providing
- Illustrations
- Icons
- Animations
- other visual cues that aid comprehension for sighted individuals
When designing for people with disabilities too often we forget that we are not designing only for the blind. We must consider disabilities of all types. Graphics can be useful especially to individuals with certain reading disabilities, learning disabilities, attention deficit disorders, or cognitive disabilities.
Basic Rules
- Do not use color alone to convey meaning
- Choose contrast so that text is easily distinguishable from the background
- Communicate the purpose of the graphic (not its appearance) through meaningful alternative text
- When graphics require complex descriptions use the longdesc attribute, a link to an alternative page, a description in the context itself, or a “D” link
- Use empty alt text for decorative, transparent, spacer, and redundant images
- Try to limit the amount of text in graphics
- Do not use effects that flicker or produce a strobe-like effect
- Use images as backgrounds only if they do not convey important content (since it is impossible to add alt text to background images)
Best Practices
Level 1
| Description | W3C | 508 | Example |
|---|---|---|---|
| Ensure that all information conveyed with color is also available without color | 2.1 | c | Ensure that information is available through other style effects (e.g., a font effect), through context (e.g,. comprehensive text links) or through mark-up (e.g., the title attribute). |
| Until user agents allow users to control flickering, avoid causing the screen to flicker | 7.1 | j | n/a |
| Provide text equivalent for Images, graphical or animated buttons, spacers, bullets | 1.1 | a | <FORM action="..." method="post">
<INPUT type="button" alt="Click this button to verify form" value="Verify" onclick="verify()"> <INPUT type="image" name="submit" src="button.gif" alt="Submit form"> </FORM> |
Level 2
| Description | W3C | 508 | Example |
|---|---|---|---|
| Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen | 2.2 | c | For more information check the online paper about Effective Color Contrast. |
| When an appropriate markup language exists, use markup rather than images to convey information | 3.1 | n/a | Mark up complex equations with e.g. MathML. |
| Avoid causing content to blink | 7.2 | n/a | n/a |
| Avoid movement in pages | 7.3 | n/a | i.e., hide/show content or change presentation (movement and colors). |
Level 3
| Description | W3C | 508 | Example |
|---|---|---|---|
| Supplement text with graphic or auditory presentations where they will facilitate comprehension of the page | 14.2 | n/a | n/a |
References
- Arditi, Aries PhD. Effective Color Contrast. http://www.lighthouse.org/color_contrast.htm
- Ion, P., Miner, R. (editors); Mathematical Markup Language. http://www.w3.org/TR/REC-MathML/
- WebAIM; Creating Accessible Images. http://webaim.org/techniques/images/
Best Practices for accessible Tables
Posted by Michael Gaigg
The purpose of a table is to layout data. Unlike regular text, tables are generally difficult to comprehend. It takes time and effort to understand the structure, capture the data and interpret its meaning. This is even more difficult when the table is viewed and read out by a screenreader. Additional attributes are needed to relate headers with column and rows.
Tables might be used to layout content. The current recommendation for content tables is to explicitely state this purpose upfront so that users with screenreaders can avoid investigating the table's structure. Convey this meaning using the summary attribute:
<table border="0" summary="Layout table with two columns: menu and content">
Basic Rules
General:
- Use proper HTML
- Use tables for displaying tabular data
- Use block elements (e.g. DIV) and CSS for layout purposes
- Use proportional sizing rather than absolute sizing
Data Tables:
- Describe tables with a name or title (caption tag)
- Provide a summary (summary attribute)
- Designate Row and Column Headers (TH tag)
- Associate the data cells with the appropriate headers (scope & id attributes)
- Avoid spanned rows or columns (workaround: normalize table)
- Avoid tables with more than two levels of row and/or column headers
Layout Tables:
- Linearize content (literal order in the code equals the linearized reading order)
- Use the simplest table configuration possible
Best Practices
Level 1
| Description | W3C | 508 | Example |
|---|---|---|---|
| For data tables, identify row and column headers | 5.1 | (g) | <TR> <TH>Name</TH> <TH>Cups</TH> <TH abbr="Type">Type of Coffee</TH> <TH>Sugar?</TH> </TR> |
| For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells | 5.2 | (h) | <TABLE border="1"> <CAPTION>Travel Expense Report</CAPTION> <TR> <TH></TH> <TH id="header2" axis="expenses">Meals <TH id="header3" axis="expenses">Hotels <TH id="header4" axis="expenses">Transport <TD>subtotals</TD> <TR> <TH id="header6" axis="location">San Jose <TH> <TH> <TH> <TD> <TR> <TD id="header7" axis="date">25-Aug-97 <TD headers="header6 header7 header2">37.74 <TD headers="header6 header7 header3">112.00 <TD headers="header6 header7 header4">45.00 <TD> <TR> <TD id="header8" axis="date">26-Aug-97 <TD headers="header6 header8 header2">27.28 <TD headers="header6 header8 header3">112.00 <TD headers="header6 header8 header4">45.00 <TD> <TR> <TD>subtotals <TD>65.02 <TD>224.00 <TD>90.00 <TD>379.02 </TABLE> |
Level 2
No Level 2 requirements.
Level 3
| Description | W3C | 508 | Example |
|---|---|---|---|
| Provide summaries for tables | 5.5 | n/a | <TABLE summary="This table charts the number of cups of coffee ..."> |
| Provide abbreviations for header labels | 5.6 | n/a | <TABLE ...> <TH scope="col">Name</TH> <TH scope="col">Cups</TH> <TH scope="col" abbr="Type">Type of Coffee</TH> <TH scope="col">Sugar?</TH> </TABLE> |
| Provide a linear text alternative (on the current page or some other) for all tables that lay out text in parallel, word-wrapped columns | 10.3 | n/a | n/a |
References
- WebAIM; Creating Accessible Tables; http://webaim.org/techniques/tables/
Understand Web Content Accessibility Guidelines & Section 508
Posted by Michael Gaigg
So you know what Accessibility is and how it improves your ROI and why everybody benefits. Now what exactly is Section 508 and how does it correlate with W3C's Web Content Accessibility Guidelines (WCAG 1.0)? And most important, how can you create an accessible.htm that complies with these standards?
Overview: WCAG & Section 508
The main institutions involved (as shown in the illustration above) are:
- GSA (U.S. General Services Administration) represented by the IT Accessibility and Workforce (ITAW) who is the governments principal advocate and coordinator for Section 508 implementation. Other agencies and organizations may offer similar information, but ITAW is recognized as the governmentwide policy resource for Section 508.
- World Wide Web Consortium (W3C) represented by the Web Accessibility Initiative (WAI) who developed the Web Content Accessibility Guidelines 1.0 that was approved in May 1999 and is currently the stable and referenceable version.
- Users that visit websites. In the illustration I mention Government websites as the institution with the biggest need, that is because the Accessibility Guidelines are mandatory for governmental implementations.
Before I continue to explain how the WCAG relate to the Section 508 Standards it is important to get a grasp of what the respective guidelines propose and which checkpoints are included.
Checkpoints: Section 508 Standards
The purpose of Section 508 Standards is explained by Authority 29 U.S.C. 794d: “The purpose of this part is to implement section 508 of the Rehabilitation Act of 1973, as amended (29 U.S.C. 794d). Section 508 requires that when Federal agencies develop, procure, maintain, or use electronic and information technology, Federal employees with disabilities have access to and use of information and data that is comparable to the access and use by Federal employees who are not individuals with disabilities, unless an undue burden would be imposed on the agency. Section 508 also requires that individuals with disabilities, who are members of the public seeking information or services from a Federal agency, have access to and use of information and data that is comparable to that provided to the public who are not individuals with disabilities, unless an undue burden would be imposed on the agency.”
| Checkpoint | Description | 508 |
|---|---|---|
| Non-text elements | A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content). | (a) |
| Multimedia presentation | Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. | (b) |
| Color | Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. | (c) |
| Style Sheets | Documents shall be organized so they are readable without requiring an associated style sheet. | (d) |
| Server-side image maps | Redundant text links shall be provided for each active region of a server-side image map. | (e) |
| Client-side image maps | Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape. | (f) |
| Data tables | Row and column headers shall be identified for data tables. | (g) |
| Markup & tables | Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers. | (h) |
| Frames | Frames shall be titled with text that facilitates frame identification and navigation. | (i) |
| Flickering | Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz. | (j) |
| Text-only page | A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes. | (k) |
| Scripting languages | When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology. | (l) |
| Applets, plug-ins or other applications | When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l). | (m) |
| Electronic forms | 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. | (n) |
| Navigation links | A method shall be provided that permits users to skip repetitive navigation links. | (o) |
| Timed response | When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required. | (p) |
Checkpoints: Web Content Accessibility Guidelines
The guidelines as described by the W3C explain how to make Web content accessible to people with disabilities. “The guidelines are intended for all Web content developers (page authors and site designers) and for developers of authoring tools. The primary goal of these guidelines is to promote accessibility. However, following them will also make Web content more available to all users, whatever user agent they are using (e.g., desktop browser, voice browser, mobile phone, automobile-based personal computer, etc.) or constraints they may be operating under (e.g., noisy surroundings, under- or over-illuminated rooms, in a hands-free environment, etc.). Following these guidelines will also help people find information on the Web more quickly. These guidelines do not discourage content developers from using images, video, etc., but rather explain how to make multimedia content more accessible to a wide audience.”
| # | Description |
|---|---|
| 01. | Provide equivalent alternatives to auditory and visual content. |
| 02. | Don't rely on color alone. |
| 03. | Use markup and style sheets and do so properly. |
| 04. | Clarify natural language usage. |
| 05. | Create tables that transform gracefully. |
| 06. | Ensure that pages featuring new technologies transform gracefully. |
| 07. | Ensure user control of time-sensitive content changes. |
| 08. | Ensure direct accessibility of embedded user interfaces. |
| 09. | Design for device-independence. |
| 10. | Use interim solutions. |
| 11. | Use W3C technologies and guidelines. |
| 12. | Provide context and orientation information. |
| 13. | Provide clear navigation mechanisms. |
| 14. | Ensure that documents are clear and simple. |
Considerations when implementing for Section 508 Compliancy
Section 508 has three Levels of priority: Level 1, Level 2 and Level 3. WCAG has also three levels of priority, but they are slightly different and named A, AA, AAA. This is an important distinction especially when testing with automated tools like Bobby because - and be aware of this - Level A compliancy NOT EQUALS Level 1 compliancy. Here is why:
When the ITAW handed Paragraph 1194.22 to the WAI (step 1) and after the WCAG 1.0 were completed and handed back to the ITAW (step 2) the Access Board released a Note to §1194.22:
- The Board interprets paragraphs (a) through (k) of this section as consistent with the following priority 1 Checkpoints of the Web Content Accessibility Guidelines 1.0 (WCAG 1.0) (May 5, 1999) published by the Web Accessibility Initiative of the World Wide Web Consortium:
Section 1194.22 Paragraph WCAG 1.0 Checkpoint (a) 1.1 (b) 1.4 (c) 2.1 (d) 6.1 (e) 1.2 (f) 9.1 (g) 5.1 (h) 5.2 (i) 12.1 (j) 7.1 (k) 11.4 - Paragraphs (l), (m), (n), (o), and (p) of this section are different from WCAG 1.0. Web pages that conform to WCAG 1.0, level A (i.e., all priority 1 checkpoints) must also meet paragraphs (l), (m), (n), (o), and (p) of this section to comply with this section.
Item 2 is especially important because it means that a discrepancy between WCAG and Section 508 exists that requires a Section 508 Level 1 conformant site has to meet more than just Level A of the WCAG.
Step 3 and step 4 complete the process to create accessible.htm - it is basically up to you to apply the guidelines and produce accessible code.
Best Practices for Accessiblity
Follow my Best Practices blog entries to get more in-depth knowledge on what exactly you need to do to meet all the Section 508 compliancy checkpoints as outlined by the WCAG. Blog entries available so far:
References
- Section 508 Standards; Authority: 29 U.S.C. 794d; http://www.section508.gov/index.cfm?FuseAction=Content&ID=12
- Chisholm, W., Vanderheiden, G., Jacobs, I. (editors); Web Content Accessibility Guidelines 1.0; http://www.w3.org/TR/WCAG10/
Best Practices for accessible Links
Posted by Michael Gaigg
It is essential that users can find, identify, and comprehend hypertext links quickly. Even though there are no Level 1 (A) checkpoints associated with links it is pretty easy to fulfill Level 2 and even Level 3. It's definitely worthwhile the little effort with the added benefit that e.g. most browsers render the title attribute as a tooltip.
Basic Rules
See also my Design Guidelines for Links.
- Contrast link text color and regular text color
- Underline link text
- Ensure link text is descriptive of its destination
- Make visited links change color
- Limit link text to a maximum of four words
- Place important words at the front of link text
- Minimize amount of links to seven (excluding the menu) unless they are presented in a clear structure
- Use meaningful pathnames when creating directory structure
Best Practices
Level 1
No Level 1 requirements.
Level 2
| Checkpoint | Description | W3C | 508 | Example |
|---|---|---|---|---|
| Links | Clearly identify the target of each link | 13.1 | n/a | <A href="my-doc.html">My document is available in HTML</A>,<A href="my-doc.pdf" title="My document in PDF">PDF</A>,
<A href="my-doc.txt" title="My document in text">plain text</A> |
Level 3
| Checkpoint | Description | W3C | 508 | Example |
|---|---|---|---|---|
| Links | Create a logical tab order | 9.4 | n/a | <A tabindex="2" href="link2.txt"">Link 2</A><A tabindex="1" href="link1.txt">Link 1</A>
<A tabindex="3" href="link3.txt">Link 3</A> |
| Links | Provide keyboard shortcuts to important links | 9.5 | n/a | <A accesskey="2" href="link2.txt"">Link 2</A><A accesskey="1" href="link1.txt">Link 1</A>
<A accesskey="3" href="link3.txt">Link 3</A> |
| Links | Include non-link, printable characters (surrounded by spaces) between adjacent links | 10.5 | n/a | [<A href="a.htm">Link A</A>] [<A href="b.html">Link B</A>] or<A href="a.htm">Link A</A> | <A href="b.html">Link B</A> |
Templates
Find out more about <a title="Michael Gaigg IT Solutions Webpage" href="http://www.mgitsolutions.com/">IT Solutions</a>
References
- Webcredible. Writing effective link text. http://www.webcredible.co.uk/user-friendly-resources/web-usability/effective-link-text.shtml
Best Practices for accessible Content
Posted by Michael Gaigg
People rarely read Web pages, they scan the page! As a result, Web pages have to follow Design Guidelines for Content that enable them to quickly identify headings, titles, links and other important elements to orient themselves. What else has to be done to be Section 508 compliant?
Basic Rules
- Don’t rely on color alone
- Identify the language used throughout the document and identify changes
- Use correct markup to emphasize important content
- Be clear and precise in the choice of wording and language
Best Practices
Level 1
| Checkpoint | Description | W3C | 508 | Example |
|---|---|---|---|---|
| Color | Ensure that all information conveyed with color is also available without color | 2.1 | (c) | Ensure that information is available through other style effects (e.g., a font effect), through context (e.g,. comprehensive text links) or through mark-up (e.g., the title attribute). |
| Language | Clearly identify changes in the natural language of a document's text and any text equivalents | 4.1 | n/a | And with a certain <SPAN lang="fr">je ne sais quoi</SPAN>, she entered both the room, and his life, forever. <Q>My name is Natasha,</Q> she said. <Q lang="it">Piacere,</Q> he replied in impeccable Italian, locking the door. |
| Language | Use the clearest and simplest language appropriate for a site's content | 14.1 | n/a | n/a |
Level 2
| Checkpoint | Description | W3C | 508 | Example |
|---|---|---|---|---|
| Blinking | Avoid causing content to blink | 7.2 | n/a | n/a |
| Movement | Avoid movement in pages | 7.3 | n/a | i.e., hide/show content or change presentation (movement and colors). |
Level 3
| Checkpoint | Description | W3C | 508 | Example |
|---|---|---|---|---|
| Text | Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen | 2.2 | (c) | For more information check the online paper about "Effective Color Contrast" at lighthouse.org (http://www.lighthouse.org/accessibility/effective-color-contrast/). |
| Abbreviations | Specify the expansion of each abbreviation in a document where it first occurs | 4.2 | n/a | <ABBR title="social security number">SS#</ABBR> or ASCII art:<ABBR title="smiley in ASCII art">:-)</ABBR> |
| Acronyms | Specify the expansion of each acronym in a document where it first occurs | 4.2 | n/a | Welcome to the <ACRONYM title="World Wide Web">WWW</ACRONYM> |
| Language | Identify the primary natural language of a document | 4.3 | n/a | <HTML lang="en"> |
Templates
<HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<ABBR title="social security number">SS#</ABBR>
<ACRONYM title="Geographical Information System">GIS</ACRONYM>
References
- ISO 639.2 Registration Authority (2004, 10). Codes for the Representation of Names of Languages. http://www.loc.gov/standards/iso639-2/englangn.html
- Aries Arditi, PhD. Effective Color Contrast. http://www.lighthouse.org/accessibility/effective-color-contrast/
What is Accessibility?
Posted by Michael Gaigg
The purpose of web pages is to interactively display information. The Hypertext Markup Language was designed to encode meaning rather than appearance. Therefore
Accessibility is the extent of access to information on a webpage through user agents (e.g. browsers, screen readers,…) which translate HTML into hypertext structures (links, headers, tables, forms,…) in order to give the users a surplus value.
“As long as a page is coded for meaning, it is possible for alternative browsers to present that meaning in ways that are optimized for the abilities of individual users and thus facilitate the use of the Web by disabled users. Those disabilities are:
- Visual Disabilities
- Auditory Disabilities
- Motor Disabilities
- Cognitive Disabilities” [NIELSEN96]
Since Web pages are highly visual and interactive the most affected groups as far as accessibility is concerned are the visual disabled, i.e. blind users or users with other visual disabilities like color blindness and users with motor disabilities using alternative input devices or sometimes even just the keyboard instead of the mouse.
Everybody benefits!
In the same way a sidewalk curb is necessary for wheelchair accessibility it also benefits parents with strollers, children with rollerblades and elderly persons trying to cross the street. The same is true for web pages. Designing for accessiblity will not only benefit users with disabilities but will also increase your:
- Market Share Benefits
- SEO (search engine optimization)
- Repurpose
- Literacy
- Bandwidth
- Technical Efficiency Benefits
- Maintenance
- Server Bandwidth
Recent Posts
- 500+ Free Stunning PC Icons August 31, 2010
- Highlights of Week 32/2010 August 16, 2010
- How to use the Google Font API August 10, 2010
- Secret of Pixar’s Success [Link] August 6, 2010
- Esri listens to their Users and changes Pronunciation of its Name August 3, 2010
- Highlights of Week 30/2010 August 2, 2010
Categories
Accessibility (13)
- Code Samples & Tips (4)
- Design Guidelines (11)
- Go figure (7)
- Good News (11)
- Here and there (11)
- This Week’s Highlights (23)
- Usability & UCD (14)
- Web Design (13)
Popular Posts
- Make it easy for your customers to throw money at you!
- Web Content Accessiblity Guidelines (WCAG) 2.0: Overview and Structure
- Section 508: WCAG 1.0 or WCAG 2.0?
- Go figure: 10 Comic Strips that have Something in Common
- Powerpoint Wireframe Stencils as Free Download
People that inspire me
- Björn Seibert
- Boxes and Arrows
- Bruce Temkin
- Christian Heilmann
- David Leggett
- Gez Lemon
- Hannes Schmiderer
- Harry Brignull
- Henny Swan
- Jared Smith
- Jared Spool
- John Rhodes
- Joshua Porter
- Kel Smith
- Scott Berkun
- The Access Pond
Tags
What I'm Doing...
- Top 20 Wireframe Tools http://t.co/zRBd0W0 via @garmahis 1 week ago
- RT @wpzoom 500 Free Icons: WPZOOM Social Networking Icon Set http://bit.ly/aEGdUJ 2 weeks ago
- RT @esriuc GIS: Designing Our Future. The concept of GeoDesign is really taking off, keep an eye out. http://bit.ly/9TioWQ 3 weeks ago
- 1400 super cool web icons by FatCow: http://bit.ly/ctskcU 3 weeks ago
- [JOB OPENING] User Interface Engineer, http://bit.ly/ui-engineer-position 2010-07-30
- More updates...
Posting tweet...