diff --git a/README.md b/README.md index e9332b1..26732bb 100644 --- a/README.md +++ b/README.md @@ -77,28 +77,28 @@ Доступность — это практика создания веб-сайтов и приложений, которые могут использовать все люди, включая людей с нарушениями зрения, моторики, слуха, речи или когнитивных функций. Здесь вы найдете инструменты для обеспечения веб-доступности, инструменты для тестирования доступности и приложения для доступности как для разработчиков, так и для дизайнеров: -- [A11ygator](https://a11ygator.chialab.io) — Веб-инструмент для анализа сайтов на соответствие правилам WCAG. Также доступен в виде расширения для браузера Google Chrome и Twitter-бота. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) [![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)](https://github.com/chialab/a11ygator-app) -- [Accessibility Insights](https://accessibilityinsights.io/) — помогает разработчикам быстро находить и устранять проблемы доступности. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) -- [Accessible Palette Builder](https://toolness.github.io/accessible-color-matrix/) — прототип на основе Elm, помогающий дизайнерам создавать доступные цветовые палитры. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) [![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)](https://github.com/toolness/accessible-color-matrix) -- [AChecker](https://achecker.ca) — веб-приложение для тестирования доступности, используемое для оценки HTML-контента на наличие проблем с доступностью. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) -- [ANDI](https://www.ssa.gov/accessibility/andi/help/install.html) — инструмент тестирования доступности веб-контента (букмарклет). Автоматически обнаруживает проблемы с доступностью, предлагает улучшения и проверяет соответствие стандарту 508. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) [![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)](https://github.com/SSAgov/ANDI) -- [Axe](https://www.deque.com/axe/) — движок доступности, предназначенный для работы во всех современных браузерах и с любыми инструментами, фреймворками, библиотеками и средами. Это инструмент автоматического тестирования доступности для разработчиков. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) [![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)](https://github.com/dequelabs/axe-core) -- [ColorBox](http://www.colorbox.io/) — веб-приложение, которое алгоритмически создает доступные цветовые системы. Разработано командой Lyft Design. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) -- [Colorable](https://colorable.jxnblk.com/) — бесплатный веб-инструмент для проверки контраста. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) -- [Color Oracle](https://colororacle.org/) — бесплатный симулятор дальтонизма. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) -- [Contrast](https://usecontrast.com/) — приложение для macOS для дизайнеров и разработчиков, предоставляющее быстрый доступ к коэффициентам контраста цветов по стандартам WCAG. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg) -- [Contrast Checker](https://contrast-checker.glitch.me/) — помогает проверить контраст между фоном элемента и самой страницей. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) -- [Contraste](https://contrasteapp.com/) — приложение для проверки доступности текста в соответствии с Руководством по доступности веб-контента (WCAG). ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) -- [Inclusive Design](https://www.microsoft.com/design/inclusive/) — методология и набор инструментов, предоставленных командой Microsoft. -- [Hex Naw](https://hexnaw.com/) — помогает протестировать целые цветовые системы на контрастность и доступность. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) -- [Leonardo](https://leonardocolor.io) — генератор цветовых палитр по заданному коэффициенту контраста WCAG. Открытый веб-инструмент и npm-модуль для дизайнеров и инженеров. Разработан Adobe. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg) ![Web](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/web.svg) -- [PA11Y](http://pa11y.org/) — инструмент тестирования доступности для выявления проблем с веб-страницами. Запускает HTML CodeSniffer из командной строки для программных отчетов о доступности. Это инструмент для разработчиков. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg) -- [Sim Daltonism](https://michelf.ca/projects/sim-daltonism/) — симулятор дальтонизма для macOS и iOS, позволяющий визуализировать цвета так, как они воспринимаются при различных типах дальтонизма. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) [![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)](https://www.github.com/michelf/sim-daltonism/) -- [Stark](https://getstark.co/) — платный плагин для Sketch, позволяющий моделировать различные типы дальтонизма. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg) -- [Toptal’s Color Filter](https://www.toptal.com/designers/colorfilter) — позволяет протестировать ваш сайт и показывает, как люди с различными видами дальтонизма увидят ваши страницы. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media//free.svg) -- [tota11y](http://khan.github.io/tota11y/) — инструмент визуализации доступности. Интересный факт: в названии инструмента вы видите "a11y". Это сокращение от accessibility, где "a" сопровождается 11 буквами, а затем "y". ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) -- [WAVE](https://wave.webaim.org/) — позволяет оценить веб-контент на наличие проблем с доступностью прямо в Chrome и Firefox. Это проверяющий доступность веб-контента. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) -- [90 Examples](http://clrs.cc/a11y/) — бесплатная коллекция доступных цветовых тем. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) +- [**A11ygator**](https://a11ygator.chialab.io) — Веб-инструмент для анализа сайтов на соответствие правилам WCAG. Также доступен в виде расширения для браузера Google Chrome и Twitter-бота. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) [![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)](https://github.com/chialab/a11ygator-app) +- [**Accessibility Insights**](https://accessibilityinsights.io/) — помогает разработчикам быстро находить и устранять проблемы доступности. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) +- [**Accessible Palette Builder**](https://toolness.github.io/accessible-color-matrix/) — прототип на основе Elm, помогающий дизайнерам создавать доступные цветовые палитры. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) [![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)](https://github.com/toolness/accessible-color-matrix) +- [**AChecker**](https://achecker.ca) — веб-приложение для тестирования доступности, используемое для оценки HTML-контента на наличие проблем с доступностью. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) +- [**ANDI**](https://www.ssa.gov/accessibility/andi/help/install.html) — инструмент тестирования доступности веб-контента (букмарклет). Автоматически обнаруживает проблемы с доступностью, предлагает улучшения и проверяет соответствие стандарту 508. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) [![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)](https://github.com/SSAgov/ANDI) +- [**Axe**](https://www.deque.com/axe/) — движок доступности, предназначенный для работы во всех современных браузерах и с любыми инструментами, фреймворками, библиотеками и средами. Это инструмент автоматического тестирования доступности для разработчиков. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) [![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)](https://github.com/dequelabs/axe-core) +- [**ColorBox**](http://www.colorbox.io/) — веб-приложение, которое алгоритмически создает доступные цветовые системы. Разработано командой Lyft Design. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) +- [**Colorable**](https://colorable.jxnblk.com/) — бесплатный веб-инструмент для проверки контраста. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) +- [**Color Oracle**](https://colororacle.org/) — бесплатный симулятор дальтонизма. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) +- [**Contrast**](https://usecontrast.com/) — приложение для macOS для дизайнеров и разработчиков, предоставляющее быстрый доступ к коэффициентам контраста цветов по стандартам WCAG. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg) +- [**Contrast Checker**](https://contrast-checker.glitch.me/) — помогает проверить контраст между фоном элемента и самой страницей. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) +- [**Contraste**](https://contrasteapp.com/) — приложение для проверки доступности текста в соответствии с Руководством по доступности веб-контента (WCAG). ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) +- [**Inclusive Design**](https://www.microsoft.com/design/inclusive/) — методология и набор инструментов, предоставленных командой Microsoft. +- [**Hex Naw**](https://hexnaw.com/) — помогает протестировать целые цветовые системы на контрастность и доступность. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) +- [**Leonardo**](https://leonardocolor.io) — генератор цветовых палитр по заданному коэффициенту контраста WCAG. Открытый веб-инструмент и npm-модуль для дизайнеров и инженеров. Разработан Adobe. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg) ![Web](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/web.svg) +- [**PA11Y**](http://pa11y.org/) — инструмент тестирования доступности для выявления проблем с веб-страницами. Запускает HTML CodeSniffer из командной строки для программных отчетов о доступности. Это инструмент для разработчиков. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) ![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg) +- [**Sim Daltonism**](https://michelf.ca/projects/sim-daltonism/) — симулятор дальтонизма для macOS и iOS, позволяющий визуализировать цвета так, как они воспринимаются при различных типах дальтонизма. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) [![open-source.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/open-source.svg)](https://www.github.com/michelf/sim-daltonism/) +- [**Stark**](https://getstark.co/) — платный плагин для Sketch, позволяющий моделировать различные типы дальтонизма. ![mac.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/mac.svg) +- [**Toptal’s Color Filter**](https://www.toptal.com/designers/colorfilter) — позволяет протестировать ваш сайт и показывает, как люди с различными видами дальтонизма увидят ваши страницы. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media//free.svg) +- [**tota11y**](http://khan.github.io/tota11y/) — инструмент визуализации доступности. Интересный факт: в названии инструмента вы видите "a11y". Это сокращение от accessibility, где "a" сопровождается 11 буквами, а затем "y". ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) +- [**WAVE**](https://wave.webaim.org/) — позволяет оценить веб-контент на наличие проблем с доступностью прямо в Chrome и Firefox. Это проверяющий доступность веб-контента. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg) +- [**90 Examples**](http://clrs.cc/a11y/) — бесплатная коллекция доступных цветовых тем. ![free.svg](https://git.creogenesis.com/kutsenko/Awesome-Design-Tools/raw/branch/master/Media/free.svg)