Статьи

Создание контролируемых пользователем таблиц стилей для большей доступности

Май 18, 2019

Большая часть обсуждения, касающегося доступности Web, касается пользователей, которые юридически слепы и нуждаются в текстовом читателе, таком как JAWS. Но такие организации, как Американский фонд слепых, также поддерживают зрячих людей с серьезными нарушениями зрения. Посетители с ослабленным зрением могут читать веб-страницы, но для этого может потребоваться высококонтрастный шрифт с крупным шрифтом.

В то время как 1,8 миллиона американцев юридически слепы, еще 7,7 миллиона имеют серьезные нарушения зрения, которые влияют на их способность к чтению. Ожидается, что по мере старения населения это число удвоится к 2030 году.

В этой статье мы увидим, как позволить посетителям создавать печатную версию ваших страниц, изменяя стили, применяемые к вашим страницам. Подход, который мы используем, прост и не требует быстрых изменений в вашем базовом HTML-коде. Вы можете улучшить доступность своего сайта без особых усилий.

Попутно мы также изучим три различных метода для изменения ваших стилей: путем изменения определенных идентификаторов элементов, путем изменения селекторов CSS и замены целых таблиц стилей. Надеемся, что эти три метода улучшат ваши знания таблиц стилей и повлияют на эту статью.

Модель

Сайт AFB предлагает хороший пример того, чего мы хотим достичь. Эта страница позволяет посетителям установить шрифт, используемый на сайте, установить размер шрифта, цвет и контрастность фона. Затем настройки посетителя сохраняются в файле cookie и применяются ко всем остальным страницам сайта и во всех будущих посещениях.

Зачем идти на эту проблему, когда пользователи могут сами увеличить размер шрифта в браузере по умолчанию с помощью меню «Вид — Размер текста»? Параметры размера текста, предлагаемые Internet Explorer и другими браузерами, ограничены, что позволяет пользователям увеличивать размер шрифта только на 125%. Чтобы поддержать посетителей с серьезными нарушениями зрения, нам нужен более крупный шрифт и возможность увеличить контраст.

Сайт AFB использует Active Server Pages и поэтому меняет стили страниц с помощью серверного кода. Наш метод будет использовать JavaScript и динамический HTML, чтобы сделать то же самое.

Сайт AFB также предлагает пользователям несколько вариантов размера и цвета шрифта. Для простоты мы предложим одну альтернативу в этой статье. Тем не менее, вы можете легко расширить методы, описанные здесь, чтобы предложить несколько вариантов для ваших посетителей.

Наша тестовая страница

Во-первых, давайте создадим простую страницу, стиль которой мы хотели бы изменить: 

<div id="test">  <h2>Headline</h2>  <p>This is the content section of our document.</p>  </div>   <p><a href="javascript:;" onClick="changeStyles();">Change styles</a>

Эта простая страница определяет заголовок и абзац текста, а также оборачивает вокруг них элемент DIV, чтобы облегчить манипулирование содержимым страницы с помощью JavaScript.

Он также определяет ссылку «Изменить стили», которая выполняет функцию JavaScript для изменения стилей. Мы можем написать changeStyles( ) тремя способами:

  1. Изменение стилей для определенных элементов страницы по их идентификатору
  2. Изменение стиля всех элементов с помощью их селектора CSS
  3. Изменение таблицы стилей, назначенной нашей странице

Каждый из этих методов имеет свои сильные и слабые стороны.

Изменение элементов по идентификатору

Изменение стиля отдельного элемента страницы — это простой процесс. Сначала мы обращаемся к объекту JavaScript, соответствующему элементу, а затем меняем значение отдельных свойств.

