Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Modx manager: Проблемы с входом в manager / Русскоязычное сообщество MODX

CronManager MODX Revolution

Что такое CronManager

Cron-менеджер для MODx позволяет выполнять сниппеты с помощью crontab-а сервера. С помощью менеджера MODx Revolution Вы можете просто добавить новые сниппеты в cron-список.

Использование сниппетов для cron-управления также требует свойств, и Вы можете добавить свойства вручную, путем занесения пар ключевых значений, но и с propertyset (имя).

Установка


Сначала установите пакет с помощью Package Management в MODx Revolution.

Далее Вам нужно настроить cron-скрипт в crontab-списке серверов. На большинстве хостингов доступна панель управления вроде Direct Admin, и, как правило, у Вас есть возможность изменять конфигурацию сronjobs с помощью этой панели управления. Те, у кого есть доступ к серверу SSH, могут добавить cronjob с командой «crontab -e «. Добавьте следующую строку в cronjob. (Обратите внимание: в некоторых случаях эта команда нуждается в некоторых изменениях, Вам стоит обсудить это со своим провайдером).

cd /path/to/your/modx/installation/assets/components/cronmanager/ && php cron.php

Мы рекомендуем Вам выполнить cronjob каждую минуту, каждый день в каждом месяце (*то есть: m h dom mon dow). Но если Вы уверены, что нет необходимости в ежеминутном cronjob, Вы можете изменить интервал crontab исходя из собственных нужд.

Примеры использования


Чтобы использовать компонент, перейдите к своему менеджеру и нажмите «Components > Cron Manager».

Создать новый cronjob

Так Вы можете создать новый cronjob, нажав на кнопку «new».

Вы видите поля «Snippet», «Minutes» и «Snippet properties».

Snippet: Вы можете начать вводить имя сниппета вручную или открыть автоматический поиск, нажав на стрелку, направленную вниз

Minutes: Введите количество минут, обозначающих период времени, через который будет запускаться сниппет. Например, если вы введете 15, сниппет будет запускаться каждых 15 минут (если crontab на сервере настроен правильно)

Snippetproperties: Здесь вы можете задать свойства сниппета. Вы можете ввести их в парах ключ-значение (каждая с новой строки) или же как объект JSON. Может быть, лучше всего будет использовать propertysets, в этом случае Вы можете добавить имя PropertySet.

Примечание: после добавления cronjob не происходит прямая активация. Вы должны выбрать активное состояние “yes” в последней колонке обзора.


Что собой являет обзор

В обзоре cronjobs Вы можете увидеть, какие сниппеты составляют cronjob и каков минутный интервал. Также есть две колонки с названиями «Last run» и «Next run» (“Последний запуск” и ”Следующий запуск»). Эти колонки отображают дату и время, когда будет cronjob запускался в последний раз, и когда запланирован следующий запуск. В последней колонке содержится информация о том, активный cronjob или нет. Это полезно для тех, кто хочет временно отключить cronjob.

Файл регистрации (лог) для каждого cronjob


Каждый сниппет в cronjob может возвращать несколько значений – в целях тестирования или что-то вроде этого. Каждое возвращенное значением сниппета будет записываться вноситься в файл регистрации cronjob в рамках MODx. Вы можете просмотреть этот журнал, нажав правой кнопкой мыши на записи, начиная с которой Вы хотите просмотреть лог.

Лог – это простой обзор всех возвращенных сообщений, а также там отображается timestamp (временная метка).

Инструкция к CMS Evolution (MODx)

Обращение к читателям статьи

Изначально мы написали эту статью в помощь клиентам нашей студии. Но спустя время эту страницу стали посещать тысячи пользователей со всей России, которые искали информацию по этой замечательной CMS. Мы разрабатываем сайты на этой системе управления уже много лет, поэтому, если вас интересует поддержка или доработка вашего сайта, вы можете смело обращаться по электронной почте [email protected]!

Вход в систему управления сайтом

Для входа в систему управления сайтом необходимо к адресу вашего сайта добавить /manager. Итоговый адрес будет site.ru/manager

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

Словарь терминов

Чтобы общаться с вами «на одном языке», приведём несколько понятий, которые пригодятся:

«Система управления сайтом», она же «CMS (Content Management System)», она же «админка».
Это та «оболочка», через которую вы осуществляете всю работу с сайтом – наполнение, управление и так далее. На скриншоте ниже вы можете увидеть её внешний вид

Бэкенд («бэк»), фронтенд («фронт»)
Как понятно из названия, это «задник» и «передник» сайта. Бэком называется то, что вы видите в админке. Фронтом – то, что на реально действующем сайте.

Дерево ресурсов
Структура страниц сайта в виде раскрывающегося дерева. Её вы можете увидеть в левой части окна CMS. Она позволяет визуально понять, какие разделы, подразделы и страницы есть на сайте. На скриншоте выше дерево ресурсов находится слева, тёмная область.

Ресурс
Любая из страниц сайта. Это может быть главная, страница, статья, услуга, товар, страница контактов — что угодно. Всё, что вы видите на сайте — это ресурсы.

