Как построить доступную галерею?

Question

Я работаю над веб-сайтом, и я хочу добавить в него галерею. Но у меня проблема: галерея должна быть доступна для слепых и т. Д., И я понятия не имею, как это сделать.

Как правило, в тех видах галерей, я хотел бы сделать HTML как это:

  <ul> 
       <li data-src="path/to/image/1.jpg"></li> 
       <li data-src="path/to/image/2.jpg"></li> 
       <li data-src="path/to/image/3.jpg"></li> 
       <li data-src="path/to/image/4.jpg"></li> 
       <li data-src="path/to/image/5.jpg"></li> 
       <li data-src="path/to/image/etc.jpg"></li> 
      </ul> 

и с помощью CSS и JQuery Я хотел бы использовать data-src и добавить его в качестве фона на li (потому что не все фотографии - змеевики, поэтому я буду использовать background-size: cover;). Затем, когда пользователь нажмет на li, появится всплывающее окно с изображением полного размера.

Есть некоторые проблемы с этим. Например, он должен быть доступен для клика, используя tab на клавиатуре. Я могу добавить a в li, но это нормально, не имея href? И что машина «подумает», когда увидит пустой список ul? Другой проблемой является всплывающее окно. Html всплывающего окна и это тег img, расположенный в нижней части страницы, поэтому машина не сможет увидеть его сразу после нажатия. Другая проблема - alt. Не будет описания к фотографиям (потому что они не загружены мной), поэтому я оставлю alt пустым?

Спасибо!

Answer 1

Принципы:

1. изображения, которые передают информацию, должны иметь текстовое описание. Лучше всего всегда использовать am <img> для информационного изображения, однако вы также можете использовать атрибут title на якоре вокруг изображения.
2. Все должно быть на клавиатуре. Якоря без href не будут вставлять вкладку, добавьте href="#", чтобы исправить эту проблему.
3. Слепые люди не являются единственными пользователями клавиатуры. Убедитесь, что вы можете управлять галереей только клавиатурой.
4. Управление фокусом при появлении и исчезновении динамического содержимого. Убедитесь, что фокус переходит в полноэкранное всплывающее окно и что управление «закрыть» - это клавиатура. При закрытии фокус должен возвращаться к якорю, открывающему изображение.
5. Элементы управления должны иметь правильную роль. Ссылки используются для перехода на разные страницы. Кнопки используются для управления вещами на одной странице. Ваш «якорь» вокруг изображения действует как кнопка, поэтому добавьте role="button" к якорю.

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