2a:null 2b:["$","title",null,{"children":"Brief Tips on Accessibility | Steve Oney | Observable"}] 30:[] 2e:{"id":"d4a3fe9a441147b9","slug":"si-579-brief-tips-on-accessibility","title":"Brief Tips on Accessibility","thumbnail":"f364c2e59c6c15e2c426d0270d0fd7e9672ea54cfc1c0662ef44bf2a25e98f73","access_level":"public","create_time":"$D2021-04-05T07:24:13.336Z","update_time":"$D2023-10-02T17:43:50.524Z","view_time":null,"first_public_time":"$D2021-04-05T18:25:38.548Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"55b87b37da07de37","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":"starter_2024"},"version":31,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null}],"members":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"8fc582aae7c4b049","slug":"si-579","title":"Building Interactive Applications","owner":{"id":"55b87b37da07de37","login":"soney","name":"Steve Oney"}},"type":"notebook","body":{"title":"Brief Tips on Accessibility","cells":[{"id":0,"value":"md`# Brief Tips on Accessibility`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"md`\n**Accessibility** (or \"a11y\"; 11 for the number of characters between \"a\" and \"y\") refers to designing your page in a way that ensures it can be used by a wide varity of people, including people with impairments.\n\nSI 539 already talks about accessibility so I won't repeat too much. Many accessibility concerns [can be handled through HTML](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML) by doing things like:\n\n- Using **semantically meaningful elements** (not \\`

\\` or \\`\\`) where possible\n- Setting [the \\`tabindex\\` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) where applicable. For example (Credit: MDN for the example):\n - Check the tab order with the Firefox accessibility inspector\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"html`\n

Click anywhere in this pane, then try tabbing through the elements.

\n\nFirst in tab order:\n\n

Tabbable due to tabindex.

\n\n

Not tabbable: no tabindex.

\n\nThird in tab order:\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"md`\n- Adding \\`alt\\` attributes to \\`\\` elements that describe what the image displays\n - The \\`longdesc\\` attribute also works when applicable\n- Using images sparingly (do not use images as buttons and never put important text content in am image)\n- Add keyboard shortcuts; allow users to do actions without relying on the mouse\n - For example, allow users to press \\`[Enter]\\` to submit (depending on the situation, this might involve adding an extra event listener)\n- Use [the ARIA standard](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics)\n - For example, when updating a page via JavaScript, there is an ARIA attribute [\\`aria-live\\`](https://www.w3.org/TR/wai-aria-1.1/#aria-live) for notifying the screen reader that it should be presented to the user\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"md`\n## What's the problem with this page?\n\n- https://chi2016.acm.org/program/?tab=chi2016-app\n- https://www.calculator.net/bmi-calculator.html?ctype=standard&cage=25&csex=m&cheightfeet=5&cheightinch=10&cpound=160&cheightmeter=180&ckg=65&printit=0&x=0&y=0\n- \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2f:"$2e:body"