Дочерний ресурс
Ресурс второго уровня (подресурс). Например, у нас может быть раздел «Услуги» (в таком случае он называется ресурсом) и его подразделы — вот они будут называться дочерними ресурсами («дочерний» — понятие относительное, поэтому при любом раскладе они всё же называются «ресурсами»)

ID (айди) ресурса
Цифра, написанная справа от ресурса в дереве. Нужна, в основном, чтобы избежать путаницы при общении по какому-то вопросу. Например, может быть одновременно два ресурса с одинаковым названием (например, два врача-однофамильца). Чтобы проще объяснить кому-тО, какой ресурс смотреть, можно назвать его порядковый номер, то есть, айди.

Шаблон
Визуальная структура ресурса. От шаблона зависит, как будет отображаться та или иная страница. Любой ресурс можно сделать любым шаблоном. Например, любой услуге можно присвоить шаблон «Контакты» и на ней ожидаемо появится карта. Именно этот фактор является огромным преимуществом этой CMS. Любой ресурс может выступать в роли любой страницы при условии смены всего лишь его шаблона.

Публикация
Статус ресурса. Ресурс может быть опубликован (тогда его увидят все пользователи), либо не опубликован (тогда его увидят только администраторы сайта и никто более)

«TV-параметр» (ТВ-параметр)
Поле с неким параметром сайта. Это может быть ввод картинки, какого-то названия, текста, заголовка – по-русски это называлось бы просто «параметром», но в рамках работы с этой CMS, чтобы не было путаницы, ввели понятие «TV-параметр». Самый простой пример – это ввод номера телефона, который отображается в шапке сайта. Поле ввода и будет называться TV-параметром. Пример ТВ-Параметров ниже на скриншоте.

«Мульти-TV»
Аналогично предыдущему термину, это просто параметр ресурса. Однако, название явно показывает, что у него есть возможность ввода множества данных, объединённых одним TV-параметром. Например, если у компании несколько телефонов, то плодить множество TV-параметров неудобно (т.к. телефоны могут появляться хоть по 5 штук в день). В таком случае используется Мульти-ТВ. Пример внешнего вида мульти-ТВ находится ниже на скриншоте. Зелёным плюсом и красным минусом мы можем регулировать количество ТВ-параметров внутри одного мульти-ТВ

DocPicker (ДокПикер)
Используется нечасто и не факт, что у вас он будет, но инструкция общая для всех, поэтому нужно его упомянуть. Используется для логической связи ресурсов между собой. Например, одна из частых задач – конкретному филиалу компании присвоить нужных сотрудников. Для этого в строке пишутся номера ID ресурсов. На скриншоте ниже показано, что сотрудник относится именно к филиалу на Московской, д. 123.

Табы
«Закладки» внутри админки, на которых расположены ТВ-параметры. Расположены в самом верху окна редактирования ресурса.

Файловый менеджер
Используется для загрузки файлов и изображений на сайт. Вызывается кликом по кнопке «Вставить» в ТВ-параметре.

Представляет собой стандартный проводник с обычными файлами и папками. То, что вы видите в нём – это файлы, расположенные на хостинге (а не на вашем ПК). Для того, чтобы загрузить файл, необходимо нажать зелёную кнопку «Загрузить» и выбрать необходимый файл на вашем ПК. Рекомендуем создавать папки в левом дереве файлов, а не грузить всё в одну, чтобы потом вам самим было проще найти нужный файл.

PageBuilder (ПейджБилдер)
Один из самых сложных, но при этом, самых часто встречающихся модулей нашей админки. Представляет собой «сборщик-конструктор» страницы. В основном, используется на каких-то больших внутренних страницах (например, конкретной услуги, продукта, статьи и так далее).

Для начала вернёмся к объяснению, которое мы 100% рассказывали вам на встрече, просто вы забыли. Любая страница состоит из неких визуальных блоков. Если бы статья содержала в себе только текст, то было бы прекрасно, и никакой ПейджБилдер нам не потребовался бы. Однако, зачастую, статья может содержать в себе: текст, галерею, слайдер, отзывы, преимущества, что угодно. Все эти блоки имеют свой html-код, свою вёрстку. И без знаний этого кода вы просто-напросто не сможете скомпоновать порядок блоков на странице так, как вам нужно.

Рассмотрим на примере. Ниже будет скриншот страницы услуги Стоматологии.

Явно видно, что на картинке шесть разных визуальных блоков. Но ведь очевидно, что прайс-лист на какой-то услуге может быть, а на какой-то – нет. На какой-то услуге может быть блок с круглыми картинками, а какая-то услуга – это всего лишь один абзац текста, т.к. про неё больше нечего писать. Именно для этого и нужен ПейджБилдер. Он позволяет без знания кода формировать порядок блоков на странице. Фактически, ПейджБилдер – это всего лишь чуть более навороченный МультиТВ.

Теперь посмотрим, как выглядит этот же сайт в разрезе ПейджБилдера в админке.

По принципу МультиТВ мы можем добавить в любом порядке блок с определённой визуальной структурой и наполнением. Эти блоки можно менять местами, можно добавлять несколько одинаковых блоков и так далее.

Вот именно понять, как выбрать наиболее привлекательный блок для какого-то наполнения – это и есть основная проблема (даже не проблема, а сложность) в наполнении сайта.

Рассмотрим на примере. Один и тот же текст можно вверстать в сайт по разному, ниже три примера:

 

 

