ADA - OVERVIEW AND GUIDELINE

The Americans with Disabilities Act (ADA) is one of America’s most comprehensive pieces of civil rights legislation that prohibits discrimination and guarantees that people with disabilities have the same opportunities as everyone else to participate in the mainstream of American life – to enjoy employment opportunities, to purchase goods and services, and to participate in State and local government programs and services.

Accessibility is considered for the below cases:

Web Accessibility:

The Web Content Accessibility Guidelines, often abbreviated to WCAG, are a series of guidelines for improving web accessibility. Produced by the World Wide Web Consortium (W3C), the WCAG is the best means of making your website useful to all of your users. Although they are not an all-inclusive list of issues facing web users with disabilities, they are internationally recognized and adopted standards. The guidelines explain how to solve many of the problems that your users with disabilities face.

Mobile Accessibility:

It refers to making websites and applications more accessible to people with disabilities when they are using mobile phones and other devices. It addresses a wide range of issues like:

·??????touch-screens

·??????small screen sizes

·??????different input modalities, including voice and 3D touch-enabled by pressure sensors

·??????device use in a different setting, such as bright sunlight

1.1 Purpose

The purpose of this document is to give a detailed description of the accessibility testing, its tools, and its guidelines.

2. ADA Guidelines

The guidelines and Success Criteria are organized around the following four principles, which lay the foundation necessary for anyone to access and use Web content. Anyone who wants to use the Web must have content that is

2.1 Perceivable

Information and user interface elements must be presentable to users in ways they can recognize.

Examples:

o Placing an alt-text tag on an image

o Alternative options for CAPTCHA

o Providing captions for all media content

2.2 Operable

User interface components and navigation must be operable.

Examples:

o The user can navigate through the site using only their keyboard

o The user has the ability to pause scrolling information

o Your web pages are titled with a topic or purpose

2.3 Understandable

Information and the operation of the user interface must be understandable (The content or operation cannot be beyond their understanding)

Examples:

o Your website navigation remains consistent throughout the site

o You provide instructions for all user input fields

o A user is able to confirm their financial transaction before submitting an order

2.4 Robust

Content must be robust enough that it can be interpreted easily by a wide variety of user agents, including assistive technologies

Examples:

o Your HTML documents include start and end tags and do not contain duplicate attributes

o A user can programmatically determine the name and role of a user interface form

WCAG 2.0 designated three levels of conformance:

? Level A - The lowest

? Level AA - The medium

? Level AAA - The highest

The lowest level enables access to the webpages and the highest level enables their usability

3. Detail Guidelines

1.1.1 Non-text Content (Level A)

1. All images, form image buttons, and image map hot spots have appropriate, equivalent alternative text.

2. Images that do not convey content, are decorative, or contain content that is already conveyed in the text are given null alt text (alt="") or implemented using CSS. Using null alt text and no title attribute on img elements for images that assistive technology should ignore.

3. All linked images have descriptive alternative text.

4. Equivalent alternatives to complex images are provided in context or on a separate (linked and/or referenced via longdesc) page.

5. Form buttons have a descriptive value.

6. Form inputs have associated text labels.

7. Embedded multimedia is identified via accessible text.

8. Frames are appropriately titled.

2.4.1.1 1.3.1 Info and Relationships (Level A)

9. Semantic markup is used to designate headings (<h1>), lists (<ul>, <ol>, and <dl>), emphasized or special text (<strong>, <code>, <abbr>, <blockquote>, for example), etc. Semantic markup is used appropriately.

10. Tables are used for tabular data. Where necessary, data cells are associated with their headers. Data table captions and summaries are used where appropriate.

11. Text labels are associated with form input elements. Related form elements are grouped with fieldset/legend.

2.4.1.2 1.3.2 Meaningful Sequence (Level A)

12. The reading and navigation order (determined by DOM order) is logical and intuitive for screen readers.

2.4.1.3 1.3.3 Sensory Characteristics (Level A)

13. Instructions do not rely upon shape, size, or visual location (e.g., "Click the square icon to continue" or "Instructions are in the right-hand column").

14. Instructions do not rely upon sound (e.g., "A beeping sound indicates you may continue.").

2.4.1.4 1.4.1 Use of Color (Level A)

15. Color is not used as the sole method of conveying content or distinguishing visual elements.

16. Color alone is not used to distinguish links from surrounding text unless the luminance contrast between the link and the surrounding text is at least 3:1 and an additional differentiation (e.g., it becomes underlined) is provided when the link is hovered over or receives focus. The intent of this technique is to provide a redundant visual cue for users who may not be able to discern a difference in text color.

2.4.1.5 1.4.3 Contrast (Minimum) (Level AA)

17. Ensure to have a contrast ratio of at least 4.5:1 between text (and images of text) and background behind the text. Intent is to make sure that users can read text that is presented over a background.

*DESIGN*

18. Ensure that users are allowed to override foreground, background color specified in the application through user-agent settings.

19. Large text - at least 18 point (typically 24px) or 14 point (typically 18.66px) bold has a contrast ratio of at least 3:1. *DESIGN*

2.4.1.6 1.4.4 Resize text (Level AA)

20. The page is readable and functional when the text size is doubled.

21. Ensuring there is no loss of content or functionality when text resizes and text containers do not change their width.

22. Zoom content to 200% and check if content and functionality is available and readable.

23. Using CSS to control visual presentation of text.

2.4.1.7 1.4.5 Images of Text (Level AA)

