5 lines
15 KiB
JSON
5 lines
15 KiB
JSON
|
{
|
||
|
|
"id": "guide/accessibility",
|
||
|
|
"title": "Accessibility in Angular",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/accessibility.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"accessibility-in-angular\">Accessibility in Angular<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/accessibility#accessibility-in-angular\"><i class=\"material-icons\">link</i></a></h1>\n<p>The web is used by a wide variety of people, including those who have visual or motor impairments.\nA variety of assistive technologies are available that make it much easier for these groups to\ninteract with web-based software applications.\nIn addition, designing an application to be more accessible generally improves the user experience for all users.</p>\n<p>For an in-depth introduction to issues and techniques for designing accessible applications, see the <a href=\"https://developers.google.com/web/fundamentals/accessibility/#what_is_accessibility\">Accessibility</a> section of the Google's <a href=\"https://developers.google.com/web/fundamentals/\">Web Fundamentals</a>.</p>\n<p>This page discusses best practices for designing Angular applications that\nwork well for all users, including those who rely on assistive technologies.</p>\n<div class=\"alert is-helpful\">\n<p> For the sample app that this page describes, see the <live-example></live-example>.</p>\n</div>\n<h2 id=\"accessibility-attributes\">Accessibility attributes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/accessibility#accessibility-attributes\"><i class=\"material-icons\">link</i></a></h2>\n<p>Building accessible web experience often involves setting <a href=\"https://developers.google.com/web/fundamentals/accessibility/semantics-aria\">ARIA attributes</a>\nto provide semantic meaning where it might otherwise be missing.\nUse <a href=\"guide/attribute-binding\">attribute binding</a> template syntax to control the values of accessibility-related attributes.</p>\n<p>When binding to ARIA attributes in Angular, you must use the <code>attr.</code> prefix, as the ARIA\nspecification depends specifically on HTML attributes rather than properties of DOM elements.</p>\n<code-example language=\"html\">\n<!-- Use attr. when binding to an ARIA attribute -->\n<button [attr.aria-label]=\"myActionLabel\">...</button>\n</code-example>\n<p>Note that this syntax is only necessary for attribute <em>bindings</em>.\nStatic ARIA attributes require no extra syntax.</p>\n<code-example language=\"html\">\n<!-- Static ARIA attributes require no extra syntax -->\n<button aria-label=\"Save document\">...</button>\n</code-example>\n<div class=\"alert is-helpful\">\n<p> By convention, HTML attributes use lowercase names (<code>tabindex</code>), while properties use camelCase names (<code>tabIndex</code>).</p>\n<p> See the <a href=\"guide/binding-syntax#html-attribute-vs-dom-property\">Binding syntax</a> guide for more background on the difference between attributes and properties.</p>\n</div>\n<h2 id=\"angular-ui-components\">Angular UI components<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/accessibility#angular-ui-components\"><i class=\"material-icons\">link</i></a></h2>\n<p>The <a href=\"https://material.angular.io/\">Angular Material</a> library, which is maintained by the Angular team, is a suite of reusable UI components that aims to be fully accessible.\nThe <a href=\"https://material.angular.io/cdk/categories\">Component Development Kit (CDK)</a> includes the <code>a11y</code> package that provides tools to support various areas of accessibility.\nFor example:</p>\n<ul>\n<li>\n<p><code>LiveAnnouncer</code> is used to announce messages for screen-reader users using an <code>aria-live</code> region. See the W3C documentation for more information on <a hr
|
||
|
|
}
|