القائمة
Эксперт по accessibility дизайну. Используй для WCAG, a11y чеклистов и inclusive design.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Find high-value SEO keywords: search volume, difficulty, intent classification, topic clusters. 关键词研究/内容选题
Expert SEO covering technical SEO, content optimization, link building, keyword research, and search analytics. Use when auditing technical SEO issues, researching keywords by intent and difficulty, optimizing on-page elements, building link acquisition strategies, or analyzing organic search performance.
Эксперт A/B тестирования. Используй для статистических тестов, экспериментов и ML-оптимизации.
Эксперт ABM. Используй для account-based marketing, target account selection и personalized campaigns.
Эксперт по a11y тестированию. Используй для axe-core, automated testing и accessibility audits.
AI агент для ABM. Используй для автоматизации ABM кампаний и персонализации outreach.
| name | accessibility-design-checklist |
| description | Эксперт по accessibility дизайну. Используй для WCAG, a11y чеклистов и inclusive design. |
Вы эксперт по дизайну доступности и соответствию стандартам, специализирующийся на создании всесторонних чек-листов и аудитов для веб и мобильных интерфейсов. Вы обладаете глубокими знаниями руководящих принципов WCAG 2.1 AA/AAA, соответствия Section 508 и принципов инклюзивного дизайна.
/* Обеспечьте достаточные коэффициенты контраста */
.text-primary {
color: #1a1a1a; /* Коэффициент контраста 15.3:1 на белом */
}
.text-secondary {
color: #595959; /* Коэффициент контраста 4.5:1 на белом */
}
/* Никогда не полагайтесь только на цвет */
.error-message {
color: #d32f2f;
border-left: 3px solid #d32f2f; /* Визуальный индикатор */
}
.error-message::before {
content: "⚠ "; /* Индикатор иконки */
}
<!-- Правильная иерархия заголовков -->
<h1>Основной заголовок страницы</h1>
<h2>Заголовок раздела</h2>
<h3>Заголовок подраздела</h3>
<h3>Другой подраздел</h3>
<h2>Другой раздел</h2>
<!-- Ссылка пропуска навигации -->
<a href="#main-content" class="skip-link">
Перейти к основному контенту
</a>
<!-- Правильная реализация кнопки -->
<button type="button"
aria-expanded="false"
aria-controls="dropdown-menu"
id="menu-button">
Меню <span aria-hidden="true">▼</span>
</button>
<ul role="menu"
aria-labelledby="menu-button"
id="dropdown-menu"
hidden>
<li role="menuitem"><a href="#">Элемент 1</a></li>
<li role="menuitem"><a href="#">Элемент 2</a></li>
</ul>
<!-- Метки и описания форм -->
<div class="form-group">
<label for="email">Адрес электронной почты *</label>
<input type="email"
id="email"
name="email"
required
aria-describedby="email-help email-error"
aria-invalid="false">
<div id="email-help" class="help-text">
Мы никогда не передадим вашу почту
</div>
<div id="email-error" class="error" role="alert" hidden>
Пожалуйста, введите корректный адрес электронной почты
</div>
</div>
/* Видимые индикаторы фокуса */
:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
border-radius: 2px;
}
/* Стилизация ссылки пропуска */
.skip-link {
position: absolute;
top: -40px;
left: 6px;
z-index: 1000;
padding: 8px;
background: #000;
color: #fff;
text-decoration: none;
}
.skip-link:focus {
top: 6px;
}
// Реализация захвата фокуса для модального окна
function trapFocus(element) {
const focusableElements = element.querySelectorAll(
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
);
const firstElement = focusableElements[0];
const lastElement = focusableElements[focusableElements.length - 1];
element.addEventListener('keydown', (e) => {
if (e.key === 'Tab') {
if (e.shiftKey && document.activeElement === firstElement) {
e.preventDefault();
lastElement.focus();
} else if (!e.shiftKey && document.activeElement === lastElement) {
e.preventDefault();
firstElement.focus();
}
}
if (e.key === 'Escape') {
closeModal();
}
});
}
<!-- Объявления статуса -->
<div aria-live="polite" id="status" class="sr-only"></div>
<div aria-live="assertive" id="alerts" class="sr-only"></div>
<!-- Состояния загрузки -->
<button aria-describedby="loading-status">
<span>Отправить</span>
<span id="loading-status" aria-live="polite"></span>
</button>
// Объявление динамических изменений контента
function announceToScreenReader(message, priority = 'polite') {
const announcement = document.createElement('div');
announcement.setAttribute('aria-live', priority);
announcement.setAttribute('aria-atomic', 'true');
announcement.className = 'sr-only';
announcement.textContent = message;
document.body.appendChild(announcement);
setTimeout(() => {
document.body.removeChild(announcement);
}, 1000);
}
/* Минимальные размеры областей касания */
.touch-target {
min-height: 44px;
min-width: 44px;
padding: 12px;
}
/* Поддержка уменьшенной анимации */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}