Blog|

Web accessibility is the process of making websites, digital content, tools, and technologies accessible to people with disabilities.

It is the inclusive practice of ensuring that people with disabilities can have full and equal access to information online.

Web Content Accessibility Guidelines (WCAG)

The World Wide Consortium (W3C) has created WCAG Guidelines which defines the list of accessibility standards. The guidelines are classified under 4 principles:

Perceivable — Information and user interface components must be presentable to users in ways they can perceive. This means that users must be able to perceive the information being presented (it can’t be invisible to all of their senses).

Operable — User interface components and navigation must be operable. This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform).

Understandable — Information and the operation of user interface must be understandable. This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding).

Robust — Content is robust to interpret by assistive technologies. This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible).

Here is the ultimate WCAG 2.0 Level A, AA, and AAAA Checklist

WCAG 2.0 Principle 1: Perceivable

Web content is made available to the senses – sight, hearing, and/or touch.

Guideline 1.1 Text Alternatives: Provide text alternatives for any non-text content

1.1.1 Non-text Content Level A

  • All informative and functional non-text content such as images, icons, charts, forms etc., must have alternative text that describes the meaning or purpose.
  • Images that do not convey content, are decorative, or contain content that is already conveyed in text are given empty alternative text attributes.
  • All linked images have descriptive alternative text.
  • Equivalent alternatives to complex images are provided in context or on a separate linked page.
  • Form buttons have a descriptive value.
  • Embedded multimedia is identified via accessible text.

Guideline 1.2: Time-based media: Provide alternatives for time-based media

1.2.1 Audio-only and video-only (Pre-recorded) Level A

  • A transcript must be provided for pre-recorded (non-live) audio only content (audio podcasts, MP3 files, etc.).
  • Either a text description or an audio description must be provided for pre-recorded (non-live) video only content.

NOTE: If the audio or video is designated as an alternative to web content (e.g., an audio or sign language version of a web page, for example), then the web content itself serves as the alternative.

1.2.2 Captions (Pre-recorded) Level A

  • Synchronized captions must be provided for the entire audio content in the non-live videos (You Tube videos, etc.).
  • If video is the alternative for text content then it doesn’t need captions.
  • If possible provide captions in multiple languages as this helps users to choose the language they can follow.

1.2.3 Audio Description or Media Alternative (Pre-recorded) Level A

  • Either a text description or an audio description must be provided for pre-recorded (non-live) video content.
  • Videos that rely on sound only doesn’t require audio descriptions. Example: interviews, speeches.

1.2.4 Captions (Live) Level AA

  • Make sure to provide synchronized captions for live media that contains audio (audio-only broadcasts, web casts, video conferences, etc.)
  • Make sure to provide captions for a live broadcast.
  • Use media players or broadcast platforms where live captioning is supported.

1.2.5 Audio Description (Pre-recorded) Level AA

  • Make sure to provide audio description for pre-recorded video content.
  • Provide audio descriptions where visual aspect is not explained in the dialog of the video.
  • The audio description can either be separate from the original video or be an integral part of the video.
  • Audio description must include scene changes, settings, actions that are described in dialogues and any other visual information that is not conveyed via a speech or dialog.
  • Use media players that support audio descriptions.

1.2.6 Sign Language (Pre-recorded) Level AAA

  • Make sure to provide a sign language video is provided for media that contains audio.

1.2.7 Extended Audio Description (Pre-recorded) Level AAA

  • When audio description cannot be added to video due to audio timing (e.g., insufficient pauses in the audio), make sure to provide an alternative version of the video with pauses that allow audio descriptions.

1.2.8 Media Alternative (Pre-recorded) Level AAA

  • Make sure to provide a transcript is provided for pre-recorded media that has a video track.

1.2.9 Audio-only (Live) Level AAA

  • Provide a descriptive text transcript (e.g., the script of the live audio) is provided for live content that has audio.

Guideline 1.3: Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

