The ADA is currently being updated. It will most likely require all public and private entities to make their Web sites adhere to the equivalent of WCAG 2 Level AA conformance.
77 |
The Americans with Disabilities Act of 1990 guarantees certain rights to people with disabilities in three main areas.
78 |
79 |
Title I: Employment
80 |
Title II: Public entities, including state and local government and their departments and agencies
81 |
Title III: Places of public accommodations and private entities
82 |
83 |
Currently the ADA does not define a technical standard for determining if something is accessible or not. The ADA simply ensures all users can have equitable access. They are currently considering adopting technical standards equivalent to WCAG 2 Level AA conformance.
84 |
Title I of the ADA ensures that people with disabilities will not be discriminated against in the work place and will receive accommodations to perform their jobs when necessary. Web accessibility comes into play here because if you have an employee who has a disability and must interact with the Web or other electronic content as part of their job, you as the employer must provide the level of access that the person needs in order to perform their job.
85 |
Title II of the ADA ensures that people with disabilities will not be discriminated against in programs run by State and local governments. If you are a school or a government, the Web resources that you make available to participants in your program or to the general public must be accessible.
86 |
Title III of the ADA ensures that people with disabilities will not be discriminated against in places of public accommodation, such as brick-and-mortar businesses. There are mixed rulings from different US Courts of Appeals as to whether a Web site constitutes a place of public accommodation since it does not exist as a physical space. As a result, in some parts of the country Title III requirements apply to private businesses and other places of public accommodations, and in other parts of the county they don’t.
87 |
So does Title III apply to your part of the country? That’s the wrong question to ask given recent statements by Federal agencies and actions they are currently taking, which are outlined in the following sections. If you do want to know the details of the applicability of Title III to places of public accommodation in your state, please contact your local U.S. Court of Appeals or a good lawyer.
Any time you dynamically add, modify, or delete content from a Web page, you need to notify the user. The ARIA specification provides mechanisms to do this, called ARIA Live Regions. There are different ways to implement this depending on the type of modification being made.
77 |
78 |
An alert notification where the alert message is delivered through a modal window.
79 |
A timer such as a clock or a countdown timer.
80 |
A status indicator for a Web application, indicating the general status of an application.
81 |
A marquee of scrolling information, such as a scrolling news ticker.
82 |
A running log of information, such as a chat room.
83 |
A generic live region where content is updating.
84 |
85 |
Also with ARIA live regions is the ability to set how quickly the changes will be presented to the user.
86 |
87 |
aria-live="assertive": The user will be notified immediately.
88 |
aria-live="polite": The user will be notified the next time they are idle.
89 |
aria-live="off": The user will not be notified of the change.
90 |
91 |
All of the ARIA Live implementations above come with implied verbosity levels, except for the generic live region. For the implied verbosity, you do not need to assign a verbosity level unless you want to override the default value.
There are a lot of things we take for granted when designing and viewing Web pages. For instance, browsers are very forgiving of bad code, and they can make a page with bad code look better than it should based solely on the code. Can all browsers and all assistive technologies handle bad code as gracefully? We usually assume that the viewers to our Web site will understand the language it's in, and we assume that if they use an assistive technology that it will be able to easily understand the language too. What if a user whose screen reader is set to read Spanish comes to an English Web page? How will the screen reader know how to speak the words?
77 |
The point is there are some assumptions we often make that we probably should not make because we don't know who will be accessing our site or how they will be accessing it.
You need to ensure that your foreground and background colors have enough contrast so that users with visual disabilities can read your content. This is true for the main text of your document, menus and navigation, and any hover/focus effects you apply to elements.
78 |
Ensuring you have enough color contrast for all users is a complex subject when you try to consider all of the different types of visual disabilities. The W3C has defined a formula to determine if two colors have enough contrast to ensure that most people with visual disabilities will be able to access the content.
79 |
You will want to achieve at least AA conformance on your pages. AAA performance is ideal, but it can be difficult to use a robust color palette and achieve AAA conformance.
80 |
There are several tools available to help you determine the color contrast.
It is important to provide users multiple ways of discovering content on your site. Some users may start at your home page and see where the links take them, while others may use your menu structure, while still others will use a search feature.
77 |
You need to provide at least two ways to navigate your site. The possibilities include the following.
78 |
79 |
Providing a menu system to allow users to navigate to major sections of your site.
80 |
Providing links on each page that explicitly take you to the next and previous page within your site.
81 |
Providing a set of links at the bottom of each page that will take you to pages within your site that are related to it, like a collection of "Related Resources".
82 |
Providing a site map.
83 |
Providing a search function.
84 |
Providing a table of contents for each page that links to the major sections of the page. This is different than a site-wide table of contents.
85 |
Providing links to all of the other pages of your site from each page. This is only suitable for small sites.
86 |
Linking to all of the pages on the site from the home page.
122 |
123 |
--------------------------------------------------------------------------------
/link-text-length.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Link text should not be too long
5 |
6 |
7 |
8 | Skip To Main Content
20 |
The link text should not be too long
21 |
86 |
93 |
94 |
95 |
The link text is short enough to be quickly read, descriptive enough to know where it will take you, and is found in a context that tells you want the link does
96 |
Source Code
97 |
<p>View examples, watch tutorials, download tools, and check your Web site's accessibility at the <a href="http://accessibility.oit.ncsu.edu">NC State IT Accessibility Web site</a></p>
The link is too long to be quickly read by screen readers.
102 |
Source Code
103 |
<p><a href="http://accessibility.oit.ncsu.edu">View examples, watch tutorials, download tools, and check your Web site's accessibility at the NC State IT Accessibility Web site</a></p>
108 |
109 |
--------------------------------------------------------------------------------
/link-underline.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Do not remove the underline from links
5 |
6 |
7 |
8 | Skip To Main Content
20 |
Do not remove the underline from links
21 |
86 |
93 |
In general you do not want to remove the underline formatting from links. Underlining links is the principal way users quickly identify clickable links on your page. There are some cases, like links in menus, where it may be appropriate to remove the underline styling.
94 |
95 |
96 |
Removing the underline from links makes them difficult for users to visually find on the page.
It is important to use list elements when denoting a list of items. When sighted users view a set of items like the following, it is easily to visually discern that the relationship that exists between the items.
96 |
97 |
Using special characters to create a list
98 |
Source Code
99 |
* milk
100 | * bread
101 | * butter
102 | * flour
103 |
Implementation
104 |
* milk
105 | * bread
106 | * butter
107 | * flour
108 |
109 |
110 |
111 |
However, when a screen reader user heard this, they will hear "star milk, star bread, star butter, star flour." To explicitly define the relationship these items have to one another, use the <ul>, <ol>, and <li> elements.
This is the main content. In this example you will note that the "Skip to main content" link appears when I tab through the page. This allows keyboard-only users, in addition to screen reader users, an easy way to skip repetitive navigation. The key components to implementing this are
45 |
46 |
provide a link at the top of the page that says "skip to main content"
47 |
have it link to an internal ID further down in the page where the main content begins.
48 |
put a tabindex="-1" attribute on the target ID to add support for Chrome and IE
49 |
use CSS :focus and :activate to make the skip link visible when the user tabs to it
HTML and its related technologies, like XHTML and CSS, offer the most flexibility in terms of support on different devices and platforms and support for people with disabilities.
77 |
78 |
It is viewable on a multitude of devices.
79 |
It provides an easy way to create rich semantics to describe Web pages.
80 |
It can be transformed into other formats to meet people's individual needs.
81 |
Content can readily be made accessible.
82 |
Even though HTML offers the highest level of accessibility support, there are certain technologies that must be implemented with care to ensure accessibility.
83 |
Some technologies such as JavaScript can be made quite accessible, but additional planning is needed.
84 |
Newer HTML technologies such as the canvas element have a number of accessibility challenges that are not fully solved.
85 |
86 |
Several applications have options to "Save as HTML" or "Publish to Web". Accessibility support in features like this is shaky at best. In general these export and conversion options should be avoided in favor of using authoring tools designed to create accessible HTML.
87 |
Content Management Systems (CMS) help you manage large HTML sites. These tools will automatically generate a lot of your HTML code for you. Some of these systems create accessible HTML content and some do not. In general Drupal and WordPress can produce some very accessible content, however, even in these systems, additional work will need to be done to ensure the content is accessible in all cases.
88 |
Techniques for creating HTML accessible content are given later in this guide.
Office documents vary in terms of how much accessibility support they provide. Documents such as Microsoft Office documents can be made quite accessible. There are techniques to provide semantic structure to the pages, like headings, and to also add in extra accessibility information, like alternative textual descriptions, when needed. Office documents have the disadvantage in that they frequently require a third-party application to view.
77 |
Since many PDF documents start as office documents, sometimes it is easier and more accessible to simply provide users the original office document instead of the PDF document.
78 |
Some office documents, such as Google Docs, still provide significant accessibility problems, so in terms of accessibility, these products should be avoided as the sole means of conveying information.
88 |
89 |
--------------------------------------------------------------------------------
/technology-overview.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Overview of Technologies and Formats
5 |
6 |
7 |
8 | Skip To Main Content
9 |
Overview of Technologies and Formats
10 |
75 |
76 |
Different technologies and document formats offer varying levels of accessibility and ease of access for all users. Some issues to consider for each technology and document format are the following.
77 |
78 |
How much accessibility support is built-in?
79 |
How many different types of devices and platforms support it?
80 |
How easy is it to make the content accessible and maintain its accessibility over time?
81 |
82 |
For content that is primarily text and graphics based, the following list orders the most common file formats in terms of their accessibility support and maintenance from the most accessible to the least accessible.
83 |
84 |
HTML
85 |
Office Documents
86 |
PDF
87 |
88 |
Note: You don't have to provide your content in a single format. You do have the option of providing content in multiple formats and allowing the user to choose which format they would like to interact with. Some formats are more accessible than others and this might help your users. Doing this requires extra work and maintenance on your part, but that might be a trade off you are willing to make in order to achieve a certain goal.
89 |
Techniques for creating technology-specific accessible content are given later in this guide.
90 |
91 |
92 |
--------------------------------------------------------------------------------
/technology-pdf.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | PDF
5 |
6 |
7 |
8 | Skip To Main Content
9 |
PDF
10 |
75 |
76 |
PDF files are popular because they give the author exact control over the look and feel of a document, regardless of the platform on which the end user is viewing the content. Also there are numerous PDF creation tools that integrate with almost any application.
77 |
However, PDF documents are very difficult to make accessible. Only a few applications will make a PDF accessible with no additional work. Making a PDF file accessible usually involves using tools in Adobe Acrobat Professional to add accessibility information. The tools are cumbersome and clunky and usually require a significant amount of effort to use. Additionally, if you invest all of the work in making a PDF file accessible, if you later need to go back to your original source document to make changes and create a new PDF file, all of your previous accessibility retrofitting will be lost.
78 |
Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools. The second PDF you have to make accessible is a real pain.
79 |
Some applications that do offer some native accessibility support for creating PDFs without additional work in Adobe Acrobat are
80 |
81 |
Microsoft Word, but only under limited circumstances. The document needs to be text-only, you need to use Word's headings, and it has to be authored from a Windows computer.
82 |
Adobe InDesign, but careful planning from the very beginning must be made in order to ensure the PDF is accessible.
83 |
84 |
While PDF files are viewable on a large range of products, they also bring up the issue of is it better to provide a file the user has to download or should it all be available online. If the page can be rendered as HTML, it doesn't require a download and it viewable on an even wider range of products.
85 |
When possible, PDF files should be avoided because of the lack of support in easily creating and maintaining accessible documents. If you need to use a PDF, be sure to plan thoroughly to ensure that your document can be made as accessible as possible.
86 |
Here is a demonstration of how a screen reader experiences an untagged PDF.
Within HTML documents there are additional third-party applications or formats that can provide rich content. The three most popular are
77 |
78 |
Video and Audio
79 |
Flash
80 |
Sliverlight
81 |
Java
82 |
83 |
84 | Video and audio can be made quite accessible. Usually what is required is you need to provide
85 |
86 |
A synchronized transcript (captions) for video
87 |
A transcript for audio
88 |
A media player that people with disabilities can interact with
89 |
90 |
Flash, Silverlight, and Java can be made accessible, however, it involves a set of techniques that most developers of these technologies don't know or don't follow. It will take extra work to make the content accessible. Additionally, Flash and Silverlight will only be accessible to several user groups when they use Internet Explorer. Often these technologies are used to provide cross-platform compatibility. There are several newer techniques with HTML and ARIA that might be able to accomplish the same goal as Flash, Silverlight, and Java.
106 |
107 |
--------------------------------------------------------------------------------
/understand-nature.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Overview: Understanding the nature of what is required to design accessibly
5 |
6 |
7 |
8 | Skip To Main Content
9 |
Overview: Understanding the nature of what is required to design accessibly
10 |
76 |
77 |
To design something so that it is accessible means something specific. It means can all people, regardless of any impairment, interact with your content. For instance, how does someone who cannot use a mouse interact with your Web page? What if they cannot see? Does your site accommodate older populations and the issues they face?
78 |
To help answer those questions there are laws and standards which define:
79 |
80 |
whose sites have to be accessible
81 |
what type of content has to be accessible
82 |
who needs to be able to access it
83 |
how you determine what is and what is not accessible
It is important to have valid code on your Web pages. Web browsers are very forgiving with bad code, but that does not guarantee that your what you meant will actually be represented accurately by the browser and to assistive technologies.
77 |
Just as a browser transforms your HTML code into a graphical Web page for the user, assistive technologies also transform your Web page into something that the assistive technology user needs. Your page might be transformed into an audio format or a braille format for visually impaired users. Those assistive technologies might not deal as well with coding errors as a browser does, so it is important to have valid code.
78 |
Assistive technologies interpret Web page through various mechanisms. Some will rely on the browser to construct the DOM and it will interact directly with the browser to get information. Others will communicate directly with the operating system and whatever information the browser passes to it. Other still can take the raw HTML and build the page itself.
79 |
To ensure you have valid code, simply run your code through a code validator, like the W3C Code Validator. There are many other tools available that incorporate the same test suite as the W3C Validator.
80 |
81 |
Note: ARIA attributes will be marked as errors in some Web pages like pre-HTML5 pages. ARIA attributes are fine to use in pre-HTML5 documents. If these errors are the only ones you receive from the validator, your page is fine. ARIA attributes should not be left out simply because they do not validate - they offer a huge benefit for accessibility and browsers know how to handle the attributes.
The Web Content Accessibility Guidelines 2.0 (WCAG 2.0) are a set of standards defines by the W3C that define how to make Web content more accessible to people with disabilities. All of the accessibility work of the W3C is housed under the Web Accessibility Initiative (WAI). WCAG 2.0 defines four principles which provide the foundation for Web accessibility.
77 |
78 |
Perceivable - Information and user interface components must be presented to users in ways that they can perceive, regardless of the user’s functional impairment
79 |
Operable - user interface components and navigation must be operable, regardless of the assistive technology used to interact with the interface
80 |
Understandable - information and the operation of the user interface must be predictable and understandable to the user
81 |
Robust - content must be robust enough to be able to be transformed and interpreted by a wide variety of user agents, like assistive technologies
82 |
83 |
In addition to the principles there are a set of guidelines which expand the principles by delineating a set of goals content creators should have in making their content accessible. The guidelines are not themselves testable, but rather a set of “Success Criteria” are given that are testable. The Success Criteria have three different conformance levels - A, AA, and AAA, with AAA being the most accessible. Additionally there are “Sufficient and Advisory Techniques” that demonstrate coding techniques.
84 |
Further, there are a number of techniques and guidelines in addition to WCAG 2.0, such as how to make rich internet applications accessible (ARIA), how user agents like browsers should be made accessible, and more. All of this information is available from the Web Accessibility Initiative.
85 |
The Web Content Accessibility Guidelines 2.0 (WCAG 2.0) is a rich and complex standard. Sometimes it can be difficult to understand all aspects of WCAG 2.0. This guide is largely based on the work surrounding WCAG 2.0, however, it presents it in a more approachable manner for those newer to Web accessibility. Additionally, some of the additional techniques in the ARIA suite are presented here too.
86 |
87 |
88 |
89 |
90 |
--------------------------------------------------------------------------------
/what-accessible-means.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | What "accessible" means
5 |
6 |
7 |
8 | Skip To Main Content
9 |
What "accessible" means
10 |
75 |
76 |
To understand what "accessible" means it’s helpful to first look at a broader term that encompasses much of accessibility - universal design.
77 |
Universal Design is the design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design.
Ron Mace, Center for Universal Design, NC State University
78 |
Basically, universal design means that as many people as possible will be able to use our products without the user having to do any extra work or jump through any extra hoops.
79 |
The history of accessibility for people with disabilities is full of hoop jumping and often falling flat on their faces. Special arrangements are constantly needing to be made in order for people with certain disabilities to interact with things many of us take for granted. One of the great promises of the Web is that through technology, people with disabilities can often fully engage with an environment as effectively as people without disabilities. The advances in assistive technologies - technologies people with disabilities use to compensate for their impairment - have made this a reality, and often no special arrangement has to be made to allow them to do so.
80 |
When something is accessible, it means that user can interact with your Web page with any assistive technology they may use, such as the following.
81 |
82 |
screen reading software which reads the page to the user
83 |
magnification software that enlarges the screen
84 |
speech recognition software that allows users to control your page with voice commands
85 |
alternative input devices that mimic a standard keyboard
86 |
refreshable braille displays which transform the content into braille
87 |
88 |
In order to make all of this work careful planning must be made when designing electronic content. While assistive technologies have made significant advances, they cannot perform magic. There are standards defined that tell developers how things need to be created in order to work with assistive technologies, and they tell the assistive technology vendors what to expect so they can build their devices to handle the content.
89 |
These standards are not just for people with disabilities. These are the same standards promoted by international organizations to help define a common language for Web technologies so that all of our browsers, Web pages, and Web applications can work together.
Using the ID attribute to make an internal link
Using the name attribute to make an internal link