checking compliance with WCAG standards

When creating this checklist, the Web Content Accessibility Guidelines (WCAG) were used as a reference point. WCAG is a universal standard for web content accessibility applicable to individuals, organizations, and governments.

There are three levels of compliance with WCAG accessibility standards, reflecting priority levels:

• A: Basic level
  If this level is not met, assistive technologies may not correctly read, understand, or fully interact with the page or screen.

• AA: Optimal level
  Required for most government and public websites. Project A11Y aims to comply with Level AA.

• AAA: Specialized level
  Typically intended for specific sections of websites and web applications that serve specialized audiences.

This checklist covers many, but not all aspects of A and AA levels. It is important to consider that different levels of WCAG support do not necessarily indicate increasing complexity of implementation.

Table of contents:

Success Criteria

Each item on this checklist has a corresponding WCAG “success criterion.” Success criteria are the specific, testable rules on which WCAG standards are based, identified by a number and a short name. For example, the rule for changing the size of text is numbered 1.4.4 and called Resize text.

Some accessibility items may meet multiple success criteria. We have identified the most relevant criterion for each item on the checklist.

Will this checklist help ensure my site is fully accessible?

No, but addressing the issues in this checklist will help improve the site experience for all of its users.

The questions covered in this checklist cover a wide range of disability-related conditions. There is no such thing as “perfect accessibility” or “a site with 100% accessibility.” Companies and services that promise such results should be viewed critically. If you need professional assistance with accessibility, please use our services qualified specialists.

Content

Content is the most important part of a website.

• Use simple language and avoid figurative language, idioms and complex metaphors. Write the text at 8th grade level. More details at w3.org: 3.1.5 Reading level (“Reading Level”)

• Ensure that the content of button, link, and label elements is unique and descriptive. Wording like “follow the link” or “read more” does not provide context. Some users navigate the page using a list of all the buttons or links. In this mode, the text of these elements should indicate what will happen when they are activated. More details at w3.org: 1.3.1 Information and relationships

• Use alignment left-aligned for left-to-right (LTR) languages ​​and right-aligned for right-to-left (RTL) languages. Text that is centered or justified is more difficult to read. More details at w3.org: 1.4.8 Visual representation

Global code

Global code affects the entire site or web application.

• Check the HTML code for validity. Valid HTML Helps ensure a consistent and expected experience across all browsers and assistive technologies. More details at w3.org: 4.1.1 Parsing

• Use the lang attribute on the html element. This helps screen readers voice correctly content. More details at w3.org: 3.1.1 Page language

• Provide a unique title for each page or screen. Assistive technologies often provide the first piece of information with the title element, located in the head element of the document. This helps users understand what page or screen they are going to. More details at w3.org: 2.4.2 Page title

• Make sure viewport scaling is not disabled. Some users are forced to increase the text size to a comfortable size for them – do not discourage this, even if your web application has an interface similar to a native application. Even native applications must take into account operating system settings to change text size. More details at w3.org: 1.4.4 Changing text size

• Use semantic elements to indicate important content areas. Semantic elements help define the layout and key areas of a page or screen, allowing quick access to those areas. For example, use the element <nav> to indicate site navigation and element <main> for the main page content. More details at w3.org: 4.1.2 Name, Role, Meaning

• Keep content in a linear order. Remove tabindex attribute values ​​other than 0 and -1. Elements that receive focus by default (links, buttons) do not require an attribute tabindex. Elements that do not have focus by default should not contain tabindexwith the exception of specific cases. More details at w3.org: 2.4.3 Focus order

• Avoid using the autofocus attribute. People with visual impairments may become disoriented when the focus changes without their consent. In addition, the attribute autofocus may cause difficulty for users with motor impairments, as they may take extra time to leave the autofocus area and move to other elements on the page or screen. More details at w3.org: 2.4.3 Focus order

• Allow session time to be extended. If you can't completely disable timeouts, provide the user with the ability to easily disconnect, change, or extend the session well before it ends. More details at w3.org: 2.2.1 Adjustable time