1.3.1 Info and Relationships Level A

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. Example: properly marked headings, associating labels with form elements etc.

  • Semantic mark-up is used to designate headings, lists, etc.
  • Headings – Provide hierarchically logical heading mark-up for the contents.
  • Table – Provide HTML table mark-up and provide column headers for simple tables and column headers and row headers for complex tables.
  • Table – When using nested tables, consider the possibility of breaking the content into logical individual tables instead of nested tables.
  • Forms – Provide programmatic association of visible labels or appropriate accessible names to all the form elements.
  • Lists – Mark-up the contents that logically fall into list as ordered or unordered list. Do not put huge text blocks which is otherwise are paragraphs as lists.
  • Grouping – Provide grouping and group level labels to mark a group of form elements like radio buttons or checkboxes.
  • Use ARIA labelling only when standard HTML is insufficient.

1.3.2 Meaningful sequence Level A

  • Content presented on the page is logical and intuitive.
  • Use headings, lists, paragraphs etc. to mark your content.
  • Make sure users can differentiate the navigation menus from main content.

1.3.3 Sensory characteristics Level A

  • Instructions do not rely upon shape, size, or visual location (e.g. “Click the square icon to continue”), or sound (“A beeping sound indicates you may continue.”)
  • While using shape and/or location, provide visible labels/names to the controls.
  • When combining colour and shape/size/location/orientation, provide off-screen text for screen reader users.
  • When using sound as a clue, combine it with text/colour based clues.

Guideline 1.4: Distinguishable: Make it easier for users to see and hear content including separating foreground from background.

1.4.1 Use of Color Level A

  • Provide additional cues when color is used as the only visual means to convey information, indicating an action, prompting a response or distinguishing a visual element.
  • Make sure color alone is not used to distinguish links from surrounding text.
  • Make sure instructions/prompts provided in text don’t refer to color alone.
  • Make sure instructions are provided in text for graphs & charts where color is used to convey information.
  • Provide more than one visual clue that include common icons and colours to differentiate texts and user interface elements.

1.4.2 Audio Control Level A

  • Provide a mechanism to stop, pause, mute, or adjust volume for audio that automatically plays on a page for more than 3 seconds.
  • Make sure that focus is on the pause/stop or volume control as soon as page opens if audio is playing automatically.

1.4.3 Contrast (Minimum) Level AA

  • Text and images of text have a contrast ratio of at least 4.5:1.
  • Large text – at least 18 point (typically 24px) or 14 point (typically 18.66px) and bold – has a contrast ratio of at least 3:1.

1.4.4 Resize Text (level AA)

  • Make sure the page is readable and functional when the page is zoomed to 200%.

1.4.5 Images of Text (Level AA)

  • Make sure that if the same visual presentation can be made using text alone, an image is not used to present that text.

1.4.6 Contrast (Enhanced) Level AAA

  • Make sure that text and images of text have a contrast ratio of at least 7:1.
  • All large text – at least 18 point (typically 24px) or 14 point (typically 18.66px) bold – has a contrast ratio of at least 4.5:1.

1.4.7 Low or no Background Audio (Level AAA)

  • All audio content with speech has no or very low background noise so the speech is easily distinguished.

1.4.8 Visual Presentation (Level AAA)

  • Make sure that blocks of text over one sentence in length are no more than 80 characters wide.
  • Blocks of text have adequate line spacing (at least 1/2 the height of the text) and paragraph spacing (1.5 times line spacing).

1.4.9 Images of Text (No exception) Level AAA

  • Text is used within an image only for decoration (image does not convey content) OR when the information cannot be presented with text alone.

WCAG 2.0 Principle 2: Operable

Interface forms, controls, and navigation are operable.

Guideline 2.1: Keyboard accessible: Make all functionality available from a keyboard.

2.1.1 Keyboard Level A

  • Make sure that all the focusable elements on a web page can be navigated using the keyboard.
  • All elements on the page buttons, links, form controls etc. are reachable by tab key.
  • Users can activate the buttons, links & form controls using enter and/or spacebar keys.
  • Users are able to activate the buttons, links & form controls using enter and/or spacebar keys.
  • Provide visible focus for all the active elements on the page.

2.1.2 No Keyboard Trap Level A

  • Make sure that keyboard focus is not trapped within a portion of the page or within a component.
  • If a user is trapped on a portion of the web page for a purpose, a clear instruction must be provided for the user to end that keyboard trap.
  • Check if all parts of the site is operable using only keyboard, test by unplugging the mouse.
  • If custom keystrokes are provided to operate a control make sure hints are exposed to all users.

