WCAG, Section 508, WAI-ARIA

There are several standards, policies and principles that govern how accessible applications and components are created. This article offers an overview of them. For a list of the accessibility compliance levels support provided by the Telerik UI for Blazor components see the Telerik UI for Blazor Accessibility Compliance article.

In this article you will find information on the general topics of accessibility:

Standards and Policies
- Section 508
- W3C Web Content Accessibility Guidelines (WCAG) 2.2
Technical Specifications
- WAI-ARIA
- Keyboard Navigation
Accessibility Compliance Components Table

Standards and Policies

Accessible websites and applications normally comply with some or all of the following standards:

Section 508
W3C Web Content Accessibility Guidelines (WCAG) 2.2

Section 508

Since 1998, Section 508 is part of the U.S. Rehabilitation Act of 1973. Section 508 represents a set of accessibility standards which were defined by the U.S. General Services Administration (GSA) and which initially applied to Federal agencies only with the aim to ensure that their electronic and information technology is accessible to people with disabilities.

In 2017, Section 508 was reorganized to meet and reflect recent communication technology innovations and nowadays the Section 508 guidelines impact not only all U.S. Federal agencies, but also affect any company which does business with a Federal agency. Such companies include vendors, private contractors, financial industry, healthcare and legal organizations, and partners of those agencies which operate in the United States or abroad.

For more information, refer to:

W3C Web Content Accessibility Guidelines (WCAG) 2.2

The Web Content Accessibility Guidelines (WCAG) which are set by the World Wide Web Consortium (W3C) define recommendations for making web content accessible to people with physical and cognitive disabilities. WCAG defines accessibility principles with their respective success criteria. Depending on the implemented success criteria by a web application, the WCAG provide the A, AA, and AAA levels of accessibility conformance.

For more information, refer to:

WAI-ARIA

WAI-ARIA is a set of technical specifications which were developed by the W3C and which provide the semantics for the assistive technologies to access and interpret web content and web applications. The WAI-ARIA recommendations (standards) divide the semantics into roles and into states and properties which those roles support. For example, a checkbox role supports the aria-checked state which indicates whether a checkbox, radio button, or a similar UI element is checked.

The WAI-ARIA framework targets web developers who create web applications by using AJAX, scripting, and other rich application techniques.

For more information, refer to:

By default, users can only navigate to links, buttons, and form controls with a keyboard. The navigation order in which interactive items receive keyboard focus has to be logical and intuitive. Generally, keyboard navigation logic needs to follow the visual horizontal and vertical flow of the page. For example, left to right and top to bottom, header first followed by the main and then the page navigation.

Keyboard accessibility is a category under the WCAG Operable principle.

In WCAG 2.2, the keyboard accessible category provides the following success criteria:

See the Keyboard Support in Telerik UI for Blazor article for more details on using the Telerik components with the keyboard.

The described level of compliance in the table below is achievable with the Ocean Blue Sass Swatch and the Default Ocean Blue A11Y.

Accessibility Compliance Components Table

The following table lists the Section 508 and WCAG 2 compliance levels of support for the Blazor UI components.

