{"id":18890,"date":"2023-05-03T13:57:57","date_gmt":"2023-05-03T13:57:57","guid":{"rendered":"https:\/\/digitalscientists.com\/?p=18890"},"modified":"2023-10-04T14:13:53","modified_gmt":"2023-10-04T14:13:53","slug":"accessibility-how-to-create-accessible-digital-products","status":"publish","type":"post","link":"https:\/\/digitalscientists.com\/blog\/accessibility-how-to-create-accessible-digital-products\/","title":{"rendered":"Accessibility: How to create accessible digital products"},"content":{"rendered":"\n
What is accessibility?<\/h2>\n\n\n\n
Creating products that everyone can use, is a core foundation of our mindset and process. Accessibility \u2013 designing products that people with disabilities can use, is an essential part of this.
Achieving accessibility includes following international web accessibility standards, as well as research and testing to understand our users and their needs.<\/p>\n\n\n\n
\n\n\n\n
International accessibility standards<\/h2>\n\n\n\n
The World Wide Web Consortium (W3C)<\/strong> develops international standards for the Web \u2013 HTML, CSS, and many more. Their Web Accessibility Initiative (WAI)<\/strong> develops technical specifications, guidelines, techniques, and supporting resources that describe accessibility solutions.
They create Web Accessibility Content Guidelines (WCAG), considered to be the international standard for web accessibility. In the United States, this has been adopted by Section 508<\/strong> \u2013 accessibility requirements for electronic and information technology developed, maintained, funded, or used by the Federal Government.
WCAG is consistently updated. We are currently on 2.1, with 2.2 expected in Spring of 2023.<\/p>\n\n\n\n
<\/div>\n\n\n
\n<\/figure><\/div>\n\n\n
<\/div>\n\n\n\n
WCAG is based on four principals and 13 guidelines<\/h3>\n\n\n\n
\n
\n<\/figure>\n<\/div>\n\n\n\n
\n
Perceivable<\/h4>\n\n\n\n
Users must be able to perceive the information being presented<\/p>\n\n\n\n
\n
Text alternatives for non-text content<\/li>\n\n\n\n
Alternatives for audio and video<\/li>\n\n\n\n
Adaptable content that retains information and structure<\/li>\n\n\n\n
Make it easier to see and hear content<\/li>\n<\/ul>\n\n\n\n
<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\n<\/figure>\n<\/div>\n\n\n\n
\n
Operable<\/h4>\n\n\n\n
Users must be able to operate the interface<\/p>\n\n\n\n
\n
Make all functionality available from a keyboard<\/li>\n\n\n\n
Provide enough time to read and use content<\/li>\n\n\n\n
Avoid causing seizures or physical reactions<\/li>\n\n\n\n
Provide ways to help users navigate, find content, and determine where they are<\/li>\n\n\n\n
xMake is easier to operate functionality for inputs beyond a keyboard<\/li>\n<\/ul>\n\n\n\n
<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\n<\/figure>\n<\/div>\n\n\n\n
\n
Understandable<\/h4>\n\n\n\n
Users must be able to understand the information as well as the operation of the user interface<\/p>\n\n\n\n
\n
Make text content readable and understandable<\/li>\n\n\n\n
Make pages appear and operate in predictable ways<\/li>\n\n\n\n
Input assistance to help users avoid and correct mistakes<\/li>\n<\/ul>\n\n\n\n
<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\n<\/figure>\n<\/div>\n\n\n\n
\n
Robust<\/h4>\n\n\n\n
Users must be able to access content as technologies advance<\/p>\n\n\n\n
\n
Maximize compatibility with current and future technology<\/li>\n<\/ul>\n\n\n\n
<\/div>\n<\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n
Success criteria<\/h3>\n\n\n\n
WCAG 2.1 guidelines are categorized into three levels of conformance, in order to meet the needs of different groups and situations.<\/p>\n\n\n
\n<\/figure><\/div>\n\n\n
Industry standard is WCAG 2.1 AA<\/strong> (which also means conformance to A).<\/p>\n\n\n\n
\n
\n<\/figure>\n<\/div>\n\n\n\n
\n
Training and internal processes are needed to implement and evaluate conformance to success criteria. Creating documentation provides an artifact that measures things such as conformance. Documentation may be requested by clients, or may be needed to fill out a Voluntary Product Accessibility Template (VPAT)<\/strong> that details the level of conformance.<\/p>\n<\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n\n\n\n\n
Accessibility is a shared responsibility<\/h2>\n\n\n\n
Accessibility should be considered from the beginning of a project. This ensures that it\u2019s part of the process, and minimizes added time and expense of going back to fix accessibility issues.<\/p>\n\n\n\n<\/figure>\n\n\n\n
<\/div>\n\n\n\n
Product Manager<\/h3>\n\n\n\n
Leads the product and incorporates accessibility into the process with clear checkpoints, roles and responsibilities.<\/p>\n\n\n\n
User Researcher<\/h3>\n\n\n\n
Includes people with disabilities during research and testing, to help ensure they are understood and their needs are met.<\/p>\n\n\n\n
User Experience Designer<\/h3>\n\n\n\n
Considers all of the ways people use a product, to provide options for an optimal user experience for all users.<\/p>\n\n\n\n
Visual Designer<\/h3>\n\n\n\n
Makes design decisions such as color, typography, and layout, to influence how content is viewed and understood.<\/p>\n\n\n\n
Content Author<\/h3>\n\n\n\n
Leads how content is structured and written, to improve readability and understanding.<\/p>\n\n\n\n
Developer<\/h3>\n\n\n\n
Uses techniques such as semantic coding and ARIA (Accessible Rich Internet Applications), to ensure that the codebase can accommodate all users and assistive technology.<\/p>\n\n\n\n
QA \/ Tester<\/h3>\n\n\n\n
Checks accessibility success criteria compliance before release. This may be a dedicated role, or it may include Designers and Developers checking their work, with a final QA before release.<\/p>\n\n\n\n
<\/div>\n\n\n\n\n\n\n\n
Be apprehensive of quick fixes<\/h2>\n\n\n\n
Companies advertise overlays, plugins, and toolbar widgets as cheap and automated accessibility fixes. Many people with disabilities are sharing that these are not effective solutions. Some of the issues are:<\/p>\n\n\n\n
\n
\n<\/figure>\n<\/div>\n\n\n\n
\n
\n
Override assistive technology settings, and force users to learn a whole new system<\/li>\n\n\n\n
Don\u2019t repair underlying issues, therefore they don\u2019t achieve full WCAG compliance<\/li>\n\n\n\n
Loading speed and performance are out of your control<\/li>\n\n\n\n
May conflict with your user\u2019s preference for data privacy and protection<\/li>\n<\/ul>\n\n\n\n
<\/div>\n<\/div>\n<\/div>\n\n\n\n\n\n\n\n
<\/div>\n\n\n\n
We\u2019re committed to creating products that everyone can use<\/h2>\n\n\n\n
As the world\u2019s largest minority, people with disabilities deserve to access digital content. Understanding and incorporating accessibility guidelines can be a complex process. Research and testing takes time. However, it\u2019s not just about checking off boxes to mitigate legal liabilities, it\u2019s about doing the right thing and ensuring everyone can access digital content, tools, products, and services. By creating accessible digital products we can help ensure that people with disabilities can easily access helpful information online, protect digital investments<\/a>, and can have full access to a wide range of online services.
![\"\"](\"https:\/\/digitalscientists.com\/wp-content\/uploads\/2023\/05\/wcag-history-1024x287.png\")
<\/figure><\/div>\n\n\n![\"\"](\"https:\/\/digitalscientists.com\/wp-content\/uploads\/2023\/05\/icon-perceivable.svg\")
<\/figure>\n<\/div>\n\n\n\n\n![\"\"](\"https:\/\/digitalscientists.com\/wp-content\/uploads\/2023\/05\/icon-operable.svg\")
<\/figure>\n<\/div>\n\n\n\n\n![\"\"](\"https:\/\/digitalscientists.com\/wp-content\/uploads\/2023\/05\/icon-understandable.svg\")
<\/figure>\n<\/div>\n\n\n\n\n![\"\"](\"https:\/\/digitalscientists.com\/wp-content\/uploads\/2023\/05\/icon-robust.svg\")
<\/figure>\n<\/div>\n\n\n\n\n![\"\"](\"https:\/\/digitalscientists.com\/wp-content\/uploads\/2023\/05\/conformance-levels.png\")
<\/figure><\/div>\n\n\n![\"\"](\"https:\/\/digitalscientists.com\/wp-content\/uploads\/2023\/05\/icon-doc.svg\")
<\/figure>\n<\/div>\n\n\n\n\n![\"\"](\"https:\/\/digitalscientists.com\/wp-content\/uploads\/2023\/05\/shift-left-1024x653.png\")
<\/figure>\n\n\n\n<\/div>\n\n\n\n![\"\"](\"https:\/\/digitalscientists.com\/wp-content\/uploads\/2023\/05\/icon-caution.svg\"){kind=icon}
<\/figure>\n<\/div>\n\n\n\n