import { Meta } from '@storybook/addon-docs/blocks'; # Accessibility Helpful guidelines/links for accessibility compliance. ## Best Practices, Process and Policy ### Policy The NYPR digital team designs and builds websites and applications with accessibility best practices in mind, using a variety of tools to test compliance in all stages of the design and development process. Our goal is for all new products to be [WCAG 2.0 AA Compliant](https://www.w3.org/TR/WCAG20/). - [Official NYPR policy](https://media.wnyc.org/media/resources/2019/Mar/11/NYPR_Web_Accessibility_Policy_2019.pdf) ### Process - Digital team uses a variety of tools to check compliance in all stages of the software development process: from UI/Wireframes creation to design, development and QA. For the full list, see the Tools section. - Test cases contain accessibility requirements in the acceptance criteria - QA team conducts a combination of manual and automated tests for accessibility per requirements, using a combination of the above tools. - Coordinate a special user testing group for accessibility based on the list from Listener Services. - Team shares articles and industry news/best practices in #accessibility slack channel ### Code - See [code best practices from all team presentation](https://docs.google.com/presentation/d/1qCg2VjLrr6iuD6qxTU_8rYLA5vaR_OY6WHjCf9P00Xk/edit#slide=id.g527df266b9_0_0https://docs.google.com/presentation/d/1qCg2VjLrr6iuD6qxTU_8rYLA5vaR_OY6WHjCf9P00Xk/edit#slide=id.g548c7760e3_1_41) 3/28 ## Minimum Requirements ### Design Accessibility in design [infographic](https://webaim.org/resources/designers/). - Plan Heading Structure Early - Make sure H1-H6 tags have hierarchy and tell the page information in logical order - Use landmark roles for major sections - Reading Order - The reading order should be the same as the visual order of elements - WCAG compliant colors across palette, light and dark modes ## Tools & Resources ### Storybook Tools - a11y Color Blindness Emulator - demonstrates how users with color blindness experience components and webpages demonstration of changing the color blindness filter - a11y Accessibility Addon - displays relevant accessibility rules for each component and whether the component meets guidelines or has violations - the accordion view can be expanded for detailed information about what can be done to fix violations, and levels of severity accessibility addon with closed accordion accessibility addon with open accordion ### Design Tools - Accessibility optimization should start as early as possible, in the visual design/UI process. See the [infographic below](https://webaim.org/resources/designers/) for detail. - Use this [modern color contract checking tool](https://abc.useallfive.com), or this [color contrast checker](https://webaim.org/resources/contrastchecker/) on all new projects - See more on [design best practices from all team presentation](https://docs.google.com/presentation/d/1qCg2VjLrr6iuD6qxTU_8rYLA5vaR_OY6WHjCf9P00Xk/edit#slide=id.g527df266b9_0_0) 3/28 ### Additional Tools - Compliance Sheriff- [notes from legal](http://wiki.nypr.digital/display/DT/Compliance+Sheriff) - Compliance Sheriff- [video of basic training session w/QA team](https://cyxtera.webex.com/cyxtera/ldr.php?RCID=8397887afe50bd07630404f7a974e2f2) - Google [Lighthouse Chrome Tool](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en) - [WCAG 2.1 guidelines](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en) - [AXE evaluation tools](https://www.deque.com/axe/) from Deque - WCAG design patterns - Best practices you can and should follow for trickier custom elements. Say you need to build a custom dropdown and make sure it's just as accessible as the native `