Component	508	WCAG 2.2	Accessibility Example	Accessibility Documentation
`AutoComplete`	`Yes`	`AA`	Demo	Documentation
`Barcodes`	`No`	`n/a`	`n/a`	`n/a`
`Breadcrumb`	`Yes`	`AAA`	Demo	Documentation
`Button`	`Yes`	`AAA`	Demo	Documentation
`ButtonGroup`	`Yes`	`AAA`	Demo	Documentation
`Calendar`	`Yes`	`AAA`	Demo	Documentation
`Card`	`No`	`n/a`	`n/a`	`n/a`
`Carousel`	`Yes`	`AA`	Demo	Documentation
`Charts`	`Yes`	`AA`	Demo	Documentation
`CheckBox`	`Yes`	`AA`	`n/a`	Documentation
`ChunkProgressBar`	`Yes`	`AA`	`n/a`	Documentation
`ColorGradient`	`Yes`	`AA`	Demo	Documentation
`ColorPalette`	`Yes`	`AA`	Demo	Documentation
`ColorPicker`	`Yes`	`AA`	`n/a`	Documentation
`ComboBox`	`Yes`	`AA`	Demo	Documentation
`Context Menu`	`Yes`	`AA`	Demo	Documentation
`Date Input`	`Yes`	`AA`	Demo	Documentation
`Date Picker`	`Yes`	`AA`	Demo	Documentation
`DateRange Picker`	`Yes`	`AA`	Demo	Documentation
`DateTime Picker`	`Yes`	`AA`	Demo	Documentation
`Dialog`	`Yes`	`AA`	`n/a`	Documentation
`Drawer`	`Yes`	`AA`	Demo	Documentation
`DropDownList`	`Yes`	`AA`	Demo	Documentation
`Editor`	`Yes`	`AA`	Demo	Documentation
`FileManager`	`No`	`n/a`	`n/a`	`n/a`
`FileSelect`	`No`	`n/a`	`n/a`	`n/a`
`Filter`	`Yes`	`AA`	Demo	Documentation
`FlatColorPicker`	`Yes`	`AA`	`n/a`	Documentation
`FloatingLabel`	`No`	`n/a`	`n/a`	`n/a`
`Form`	`No`	`n/a`	`n/a`	`n/a`
`Gantt`	`Yes`	`AA`	`n/a`	Documentation
`Gauges`	`No`	`n/a`	`n/a`	`n/a`
`Grid`	`Yes`	`AA`	Demo	Documentation
`Grid Layout`	`No`	`n/a`	`n/a`	`n/a`
`ListView`	`Yes`	`AAA`	Demo	Documentation
`Loader`	`No`	`n/a`	`n/a`	`n/a`
`LoaderContainer`	`No`	`n/a`	`n/a`	`n/a`
`Map`	`No`	`n/a`	`n/a`	`n/a`
`MaskedTextbox`	`Yes`	`AA`	`n/a`	Documentation
`MediaQuery`	`No`	`n/a`	`n/a`	`n/a`
`Menu`	`Yes`	`AA`	Demo	Documentation
`MultiColumnComboBox`	`No`	`n/a`	`n/a`	`n/a`
`MultiSelect`	`Yes`	`AA`	Demo	Documentation
`Notification`	`Yes`	`AA`	`n/a`	Documentation
`NumericTextbox`	`Yes`	`AA`	Demo	Documentation
`Pager`	`Yes`	`AA`	Demo	Documentation
`PanelBar`	`No`	`n/a`	`n/a`	`n/a`
`PDF Viewer`	`No`	`n/a`	`n/a`	`n/a`
`ProgressBar`	`Yes`	`AA`	`n/a`	Documentation
`RadioGroup`	`Yes`	`AA`	Demo	Documentation
`Range Slider`	`Yes`	`AA`	Demo	Documentation
`Scheduler`	`Yes`	`AA`	Demo	Documentation
`Signature`	`Yes`	`AA`	`n/a`	Documentation
`Skeleton`	`No`	`n/a`	`n/a`	`n/a`
`Slider`	`Yes`	`AA`	Demo	Documentation
`SplitButton`	`Yes`	`AA`	Demo	Documentation
`Splitter`	`Yes`	`AA`	Demo	Documentation
`Stack Layout`	`No`	`n/a`	`n/a`	`n/a`
`Stepper`	`Yes`	`AA`	Demo	Documentation
`Stock Chart`	`No`	`n/a`	`n/a`	`n/a`
`Switch`	`Yes`	`AA`	Demo	Documentation
`TabStrip`	`Yes`	`AA`	Demo	Documentation
`TextArea`	`Yes`	`AAA`	`n/a`	Documentation
`TextBox`	`Yes`	`AA`	`n/a`	Documentation
`TileLayout`	`Yes`	`AAA`	`n/a`	Documentation
`TimePicker`	`Yes`	`AA`	Demo	Documentation
`ToggleButton`	`Yes`	`AA`	Demo	Documentation
`ToolBar`	`Yes`	`AA`	Demo	Documentation
`Tooltip`	`Yes`	`AA`	`n/a`	Documentation
`TreeList`	`No`	`n/a`	`n/a`	`n/a`
`TreeView`	`Yes`	`AA`	Demo	Documentation
`Upload`	`No`	`n/a`	`n/a`	`n/a`
`Window`	`Yes`	`AA`	Demo	Documentation
`Wizard`	`Yes`	`AA`	Demo	Documentation

WCAG, Section 508, WAI-ARIA

Standards and Policies

Section 508

W3C Web Content Accessibility Guidelines (WCAG) 2.2

Technical Specifications

WAI-ARIA

Keyboard Navigation

Accessibility Compliance Components Table

See Also

Getting Started

Community

Support Resources

Sample Applications

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Docs & Resources

Productivity and Design Tools

Getting Started

Community

Support Resources

Sample Applications