45:["$","title",null,{"children":"Screen Readers and the Accessibility Tree | Be | Observable"}] 4d:T40a,html`

Two

`4e:[] 49:{"id":"0258f466308af096","slug":"demos-for-accessibility","title":"Screen Readers and the Accessibility Tree","thumbnail":"fb68fda96a78155ee9d071d2117403662628227394f2145b8107114ff7b9a09b","access_level":"public","create_time":"$D2019-01-14T03:47:34.052Z","update_time":"$D2019-01-18T02:35:16.514Z","view_time":null,"first_public_time":"$D2019-01-14T22:40:29.955Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"cc613611cfb8ae6b","login":"bebebebebe","name":"Be","avatar_url":"https://avatars-next.observableusercontent.com/6f0a338a112d671f5f7a8387ceb06396c57131b2031b8dd3ac8ba9493793ba6e","tier":"starter_2024","bio":"","following":false},"version":274,"publish_version":274,"role":null,"authored":false,"authors":[{"type":"individual","id":"556fa951c04fad8e","login":"bebebebebe","name":"Be","avatar_url":"https://avatars-next.observableusercontent.com/6f0a338a112d671f5f7a8387ceb06396c57131b2031b8dd3ac8ba9493793ba6e","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"556fa951c04fad8e","login":"bebebebebe","name":"Be","avatar_url":"https://avatars-next.observableusercontent.com/6f0a338a112d671f5f7a8387ceb06396c57131b2031b8dd3ac8ba9493793ba6e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Screen Readers and the Accessibility Tree","cells":[{"id":0,"value":"md`# Screen Readers and the Accessibility Tree`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"md`\nThis is a little interactive introduction to what screen readers have access to on a web page.\n\nUse Chrome and the [ChromeVox extension](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en). ChromeVox is not one of the most commonly used screen readers, but I suggest it because it's easy to add as a Chrome extension and quick to pick up the basic commands you'll need.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"md`\nAfter adding the Chrome extension, start by trying out the following commands (say on another webpage; Wikipedia is known to be accessible, so you might try that).\n * ctrl to make it stop talking,\n * ctrl cmnd - and ctrl cmnd + to increase/decrease level of granularity (you'll see what I mean when you try it), \n * ctrl cmnd uparrow and ctrl cmnd downarrow to move around,\n * ctrl cmnd, then n followed by h to move to the next heading,\n * ctrl cmnd [ and ctrl cmnd ] to decrease/increase the speech speed.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"md`## Semantic HTML`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`Click these buttons to toggle their color:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`\n1. What does ChromeVox read for these buttons?\n2. Which ones are focusable? Click the text above the buttons, then press tab.\n3. Open the button editor (via ..., on hovering to the left of the buttons).\n Notice that button Two is a div instead of a button.\n3. You can make button Two focusable with tabindex=\"0\". Try out focusing on it with tab, now.\n4. Compare buttons One and Two with ChromeVox (again).\n5. Add role='button' to button Two, and compare buttons One and Two, now.\n6. Try toggling the colors of the buttons using only the keyboard (space or enter when focused) instead of clicking with the mouse.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"md`\n### Conclusion \nA div may look and act like a button, in the way we assume a user will interact with it. But the full expected behavior that assistive technologies rely on includes being focusable, having the right role, and responding to the keyboard. We can get all this automatically by using a button element.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"md`## Overriding Properties`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md`\nUse ChromeVox to inspect this button:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"md`\n1. What does ChromeVox read (it should tell you the name and role of the element)?\n2. What does ChromeVox read when you add aria-label=\"Goodbye\" to the button? (Edit button via ... on hover to its left.)\n3. What does ChromeVox read when you add role=\"heading\" to the button? Can you still focus on it with tab?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"md`\n### Conclusion\nWe can add roles and names to HTML elements by using role and aria-label. For instance, we could add a name to a button that contains an icon rather than text.\n\nWhen you use aria- attributes or role, you replace rather than add to information provided to assistive technologies. Adding a role attribute does not change the behavior of the element. This is why rule #1 of the [ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/) Guide is \"No ARIA is better than Bad Aria,\" where it states:\n> Principle 1: A Role is a Promise.\n>\n> Principle 2: ARIA Can Both Cloak and Enhance, Creating Both Power and Danger\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"md`\n### More Detail\nThe browser parses the DOM to create an \"Accessbility Tree,\" with nodes corresponding to a subset of nodes of the DOM. This makes up (most of) the api exposing a web page to a screen reader. Each node, called an \"accessible object,\" has a name and a role. The [Name Calculation guide](https://www.w3.org/TR/wai-aria-1.1/#namecalculation) has more details about how the name is calculated.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"md`\n## Creating Interactive Elements\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"md`\nTake a look at the section on [buttons](https://www.w3.org/TR/wai-aria-practices-1.1/#button) in this ARIA Authoring guide. It tells you how to create a custom button element, much as we discovered in the previous demo.\n\nIn this case, we would probably use a built in button instead as we discussed above.\n\nIf we want to create a more complex UI elements that does not have a semantic HTML counterpart, we can use the ARIA authoring guide. For example, the authors of [react-modal](https://github.com/reactjs/react-modal/tree/master/docs/accessibility) probably used the [section on Dialog (Modals)](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal). The guide provides a helpful [example of an accessible modal](https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 44:null