web-accessibility | 易学教程

Accessibility issue after upgrading to ag grid version 23

阅读更多关于 Accessibility issue after upgrading to ag grid version 23

问题 How to resolve accessibility error for ag grid i.e.Form control label is missing text. When i am scanning my application through siteimprove accessibility checker, i am getting this error. Form control label is missing text 1.3.1 Info and Relationships The form element has a label but text has not been added (enter image description herelabel is empty). Add the text for the form element within the label-tag or WAI-ARIA 'aria-label' or 'aria-labelledby' attribute that is already present. I

Tool tip content is not accessible using keyboard

阅读更多关于 Tool tip content is not accessible using keyboard

问题 I am unable to see the contents of the image tool tip when focussed on it using keyboard. Below is a code example: <img id= "id1" title ="title1" tabindex ="0" src="/images/home.gif" alt="title1" /> I am able to see the tool tip contents when hovered using mouse. 回答1: According to the HTML 5.2 specification, The title attribute represents advisory information for the element, such as would be appropriate for a tooltip. The specification also adds the following warning: Warning! Relying on the

NVDA reads all modal content after reading the focused element in modal dialog

阅读更多关于 NVDA reads all modal content after reading the focused element in modal dialog

问题 I have implemented a requirement to focus the first tab(basically an <a> element) present inside the modal dialog. When using NVDA screen reader to test the feature, it is observed that after reading dialog label and description (pointed by aria-labelledby and aria-describedby) it reads the focused tab element. However, after that it continues on to read the entire modal dialog content starting with modal heading. This is not the desired reading behavior we want. If we put focus on the first

Preventing high-contrast mode in Edge from adding background to text

阅读更多关于 Preventing high-contrast mode in Edge from adding background to text

问题 I'm working to adjust some components so that they all function and look good in high-contrast mode. Edge seems to be adding a black background under all text that IE11 does not add. I can't seem to find a way to target this background in CSS, or any other way to normalize the behavior between the two browsers. For example, let's say I have the following: <div class="SelectedText"> Text! </div> And let's say I assigned background-color: cyan; and color: black; to the .SelectedText div. In

Preventing high-contrast mode in Edge from adding background to text

阅读更多关于 Preventing high-contrast mode in Edge from adding background to text

I'm working to adjust some components so that they all function and look good in high-contrast mode. Edge seems to be adding a black background under all text that IE11 does not add. I can't seem to find a way to target this background in CSS, or any other way to normalize the behavior between the two browsers. For example, let's say I have the following: <div class="SelectedText"> Text! </div> And let's say I assigned background-color: cyan; and color: black; to the .SelectedText div. In this scenario, IE11 renders it as expected with the div and text having the assigned colors. However, in

How to group form inputs accessibly without a fieldset?

阅读更多关于 How to group form inputs accessibly without a fieldset?

问题 Problem: Grouping form elements I have an HTML form, where in few places a single control is composed of several inputs. One example is a group of radio buttons. I'd like to group those inputs and it's label explicitly, so that the screen readers would also (in addition to the visual representation by aligning them on a single line) be able to understand and announce this relationship. For example, let's say I have a control like this: <div class="control"> <div class="control-label">Type<