Наша тестовая страница оборачивает DIV-элемент вокруг содержимого страницы, поэтому мы можем использовать идентификатор этого элемента, чтобы найти соответствующий объект: 

       1: <script language="javascript">      2: ns4 = document.layers;      3: ie = document.all;      4: ns6 = document.getElementById && !document.all;      5:      6: function changeStyles (id) {      7:    if (ns4) {      8:       alert ("Sorry, but NS4 does not allow font changes.");      9:       return false;     10:    }     11:    else if (ie) {     12:       obj = document.all[id];     13:    }     14:    else if (ns6) {     15:       obj = document.getElementById(id);     16:    }     17:    if (!obj) {     18:       alert("unrecognized ID");     19:       return false;     20:    }     21:     22:    obj.style.color = "yellow";     23:    obj.style.backgroundColor = "black";     24:    obj.style.fontSize = "300%";     25:     26:    return true;     27: }     28:     29: </script>

Строки 2-4 определяют, какая версия DOM используется, и устанавливают ряд переменных для хранения этой информации. Строки 7-20 загружают объект JavaScript в переменную с именем obj, используя метод, подходящий для браузера.

Обратите внимание, что строки 7-10 просто публикуют оповещения. Это необходимо, потому что Netscape Версии 4 и более ранние не позволяют нам изменять стили шрифта после загрузки страницы.

Строки 22-24 являются сердцем нашего сценария, меняя цвет текста на желтый, цвет фона на черный и увеличивая размер шрифта на 300%.

