В этой серии мы рассмотрели несколько простых способов, с помощью которых разработчики тем могут сделать свою тему доступной. Если вы будете следовать всем рекомендациям этой серии, вы будете более чем превышать минимальные требования для тега доступности для репозитория тем WordPress.
Тем не менее, тег готов к доступности, а не доступен, поскольку ни одна тема не может обеспечить доступность веб-сайта — слишком многое зависит от того, как используется тема, и от характера содержимого, добавляемого на сайт.
В этом последнем уроке мы рассмотрим некоторые простые методы, которые мы, разработчики тем, могли бы использовать, чтобы помочь конечным пользователям нашего продукта использовать его в доступной форме. Разработчики плагинов также могут сделать то же самое (очевидный пример — плагин, который позволяет загружать аудиофайл и прикреплять его к пользовательскому типу записи, также может позволять загружать стенограмму и связываться с этим файлом).
Поощрение правильной структуры заголовка
Ранее в этой серии мы обсуждали, что тема имеет разумную структуру заголовков, а именно соответствующие заголовки для заголовка сайта и заголовка (-й) поста. Как уже упоминалось, эта структура должна отражать структуру страницы, а теги <h1> должны быть вложены в теги <h2> теги <h2> в <h3> и так далее.
Но на любой странице, если мы использовали <h1> (и, возможно, <h2> ) за пределами страницы или содержимого публикации, было бы неплохо не использовать их внутри содержимого, чтобы не допустить его нарушения. структура страницы. TinyMCE имеет раскрывающийся список «блочный формат», который позволяет пользователям быстро добавлять абзацы и заголовки и т. Д. Мы можем удалить теги заголовка, которые мы не хотим использовать в содержимом сообщения:
|
1
2
3
4
5
6
|
function mytheme_tinymce_init( $init ) {
// Set the block format elements you want to show in dropdown.
$init[‘theme_advanced_blockformats’] = ‘p,h2,h3,h4,h5,h6’;
return $init;
}
add_filter(‘tiny_mce_before_init’, ‘mytheme_tinymce_init’ );
|
Конечно, это не надежно и неэффективно для пользователей, которые не используют редактор TinyMCE. Кроме того, это не гарантирует (и мы не можем) гарантировать, что заголовки, используемые в контенте, значимо отражают структуру этого контента. Это, однако, препятствует неправильному использованию зарезервированных тегов <h1> (и <h2> ).
Поощрение хорошего цветового контраста
Несколько более сложная идея, позволяющая пользователям выбирать свои собственные цвета в теме, — предупредить их, когда они выбирают цвета с низким уровнем контрастности (например, цвета фона и текста). Какие именно цвета вы должны сравнивать, будет зависеть от выбора, который вы сделали пользователю. Ниже я упростил эту идею, приняв фиксированный цвет шрифта #444444 и сравнив его с предоставленным пользователем цветом фона.
Я оставлю подробности того, как настроить поля в настройщике, и чтобы включить предварительный просмотр для кодекса . Здесь я просто предоставляю пример файла JavaScript, который предупреждает пользователя, когда выбранный цвет фона слишком низкий.
Сначала создайте файл customizer-a11y.js в вашей теме со следующим кодом:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
( function( $ ) {
//Update site background color…
wp.customize( ‘background_color’, function( value ) {
value.bind( function( newval ) {
//Get value to compare the background colour with.
var textcolor = ‘#444444’;
//Calculate the contrast ratio — we provide this later
var ratio = mytheme.checkContrast( textcolor, newval );
//Depending on the font-size you may wish to adjust the ratio breakpoints.
if( ratio >= 5 ){
//Very good contrast ratio, hide the ratio warning
$(‘#contrast-warning-bgcolor’).hide();
}else if( ratio >= 4.5 ){
//Contrast is good, but getting close, display the ratio
$(‘#contrast-warning-bgcolor’).css( ‘background’, ‘#3AC469’ ).show();
}else if( ratio >= 3 ){
//Contrast is poor
$(‘#contrast-warning-bgcolor’).css( ‘background’, ‘#FFA634’ ).show();
}else{
//Contrast is very poor
$(‘#contrast-warning-bgcolor’).css( ‘background’, ‘#E31837’ ).show();
}
//The warning message is stored in mytheme.warningMsg — we’ll add this later
var text = mytheme.warningMsg.replace( ‘%f’, ratio );
$(‘#contrast-warning-bgcolor’).text( text );
} );
} );
} )( jQuery );
|
Далее нам нужно создать функцию, которая, учитывая любые два цвета (в шестнадцатеричном формате), возвращает контрастность между ними. Подробности расчета этого соотношения можно найти на веб-сайте W3C, но это делается сначала путем вычисления «относительной яркости» (грубо говоря, мера «яркости». Коэффициент контрастности — это отношение этих значений «относительной яркости», с добавленным «штрафом» за яркие цвета.
Следующее должно жить в нижней части только что созданного файла JavaScript.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
mytheme = {
/**
* Calculate the relative luminance of two colours
* @param string color the foreground (text) colour
* @param string bgcolor the background colour
* @returns float The relative luminance of the colours
*/
checkContrast = function( color, bgcolor ) {
var L1 = this._getLuminance( color );
var L2 = this._getLuminance( bgcolor );
return ratio Math.round((Math.max(L1, L2) + 0.05)/(Math.min(L1, L2) + 0.05)*10)/10;
}
/**
* Calculate luminance of a colour
* @param string color in Hex format
* @returns float luminance of the colour
*/
_getLuminance = function( color ) {
var R,G,B;
//Remove hash tag if present
color = color.replace(new RegExp(«^[#]+»), «»);
if( color.length == 3 ) {
R = this._getRGBScore( color.substring(0,1) + color.substring(0,1) );
G = this._getRGBScore( color.substring(1,2) + color.substring(1,2) );
B = this._getRGBScore( color.substring(2,3) + color.substring(2,3) );
}else {
R = this._getRGBScore( color.substring(0,2) );
G = this._getRGBScore( color.substring(2,4) );
B = this._getRGBScore( color.substring(4,6) );
}
return (0.2126 * R + 0.7152 * G + 0.0722 * B);
}
/**
* Calculate the RGB score according to http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G18
* @param color
* @returns float
*/
_getRGBScore = function( color ) {
try {
color = parseInt( color, 16 );
}catch (err) {
color = false;
}
if( color !== false ) {
color = color/255;
color = (color <= 0.03928) ?
}
return color;
}
}
|
Наконец, мы загружаем JavaScript и распечатываем разметку для предупреждения о контрасте.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
function mytheme_customizer_live_preview(){
echo ‘<div id=»contrast-warning-bgcolor» role=»alert» ></div>’;
echo ‘<style>
#contrast-warning-bgcolor{
position: fixed;
right: 30px;
top: 31px;
background: #fff;
border: 2px solid #000;
color:#000;
display:none;
}
</style>’;
wp_enqueue_script(
‘customizer-a11y’,
get_template_directory_uri().’/customizer-a11y.js’,
array( ‘jquery’,’customize-preview’ ),
‘1.0’,
true
);
//Make the warning message available in our JavaScript file.
wp_localize_script( ‘customizer-a11y’, ‘mytheme’, array(
‘warningMsg’ => esc_html__( ‘Colour contrast warning. Ratio: %f’, ‘mytheme’ ),
));
}
add_action( ‘customize_preview_init’, ‘mytheme_customizer_live_preview’ );
|
Резюме
Мы подробно рассмотрели только пару предложений, но список можно продолжить. Существует также много возможностей для разработчиков плагинов:
- Плагины форм могут препятствовать использованию пустых ярлыков.
- Плагины слайдера могут препятствовать использованию опции авто-воспроизведения.
- Всякий раз, когда аудио / видео файл должен быть загружен и прикреплен к пользовательскому типу записи, плагин может запросить загрузку стенограммы и ссылку на этот файл.
«Отговаривать» здесь не означает полного удаления опции. Тем не менее, оповещение пользователя о последствиях доступности веб-сайта может иметь большое значение для обучения пользователя и, в конечном итоге, улучшения доступности веб-сайта.
Ресурсы
Мы завершаем эту серию обзором полезных ресурсов и инструментов, которые помогут вам узнать больше о доступности веб-контента и, что более важно, помогут вам обеспечить доступность вашего следующего плагина или темы для всех пользователей.
Веб-сайты
WordCamp Talks
- Практическая доступность WordPress от Брэма Дювиньо
- Хорошие привычки: код для доступности Джо Долсон
(Другие доклады можно найти на http://wordpress.tv/tag/accessibility/ )
Инструменты / Плагины
- Access Monitor : плагин WordPress, который проверяет ваш сайт на соответствие доступности через Tenon.io .
- WP Accessibility : плагин WordPress, который решает некоторые распространенные проблемы с доступностью WordPress.
- Доступные выпадающие меню : плагин WordPress, обеспечивающий доступ к выпадающим меню с клавиатуры.
- Коэффициент контрастности : сайт для расчета коэффициента контрастности двух цветов.
- Bootstrap Accessibility : устраняет некоторые проблемы с доступностью Bootstrap.