• Remove title attribute tooltips. Attribute title has many problems and should not be used, especially if it is important that the information provided is accessible to all users. Valid use of the attribute title there may be a marking of the element iframe to indicate the contents inside. More details at w3.org: 4.1.2 Name, Role, Meaning

Keyboard

It is important that the interface and content can be controlled and navigated using the keyboard. Some users cannot use a mouse or may use other assistive technologies that do not support pointing or precise clicking.

• Make sure that interactive elements that are navigated to using the keyboard have a visible focus style. Can a person using a keyboard, voice control, or screen reader see their current position on the page? More details at w3.org: 2.4.7 Apparent focus

• Check that the keyboard focus order matches the visual layout. Can a person using a keyboard or screen reader navigate the page predictably? More details at w3.org: 1.3.2 Meaningful sequence

• Remove invisible elements that are focusable. Remove the ability to focus on elements that you don't want to be currently visible, such as grayed-out dropdown menus, off-screen navigation, or modals. More details at w3.org: 2.4.3 Focus order

Images

Most websites contain a large number of images – try to ensure they are accessible to all users. You can read more about all the points in the w3.org section 1.1.1 Non-text content

• Make sure that all img elements have the attribute specified alt. Attributes alt (alt text) provide a description of the image for people who may not be able to see it. If attribute alt is missing, the screen reader will announce the file name and path to the image instead of its content, which does not allow you to understand the meaning of the image.

• Make sure the empty attribute is used for decorative images alt. Empty attribute alt also called null alt. It is created if there is no information between the opening and closing quotes of the alt attribute. Decorative images do not convey the information necessary to understand the meaning of the page. In the early years of web design, they were used for decorative elements and dividers, but this is less relevant for modern sites and web applications.

• Provide a text alternative for complex images, such as charts, graphs and maps. Is there simple text that lists points on a map or sections of a diagram? Describe all visible information—graph axes, data, and labels—as well as the main idea the graphic conveys.

• For images that contain text, make sure the alt description includes the image text. For example, the FedEx logo image should have an alt value of “FedEx”.

Headings

Heading elements (h1, h2, h3, etc.) help break up page content into related chunks of information. They are essential for assistive technology users to help them understand the structure and content of a page or screen. You can read more about all the points in the w3.org section 2.4.6 Headings or Labels.

• Use heading elements to introduce the content. Headings provide structure to a document and should not be used solely for visual purposes.

• Use only one element h1 on every page or screen. Element h1 should be used to convey the main purpose of the page or screen. Do not use h1 for a title that does not change across pages or screens (for example, the title of a site).

• Heading elements should be placed in a logical sequence. The order of headings should be descending, depending on the “depth” of the content – for example, element h4 should not appear on the page before the first element h3. You can use the headingsMap tool for estimation.

• Don't skip heading levels. For example, don't go from h2 To h4skipping h3. If heading levels are skipped to achieve a certain visual effect, use CSS classes instead.

Lists

List items help users understand that a set of items is related, sequential, and includes a specific number of items.

• Use list items (ol, ul And dl) to present the content as a list. This may include sections of related content, elements displayed in a grid, or adjacent elements a. More details at w3.org: 1.3.1 1.3.1 Information and relationships

Controls

Controls are interactive elements, such as links and buttons, that allow the user to navigate to a desired goal or perform an action.

• Use the a element for links. Links must always have an attribute hrefeven in Single Page Applications (SPAs). No attribute href the link will not be correctly accessible to assistive technologies, for example, if instead of the attribute href event is used onclick. More details at w3.org: 1.3.1 Information and relationships

• Make sure the links are easily recognized as links. Color alone is not enough to indicate the presence of a link. A common way to indicate the presence of linked content is underlining. More details at w3.org: 1.4.1 Use of color

• Make sure controls have state :focus. Visible focus styles help users determine which interactive element has keyboard focus. This allows them to understand that they can perform actions such as activating a button or clicking on a link. More details at w3.org: 2.4.7 Apparent focus