24. If the same visual presentation can be made using text alone, an image is not used to present that text.

*DESIGN*

25. Separating information and structure from presentation to enable different presentations.

*Operable* - Interface forms, controls, and navigation are operable

2.4.1.8 2.1.1 Keyboard (Level A)

1. All page functionality is available using a keyboard unless the functionality cannot be achieved. Eg. Freehand drawing.

2. Provide event handlers for keyboard-specific and mouse-specific events with code that has a scripting function associated with an event. Using both keyboard-specific and mouse-specific events together ensures that content can be operated by a wide range of devices.

3. Page-specified shortcut keys and access keys (access key should typically be avoided) do not conflict with existing browser and screen reader shortcuts.

2.4.1.9 2.1.2 No Keyboard Trap (Level A)

4. Keyboard focus is never locked or trapped at one particular page element. The user can navigate to and from all navigable page elements using only a keyboard and achieve the functionality desired.

2.4.1.102.4.1 Bypass Blocks (Level A)

5. Bypass blocks of content that are repeated on multiple Web pages. One option is to provide an expandable and collapsible menu or another option is to provide links to skip the content and move to the main functionality.

6. If a page uses frames and the frames are appropriately titled, this is a sufficient technique for bypassing individual frames.

2.4.1.112.4.2 Page Titled (Level A)

7. The web page has a descriptive and informative page title.

2.4.1.122.4.3 Focus Order (Level A)

8. The navigation order of links, form elements, etc. is logical and intuitive. Eg. Using tabindex to specify ?default and alternate focus order.

2.4.1.132.4.4 Link Purpose (In Context) (Level A)

9. The purpose of each link (or form image button or image map hotspot) can be determined from the link text alone, or from the link text and its context (e.g., surrounding paragraph, list item, table cell, or table headers).

10. Links (or form image buttons) with the same text that go to different locations are readily distinguishable.

a. Describe the purpose of a link by providing descriptive text

b. Combining adjacent image and text links for the same resource

c. Example - https://www.w3.org/TR/WCAG20-TECHS/H30.html

2.4.1.142.4.4 Link Purpose (In Context) (Level A)

11. Providing links to navigate to related Web pages. Sitemap, Table of Contents etc.

12. Linking to all of the pages on the site from the home page.

2.4.1.152.4.6 Headings and Labels

13. Page headings and labels for form and interactive controls are informative. Avoid duplicating heading (e.g., "More Details") or label text (e.g., "First Name") unless the structure provides adequate differentiation between them.

14. Indicating required form controls using labels or legends.

2.4.1.162.4.7 Focus Visible

15. It is visually apparent which page element has the current keyboard focus (i.e., as you tab through the page, you can see where you are).

*Understandable* - Content and interface are understandable

2.4.1.173.1.1 Language of Page (Level A)

1. The language of the page is identified using the HTML lang attribute (<html lang="en">, for example).

2.4.1.183.1.2 Language of Parts (Level AA)

2. The language of page content that is in a different language is identified using the lang attribute (e.g., <blockquote lang="es">).

2.4.1.193.2.1 On Focus (Level A)

3. When a page element receives focus, it does not result in a substantial change to the page, the spawning of a pop-up window, an additional change of keyboard focus, or any other change that could confuse or disorient the user. Using "activate" rather than "focus" as a trigger for changes of context.

2.4.1.203.2.2 On Input (Level A)

4. When a user inputs information or interacts with a control, it does not result in a substantial change to the page, the spawning of a pop-up window, an additional change of keyboard focus, or any other change that could confuse or disorient the user unless the user is informed of the change ahead of time. Provide a mechanism that allows users to explicitly request changes of context.

2.4.1.213.2.3 Consistent Navigation (Level AA)

5. Navigation links that are repeated on web pages do not change order when navigating through the site

2.4.1.223.2.4 Consistent Identification (Level AA)

6. Elements that have the same functionality across multiple web pages are consistently identified. For example, a search box at the top of the site should always be labeled the same way.

2.4.1.233.3.1 Error Identification (Level A)

7. Required form elements or form elements that require a specific format, value, or length provide this information within the element's label.

8. If utilized, form validation errors are presented in an efficient, intuitive, and accessible manner. The error is clearly identified, quick access to the problematic element is provided, and the user is allowed to easily fix the error and resubmit the form.

2.4.1.243.3.2 Labels or Instructions (Level A)

9. Sufficient labels, cues, and instructions for required interactive elements are provided via instructions, examples, properly positioned form labels, and/or fieldsets/legends.

2.4.1.253.3.3 Error Suggestion (Level AA)

10. If an input error is detected (via client-side or server-side validation), provide suggestions for fixing the input in a timely and accessible manner.

11. Provide instructions and cues in context to help in form completion and submission.

2.4.1.263.3.4 Error Prevention (Legal, Financial, Data) (Level AA)

12. If the user can change or delete legal, financial, or test data, the changes/deletions can be reversed, verified, or confirmed. Provide confirmation, disclaimer texts.

*Robust* - Content can be used reliably by a wide variety of user agents, including assistive technologies

2.4.1.274.1.1 Parsing (Level A)

1. Significant HTML/XHTML validation/parsing errors are avoided. Check at https://validator.w3.org/

2.4.1.284.1.2 Name, Role, Value (Level A)

2. Markup is used in a way that facilitates accessibility. This includes following the HTML/XHTML specifications and using forms, form labels, frame titles, etc. appropriately