«Правильного» решения тут нет, это – абсолютный субъективизим, который влияет только на визуальную подачу, не более. Но именно этот момент вызывает у всех большинство вопросов.

Работа с деревом ресурсов

Работа с деревом ресурсов очень простая. Давайте прям пошагово:

  • Первое, что нужно знать – изначально, все ресурсы и их подресурсы свёрнуты. Чтобы посмотреть, какие дочерники содержит в себе ресурс, необходимо нажать на стрелочку слева:

  • Зажав ЛКМ, можно перетаскивать ресурсы вверх-вниз, это будет влиять на порядок отображения на фронте.

  • По ресурсу можно кликнуть левой кнопкой мыши (далее просто «ЛКМ») или правой кнопкой мыши (далее ПКМ).

    ЛКМ откроет окно редактирования конкретного ресурса в правой области админки.

    ПКМ откроет контекстное меню редактирования ресурса, остановимся на нём.

По порядку по скриншоту:

  • Дочерний ресурс. Создаст дочерний ресурс выбранного ресурса. Используется для добавления статей, услуг и так далее.
  • Редактировать. Действие, аналогичное ЛКМ.
  • Переместить. Позволяет перемещать созданный ресурс (например, если вы создали его не в том ресурса)
  • Сделать копию. Создаёт полную копию выбранного ресурса (включая заполненные ТВ-параметры)
  • Отменить публикацию. Меняет статус публикации ресурса.
  • Удалить. Действие аналогично удалению файла в Windows. То есть, сначала ресурс просто зачёркивается, и только после нажатия на иконку корзины сверху, он удаляется. Это очень удобно и защищает от случайного удаления ресурса.
  • Дочерняя веб-ссылка. Как правило, не используется.
  • Обзор ресурса. Как правило, не используется.
  • Просмотр ресурса. Открывает страницу сайта для просмотра.

Работа с окном редактирования ресурса

Работа с окном редактирования ресурса довольно простая. Давайте по порядку, сверху-внизу. Ниже – скриншот-пример:

Всегда обращаем внимание на табы. Есть три стандартных таба, которые есть у каждого ресурса: Общие, Настройки страницы, SEO. А есть у некоторых ресурсов дополнительные. Как правило, это различные галереи, пейджбилдеры и другие ТВ-параметры.

У каждого ресурса есть стандартные поля:

  • Заголовок. Это – название страницы. Как правило, используется на фронте в качестве заголовка.
  • Псевдоним. Это адрес страницы на фронте. Например, site.ru/adres-stranicy. В данном случае, adres-stranicy является псевдонимом. Его трогать не нужно, он формируется автоматически на основе заголовка по правилам транслитерации.
  • Шаблон. Как правило, шаблон выбирается автоматически при создании ресурса (на основе «соседних» ресурсов). Но если вы видите, что вы наполнили всё верно, а на фронте какая-то ерунда, то в первую очередь проверьте шаблон и сверьтесь с ресурсом, который работает корректно.
  • Позиция в меню. Порядковый номер вывода ресурса на фронте.

Табы SEO и «Настройка страницы», как правило, заказчиками не используется. Если же вам это нужно, то, скорее всего, вам эта инструкция уже бесполезна 🙂

Работа с редактором контента

Работа с редактором текста не сложнее работы в Microsoft Office.

На картинке дали пояснения к основным кнопкам.

Самые частые вопросы по использованию редактора контента:

  • Как изменить шрифт текста, размер, интервалы? Делать этого не нужно! Над вашим сайтом работал профессиональный дизайнер, который подобрал именно тот шрифт, именно тот размер, именно то выравнивание, которое идеально подходит для тех или иных целей. Ваша задача – просто вставить текст, не более.
  • Текст на фронте выглядит «слипшемся, без абзацев». Частая проблема, когда вы копируете текст с какого-то чужого сайта. Вам в некоторых случаях необходимо вставлять абзацы самостоятельно (просто нажав Enter на нужном участке текста). Ниже пример «слипшегося текста» и текста, как он должен выглядеть в админке, чтоб был красивый на фронте:

Что важно понимать?

Наполнение сайта — это сложный процесс, который требует усидчивости. Каждый сайт индивидуален, каждый имеет свой набор ТВ-параметров, табов, полей, визуальных блоков и так далее. Написать инструкцию к каждому — просто нереально технически

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

Подведем итоги

Мы надеемся, что эта инструкция поможет вам красиво и быстро наполнить сайт. Руководство постоянно пополняется, поэтому у нас есть большая просьба — если в процессе наполнения вы столкнулись с тем, чего нет в этом руководстве, сообщите нам. Вы поможете будущему поколению заказчиков в этом сложном вопросе.

MODX — Загрузки — Синтезаторы — Синтезаторы и инструменты для создания музыки — Продукты

Искать на этом сайте

  • Обзор
  • Функции
  • Обновления
  • Программы
  • Звуковая библиотека
  • Совместимость
  • Часто задаваемые вопросы
  • Спецификации
  • Аксессуары
  • Загрузки