• For buttons use element button. Buttons are used to send data or perform an action on the screen without changing keyboard focus. You can add type="button" to element buttonto prevent the browser from attempting to submit form information upon activation. More details at w3.org: 1.3.1 Information and relationships

• Provide a link to skip the content (skip link) and make sure it is visible when in focus. A skip link allows you to quickly jump to the main content of a page or screen. This helps the user easily bypass globally repeated content such as the main site navigation or persistent search box. More details at w3.org: 2.4.1 Bypassing blocks

• Warn if links open in a new window. Avoid such links if possible. But if the link does open in a new window, make sure that its behavior is clear to all users. This helps people understand what will happen if they click on the link. Although this technique is not technically required to comply with the standards, it often causes inconvenience for users of various assistive technologies. More details at w3.org: Warning users about going to a new window

Tables

Tables are a structured set of data that helps users understand the relationships between different types of information.

• Use element table to present tabular data. Need to display data in rows and columns? Use element table. More details at w3.org: 1.3.1 Information and relationships

• Use element th for table headers (with appropriate attributes scope). Depending on the complexity of the table, you can also use scope="col" for column headers and scope="row" for row headers. Attribute scope is still used by many assistive technologies to correctly interpret and describe table structure. More details at w3.org: 4.1.1 Parsing

• Use element captionto add a title for the table. The title of the table should describe what information it contains. More details at w3.org: 2.4.6 Headings or Labels

Forms

Forms allow users to enter information on the site for subsequent processing, including actions such as sending messages and placing orders.

• All input fields on a form must be associated with a corresponding element label. Use a bunch for/idto ensure maximum support for browsers and assistive technologies. More details at w3.org: 3.2.2 When entering

• Use the elements fieldset And legendwhen appropriate. Does your form contain multiple sections with related fields? Use fieldset for grouping, and legend – to indicate the purpose of each section. More details at w3.org: 1.3.1 Information and relationships

• Use autocomplete input fields where appropriate. Provide mechanismallowing users to quickly and accurately fill out form fields for frequently requested information (for example, name, email, phone number). More details at w3.org: 1.3.5 Determining the destination of the input

• Make sure that if there are errors when filling out fields, a clear explanation is displayed above the form. This helps users quickly understand exactly what problems they encountered while filling out the form, which is especially important for large forms with many fields. Make sure the error warning is clear about which fields are being referred to. More details at w3.org: 3.3.1 Error identification

• Associate error messages with appropriate fields. Usage aria-describedby allows users to more easily understand the relationship between a field and the error message associated with it. More details at w3.org: 3.3.1 Error identification

• Make sure that error information and other warnings are conveyed in more than just color. People with visual impairments or other cultural perceptions of color may not see the state change or understand exactly what type of feedback it represents if color is the only indicator. More details at w3.org: 1.4.1 Use of color

Media

Media includes pre-recorded as well as live audio and video.

• Make sure the media is not autoplaying. Unexpected video or audio playback may be disruptive; especially people with certain cognitive impairments such as ADHD. Certain types of automatically playing videos and animations may cause problems for people with vestibular disorders or seizure disorders. More details at w3.org: 1.4.2 Audio control

• Make sure your media controls use the correct markup. For example, the mute button should have an active state when pressed, and the volume slider should use <input type="range">. More details at w3.org: 1.3.1 Information and relationships

• Check that any media can be paused. Provide a global pause function for any media element. If your device has a keyboard, make sure that pressing the Spacebar can pause playback. Also make sure that the Spacebar does not interfere with page/screen scrolling when the focus is not on the form controls. More details at w3.org: 2.1.1 Keyboard

Video

Video related checks.

• Make sure there are subtitles. Subtitles allow people who cannot hear audio content to understand the content of a video. More details at w3.org: 1.2.2 Subtitles

• Eliminate triggers that can cause an epileptic seizure. Certain types of flashing or strobing animation may cause seizures. More details at w3.org: 2.3.1 Three flashes or below threshold

Audio

Audio related checks.

• Make sure text transcripts are available. Text transcripts allow people who cannot hear to understand the content of the audio. They also allow you to consume audio content at a comfortable speed. More details at w3.org: 1.1.1 Non-text content

Appearance

How the content of your site or application looks in different conditions.

• Check content in specialized viewing modes. Activate modes such as Windows High Contrast or Inverted Colors. Is your content still readable? Are icons, borders, links, form fields, and other elements visible? Is it possible to distinguish foreground content from background content? More details at w3.org: 1.4.1 Use of color

• Increase the text size to 200%. Is the content still readable? Does enlarging text cause elements to overlap? More details at w3.org: 1.4.4 Changing text size

• Ensure that sufficient distance is maintained between content elements. Use the straw method to ensure that people using screen enlargement programs can easily find all the content. More details at w3.org: 1.3.3 Sensory characteristics

• Make sure color is not the only way to convey information. Is it still possible to see links in the main content if everything is rendered in grayscale? More details at w3.org: 1.4.1 Use of color

• Make sure that instructions are not limited to just visual or auditory elements. Use a combination of characteristics to write clues—especially the actual names of sections and elements, not just descriptions such as location (“to the right”) or sound (“after the tone”). More details at w3.org: 1.3.3 Sensory characteristics

• Use a simple, clear and logical layout. A complex layout can be difficult to understand and use. More details at w3.org: 1.4.10 Reflow

Animation

Content that moves on its own or is activated when the user interacts with the control.

• Make sure the animation is unobtrusive and does not contain excessive blinking. Certain types of strobing or flashing animation can cause seizures. Other types of animation may be distracting and inconvenient, especially for people with cognitive impairments such as ADHD. More details at w3.org: 2.3.1 Three flashes or below threshold

• Provide a mechanism to pause background video. Background video can be distracting, especially if the main content is placed on top of it. More details at w3.org: 2.2.2 Pause, Stop, Hide

• Make sure all animation matches the media query prefers-reduced-motion. Disable animation if the “reduce motion” setting is active. If animation is necessary to convey meaning, slow it down. More details at w3.org: 2.3.3 Animation during interactions

Color contrast

Color contrast determines how well colors placed next to or on top of each other are readable.

• Check the contrast for regular sized text. To comply with Level AA, a contrast ratio of 4.5:1 is required. More details at w3.org: 1.4.3 Contrast

• Check the contrast for large text. To meet Level AA, a contrast ratio of 3:1 is required. More details at w3.org: 1.4.3 Contrast

• Check the contrast for all icons. To comply with Level AA, a contrast ratio of 3.0:1 is required. More details at w3.org: 1.4.11 Contrast for non-text elements

• Check border contrast for input elements (text fields, radio buttons, checkboxes, etc.). To comply with Level AA, a contrast ratio of 3.0:1 is required. 1.4.11 Contrast for non-text elements

• Check text overlaying images or videos. Is the text still readable? More details at w3.org: 1.4.3 Contrast

• Check out custom highlight colors ::selection. Is the color contrast you set in CSS sufficient for the highlighted text? Otherwise, the text may become unreadable when selected. More details at w3.org: 1.4.3 Contrast

Mobile devices and touch controls

Things to consider for working on mobile devices.

• Check if the site can be rotated in any direction. Is the display limited to portrait orientation only? More details at w3.org: 1.3.4 Orientation

• Remove the need for horizontal scrolling. Horizontal scrolling can be confusing for some users and annoying for most. More details at w3.org: 1.4.10 Reflow

• Make sure buttons and link icons can be easily activated. Make sure elements like hamburger menus, social icons, gallery viewers, and other touch controls are suitable for use with different sized fingers and styluses. More details at w3.org: 2.5.5 Target size

• Provide enough space between interactive elements to create a scrollable area. Some users with motor impairments (such as hand tremors) may have difficulty scrolling through interactive elements without gaps. More details at w3.org: 2.4.1 Bypassing blocks

Next steps
Please remember to check the site periodically to ensure it remains available. The A11Y Project also strongly recommends testing with a professional tester.

All current development and testing methods and tools can be mastered in OTUS online courses: in the catalog you can see a list of all programs, and in the calendar — sign up for open lessons.