2.1.3 Keyboard (No exception) Level AAA

  • All page functionality is available using the keyboard.

Guideline 2.2: Enough Time: Provide users enough time to read and use content

2.2.1 Timing Adjustable Level A

  • Make sure the user is given options to turn off, adjust, or extend that time limit, if a page or application has a time limit.
  • Provide a control on the landing page for the user to initiate a longer session time or no session timeout.
  • Prompt the user with help of a pop-up or modal so that enough warning is available for the user to reset the time limit.
  • Moving, scrolling and/or blinking content must have mechanism to pause or stop the movement or scroll or blink.
  • Auto updating content must be provided with feature to extend the time limit to 10 times of its actual update frequency.

2.2.2 Pause, Stop, Hide Level A

  • Make sure that moving, blinking, scrolling or auto updating content on the web page can be read by every user.
  • Content should not blink more than 3 times per second, if it does blink more than 3 times per second then it is considered as flashing & will fail WCAG.
  • Auto updating content should be provided with a pause button or provide a mechanism for the user to specify when the update can happen.
  • If the entire page contains moving, blinking, scrolling & auto updating content then pause, stop or hide buttons are not required as there is no parallel content.
  • Animation that conveys the users that a page or content is loading doesn’t require to meet this success criterion.

2.2.3 No Timing (Level AAA)

  • The content and functionality have no time limits or constraints.

2.2.4 Interruptions Level AAA

  • Make sure any interruptions (alerts, page updates, etc.) can be postponed or suppressed by the user.

2.2.5 Re-authenticating Level AAA

  • If an authentication session expires, the user can re-authenticate and continue the activity without losing any data from the current page.

Guideline 2.3: Seizures and Physical Reactions: Do not design content in a way that is known to cause seizures or physical reactions

2.3.1 Three Flashes or Below Threshold Level A

  • Make sure no page content flashes more than 3 times per second unless that flashing content is sufficiently small and the flashes are of low contrast and do not contain too much red.

2.3.2 Three Flashes Level AAA

  • No page content flashes more than 3 times per second.

Guideline 2.4: Navigable: Provide ways to help users navigate, find content, and determine where they are.

2.4.1 Bypass Blocks Level A

  • Make sure uses who depend on assistive technologies can skip repeated blocks of content on web pages.
  • Provide a skip link on top of the page to skip navigational menus.
  • Make sure that purpose of the link is clear, provide skip link text as skip to main content or skip navigation etc.
  • When providing ARIA landmarks, ensure multiple landmarks of the same type is not provided.

2.4.2 Page Titled Level A

  • Make sure the web page has an informative and descriptive page title.
  • Title should contain web page name, bit of description & site name.
  • Provide a unique title between 50 – 75 characters, which describes the purpose of the page.
  • Title must be the first heading level and contain web page name, bit of description & site name.

2.4.3 Focus Order Level A

  • The navigation order of links, form elements, etc. is logical and intuitive.
  • Make sure that elements that receive focus while operating or navigating the web page must be sequential and meaningful.
  • Align the focus order with the reading order as much as possible in order to maintain a logical and intuitive navigation of the content.
  • Ensure links having the same link text leads to same destination.

2.4.5 Multiple Ways Level AA

  • Multiple ways are available to find other web pages on the site – at least two of: a list of related pages, table of contents, site map, site search, or list of all available web pages.

2.4.6 Headings and Labels Level AA

  • 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.

2.4.7 Focus Visible Level AA

  • 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).

2.4.8 Location Level AAA

  • If a web page is part of a sequence of pages or within a complex site structure, an indication of the current page location is provided, for example, through breadcrumbs or specifying the current step in a sequence (e.g., “Step 2 of 5 – Shipping Address”).

2.4.9 Link Purpose (Link Only) Level AAA

  • The purpose of each link (or form image button or image map hotspot) can be determined from the link text alone.
  • There are no links (or form image buttons) with the same text that go to different locations.

2.4.10 Section Headings Level AAA

  • Beyond providing an overall document structure, individual sections of content are designated using headings, where appropriate.

WCAG 2.0 Principle 3: Understandable

Information and the operation of user interface must be understandable

