frontend-accessibility
Улучшение доступности фронтенда
Фронтенд-команды могут упускать требования к клавиатурной навигации, семантике и поддержке скринридеров. Этот навык помогает AI-агентам создавать доступные UI-компоненты.
Установить с помощью моего Агента
Скопируйте этот запрос в своего Агента. Он содержит каноническую страницу Skill и манифест.
Review the Skillstore skill "frontend-accessibility" from https://skillstore.io/skills/devanb-frontend-accessibility.md and its manifest at https://skillstore.io/api/skills/devanb-frontend-accessibility/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Ваш Агент по-прежнему должен показать план и запросить все подтверждения, требуемые политикой безопасности.
Ресурсы для AI-агентов
Используйте эти ссылки, когда AI-агенту, crawler или script нужен чистый контекст вместо полной страницы.
Протестировать
Использование «frontend-accessibility». React-форма с labels только в placeholder и inline-сообщениями валидации.
Ожидаемый результат:
Проверка выявляет отсутствующие labels, неясные объявления ошибок, слабые состояния фокуса и рекомендует явные labels с доступным текстом валидации.
Использование «frontend-accessibility». Пользовательский компонент menu, который открывается по клику и содержит несколько actions.
Ожидаемый результат:
Ответ объясняет требуемое поведение клавиатуры, перемещение фокуса, доступные имена и ARIA roles только там, где native elements недостаточно.
Использование «frontend-accessibility». Макет страницы с пропущенными уровнями заголовков и неясными landmarks.
Ожидаемый результат:
Аудит предлагает логичный порядок заголовков, улучшения landmarks и более понятную структуру навигации для пользователей скринридеров.
Аудит безопасности
БезопасноThe inline-code backticks on line 12 are a false positive because they only mark file extensions. The relative path on line 29 is confirmed because it points outside the skill directory. No prompt injection or data exfiltration intent was found.
Пункты проверки возможностей (1)
Это реальные локальные возможности, которые могут ожидаться для этого навыка, поэтому они требуют проверки, но не считаются подтверждённым вредоносным поведением.
Факторы риска
⚙️ Внешние команды (1)
📁 Доступ к файловой системе (1)
Поделиться и цитировать этот отчет
Делитесь версионным отчетом об оценке, нейтральным значком, встраиваемой карточкой и цитатами. Skillstore публикует доказательства, не решая, безопасен ли этот Skill.
Копировать ссылку на отчёт
https://skillstore.io/skills/devanb-frontend-accessibility/audits/10?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportЗначок Markdown
[](https://skillstore.io/skills/devanb-frontend-accessibility?utm_source=security_passport_badge)Значок HTML
<a href="https://skillstore.io/skills/devanb-frontend-accessibility?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/devanb-frontend-accessibility/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Встраиваемая карточка
<iframe src="https://skillstore.io/embed/skills/devanb-frontend-accessibility.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Академические ссылки (APA · BibTeX · CFF)
Цитата APA
DevanB. (2026). frontend-accessibility security audit report (audit version 10) [Author version unspecified]. Skillstore. https://skillstore.io/skills/devanb-frontend-accessibility/audits/10Цитата BibTeX
@techreport{devanb-devanb-frontend-accessibility-2026,
author = {DevanB},
title = {frontend-accessibility security audit report (audit version 10)},
institution = {Skillstore},
year = {2026},
number = {10},
url = {https://skillstore.io/skills/devanb-frontend-accessibility/audits/10},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "frontend-accessibility security audit report (audit version 10)"
version: "unspecified"
type: report
authors:
- name: "DevanB"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/devanb-frontend-accessibility/audits/10"
identifiers:
- type: other
value: "skillstore:devanb-frontend-accessibility:audit:10"
description: "Skillstore immutable audit report identifier"
Сравнить варианты
2 устанавливаемых вариантовНавык каждого автора остаётся отдельным устанавливаемым вариантом. Рекомендуемый вариант ранжируется по данным Skillstore.
Почему этот вариант первый
eis-its-frontend-accessibility
2026-09-09
devanb-frontend-accessibility
2026-09-09
Оценка Skillstore
Почему такая оценка Достоверность доказательств: ВысокийЧто вы можете построить
Проверка React-компонентов
Находите пробелы в доступности разметки компонентов, labels, состояний фокуса и использования ARIA перед релизом.
Создание доступных форм
Создавайте формы с понятными labels, сообщениями валидации, поддержкой клавиатуры и структурой, удобной для скринридеров.
Аудит интерактивного UI
Оценивайте dialogs, menus, buttons и динамический контент с точки зрения управления фокусом и поведения при работе с клавиатурой.
Попробуйте эти промпты
Проверь этот компонент на проблемы доступности. Сосредоточься на semantic HTML, labels, поддержке клавиатуры, контрастности и поведении для скринридеров.
Улучши доступность этой формы. Убедись, что у каждого input есть label, валидация озвучивается, а пользователи клавиатуры могут завершить весь flow.
Проведи аудит этого modal или dialog flow. Проверь focus trapping, initial focus, escape behavior, return focus, announcements и keyboard interaction.
Проверь этот фронтенд-workflow на риски доступности WCAG. Предоставь приоритетные исправления для семантики, фокуса, контрастности, заголовков, ARIA и поддержки assistive technology.
Лучшие практики
- Предпочитайте native HTML controls перед добавлением ARIA roles или пользовательских моделей взаимодействия.
- Тестируйте важные flows с навигацией только с клавиатуры и хотя бы одним скринридером.
- Проверяйте контрастность для текста, controls, индикаторов фокуса, отключенных состояний и состояний ошибки.
Избегать
- Не используйте кликабельные div elements, когда правильным элементом управления является button или link.
- Не скрывайте индикаторы фокуса и не полагайтесь только на pointer interactions.
- Не добавляйте ARIA attributes без соответствующего поведения и доступных имен.