{"componentChunkName":"component---src-pages-guidelines-accessibility-developers-mdx","path":"/guidelines/accessibility/developers/","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"label":"IBM firmly believes that web and software experiences should be accessible for everyone, regardless of abilities or impairments.","title":"Accessibility","description":"IBM firmly believes that web and software experiences should be accessible for everyone. Carbon is committed to following best practices when it comes to accessibility.","tabs":["Overview","Color","Keyboard","Developers"]},"relativePagePath":"/guidelines/accessibility/developers.mdx","titleType":"prepend","MdxNode":{"id":"4abbe90c-c53f-57ad-8837-6870220824c3","children":[],"parent":"f7a50adc-6bf8-5747-875f-ac7b06b14893","internal":{"content":"---\nlabel: IBM firmly believes that web and software experiences should be accessible for everyone, regardless of abilities or impairments.\ntitle: Accessibility\ndescription: IBM firmly believes that web and software experiences should be accessible for everyone. Carbon is committed to following best practices when it comes to accessibility.\ntabs: ['Overview', 'Color', 'Keyboard', 'Developers']\n---\n\n<AnchorLinks>\n\n<AnchorLink>HTML best practices</AnchorLink>\n<AnchorLink>CSS best practices</AnchorLink>\n<AnchorLink>JS best practices</AnchorLink>\n\n</AnchorLinks>\n\n## HTML best practices\n\n### Structuring code and navigation\n\nThink of code hierarchy when structuring your content so that screen readers and keyboard-only users can access interactive elements in a logical and predictable order via tabbing. Create the tab flow hierarchy by using the source code to arrange the keyboard navigation. Begin with the header, followed by the main navigation, then page navigation (from left to right, top to bottom), and end with the footer. The objective is to give keyboard users an intentional experience that is comparable to the experience of mouse users.\n\n### Use semantic HTML\n\nUse native HTML elements as much as you can, and use them for their correct purpose. These elements have built-in accessibility benefits. They inform screen readers what they are and what they do, and standard interactive elements, such as a button, include keyboard functionality. Aside from making it accessible, this will also make it easier to develop and maintain, better on mobile, and good for search engine optimization.\n\n```html\n<button>Play Video</button>\n<header></header>\n<main></main>\n<nav></nav>\n<footer></footer>\n<aside></aside>\n<section></section>\n<article></article>\n```\n\n### Use clear language\n\nWhen adding content, consider cognitive disabilities, anyone whose native language isn’t the language your content is written in, and screen readers. When possible, avoid dashes, abbreviations, acronyms (at least the first time), and table layouts if a table is not needed. If abbreviating, use the native `<abbr />` element with title attribute.\n\n```html\n\"9 to 5\" \"November\" <abbr title=\"November\">Nov</abbr>\n```\n\n### Use meaningful text labels\n\nConsider visually impaired people when labeling elements. Make sure there is textual context for screen readers.\n\n```html\n<!-- Do this  -->\n<a>Read more about pricing</a>\n```\n\n```html\n<!--  Not this  -->\n<a>Click here</a>\n```\n\n### Making accessible data tables\n\nAlways specify table headers with `<th />` elements, and make sure they stand out. Utilize `scope` attribute if necessary to specify if they are headers for rows or columns. Utilize alternative text along with tables for visually impaired users. `<caption />` is preferred, but `<table />` summary works too.\n\n```html\n<table summary=\"Names and Ages of My Coworkers\">\n  <caption>\n    Names and Ages of My Coworkers\n  </caption>\n  <thead>\n    <tr>\n      <th scope=\"col\">Firstname</th>\n      <th scope=\"col\">Lastname</th>\n      <th scope=\"col\">Age</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Jane</td>\n      <td>Smith</td>\n      <td>22</td>\n    </tr>\n    <tr>\n      <td>Tom</td>\n      <td>West</td>\n      <td>47</td>\n    </tr>\n  </tbody>\n</table>\n```\n\n### Making accessible data visualizations\n\nIt is important to take into account visually impaired users when including data visualizations. Consider accompanying visuals with a data table as another alternative for users who rely on screen readers. It is also important to take into account color choices for color-blind users.\n\n### Multimedia text alternatives\n\nEvery image that is not decorative must include `alt` text with a meaningful description of the image and a `title` attribute. You can also utilize `aria-labelledby` along with `id` attributes instead of `alt` text. **If the image is decorative, use an empty `alt` attribute; otherwise the screen reader will read the whole image url if the `alt` is left out.**\n\n```html\n<!-- Example 1 -->\n\n![](puppy.jpg\" title=\"Sleeping Puppy)A sleeping puppy\" />\n```\n\n```html\n<!-- Example 2 -->\n\n![](puppy2.jpg\" aria-labelledby=\"imagelabel\" />\n<p id=\"imagelabel\">This is a picture of a cute puppy in cup</p>\n```\n\n### Audio alternatives\n\nProvide closed-captioning with videos or transcriptions of audio files.\n\n```html\n<video controls>\n  <source src=\"example.mp4\" type=\"video/mp4\" />\n  <source src=\"example.webm\" type=\"video/webm\" />\n  <track kind=\"subtitles\" src=\"subtitles_english.vtt\" srclang=\"en\" />\n</video>\n```\n\n### Avoid font icon libraries\n\nUse SVG's instead of font icon libraries, as those are not accessible.\n\n```html\n<svg width=\"80\" height=\"10\">\n  <line class=\"line\" x1=\"200\" y1=\"0\" x2=\"0\" y2=\"0\" />\n</svg>\n```\n\n### Utilize ARIA (Accessible Rich Internet Application) roles and landmark roles\n\nARIA roles convey the intent or meaning of an element to assistive technology. This helps users navigate when they can't see the layout and provides further context about different functionalities.\n\nLandmark roles identify regions in a page, and act much like native HTML tags would when it comes to semantics. Signpost roles describe other information about a given element's functionality on a page. These are especially helpful when building complex, custom interfaces or to reinforce semantics in native HTML elements.\n\n```html\n<!-- landmark roles -->\n<nav role=\"navigation\"></nav>\n<main role=\"main\"></main>\n```\n\n```html\n<!-- signpost roles -->\n<div role=\"banner\">This is a banner.</div>\n<div role=\"tabgroup\"><div role=\"tab\"></div></div>\n<div role=\"combobox\"></div>\n<div role=\"slider\"></div>\n<button role=\"button\"></button>\n```\n\n## CSS best practices\n\n### CSS rule of thumb\n\nYou can style a page feature to fit your design, but don't change it to the point that it doesn't look or behave as expected.\n\n### Style focus indicators\n\nAdd styling to tabbable elements on hover and focus, so that keyboard-only users can have a clear visual of where they are navigating. Never suppress the focus indicator altogether.\n\n### Hiding elements\n\nWhen hiding content from a screen reader, consider source order. Use `visibility: hidden`, along with `display: none` in your CSS.\n\n## JS best practices\n\n### JavaScript rule of thumb\n\nDon't rely too much on JavaScript to generate HTML and CSS. Follow the \"Unobtrusive JavaScript\" principle, which means that JavaScript should be used to enhance functionality not build it entirely. Use your built-in browser functionality as much as possible. If you're utilizing JavaScript to make complex UI features, use WAI-ARIA to make elements accessible. Examples of unobtrusive JavaScript include providing client-side form validation and custom controls for HTML5 `<video />` elements that are accessible to keyboards.\n\n### Accessible mouse-specific events\n\nDouble up mouse-specific events with other events for keyboard-only users.\n\n```javascript\nconst foo = document.querySelector('.foo-class');\n\nfoo.onmouseover = someFunction();\n\nfoo.onmouseout = anotherFunction();\n\nfoo.onfocus = someFunction();\n\nfoo.onblur = anotherFunction();\n```\n","type":"Mdx","contentDigest":"d61416654a74211543cda06b09a24e77","counter":1442,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Accessibility","label":"IBM firmly believes that web and software experiences should be accessible for everyone, regardless of abilities or impairments.","description":"IBM firmly believes that web and software experiences should be accessible for everyone. Carbon is committed to following best practices when it comes to accessibility.","tabs":["Overview","Color","Keyboard","Developers"]},"exports":{},"rawBody":"---\nlabel: IBM firmly believes that web and software experiences should be accessible for everyone, regardless of abilities or impairments.\ntitle: Accessibility\ndescription: IBM firmly believes that web and software experiences should be accessible for everyone. Carbon is committed to following best practices when it comes to accessibility.\ntabs: ['Overview', 'Color', 'Keyboard', 'Developers']\n---\n\n<AnchorLinks>\n\n<AnchorLink>HTML best practices</AnchorLink>\n<AnchorLink>CSS best practices</AnchorLink>\n<AnchorLink>JS best practices</AnchorLink>\n\n</AnchorLinks>\n\n## HTML best practices\n\n### Structuring code and navigation\n\nThink of code hierarchy when structuring your content so that screen readers and keyboard-only users can access interactive elements in a logical and predictable order via tabbing. Create the tab flow hierarchy by using the source code to arrange the keyboard navigation. Begin with the header, followed by the main navigation, then page navigation (from left to right, top to bottom), and end with the footer. The objective is to give keyboard users an intentional experience that is comparable to the experience of mouse users.\n\n### Use semantic HTML\n\nUse native HTML elements as much as you can, and use them for their correct purpose. These elements have built-in accessibility benefits. They inform screen readers what they are and what they do, and standard interactive elements, such as a button, include keyboard functionality. Aside from making it accessible, this will also make it easier to develop and maintain, better on mobile, and good for search engine optimization.\n\n```html\n<button>Play Video</button>\n<header></header>\n<main></main>\n<nav></nav>\n<footer></footer>\n<aside></aside>\n<section></section>\n<article></article>\n```\n\n### Use clear language\n\nWhen adding content, consider cognitive disabilities, anyone whose native language isn’t the language your content is written in, and screen readers. When possible, avoid dashes, abbreviations, acronyms (at least the first time), and table layouts if a table is not needed. If abbreviating, use the native `<abbr />` element with title attribute.\n\n```html\n\"9 to 5\" \"November\" <abbr title=\"November\">Nov</abbr>\n```\n\n### Use meaningful text labels\n\nConsider visually impaired people when labeling elements. Make sure there is textual context for screen readers.\n\n```html\n<!-- Do this  -->\n<a>Read more about pricing</a>\n```\n\n```html\n<!--  Not this  -->\n<a>Click here</a>\n```\n\n### Making accessible data tables\n\nAlways specify table headers with `<th />` elements, and make sure they stand out. Utilize `scope` attribute if necessary to specify if they are headers for rows or columns. Utilize alternative text along with tables for visually impaired users. `<caption />` is preferred, but `<table />` summary works too.\n\n```html\n<table summary=\"Names and Ages of My Coworkers\">\n  <caption>\n    Names and Ages of My Coworkers\n  </caption>\n  <thead>\n    <tr>\n      <th scope=\"col\">Firstname</th>\n      <th scope=\"col\">Lastname</th>\n      <th scope=\"col\">Age</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Jane</td>\n      <td>Smith</td>\n      <td>22</td>\n    </tr>\n    <tr>\n      <td>Tom</td>\n      <td>West</td>\n      <td>47</td>\n    </tr>\n  </tbody>\n</table>\n```\n\n### Making accessible data visualizations\n\nIt is important to take into account visually impaired users when including data visualizations. Consider accompanying visuals with a data table as another alternative for users who rely on screen readers. It is also important to take into account color choices for color-blind users.\n\n### Multimedia text alternatives\n\nEvery image that is not decorative must include `alt` text with a meaningful description of the image and a `title` attribute. You can also utilize `aria-labelledby` along with `id` attributes instead of `alt` text. **If the image is decorative, use an empty `alt` attribute; otherwise the screen reader will read the whole image url if the `alt` is left out.**\n\n```html\n<!-- Example 1 -->\n\n![](puppy.jpg\" title=\"Sleeping Puppy)A sleeping puppy\" />\n```\n\n```html\n<!-- Example 2 -->\n\n![](puppy2.jpg\" aria-labelledby=\"imagelabel\" />\n<p id=\"imagelabel\">This is a picture of a cute puppy in cup</p>\n```\n\n### Audio alternatives\n\nProvide closed-captioning with videos or transcriptions of audio files.\n\n```html\n<video controls>\n  <source src=\"example.mp4\" type=\"video/mp4\" />\n  <source src=\"example.webm\" type=\"video/webm\" />\n  <track kind=\"subtitles\" src=\"subtitles_english.vtt\" srclang=\"en\" />\n</video>\n```\n\n### Avoid font icon libraries\n\nUse SVG's instead of font icon libraries, as those are not accessible.\n\n```html\n<svg width=\"80\" height=\"10\">\n  <line class=\"line\" x1=\"200\" y1=\"0\" x2=\"0\" y2=\"0\" />\n</svg>\n```\n\n### Utilize ARIA (Accessible Rich Internet Application) roles and landmark roles\n\nARIA roles convey the intent or meaning of an element to assistive technology. This helps users navigate when they can't see the layout and provides further context about different functionalities.\n\nLandmark roles identify regions in a page, and act much like native HTML tags would when it comes to semantics. Signpost roles describe other information about a given element's functionality on a page. These are especially helpful when building complex, custom interfaces or to reinforce semantics in native HTML elements.\n\n```html\n<!-- landmark roles -->\n<nav role=\"navigation\"></nav>\n<main role=\"main\"></main>\n```\n\n```html\n<!-- signpost roles -->\n<div role=\"banner\">This is a banner.</div>\n<div role=\"tabgroup\"><div role=\"tab\"></div></div>\n<div role=\"combobox\"></div>\n<div role=\"slider\"></div>\n<button role=\"button\"></button>\n```\n\n## CSS best practices\n\n### CSS rule of thumb\n\nYou can style a page feature to fit your design, but don't change it to the point that it doesn't look or behave as expected.\n\n### Style focus indicators\n\nAdd styling to tabbable elements on hover and focus, so that keyboard-only users can have a clear visual of where they are navigating. Never suppress the focus indicator altogether.\n\n### Hiding elements\n\nWhen hiding content from a screen reader, consider source order. Use `visibility: hidden`, along with `display: none` in your CSS.\n\n## JS best practices\n\n### JavaScript rule of thumb\n\nDon't rely too much on JavaScript to generate HTML and CSS. Follow the \"Unobtrusive JavaScript\" principle, which means that JavaScript should be used to enhance functionality not build it entirely. Use your built-in browser functionality as much as possible. If you're utilizing JavaScript to make complex UI features, use WAI-ARIA to make elements accessible. Examples of unobtrusive JavaScript include providing client-side form validation and custom controls for HTML5 `<video />` elements that are accessible to keyboards.\n\n### Accessible mouse-specific events\n\nDouble up mouse-specific events with other events for keyboard-only users.\n\n```javascript\nconst foo = document.querySelector('.foo-class');\n\nfoo.onmouseover = someFunction();\n\nfoo.onmouseout = anotherFunction();\n\nfoo.onfocus = someFunction();\n\nfoo.onblur = anotherFunction();\n```\n","fileAbsolutePath":"/zeit/3ed0734e/src/pages/guidelines/accessibility/developers.mdx"}}}}