ASP.NET Controls and Accessibility
By default, most ASP.NET server controls generate markup that conforms to accessibility guidelines. In some cases you must configure a control to make sure that it generates accessible markup. In a few cases, ASP.NET server controls cannot generate markup that conforms to certain accessibility guidelines.
The following sections list ASP.NET server controls and provide information about accessibility considerations that pertain to each control. If a control is not listed in this topic, it generates markup that conforms to current accessibility guidelines without any configuration requirements.
Note
Past accessibility guidelines require all functionality of a Web site to be accessible without depending on client script. If you want to avoid the use of client script in order to conform to older guidelines, see ASP.NET Web Server Controls That Use Client Script.
For more information about accessibility guidelines and how to create ASP.NET Web pages that conform to them, see Accessibility in Visual Studio and ASP.NET.
This topic contains the following sections:
Standard Toolbox Controls
Data Toolbox Controls
Validation Toolbox Controls
Navigation Toolbox Controls
Login Toolbox Controls
Web Parts Controls
Standard Toolbox Controls
Control |
Accessibility considerations |
|---|---|
The Target property renders as a target attribute. (See Note 1.) For versions of ASP.NET earlier than 4, the control renders a disabled attribute when the IsEnabled property is set to false. (See Note 2.) |
|
The Target property renders as a target attribute. (See Note 1.) |
|
The control layout is rendered using an HTML table. (See Note 3.) To render a caption for the table, set the control's Caption and CaptionAlign properties. For versions of ASP.NET earlier than 4, the control renders a disabled attribute when the IsEnabled property is set to false. (See Note 2.) |
|
Setting the RepeatLayout property to Table (the default value) causes the control layout to be rendered by using an HTML table. (See Note 3.) |
|
The control does not support the optgroup element, which enables the list to be subdivided into sections. For versions of ASP.NET earlier than 4, the control renders a disabled attribute when the IsEnabled property is set to false. (See Note 2.) |
|
If you set the ImageUrl property to the URL of a graphic file, set the Text property to specify the alternate text for the resulting graphic. (See Note 5.) The Target property renders as a target attribute. (See Note 1.) For versions of ASP.NET earlier than 4, the control renders a disabled attribute when the IsEnabled property is set to false. (See Note 2.) |
|
Set the AlternateText or GenerateEmptyAlternateText property to provide a value for the alt attribute. (See Note 5.) For versions of ASP.NET earlier than 4, the control renders a disabled attribute when the IsEnabled property is set to false. (See Note 2.) |
|
To use the control to render a label element for a text box or other control that is designed for user input, set the AssociatedControlID property to the ID of the control to associate with the label. For versions of ASP.NET earlier than 4, the control renders a disabled attribute when the IsEnabled property is set to false. (See Note 2.) |
|
For versions of ASP.NET earlier than 4, the control renders a disabled attribute when the IsEnabled property is set to false. (See Note 2.) |
|
Setting the RepeatLayout property to Table (the default value) causes the control layout to be rendered by using an HTML table (See Note 3.) |
|
Table, TableRow, TableCell, TableHeaderCell, TableHeaderRow, and TableFooterRow |
To render a caption for the table, set the control's Caption and CaptionAlign properties. When you create a Table object, include the TableHeaderRow and TableHeaderCell controls. The default values of the TableHeaderRow and TableFooterRow controls cause the control to render thead, tbody, and tfoot elements. In TableCell controls, set the AssociatedHeaderCellID property to have the control render a header that associates the cell with its heading. Set the control's Scope property to associate the header with the corresponding data column. For versions of ASP.NET earlier than 4, the control renders a disabled attribute when the IsEnabled property is set to false. (See Note 2.) |
The control layout is rendered using an HTML table. (See Note 3.) To create markup that uses cascading style sheets (CSS) for layout instead of a table, use the control's template properties. For versions of ASP.NET earlier than 4, the control renders a disabled attribute when the IsEnabled property is set to false. (See Note 2.) |
Data Toolbox Controls
Control |
Accessibility considerations |
|---|---|
The control layout is rendered using an HTML table. (See Note 3.) To create markup that uses cascading style sheets (CSS) for layout instead of a table, use the ListView control. For versions of ASP.NET earlier than 4, the control renders a disabled attribute when the IsEnabled property is set to false. (See Note 2.) |
|
If the pager-field objects are configured to use images, you cannot explicitly specify alternate text for the images. The images use the text properties (such as NextPageText) as the alternate text. As an alternative, use the TemplatePagerField object so that you can define exactly what the pager displays. |
|
The control layout is rendered using an HTML table. (See Note 3.) To create markup that uses cascading style sheets (CSS) for layout instead of a table, use the control's template properties. If you create a ButtonField column and specify an image for the button, you cannot explicitly specify alternate text for the image. The image uses the button's Text property as the alternate text. If you enable paging and you set the NextPageImageUrl and PreviousPageImageUrl properties, you cannot explicitly set the alternate text for the images that are used as paging buttons. Instead, use the PagerTemplate property so that you can define exactly what the pager displays. Text boxes that are generated automatically when you set the control's AutoGenerateEditButton property to true have no associated label elements. To avoid this, create template fields and add your own Label and TextBox controls, and then create the association manually. To render a caption for the table, set the control's Caption and CaptionAlign properties. For versions of ASP.NET earlier than 4, the control renders a disabled attribute when the IsEnabled property is set to false. (See Note 2.) |
|
The control layout is rendered using an HTML table. To create markup that uses cascading style sheets (CSS) for layout instead of a table, use the control's template properties. (See Note 3 and Note 4.) To render a caption for the table, set the control's Caption and CaptionAlign properties. For versions of ASP.NET earlier than 4, the control renders a disabled attribute when the IsEnabled property is set to false. (See Note 2.) |
|
Set the TableSection property of the HeaderRowproperty to TableHeader to cause thead and tbody elements to be generated. Set the RowHeaderColumn property to the name of a data field and the UseAccessibleHeader property to true to have the control render th elements and scope attributes (this will work only for bound fields, not for template fields). If you create a ButtonField object and specify an image for the button, you cannot explicitly specify alternate text for the image. The image uses the object's Text property as the alternate text. To render a caption for the table, set the control's Caption and CaptionAlign properties. If you enable paging and set the NextPageImageUrl and PreviousPageImageUrl properties, you cannot explicitly set the alternate text for the images that are used as paging buttons. Instead, use the PagerTemplate property so that you can define exactly what the pager displays. Text boxes that are generated automatically when you set the control's AutoGenerateEditButton property to true have no associated label elements. To avoid this, create template columns and add your own Label and TextBox controls, and then create the association manually. For versions of ASP.NET earlier than 4, the control renders a disabled attribute when the IsEnabled property is set to false. (See Note 2.) |
|
For versions of ASP.NET earlier than 4, the control renders a disabled attribute when the IsEnabled property is set to false. (See Note 2.) |
Validation Toolbox Controls
Control |
Accessibility considerations |
|---|---|
Validator controls |
Set the Text and ErrorMessage properties to meaningful error messages. Do not set them to an asterisk (*). |
For versions of ASP.NET earlier than 4, the control renders a disabled attribute when the IsEnabled property is set to false. (See Note 2.) |
Navigation Toolbox Controls
Control |
Accessibility considerations |
|---|---|
If the controlRenderingCompatibilityVersion attribute of the pages element in the Web.config file is set to 3.5 or lower, or if the RenderingMode property is set to Table, the control layout is rendered using an HTML table. (See Note 3.) The control generates HTML that conforms with ARIA standards if the following conditions are true:
To avoid markup validation errors, the ARIA attributes are set by using JavaScript. For more information about ARIA, see Accessibility in Visual Studio and ASP.NET. The SkipLinkText property provides a way for the entire control to be skipped by screen readers. If the SkipLinkText property is set, an invisible image with alternate text is rendered, giving the user the option to jump to the end of the control. Screen readers read the alternate text aloud, and the image occupies only one pixel. You can set the SkipLinkText property to an empty string ("") to provide your own mechanism to skip the menu. The SkipLinkText property is set to "Skip Navigation Links" by default. For versions of ASP.NET earlier than 4, the control renders a disabled attribute when the IsEnabled property is set to false. (See Note 2.) |
|
To have the control render a skip navigation link, set the control's SkipLinkText property to a string . In the site map XML file, set the description attribute of each site-map node to provide a title that screen readers can use to identify navigation links. For versions of ASP.NET earlier than 4, the control renders a disabled attribute when the IsEnabled property is set to false. (See Note 2.) |
|
To have the control render a skip navigation link, set the control's SkipLinkText property. Setting a node's PopulateOnDemand property to true causes the control to behave in a way that is incompatible with accessibility guidelines. The Target property renders as a target attribute. (See Note 1.) For versions of ASP.NET earlier than 4, the control renders a disabled attribute when the IsEnabled property is set to false. (See Note 2.) |
Login Toolbox Controls
Control |
Accessibility considerations |
|---|---|
The control layout is rendered using an HTML table. To create markup that uses cascading style sheets (CSS) for layout instead of a table, use the control's template properties. (See Note 3 and Note 4.) If you configure the control to use images, set the corresponding text property to the appropriate alternate text. For example, if you set the ChangePasswordButtonType property to Image, set the ChangePasswordButtonText property to the alternate text value. If the ChangePassword control is not customized with templates, the AccessKey property of the ChangePassword control applies to the first text box in the control. If the ChangePassword control is customized with templates, the AccessKey property is ignored. In that case, set the AccessKey property of each template child control directly. The TabIndex property is rendered on all the TextBox controls in the ChangePassword control. If the ChangePassword control is customized with templates, the TabIndex property is ignored. For versions of ASP.NET earlier than 4, the control renders a disabled attribute when the IsEnabled property is set to false. (See Note 2.) |
|
The control layout is rendered using an HTML table. (See Note 3.) To create markup that uses cascading style sheets (CSS) for layout instead of a table, use the control's template properties. If you configure the control to use images, set the corresponding text property to appropriate alternate text. For example, if you set the CancelButtonType property to Image, set the CancelButtonText property to alternate text. |
|
The control layout is rendered using an HTML table. To create markup that uses cascading style sheets (CSS) for layout instead of a table, use the control's template properties. (See Note 3 and Note 4.) |
|
Set the ToolTip property to text such as Logged in as user name so that screen readers will interpret the control's text correctly. For versions of ASP.NET earlier than 4, the control renders a disabled attribute when the IsEnabled property is set to false. (See Note 2.) |
|
For versions of ASP.NET earlier than 4, the control renders a disabled attribute when the IsEnabled property is set to false. (See Note 2.) |
|
The control layout is rendered using an HTML table. To create markup that uses cascading style sheets (CSS) for layout instead of a table, use the control's template properties. (See Note 3 and Note 4.) When the SubmitButtonType property is set to Image, the value of the SubmitButtonText property is used as the alternate text. The control does not render access key or tab index settings. For versions of ASP.NET earlier than 4, the control renders a disabled attribute when the IsEnabled property is set to false. (See Note 2.) |
Web Parts Controls
Control |
Accessibility considerations |
|---|---|
The control does not generate label elements to associate labels with controls. All verbs generate the same link text. Alternate text for links is rendered but is not customizable. The control does not render access key or tab index settings. |
|
When icons are displayed, all verbs display the same alternate text. The control does not render access key or tab index settings. The control does not generate label elements to associate labels with controls. Alternate text for links is rendered but is not customizable. |
|
You must include the LayoutEditorPart control with other Web Parts controls to make a page accessible. Otherwise, users can only use a mouse to drag Web Parts controls. The control does not generate label elements to associate labels with controls. All verbs generate the same link text. Alternate text for links is rendered but is not customizable. The control does not render access key or tab index settings. |
|
The control does not generate label elements to associate labels with controls. All verbs generate the same link text. Alternate text for links is rendered but is not customizable. The control does not render access key or tab index settings. |
Notes
Note 1 In XHTML 1.1 or HTML 4.0, the target attribute on anchor elements is not allowed.
Note 2 In HTML 4.0 and XHTML 1.1, the disabled attribute is allowed only for elements that are designed for user input, such as input and textarea elements. If the controlRenderingCompatibilityVersion attribute of the pages element in the Web.config file is set to 3.5, and if the IsEnabled property is false, some controls render a disabled attribute on non-input elements. For more information, see WebControl.SupportsDisabledAttribute.
Note 3 Using tables to lay out visual elements on a page is not semantically correct and might not conform to some accessibility guidelines. For more information, see Accessibility in Visual Studio and ASP.NET.
Note 4 Even if the control is customized with templates, the rendered markup is enclosed in an HTML table. To prevent this table element from being rendered, set the RenderOuterTable property to false. If you do this, you cannot set style properties such as ForeColor.
Note 5 The alt attribute for img elements should describe the content of the image unless the image is only decorative. For decorative images, the alt attribute should be set to an empty string (""). For more information, see Accessibility in Visual Studio and ASP.NET.