Guideline 3.1: Readable: Make text content readable and understandable

  • Ensure each page of your web site has the language attribute and correct language code.

3.1.2 Language of Parts Level AA

  • The language of page content that is in a different language is identified using the language attribute.

3.1.3 Unusual Words Level AAA

  • Words that may be ambiguous, unfamiliar, or used in a very specific way are defined through adjacent text, a definition list, a glossary, or other suitable method.

3.1.4 Abbreviations Level AAA

  • The meaning of an unfamiliar abbreviation is provided by expanding it the first time it is used, using the abbreviation element, or linking to a definition or glossary.

3.1.5 Reading Level Level AAA

  • A more understandable alternative is provided for content that is more advanced than can be reasonably read by a person with roughly 9 years of primary education.

3.1.6 Pronunciation Level AAA

  • If the pronunciation of a word is vital to understanding that word, its pronunciation is provided immediately following the word or via a link or glossary.

Guideline 3.2: Predictable: Make web pages appear and operate in predictable ways

3.2.1 On Focus

  • Ensure that the context of the element does not change when the user focus on any element on the page. Example: popping up a submenu, submitting a form.
  • Avoid both visual and behavioral modifications to page.

3.2.2 On Input

  • Change of any user input does not change the context on the page unless the user is advised in advance.
  • Forms don’t submit on input of data and focus does not shift to the next form control once a form field is populated with data.
  • Provide a submit button for all forms.

3.2.3 Consistent Navigation Level AA

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

3.2.4 Consistent Identification Level AA

  • 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 labelled the same way.

3.2.5 Change on Request Level AAA

  • Substantial changes to the page, the spawning of pop-up windows, uncontrolled changes of keyboard focus, or any other change that could confuse or disorient the user must be initiated by the user. Alternatively, the user is provided an option to disable such changes.

Guideline 3.3: Input Assistance: Help users avoid and correct mistakes

3.3.1. Error Identification Level A

  • Make sure that items in input errors are clearly identified marked and the error message is described in text.
  • Don’t just use color or visual cues to point out form errors.
  • Use aria-descriptions to bind the form control with the error programmatically.
  • Provide necessary instructions & be as specific as possible with the errors so that users can take necessary action.

3.3.2 Labels or instructions Level A

  • Sufficient labels, cues, and instructions for required interactive elements are provided via instructions, examples, properly positioned form labels, and/or field-sets/legends.
  • Always provide visible labels to every form fields and controls.
  • Provide instructions where the form fields require specific data or format.
  • Ensure the labels identify the fields clearly.

3.3.3 Error Suggestion Level AA

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

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

  • If the user can change or delete legal, financial, or test data, the changes/deletions can be reversed, verified, or confirmed.

3.3.5 Help Level AAA

  • Instructions and cues are provided in context to help in form completion and submission.

3.3.6 Error Prevention (All) Level AAA

  • If the user can submit information, the submission is reversible, verified, or confirmed.

WCAG 2.0 Principle 3: Robust

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

Guideline 4.1: Compatible: Maximize compatibility with current and future user agents, including assistive technologies

4.1.1 Parsing Level A

  • Make sure that elements have unique ids, opening and closing tags and are properly nested without duplicate attributes.

4.1.2 Name, Role, Value Level A

  • Use native HTML elements wherever possible.
  • USE WAI-ARIA attributes while constructing custom component widgets.
  • Make sure custom widgets are keyboard operable using spacebar or enter keys.

Who we are?

codemantra is a leading Intelligent Document Processing (IDP) Solutions Provider. The AI-driven platform automates digital document accessibility compliance. It captures, classifies, and extracts data; and transforms documents to the desired output format.

How codemantra helps to achieve WCAG compliance?

codemantra’s accessibilityInsight remediates PDFs by auto-tagging document elements, set logical reading order, adding meta descriptions and bookmarks. It allows the user to add custom alt text to images, equations, and formulas.

We provide everything from self-help tools, audits, remediation, and implementation support to help you stay on top of PDF accessibility challenges with a very cost-effective solution.

Contact us at 1 (800) 769-9715 or Email engage@codemantra.com. To learn more on how to make your PDF documents accessible and compliant with PDF U/A and WCAG 2.1 Level AA standards.

Leave a Reply

Your email address will not be published.

Close Search Window