Имя Английский Английский
MODX 6/7/8 Руководство пользователя — [12,9МБ]
MODX6/MODX7/MODX8 Справочное руководство — [5,5 МБ]
Список данных MODX6/MODX7/MODX8 — [5,2 МБ]
Дополнительное руководство по MODX 6/7/8 — [1,8 МБ]
Руководство по параметрам синтезатора — [752 КБ]

Выберите ОС AllMacWin

Имя ОС Размер Последнее обновление
USB-драйвер Yamaha Steinberg версии 2.
1.5 для Windows 11/10 (64-разрядная версия)		 Вин 4,7 МБ 14.03.2023
USB-драйвер Yamaha Steinberg версии 3.1.4 для Mac macOS 11/12/13 (Intel/Apple Silicon) Mac 7,6 МБ 26.01.2023
USB-драйвер Yamaha Steinberg версии 2.1.4 для Mac macOS 10.15–10.13 Mac 7,3 МБ 26.01.2023
MODX Connect V1.2.0 для Mac macOS 12 macOS 11 macOS 10.15 и macOS 10.14
Mac		 18,2 МБ 01.09.2022
MODX Connect V1. 2.0 для Windows Вин 15,4 МБ 01.09.2022
USB-драйвер Yamaha Steinberg версии 2.0.4 для Mac macOS 10.15–10.12 Mac 3,4 МБ 25.11.2020
MODX Connect V1.1.1 для Windows Вин 15,1 МБ 13.11.2020
MODX Connect V1.1.0 для Mac macOS 11 и macOS 10.15 — macOS 10.12 Mac 20,7 МБ 2020-06-02
MODX Connect V1. 1.0 для Windows Вин 15 МБ 2020-06-02
Драйвер USB Yamaha Steinberg версии 2.0.3 для Windows 10/8.1/7 (32-разрядная/64-разрядная версия) Win 7,1 МБ 2020-03-02
MODX Connect V1.0.6 для Windows Вин 20,3 МБ 10.01.2019
MODX Connect V1.0.4 для Mac macOS 10.15-OS X 10.11 Mac 51,4 МБ 2018-09-14

Имя Английский Английский
Список совместимых устройств для MODX6/MODX7/MODX8 — [85 КБ]
Представления MOTIF XF для MONTAGE — [2,2 МБ]

    org/» typeof=»BreadcrumbList»>
  1. Главная
  2. Продукты
  3. Синтезаторы и инструменты для создания музыки
  4. Синтезаторы
  5. MODX
  6. Загрузки

Список дел по веб-доступности для MODx Manager

Список дел по веб-доступности для MODx Manager

Оценка Пола Бохмана с использованием автоматизированных инструментов, таких как FireEyes/WorldSpace от Deque, Wave от WebAIM, но в основном это ручная оценка, сравнивающая действия веб-сайта с Руководством по доступности веб-контента 2.0 и передовыми методами обеспечения доступности веб-сайтов.

Содержание

  • Резюме
  • Исходная информация о веб-доступности
  • стилей
  • Экран входа в систему
  • Общая структура страницы
  • Верхнее главное меню (убербар)
  • Боковая панель дерева
  • Модальные диалоги
  • Добавить/редактировать ресурс
  • Еще не все. ..

Резюме

Доступность для людей с ограниченными возможностями имеет решающее значение не только для самих людей с ограниченными возможностями, которые в настоящее время не могут использовать менеджер MODx, но и для компаний, которые надеются использовать MODx. Государственные учреждения, в частности, подверглись бы юридическому риску, если бы решили использовать MODx из-за несоответствия интерфейса менеджера руководящим принципам веб-доступности.

Эта оценка еще не завершена, но появились некоторые тенденции:

  • Доступность клавиатуры:
    • В менеджере MODx есть много мест, где требуется мышь. Это делает невозможным использование слепыми пользователями программ чтения с экрана, потому что мышь бесполезна для тех, кто не видит, где ее щелкнуть. Это также делает невозможным это для зрячих пользователей клавиатуры, которые не могут пользоваться мышью, возможно, из-за тремора в руках, или отсутствия рук и использования палочки для рта, или из-за другого подобного заболевания. Многие динамические виджеты (таблицы, списки с множественным выбором и т. д.) необходимо дополнить атрибутами ARIA и сочетаниями клавиш в стиле ARIA, чтобы обеспечить эффективное взаимодействие программ чтения с экрана.
  • Управление фокусом клавиатуры:
    • Фокус клавиатуры должен следовать за действиями динамических сценариев (модальные окна, проверка форм и т. д.).
  • Метки и варианты текста:
    • Каждый активный элемент (ссылки, кнопки и т. д.) и каждый важный элемент, подобный изображению (графика и значки шрифтов), нуждаются в текстовой метке или текстовой альтернативе. Без метки или альтернативного текста программам чтения с экрана нечего читать, поэтому пользователи не знают, что это за элементы.

Есть и другие проблемы, но вышеперечисленные проблемы широко распространены и должны решаться широко в менеджере MODx.

Общие сведения о веб-доступности

  • Инвалиды по зрению:
    • Слепым пользователям программы чтения с экрана необходимо:
      • альтернативный текст для изображений, значков и т. д.
      • метки на элементах формы
      • полная доступность с клавиатуры всех функций, включая раскрывающиеся меню, всплывающие подсказки, списки вкладок, модальные окна и т. д.
      • управление фокусом с динамическим содержимым, таким как сообщения об ошибках/обратная связь, динамически загружаемое содержимое AJAX и т. д.
      • логический порядок табуляции
      • действительная ссылка и текст кнопки
      • хорошая структура документа (заголовки, заголовки таблиц, списки, ориентиры)
    • Пользователям с плохим зрением необходимо:
      • хороший цветовой контраст
      • легко видимые стили :focus и, желательно, стили :hover тоже
    • Дальтоникам необходимо:
      • информация представлена ​​в виде, не зависящем от цвета
  • Глухим пользователям необходимо:
    • Стенограммы и субтитры для аудио/визуального контента (не проблема с менеджером MODx)
  • Пользователям с ограниченными двигательными возможностями необходимо:
    • полная функциональность клавиатуры (см. выше для слепых пользователей)
    • легко видимые стили :focus (некоторые люди вообще не могут пользоваться мышью, поэтому им нужно всегда знать, где находится фокус клавиатуры)
  • Пользователям с когнитивными нарушениями (включая распространенные нарушения чтения, СДВ и другие) необходимо:
    • простота визуального оформления, организации процессов и т. д.
    • четкие инструкции
    • хорошие механизмы предотвращения ошибок
    • хороших, интуитивно понятных механизмов восстановления после ошибок

Модели

  • Визуальный индикатор фокусировки клавиатуры:
    • Визуальный индикатор фокусировки на клавиатуре либо отсутствует в некоторых местах, либо его трудно увидеть. Это можно добавить в manager/templates/default/css/index.css:
      body *:focus {outline:2px solid #00948e !important;}
      body #modx-header *:focus {outline:2px solid #fbf5be !important;}
      Это решит проблему почти везде, но потребуется добавить дополнительные стили и/или JavaScript, чтобы убедиться, что вокруг настраиваемых флажков есть видимый контур. Я понимаю, что это несколько влияет на дизайн, но наличие легко видимого индикатора фокусировки клавиатуры является требованием доступности и оказывает огромное положительное влияние на людей, которые не могут использовать мышь. Воздействие на пользователей мыши минимально. Они увидят это в полях формы, но это, вероятно, хорошо. Они не увидят его при наведении курсора мыши (хотя вы, безусловно, можете добавить те же стили для :hover, что также будет полезно для доступности, хотя и не является таким уж обязательным требованием).0428 [ПРИМЕЧАНИЕ. Я только что заметил, что приведенные выше стили лишь частично работают в Safari и Chrome, предположительно из-за некоторых конфликтов с другими специфичными для webkit стилями в какой-то таблице стилей, поэтому требуется дополнительная работа, чтобы визуальный индикатор фокуса клавиатуры работал в браузеры webkit.]
  • Цветовой контраст:
    • Коэффициент цветовой контрастности светлого текста во многих местах не соответствует стандарту WCAG 4,5:1 для обычного текста и 3:1 для крупного текста. Цветовой контраст можно анализировать с помощью автоматизированных инструментов, таких как FireEyes и Wave.

Экран входа в систему

  • Этикетки:
    • В поле «имя пользователя или адрес электронной почты» должен быть тег
  • Обязательные поля:
    • Используйте aria-required=»true» для всех обязательных элементов . Программы чтения с экрана сообщат «требуется» при чтении пользователям.
  • Порядок вкладок клавиатуры:
    • Порядок табуляции в основном правильный, но селектор языка в нижнем левом углу не в порядке. Его следует переместить в исходный код так, чтобы он был последним на странице в порядке вкладок, как тогда, когда экран входа находится в состоянии по умолчанию, так и когда активирована функция «забыли свой логин». Я заметил, что для некоторых ссылок и полей используется tabindex. Лучше не использовать tabindex с любыми положительными числами, потому что он переопределяет поведение вкладок браузера по умолчанию способами, которые часто нежелательны для пользователей клавиатуры (tabindex=»0″ допустимо поместить что-то в обычный поток вкладок, а tabindex=»-1 » допустимо сделать что-то фокусируемым с помощью JavaScript, но tabindex=»1″ или больше — не лучшая практика). Одна из проблем с tabindex положительных чисел заключается в том, что если вы забудете добавить значение tabindex в ссылку или поле формы, например ссылку «забыли свой логин», а также в поле «имя пользователя или адрес электронной почты» и «отправить электронное письмо для активации», button — вы рискуете навести порядок, что здесь и произошло. Рекомендация состоит в том, чтобы для начала просто расположить вещи в правильном порядке табуляции в DOM и не изменять порядок табуляции с помощью tabindex положительных чисел.
  • Управление фокусом клавиатуры:
    • Когда пользователи нажимают «Забыли логин?» фокус клавиатуры должен переместиться в поле формы «имя пользователя или электронная почта».
  • Сообщения об ошибках/отклики:
    • Сообщения обратной связи («Пользователь не найден…», «Введено неверное имя пользователя или пароль…») должны быть прочитаны программами чтения с экрана при обновлении страницы.
      • Вариант 1: Один из способов добиться этого — принудительно сфокусировать клавиатуру на сообщении об ошибке при перезагрузке страницы. Сообщение об ошибке должно иметь tabindex=»-1″ для эффективного получения фокуса через JavaScript.
        Пользователь не найден…
        . Сообщение должно предшествовать первому соответствующему полю формы. Если имя пользователя/пароль неверно, сообщение должно появиться над полем имени пользователя. Если ошибка возникает в поле «Имя пользователя или адрес электронной почты» (после выбора «забыли пароль?», то сообщение об ошибке должно появиться непосредственно над полем «Имя пользователя или адрес электронной почты», чтобы пользователи один раз нажали клавишу Tab, чтобы перейти в это поле.
      • Вариант 2: поместите сообщение об ошибке в метку соответствующего поля, либо поместив его в тег
      • Также: Установите aria-invalid=»true» для элемента после того, как форма была отправлена ​​для всех некорректных полей. Программа чтения с экрана скажет «недействительно», чтобы пользователи знали, что им нужно исправить это поле.
  • Цветовой контраст:
    • Коэффициент контрастности между синим текстом ссылки и серым фоном слишком низкий для некоторых пользователей с плохим зрением. Синий текст слишком светлый даже на белом фоне для стандартов коэффициента контрастности для специальных возможностей. Возможное значение #206e99
    • Слишком низкая контрастность серого текста метки «Язык» в левом нижнем углу и метки «запомнить меня». Возможное значение для «запомнить меня» будет #757575. Возможное значение «Язык» — #575757.
    • Слишком низкая контрастность бирюзового цвета фона кнопок по сравнению с белым текстом сверху. Возможным значением будет #007571.

Общая структура страницы менеджера

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

 <заголовок  роль="баннер" >
    
 role="search  ">

    
    


     role="tablist" aria-label="Tablist в виде дерева"  > 
    <ли  role="tab"  >Ресурсы
  • Элементы
  • 



 роль="вкладка"  >
    
    
    


<основной  роль = "главная"  >
    Сюда помещается весь основной контент (редактирование страниц, редактирование фрагментов, содержимое панели инструментов и т.  д.).

<нижний колонтитул  роль="contentinfo" >
    (Сейчас в менеджере MODx нет нижнего колонтитула, но вы бы разметили его так)

Примечание. Вы также можете добиться того же функционального результата, используя только теги

с атрибутами ролей вместо тегов HTML 5 и атрибутов ролей, но последнее решение более дальновидно.

Главное верхнее меню (убербар)

  • Порядок вкладок:
    • Порядок объектов в DOM отличается от визуального порядка. То, как ссылки расположены визуально, я ожидаю, что порядок будет таким:
      • Логотип MODx/home
      • поиск
      • контент/медиа/дополнительно/управление
      • меню пользователя
      • меню передачи/системы
      • значок справки
    • Фактический порядок начинается с пользователя и идет вправо, а затем возвращается на главную страницу MODx и через левое меню, что не интуитивно понятно.
  • Доступность клавиатуры:
    • Основные раскрывающиеся меню недоступны с клавиатуры. Это большая проблема — на самом деле, это нарушение правил — которая затрагивает слепых пользователей и зрячих пользователей клавиатуры, ни один из которых не может эффективно использовать мышь. Меню на 100% недоступно для этих групп. В идеале было бы использовать меню на основе арии, которое позволяет пользователям переходить в группу (всю группу навигации/меню), а затем переходить за ее пределы, вообще не переходя к пунктам меню, и использовать клавиши со стрелками для навигации внутри. сама система меню. См. шаблоны клавиатуры, описанные здесь:
      • http://www.w3.org/TR/wai-aria-practices/#menu
      • http://www.w3.org/TR/wai-aria-practices/#kbd_focus
  • Альтернативный текст для изображений и значков:
    • Изображение граватара не имеет альтернативного текста
    • Для значка шестеренки и значка справки требуется текст. Варианты включают:
      • Используйте визуально скрытый текст, к которому могут получить доступ только программы чтения с экрана (используйте клип CSS или закадровый текст), и скройте саму иконку на случай, если программа чтения с экрана попытается ее прочитать (он почти наверняка прочитает ее неправильно):
        • Системное меню
      • Или используйте role=»image» и aria-label:
  • Ярлык формы:
    • Поле поиска нуждается в теге
  • Кнопка отправки отсутствует:
    • В идеале форма должна иметь настоящую кнопку отправки, чтобы слепые пользователи знали, что они могут отправить форму. Слепые пользователи не видят значок увеличительного стекла. На самом деле значок увеличительного стекла можно превратить в кнопку отправки, и вы сможете сохранить тот же базовый вид, что и исходящий интерфейс.

Боковая панель

  • Доступность панели вкладок/таблиц с помощью клавиатуры:
    • Панель вкладок вообще недоступна с клавиатуры. Основные вкладки должны иметь tabindex=»0″ на активной вкладке и tabindex=»-1″ на неактивных вкладках, и JavaScript должен переключать это значение, когда пользователи выбирают разные вкладки. Вам также необходимо переключить aria-expanded=»true» и aria-controls=»the-id-of-the-tabpanel». См. https://dequeuniversity.com/assets/js/aria/saveform/form2.html для примера.
  • Альтернативный текст значка:
    • Все значки (Новый документ, Новая символическая ссылка и т. д., а также Корзина) нуждаются в замещающем тексте, чтобы программы чтения с экрана знали, что сказать. См. «альтернативный текст для изображений и значков» в убербаре выше, чтобы узнать о возможных методах.
  • Роль кнопки для значков:
    • Значки (Новый документ, Новая символическая ссылка и т. д. и Корзина) должны иметь атрибут role=»button» или должны быть заключены в фактические теги
  • Доступные с клавиатуры всплывающие подсказки для значков/кнопок:
    • Всплывающая подсказка должна появляться, когда значки/кнопки получают фокус клавиатуры, а не только при наведении курсора мыши.
  • Клавиатурная доступность кнопки для сворачивания боковой панели:
    • Дескриптор для сворачивания всей боковой панели влево должен быть доступен с клавиатуры, и он должен быть <кнопкой> или иметь role=»button» и должен иметь метку (например, «свернуть боковую панель»), чтобы донести до пользователей его назначение.
  • Доступность клавиатуры для представления в виде дерева:
    • Пользователи должны иметь доступ ко всем элементам и функциям (обновление, добавление новых __ здесь и т. д.) в представлении в виде дерева с помощью клавиатуры. Было бы лучше реализовать древовидное меню ARIA, позволяющее перемещаться с помощью клавиши со стрелкой. Вы должны перейти к объекту дерева, а затем использовать клавиши со стрелками для навигации по нему, включая развертывание и свертывание узлов в дереве. Использование клавиши табуляции приведет к выходу из дерева, а не к навигации по нему. Древовидные представления довольно сложны, но их можно сделать доступными. Вам нужно будет добавить атрибуты ARIA и переключаться между различными состояниями, такими как aria-expanded=»true». Вам также необходимо убедиться, что функциональность значка развертывания/свертывания/треугольника ясна и отделена от функциональности самого заголовка страницы, который открывает страницу. Видеть
      • http://www.w3.org/TR/wai-aria/roles#tree
      • http://accessibleculture.org/articles/2013/02/not-so-simple-aria-tree-views-and-screen-readers/
  • Доступность клавиатуры контекстного меню в дереве:
    • Функциональность контекстного меню должна быть доступна пользователям клавиатуры. Все функции доступны в других местах, поэтому это требование уже выполнено, но было бы лучше сделать контекстное меню непосредственно доступным для пользователей клавиатуры, а не заставлять их использовать менее эффективные пути к тем же функциям. . Вы можете реализовать сочетание клавиш, такое как alt + enter, для ссылок в меню, чтобы активировать контекстное меню. Однако, чтобы быть эффективным, вам нужно сообщить пользователям, что это сочетание клавиш существует, чтобы вы могли добавить всплывающую подсказку к каждой ссылке с надписью «Используйте Alt + Enter для контекстного меню». Вам необходимо убедиться, что программы чтения с экрана также читают этот текст. Особенно важна возможность добавлять новые элементы (ресурсы, элементы, файлы) в качестве дочерних элементов элемента, который в данный момент находится в фокусе, поскольку это очень распространенная задача.
  • Управление фокусом клавиатуры:
    • Когда вы выбираете страницу для ее редактирования, фокус изначально переходит на поле заголовка страницы, что кажется логичным. Мне нравится, что. Проблема заключается в том, что дерево меню загружается и обновляется, и при этом оно в конечном итоге переносит фокус клавиатуры с этого поля на текущую страницу в представлении дерева. Это прерывает поток клавиатуры, и если вы не можете использовать мышь, вам придется нажимать вкладки, вкладки, вкладки, вкладки, вкладки, много раз, чтобы вернуться туда, где вы были. Убедитесь, что древовидное представление не перехватывает фокус.

Модальные диалоги

  • Управление фокусом клавиатуры:
    • Отправить фокус модальному
      • Убедитесь, что фокус переходит на модальное окно, когда оно активировано. Если это простое модальное окно ok/cancel, то фокус должен перейти на кнопку ok. MODx, кажется, делает это хорошо в местах, которые я искал.
    • Ограничить доступ с клавиатуры к модальному модулю, пока он активен:
      • Убедитесь, что пользователи не могут переходить по ссылкам под модальным окном или использовать программу чтения с экрана для доступа к другим элементам под модальным окном. Один из методов достижения последнего заключается в том, чтобы установить для всего под модальным окном значение aria-hidden=»true». Это не скроет его от визуальных пользователей, но сделает контент недоступным для пользователей программ чтения с экрана, что вам и нужно в данном случае. Используйте JavaScript для управления фокусом, чтобы пользователи клавиатуры не могли переходить вперед или назад (shift+tab) вне модального окна.
    • Полностью скрыть неактивные модальные окна (и другой подобный динамический контент):
      • Убедитесь, что модальное окно полностью скрыто от всех пользователей, в том числе от пользователей программ чтения с экрана, используя display:none для элемента, если он уже находится в DOM. Обязательно верните его обратно в display:none в соответствующее время, после того как пользователь или скрипт закончит с ним. До сих пор я не сталкивался с какими-либо проблемами с модальными окнами в MODx, читаемыми программами чтения с экрана, когда они неактивны, но на это стоит обратить внимание.

Добавить/редактировать ресурс

  • Ярлыки для полей форм, кнопок и кнопочных (скриптовых) элементов:
    • Для основного поля «Содержание» требуется реальный тег
    • Для виджета «Показать/скрыть» над правой частью текстовой области «Содержимое» и справа от вкладок («Документ», «Настройки», «Переменные шаблона…») требуется метка. Дайте ему ярлык, например «скрыть поле содержимого» (для нижнего) или «скрыть свойства страницы» (для верхнего), который должен переключиться на «показать поле содержимого» после его активации. Вероятно, это должна быть кнопка, поэтому ее можно закодировать так:

      В некоторых случаях было бы предпочтительнее иметь настоящий текст на кнопке:
    • В области «Переменные шаблона», если переменная шаблона имеет такое свойство, как @INHERIT, текст, который в настоящее время отображается справа от поля (например, «Унаследованное значение»), должен находиться внутри <метки>. Вы все еще можете оформить его так, чтобы он заканчивался с правой стороны, но не размещайте его за пределами этикетки.
  • Обязательные поля:
    • Используйте aria-required=»true» для всех обязательных элементов . Программы чтения с экрана сообщат «требуется» при чтении пользователям.
  • Доступность клавиатуры:
    • Интерфейс вкладок недоступен с клавиатуры. Пользователи должны иметь возможность переходить к списку вкладок с помощью клавиши табуляции, а затем использовать клавиши со стрелками для перехода к самим вкладкам. См. https://dequeuniversity.com/assets/js/aria/saveform/form2.html для примера доступного списка и панели вкладок.
    • Селектор «Использует шаблон»:
      • Убедитесь, что этот виджет полностью доступен с клавиатуры, чтобы люди, использующие только клавиатуру, могли переключать шаблоны.
    • Виджет отображения/скрытия содержания:
      • Убедитесь, что пользователи клавиатуры могут использовать вкладку этого элемента управления
    • Заскриптованные входы только для чтения на вкладке «Настройки»:
      • Кнопка (и это должна быть кнопка) справа от поля «Родительский ресурс» должна быть доступна с клавиатуры, и/или пользователи должны иметь возможность вводить целое число непосредственно в поле.
      • Кнопка справа от поля «Тип ресурса» должна быть доступна с клавиатуры, а пользователи клавиатуры должны иметь возможность выбирать тип ресурса без мыши.
      • Кнопка справа от «Тип контента» должна быть доступна с клавиатуры, а пользователи должны иметь возможность выбирать тип контента без мыши.
      • Кнопка справа от «Расположение содержимого» должна быть доступна с клавиатуры, а пользователи должны иметь возможность выбирать расположение содержимого без мыши.
    • Панель «Переменные шаблона»:
      • Список таблиц сбоку должен быть доступен с клавиатуры. См. https://dequeuniversity.com/assets/js/aria/saveform/form2.html для примера доступного списка и панели вкладок.
      • Функция «Установить по умолчанию» недоступна с клавиатуры. Пользователи должны иметь возможность переходить к нему и использовать его без мыши. ПРИМЕЧАНИЕ. Обязательно дайте каждому из них отдельное имя, чтобы они не говорили просто «Установить по умолчанию». Вы хотите, чтобы он сказал что-то вроде «Установить идентификатор курса по умолчанию», где «идентификатор курса» — это имя/заголовок для переменной шаблона. В противном случае пользователи не будут знать наверняка, какая кнопка относится к какому полю, поскольку телевизоров может быть несколько, а расположение кнопки «Установить по умолчанию» может быть неоднозначным (относится ли она к предыдущему телевизору или к следующему?).
    • Панель группы ресурсов:
      • Кажется, это недоступно с клавиатуры, но если вы схитрите и щелкнете мышью в списке групп ресурсов, доступ к панели с клавиатуры возможен, даже если доступ к флажкам невозможен.
    • флажков:
      • Флажки групп ресурсов доступны только с помощью мыши. Они должны быть ориентированы на клавиатуру и работать с клавиатурой (с клавишей ввода или пробелом).
  • Порядок вкладок клавиатуры:
    • По большей части порядок вкладок правильный (для вещей, к которым можно переходить), но флажок «Закрепить URI» не в порядке. Похоже, что он должен быть следующим после «Rich Text», но это не так.
  • Сообщения об ошибках:
    • Если поле недействительно (например, обязательное поле пусто) onblur, добавьте aria-invalid=»true», чтобы пользователь программы чтения с экрана услышал это, когда вернется к полю.
      • Когда пользователь пытается отправить страницу, когда есть недопустимые поля, переместите фокус клавиатуры на недопустимое поле (даже если это поле находится на другой панели вкладок, чем текущий фокус), чтобы пользователи могли найти ошибку и исправить это. Убедитесь, что сообщение об ошибке связано с полем либо в самой <метке>, либо на него ссылается aria-labelledby. Вот предложение:

        Если и метка, и сообщение об ошибке заключены в тег label вместе с самим вводом, заголовок и сообщение об ошибке будут прочитаны, когда пользователи сосредоточатся на вводе. Это очень удобный способ гарантировать, что сообщения об ошибках будут прочитаны программами чтения с экрана. (Обратите внимание, что aria-invalid=»true» применяется только после того, как поле действительно недействительно, а не при загрузке страницы.
Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *