{"componentChunkName":"component---src-pages-guidelines-accessibility-overview-mdx","path":"/guidelines/accessibility/overview/","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/overview.mdx","titleType":"prepend","MdxNode":{"id":"cd6810d5-707d-52ce-b187-cfc9c7e3dacf","children":[],"parent":"2aee8f26-d5b4-5ded-b622-ea4bc276d8e1","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### IBM firmly believes that web and software experiences should be accessible for everyone, regardless of abilities or impairments. Carbon is committed to following and complying with best practices when it comes to accessibility.\n\n<AnchorLinks>\n\n<AnchorLink>Carbon and accessibility</AnchorLink>\n<AnchorLink>Categories of disabilities</AnchorLink>\n<AnchorLink>Global accessibility standards</AnchorLink>\n<AnchorLink>Resources</AnchorLink>\n<AnchorLink>Tools</AnchorLink>\n\n</AnchorLinks>\n\n## Carbon and accessibility\n\nAccessible design not only helps users with disabilities; it provides better user experiences for everyone.\nAll Carbon components follow the [IBM Accessibility Checklist](https://www.ibm.com/able/guidelines/ci162/accessibility_checklist.html) which is based on WCAG AA, Section 508, and European standards. Carbon's patterns are perceivable, operable, and understandable to users, even when using a screen reader or other assistive technology.\n\nHowever, how you use Carbon also affects the accessibility of a product. Read this page to learn about accessibility in general. Then, while you're working, use the role-specific Carbon accessibility guidelines to help you make products that anyone can use.\n\nFor a product to be considered accessible, it should:\n\n- Give every user the same benefits, regardless of ability\n- Adapt to any user in any context\n\n## Categories of disabilities\n\nDisabilities can be thought of as a mismatch between one's ability and one's environment, and can be broken into three main types:\n\n| Type           | Description                                                                                                                                                                          |     |\n| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --- |\n| _Situational_  | A person with typical vision might struggle to view their screen in a bright environment. Or, a person sitting in a library may be unable to watch a video with the audio turned on. |     |\n| _Temporary_    | A person with a broken wrist may not be able to type but will regain the ability when healed.                                                                                        |     |\n| _Long-lasting_ | This is what people typically think of when they hear \"disability.\"                                                                                                                  |     |\n\n### Blind users\n\n#### How they experience an interface\n\n- May use a screen reader to experience interfaces\n- May rely on Braille output\n- Cannot be expected to use a pointer or mouse for input\n\n#### What designers should think about\n\n- Is visual information translated effectively into text? Can the image be understood through its metadata alone?\n- When possible, test all designs through a screen reader.\n\n#### How this applies to everyone\n\n- As audio-only interfaces gain popularity through devices like AI assistants, users are expecting more and more from the audio representations of experiences.\n\n### Low-vision users\n\nLow vision can include partial sight in one or both eyes and can range from mild to severe. It affects approximately 4% of the world’s population.\n\n#### How they experience an interface\n\n- May use screen readers, screen magnifiers, high-contrast modes, and/or monochrome displays\n- May have their browser font size adjusted to a larger setting\n- May not use adaptive technology at all\n\n#### What designers should think about\n\n- Maximize the readability and visual clarity of content.\n- Consider how relative proximity of information changes when a page is magnified.\n- Follow [keyboard guidelines](https://www.nngroup.com/articles/keyboard-accessibility/) and test with a screen reader to ensure the page is read to the user in a logical order.\n- To get a better understanding of the various low-vision disabilities, we recommend using the [NoCoffee](https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl) Chrome plugin to preview websites.\n\n#### How this applies to everyone\n\n- Users without disabilities sometimes need to view screens in poor lighting conditions. For example, imagine using a screen outside on a bright day. A higher-contrast design will make the screen more usable for everyone.\n- Vision worsens gradually starting around age 40, and good contrast helps this very large demographic use your interface.\n\n### Color-blind users\n\nColor-blindness affects 8% of all men and 0.4% of women.\n\n#### How they experience an interface\n\n- Will not be able to differentiate between some colors on an interface\n- Rely on non-color information to use an interface\n\n#### What designers should think about\n\n- Run your design through a color-blind simulator. If the design doesn't work, try another approach. If you're working in Sketch, we recommend the [Stark](http://www.getstark.co/) plugin.\n  <!-- - To view best practices for using color in Data Visualization, view the [Data Vis](/data-visualization/overview/colors) color page. -->\n\n### Deaf and hard-of-hearing users\n\n#### How they experience an interface\n\n- May rely on captioning and other alternative representations of audio\n\n#### What designers should think about\n\n- Find alternatives to conveying information exclusively with sound.\n- Transcribe and caption all videos and animations that have meaningful audio.\n\n#### How this applies to everyone\n\n- All users can benefit from closed captioning. Imagine using your device in a loud environment or, alternatively, in a quiet environment when it wouldn't be appropriate to turn your sound on.\n\n### Physical disabilities\n\n#### How users with physical disabilities experience an interface\n\n- May rely on keyboards, track balls, voice recognition, and other assistive technologies to interact with an interface\n- May not be able to use a keyboard, mouse, or other pointer\n\n#### What designers should think about\n\n- Design for good keyboard interaction, making sure all actions are keyboard accessible and efficient.\n- Learn how to navigate using a [keyboard](https://help.gnome.org/users/gnome-help/stable/keyboard-nav.html.en) and spend some time navigating the web, email, and digital products using only the keyboard.\n\n#### How this applies to everyone\n\n- Many users prefer to navigate interfaces with a keyboard and no mouse for efficiency. Good keyboard navigation can help everyone be more productive.\n\n### Users with cognitive disabilities\n\nThese users offer a broad spectrum of concerns for design. Functional cognitive disabilities can include difficulty with:\n\n- Memory\n- Problem solving\n- Attention\n- Reading, linguistic, and verbal comprehension\n- Math comprehension\n- Visual comprehension\n\n#### How they experience an interface\n\n- May have limited working memory and need information to remain visible throughout the completion of a task\n- May experience seizures when exposed to flashing content (epilepsy)\n\n#### What designers should think about\n\n- Designers should understand the danger of complex language, non-stopping or flashing animations and fundamental cognitive usability heuristics.\n- Design in as linear a fashion as possible and focus on design heuristics that have to do with cognitive load and memory.\n\n#### How this applies to everyone\n\n- Best practices for cognitive disabilities benefit all users. Busy environments can tax your cognitive load. Aging adults may also experience a decline in cognitive abilities. Placing a low cognitive load on users reduces mistakes and improves effectiveness, regardless of their abilities.\n\n## Global accessibility standards\n\n- [World Wide Web Consortium](https://www.w3.org/WAI/) (W3C)'s Web Accessibility Initiative (WAI) is an effort to improve the accessibility of the World Wide Web for people of all abilities.\n- Web Accessibility Initiative (WAI) contributors create and maintain [Web Content Accessibility Guidelines](https://www.w3.org/TR/WCAG21/) (WCAG), which is the global accessibility standard.\n\n## Resources\n\n- [IBM Web Accessibility Checklist](https://www.ibm.com/able/guidelines/ci162/accessibility_checklist.html) - IBM's specific ruleset for creating accessible web applications\n- [IBM accessibility quick guidance](https://w3.ibm.com/able/devtest/quick/) - (Internal only)\n- [W3C low vision requirements](https://www.w3.org/TR/low-vision-needs/)\n\n## Tools\n\n- [High-contrast Chrome plugin](https://chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph/related?hl=en)\n- [Stark Sketch plugin](http://www.getstark.co/)\n- [NoCoffee vision simulator](https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl)\n- [Color contrast checker](https://marijohannessen.github.io/color-contrast-checker/)\n","type":"Mdx","contentDigest":"d6cecd2bb9ea48a400d37d1e8f09b9e4","counter":1495,"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### IBM firmly believes that web and software experiences should be accessible for everyone, regardless of abilities or impairments. Carbon is committed to following and complying with best practices when it comes to accessibility.\n\n<AnchorLinks>\n\n<AnchorLink>Carbon and accessibility</AnchorLink>\n<AnchorLink>Categories of disabilities</AnchorLink>\n<AnchorLink>Global accessibility standards</AnchorLink>\n<AnchorLink>Resources</AnchorLink>\n<AnchorLink>Tools</AnchorLink>\n\n</AnchorLinks>\n\n## Carbon and accessibility\n\nAccessible design not only helps users with disabilities; it provides better user experiences for everyone.\nAll Carbon components follow the [IBM Accessibility Checklist](https://www.ibm.com/able/guidelines/ci162/accessibility_checklist.html) which is based on WCAG AA, Section 508, and European standards. Carbon's patterns are perceivable, operable, and understandable to users, even when using a screen reader or other assistive technology.\n\nHowever, how you use Carbon also affects the accessibility of a product. Read this page to learn about accessibility in general. Then, while you're working, use the role-specific Carbon accessibility guidelines to help you make products that anyone can use.\n\nFor a product to be considered accessible, it should:\n\n- Give every user the same benefits, regardless of ability\n- Adapt to any user in any context\n\n## Categories of disabilities\n\nDisabilities can be thought of as a mismatch between one's ability and one's environment, and can be broken into three main types:\n\n| Type           | Description                                                                                                                                                                          |     |\n| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --- |\n| _Situational_  | A person with typical vision might struggle to view their screen in a bright environment. Or, a person sitting in a library may be unable to watch a video with the audio turned on. |     |\n| _Temporary_    | A person with a broken wrist may not be able to type but will regain the ability when healed.                                                                                        |     |\n| _Long-lasting_ | This is what people typically think of when they hear \"disability.\"                                                                                                                  |     |\n\n### Blind users\n\n#### How they experience an interface\n\n- May use a screen reader to experience interfaces\n- May rely on Braille output\n- Cannot be expected to use a pointer or mouse for input\n\n#### What designers should think about\n\n- Is visual information translated effectively into text? Can the image be understood through its metadata alone?\n- When possible, test all designs through a screen reader.\n\n#### How this applies to everyone\n\n- As audio-only interfaces gain popularity through devices like AI assistants, users are expecting more and more from the audio representations of experiences.\n\n### Low-vision users\n\nLow vision can include partial sight in one or both eyes and can range from mild to severe. It affects approximately 4% of the world’s population.\n\n#### How they experience an interface\n\n- May use screen readers, screen magnifiers, high-contrast modes, and/or monochrome displays\n- May have their browser font size adjusted to a larger setting\n- May not use adaptive technology at all\n\n#### What designers should think about\n\n- Maximize the readability and visual clarity of content.\n- Consider how relative proximity of information changes when a page is magnified.\n- Follow [keyboard guidelines](https://www.nngroup.com/articles/keyboard-accessibility/) and test with a screen reader to ensure the page is read to the user in a logical order.\n- To get a better understanding of the various low-vision disabilities, we recommend using the [NoCoffee](https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl) Chrome plugin to preview websites.\n\n#### How this applies to everyone\n\n- Users without disabilities sometimes need to view screens in poor lighting conditions. For example, imagine using a screen outside on a bright day. A higher-contrast design will make the screen more usable for everyone.\n- Vision worsens gradually starting around age 40, and good contrast helps this very large demographic use your interface.\n\n### Color-blind users\n\nColor-blindness affects 8% of all men and 0.4% of women.\n\n#### How they experience an interface\n\n- Will not be able to differentiate between some colors on an interface\n- Rely on non-color information to use an interface\n\n#### What designers should think about\n\n- Run your design through a color-blind simulator. If the design doesn't work, try another approach. If you're working in Sketch, we recommend the [Stark](http://www.getstark.co/) plugin.\n  <!-- - To view best practices for using color in Data Visualization, view the [Data Vis](/data-visualization/overview/colors) color page. -->\n\n### Deaf and hard-of-hearing users\n\n#### How they experience an interface\n\n- May rely on captioning and other alternative representations of audio\n\n#### What designers should think about\n\n- Find alternatives to conveying information exclusively with sound.\n- Transcribe and caption all videos and animations that have meaningful audio.\n\n#### How this applies to everyone\n\n- All users can benefit from closed captioning. Imagine using your device in a loud environment or, alternatively, in a quiet environment when it wouldn't be appropriate to turn your sound on.\n\n### Physical disabilities\n\n#### How users with physical disabilities experience an interface\n\n- May rely on keyboards, track balls, voice recognition, and other assistive technologies to interact with an interface\n- May not be able to use a keyboard, mouse, or other pointer\n\n#### What designers should think about\n\n- Design for good keyboard interaction, making sure all actions are keyboard accessible and efficient.\n- Learn how to navigate using a [keyboard](https://help.gnome.org/users/gnome-help/stable/keyboard-nav.html.en) and spend some time navigating the web, email, and digital products using only the keyboard.\n\n#### How this applies to everyone\n\n- Many users prefer to navigate interfaces with a keyboard and no mouse for efficiency. Good keyboard navigation can help everyone be more productive.\n\n### Users with cognitive disabilities\n\nThese users offer a broad spectrum of concerns for design. Functional cognitive disabilities can include difficulty with:\n\n- Memory\n- Problem solving\n- Attention\n- Reading, linguistic, and verbal comprehension\n- Math comprehension\n- Visual comprehension\n\n#### How they experience an interface\n\n- May have limited working memory and need information to remain visible throughout the completion of a task\n- May experience seizures when exposed to flashing content (epilepsy)\n\n#### What designers should think about\n\n- Designers should understand the danger of complex language, non-stopping or flashing animations and fundamental cognitive usability heuristics.\n- Design in as linear a fashion as possible and focus on design heuristics that have to do with cognitive load and memory.\n\n#### How this applies to everyone\n\n- Best practices for cognitive disabilities benefit all users. Busy environments can tax your cognitive load. Aging adults may also experience a decline in cognitive abilities. Placing a low cognitive load on users reduces mistakes and improves effectiveness, regardless of their abilities.\n\n## Global accessibility standards\n\n- [World Wide Web Consortium](https://www.w3.org/WAI/) (W3C)'s Web Accessibility Initiative (WAI) is an effort to improve the accessibility of the World Wide Web for people of all abilities.\n- Web Accessibility Initiative (WAI) contributors create and maintain [Web Content Accessibility Guidelines](https://www.w3.org/TR/WCAG21/) (WCAG), which is the global accessibility standard.\n\n## Resources\n\n- [IBM Web Accessibility Checklist](https://www.ibm.com/able/guidelines/ci162/accessibility_checklist.html) - IBM's specific ruleset for creating accessible web applications\n- [IBM accessibility quick guidance](https://w3.ibm.com/able/devtest/quick/) - (Internal only)\n- [W3C low vision requirements](https://www.w3.org/TR/low-vision-needs/)\n\n## Tools\n\n- [High-contrast Chrome plugin](https://chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph/related?hl=en)\n- [Stark Sketch plugin](http://www.getstark.co/)\n- [NoCoffee vision simulator](https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl)\n- [Color contrast checker](https://marijohannessen.github.io/color-contrast-checker/)\n","fileAbsolutePath":"/zeit/3ed0734e/src/pages/guidelines/accessibility/overview.mdx"}}}}