wai-aria

React props – set isRequired on a prop if another prop is null / empty

by

You don’t need another library, ‘prop-types’ provides this out of the box. See https://facebook.github.io/react/docs/typechecking-with-proptypes.html Example: import PropTypes from ‘prop-types’; //……. ExampleComponent.propTypes = { showDelete: PropTypes.bool, handleDelete: function(props, propName, componentName) { if ((props[‘showDelete’] == true && (props[propName] == undefined || typeof(props[propName]) != ‘function’))) { return new Error(‘Please provide a handleDelete function!’); } }, }

Difference between aria-live=”assertive” and aria-live=”polite”

by

The behavior of live regions depends on the browser and screen reader being used, but you’re on the right track. According to the WAI-ARIA spec: The values of this attribute are expressed in degrees of importance. When regions are specified as polite, assistive technologies will notify users of updates but generally do not interrupt the … Read more

What is the difference between aria-label and title attributes?

by

ARIA-tags are used for disabled visitors of your site. It’s very nice of Bootstrap, that they support it by default. Accessible Rich Internet Applications (ARIA) defines ways to make Web content and Web applications (especially those developed with Ajax and JavaScript) more accessible to people with disabilities. For example, ARIA enables accessible navigation landmarks, JavaScript … Read more

The purpose of using “aria-labelledby” on already labeled input elements?

by

There’s some good examples of its use at Mozilla Developer pages. Perhaps the best of their examples is where it’s used to associate a popup menu with the parent menu item – it’s Example 7 in the page: <div role=”menubar”> <div role=”menuitem” aria-haspopup=”true” id=”fileMenu”>File</div> <div role=”menu” aria-labelledby=”fileMenu”> <div role=”menuitem”>Open</div> <div role=”menuitem”>Save</div> <div role=”menuitem”>Save as …</div> … Read more

How to bind dynamic data to aria-label?

by

Just use attr. before aria-label: attr.aria-label=”Product details for {{productDetails?.ProductName}}” or [attr.aria-label]=”‘Product details for ‘ + productDetails?.ProductName” Examples here: https://stackblitz.com/edit/angular-aria-label?embed=1&file=src/app/app.component.html&hideExplorer=1 Ps. As @Simon_Weaver mentioned, there are some components that implements its own aria-label @Input, like mat-select. See his answer here Angular Material mat-label accessibility

What is HTML5 ARIA?

by

WAI-ARIA is a spec defining support for accessible web apps. It defines bunch of markup extensions (mostly as attributes on HTML5 elements), which can be used by the web app developer to provide additional information about the semantics of the various elements to assistive technologies like screen readers. Of course, for ARIA to work, the … Read more

What are these attributes: `aria-labelledby` and `aria-hidden`

by

HTML5 ARIA attribute is what you’re looking for. It can be used in your code even without bootstrap. Accessible Rich Internet Applications (ARIA) defines ways to make Web content and Web applications (especially those developed with Ajax and JavaScript) more accessible to people with disabilities. To be precise for your question, here is what your … Read more

What’s the difference between HTML ‘hidden’ and ‘aria-hidden’ attributes?

by

ARIA (Accessible Rich Internet Applications) defines a way to make Web content and Web applications more accessible to people with disabilities. The hidden attribute is new in HTML5 and tells browsers not to display the element. The aria-hidden property tells screen-readers if they should ignore the element. Have a look at the w3 docs for … Read more

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)