Наконец, обратите внимание, что эта реализация функции changeStyles( ) принимает идентификатор в качестве входного аргумента, указывая идентификатор элемента, стиль которого должен быть изменен. Это требует от нас изменить способ вызова функции, как показано ниже. 

 <p><a href="javascript:;" onClick="changeStyles('test');">Change  styles</a> 

 Преимущество этого подхода в том, что он довольно прост.  Если вы знакомы с динамическим HTML, метод прост в использовании.  

  Но этот подход также хрупок.  На практике немного неудобно оборачивать DIV-элемент вокруг всего содержимого страницы.  Более серьезно, использование элемента DIV создает проблемы наследования в Internet Explorer, где тег H2, содержащий заголовок страницы, не наследует размер шрифта, назначенный DIV. 



  В результате этот метод лучше всего использовать в ограниченном масштабе, когда мы хотим изменить стиль только выбранных областей нашей страницы. 



  Изменение элементов с помощью селектора 



  Более гибкий способ предоставления пользователям контроля над текстовым представлением - позволить им изменять стили на уровне селектора.  Селектор CSS - это левая часть правила стиля - часть, которая определяет элементы HTML, к которым применяется правило.  Например, тег P является селектором в правиле CSS, показанном ниже. 



 P   { font-size: 12pt; font-family: Arial } 


  Если мы изменим стиль, связанный с любым конкретным селектором, это изменит большие части нашего документа с минимальными усилиями. 


  Код ниже показывает переписывание нашего скрипта для этого. 


       1: <script>      2: ns4 = document.layers;      3: ie  = document.all;      4: ns6 = document.getElementById && !document.all;      5:      6: function changeStyle (selector) {      7:    if (ns4) {      8:       alert ("Sorry, but NS4 does not allow font changes.");      9:       return false;     10:    }     11:    else if (ie) {     12:       setNewStyle('P');     13:       setNewStyle('H2');     14:    }     15:    else if (ns6) {     16:       alert('Sorry, Netscape does not support this function.');     17:    }     18:     19:    return true;     20: }     21:     22: function setNewStyle(selector) {     23:    style = getStyleObj(selector);     24:    if (!style) return false;     25:     26:    style.color = "yellow";     27:    style.backgroundColor = "black";     28:    style.fontSize = "300%";     29: }     30:     31: function getStyleObj (selector) {     32:    for (x=0; x < document.styleSheets.length; x++) {     33:       var oStyleSheet = document.styleSheets[x];     34:       if (ie4) {     35:          for (y=0; y < oStyleSheet.rules.length; y++) {     36:             var oRule = oStyleSheet.rules[y];     37:             if (oRule.selectorText == selector) {     38:                return oRule.style;     39:            }     40:         }     41:       }     42:    }     43:    return false;     44: }     45:     46: </script> 


  Функция changeStyle( ) снова разветвляется в зависимости от используемого браузера.  Строки 12-13 применяются к Internet Explorer и включают два отдельных вызова функции setNewStyle( ) : один вызов для изменения всех элементов P, а другой для изменения всех элементов H2. 





            






  Функция setNewStyle( ) определена в строках 22-29.  Он начинается с вызова другой функции getStyleObj( ) для извлечения объекта JavaScript, соответствующего входному аргументу селектора, а затем устанавливает размер шрифта, цвет и цвет фона элемента. 


  Пока что эта версия нашего скрипта не сильно отличается от нашего раннего подхода, основанного на ID.  Однако сердцем нашего скрипта является функция getStyleObj( ) определенная в строках 31-44.  Этот код ищет все таблицы стилей, связанные с документом, проверяет правило стиля, определенное на каждой из этих таблиц, и проверяет, соответствует ли свойство selectorText правила входному аргументу селектора, переданному в функцию.  Функция возвращает объект стиля для первого правила, соответствующего нашим критериям селектора. 


  Обратите внимание, что getStyleObject( ) будет работать, только если для данного селектора было определено правило стиля.  Если правила не существует, getStyleObj( ) вернет false.  Таким образом, чтобы этот код работал правильно для нашей тестовой страницы, нам нужно добавить элемент STYLE, определяющий правила для элементов P и H2, как показано ниже. 


 <style>  P { font-size : 10pt; }  H2 { font-size : 10pt; }  </style> 


  К этому моменту вы, возможно, также заметили существенное ограничение этого метода: он работает только для Internet Explorer.  Ошибка в механизме рендеринга Gecko, который используется браузерами Netscape Версии 6-7, не позволяет свойству selectorText работать должным образом.  Это было исправлено в последних версиях Gecko, но не достаточно, чтобы поддерживать Netscape 7. 


  Таким образом, хотя этот подход обеспечивает большую гибкость, его, возможно, лучше всего использовать в интрасети, где Internet Explorer является стандартным браузером. 






  Изменение таблиц стилей 


  Последний способ настройки представления текста - позволить пользователям переключаться на альтернативную таблицу стилей.  Вместо изменения стилей для отдельных элементов страницы или изменения определенных селекторов это заменяет всю таблицу стилей. 


  Хотя этот метод не так гибок, как изменение отдельных селекторов, он прост в настройке и поддерживается всеми браузерами, кроме Netscape версии 4. 


  Чтобы применить этот метод, сначала создайте две внешние таблицы стилей: таблицу стилей по умолчанию и большую таблицу стилей печати. 


  Сначала поместите приведенный ниже код в файл с именем default.css.  Это код нашей таблицы стилей по умолчанию. 


 P { font-size : 10pt; }  H2 { font-size : 10pt; } 


  Затем поместите приведенный ниже код в файл с именем available.css.  Это будет наша большая таблица стилей печати. 


 P,H2 { font-size : 200%; color : yellow; background-color : black; } 


  Затем мы привязываем эти таблицы стилей к нашему документу, помещая этот код в раздел HEAD нашей страницы: 


 <link rel="stylesheet" type="text/css"  href="default.css" id="default">  <link rel="stylesheet" type="text/css"  href="accessible.css" id="accessible"> 


  Когда мы определяем две или более внешних таблицы стилей для нашего документа, мы создаем потенциальный конфликт CSS для браузера, и разные браузеры разрешают этот конфликт по-разному.  Internet Explorer разрешит эти конфликты в пользу первой таблицы стилей в списке.  Браузеры на основе Gecko, такие как Netscape и Mozilla, предпочтут последнюю из перечисленных таблиц стилей.  Netscape также позволит пользователям выбирать между альтернативными таблицами стилей через меню View - Use Style. 


  Поскольку мы хотим, чтобы наша страница отображалась одинаково в разных браузерах, нам нужно деактивировать таблицу стилей available.css, чтобы при загрузке страницы была только одна активная таблица стилей.  Для этого мы добавляем следующий код скрипта в раздел HEAD нашей страницы. 


 <script>  ns4 = document.layers;   if (!ns4) {   accessibleSheet = document.getElementById('accessible');   accessibleSheet.disabled = true;  }  </script> 


  Это определяет, используется ли Netscape Version 4 (в этом случае мы ничего не делаем) и деактивирует таблицу стилей available.css, если нет. 


  Наш следующий шаг - написать changeStyles( ) чтобы она changeStyles( ) и changeStyles( ) default.css.  Код для новой функции показан ниже. 


 function changeStyles() {   if (ns4) {  alert ("Sorry, but NS4 does not allow us to change styles.");      return false;   }   else {      defaultSheet = document.getElementById('default');      defaultSheet.disabled = true;       newSheet = document.getElementById('accessible');      newSheet.disabled = false;   }    return true;  } 


  Сделать это Stick 


  Независимо от метода, который вы используете для изменения стилей, ваши изменения должны быть постоянными.  Если мы этого не сделаем, пользователю придется выбирать крупные шрифты на каждой странице сайта. 


  Мы можем сделать наши изменения постоянными, установив cookie, чтобы указать предпочтения стиля пользователя.  Код cookie сложен, поэтому для этой статьи мы будем использовать готовую библиотеку cookie, доступную от WebMonkey . 


  Приведенный ниже код показывает, как интегрировать код cookie с нашим сценарием замены таблиц стилей.  Изменения в поддержке файлов cookie показаны жирным шрифтом. 


       1: <html>      2: <head>      3: <link rel="stylesheet" type="text/css"  href="default.css" id="default">      4: <link rel="stylesheet" type="text/css"  href="accessible.css" id="accessible">      5: <script language="javascript" src="monkeylib.js"></script>      6:      7: <script>      8: ns4 = document.layers;      9:     10: if (!ns4) {     11: if (WM_readCookie('siteStyle') == 'accessible') {     12: changeStyles();     13: }     14: else {     15:       accessibleSheet = document.getElementById('accessible');     16:       accessibleSheet.disabled = true;     17: }     18: }     19: </script>     20:     21: </head>     22: <body>     23: <script>     24:     25: function changeStyles () {     26:    if (ns4) {     27:       alert ("Sorry, NS4 does not let us  to change styles.");     28:       return false;     29:    }     30:    else {     31:       defaultSheet = document.getElementById('default');     32:       defaultSheet.disabled = true;     33:     34:       newSheet = document.getElementById('accessible');     35:       newSheet.disabled = false;     36:     37: WM_setCookie('siteStyle','accessible',17520);     38:    }     39:     40:    return true;     41: }     42:     43: </script>     44:     45: <h2>Headline</h2>     46: <p>This is the content section of our document.</p>     47:     48: <a href="javascript:;" onClick="changeStyles()">Set large     49: fonts</a> 


  Строка 37 устанавливает постоянный cookie-файл с именем siteStyle для хранения значения «available» accessible. строке 11-17 проверяется наличие этого cookie-файла и вызывается changeStyles( ) если для него установлено значение « accessible ». 


  Применяя это 



 

 Независимо от метода, который вы используете, чтобы предоставить пользователям контроль над стилем страницы, имейте в виду, что нормальные правила приоритета CSS все еще применяются.  Если вы определяете встроенные стили для элементов вашей страницы, они переопределяют выбранные пользователем стили и подрывают доступность. 


  При этом ни один из этих методов не требует значительных изменений в вашем базовом HTML-коде.  На самом деле, большая часть этого кода удобна для вырезания и вставки, что позволяет легко улучшить доступность ваших страниц.  Это замечательно, когда вы можете сделать что-то, чтобы сделать ваш сайт более доступным без усилий.

37
Share: