В плитках google-map отсутствует тег alt, что приводит к снижению оценки доступности

Не мог отпустить это 1

Вы можете использовать событиеtileloaded, а затем использовать jQuery для изменения изображений после рендеринга.

google.maps.event.addListener(this.map, 'tilesloaded', function(evt){
    $(this.getDiv()).find("img").each(function(i, eimg){
      if(!eimg.alt || eimg.alt ===""){
         eimg.alt = "Google Maps Image";
      }
    });
 });

Не совсем ясно, что добавление ALT к контенту, который по своей сути является графическим, принесет много пользы с реальной точки зрения доступности. Немного отступив:

• Какой инструмент вы используете для создания этой оценки?

• Вы заботитесь о какой-то оценке, сгенерированной инструментом, по какой-то обязательной причине соответствия, или настоящая цель здесь - сделать ваши страницы действительно доступными?

• А как вы используете плитку? Это набор страниц, которыми вы сами владеете?

Целью здесь действительно должна быть доступность, а не соответствие, измеряемое инструментом; инструменты должны помочь с этой задачей, но, к сожалению, во многих случаях инструменты измеряют соблюдение некоторого набора правил, но не могут измерить саму доступность. Например, инструмент может определить, имеет ли изображение атрибут ALT; но атрибут ALT должен присутствовать и иметь значение, чтобы изображение было действительно доступным. Так что постарайтесь думать о более широкой картине — о том, чтобы пользователи были довольны, а не только о том, чтобы сделать инструмент счастливым.

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

Правильное решение здесь действительно зависит от того, для чего вы хотите использовать изображения — можете ли вы предоставить более подробную информацию о том, что представляет собой более крупный проект?

После того, как у вас есть какая-то доступная альтернатива графическим плиткам, лучше всего для обработки реальных плиток IMG можно установить alt="", что говорит программе чтения с экрана игнорировать их полностью; это, вероятно, лучший способ действий здесь, поскольку чтение с экрана «изображение, изображение, изображение ...» не будет особенно полезным.

--

Предполагая, что вы говорите конкретно о карте кампуса Беркли на http://berkeley.edu/map/googlemap/ - интересный случай. Вдоль левого края находится список зданий, а в основной части страницы — карта. Щелкните здание, и появится булавка с всплывающим окном с некоторой информацией и дополнительной ссылкой, щелкните эту дополнительную ссылку, и появится лайтбокс с более подробной информацией.

Одна проблема, которую я вижу здесь, заключается в том, что когда пользователь программы чтения с экрана щелкает одну из ссылок с левой стороны, он может не знать, что в другом месте страницы появилось всплывающее окно с дополнительной информацией. Даже если вы знаете, что там есть всплывающее окно, вам придется перемещаться по промежуточным ссылкам, чтобы добраться до его содержимого, что было бы несколько неудобно. (Скрытие изображений с помощью alt="" по крайней мере означает, что им не нужно перемещаться по ним всем.)

Возможно, здесь поможет перемещение фокуса во всплывающее окно (программы чтения с экрана обычно следуют за ним), но это может быть сложно, если всплывающее окно управляется кодом Google Maps. И это, вероятно, нужно будет протестировать с помощью реального средства чтения с экрана, такого как бесплатный NVDA, на ПК или VoiceOver на Mac — и, что еще лучше, проверено реальным пользователем программы чтения с экрана!

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

Я работаю в компании (Deque Systems), которая создает механизм сканирования Enterprise, который генерирует оценку доступности для каждой страницы и каждого проекта. Я рекомендую использовать это ТОЛЬКО как очень приблизительное руководство и вместо этого сосредоточить свои усилия на том, чтобы убедиться, что ваш сайт действительно доступен. Инструменты автоматизированного тестирования могут выявить только 30-50% проблем с доступностью.

Что касается «более доступных» карт Google, взгляните на этот " доступная версия Google Maps, которую я создал. Он делает больше, чем просто добавляет атрибуты alt к фрагментам изображения. Он также добавляет стили фокуса (хотя и уродливые) к фокусируемым элементам и добавляет доступные имена к элементам управления, где они отсутствуют. Обратите внимание, что это зависит от языка, и моя реализация работает только для английского и немецкого языков.

В итоге я использовал javascript для добавления тегов alt. Обратите внимание, что идентификатор карты уникален для моей конкретной карты.

google.maps.event.addListener(this.map, 'tilesloaded', function() {
  var images = document.querySelectorAll('#gmap_canvas1 img');
  images.forEach(function(image) {
    image.alt = "Google Maps Image";
  });
});