Блог

Я создал следующий дизайн карточки для отображения на странице новостей:

Чтобы сделать это доступным, я хочу h2 , чтобы заголовок был перед изображением в HTML, например:

 <div class='news'>
  <h2>Title</h2>
  <img alt="temporary placeholder image" src="https://via.placeholder.com/400x300.png">
  <small class="news--published">6-3-2020 1:27:20</small>
  <div class="body">
    <p>Lorem ipsum dolor.</p>
  </div>
  <a aria-label="Read more about {{node.title}}" href="/url">Read more<span aria-hidden="true" class="icon icon-arrow"></span></a>
</div>
  

Какое лучшее решение для этого? Есть ли способ создать этот дизайн с помощью css, например, с помощью flexbox или grid, из html, упомянутого выше? Или можно изменить html, например, обернув это в <article> оболочку и изменив порядок, например:

перед изображением в HTML, как:

 <article class='news'>
  <div class="content image">
    <img alt="temporary placeholder image" src="https://via.placeholder.com/400x300.png">
  </div>
  <div class="content text">
    <h2>Title</h2>
    <small class="news--published">6-3-2020 1:27:20</small>
    <div class="body">
      <p>Lorem ipsum dolor.</p>
    </div>
    <a aria-label="Read more about {{node.title}}" href="/url">Read more<span aria-hidden="true" class="icon icon-arrow"></span></a>
  </div>
</article>
  

Вопрос, который нужно задать себе: «добавляет ли изображение какую-либо полезную информацию на этом этапе». На этом этапе у вас есть два варианта:

Изображение ничего не добавляет

Ответ, вероятно, нет, изображение не добавляет ничего ценного в список статей.

Хотя вы часто увидите, что я выступаю за максимально похожий интерфейс для людей с ограниченными возможностями, я также выступаю за отличный пользовательский интерфейс.

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

Поэтому мой совет — полностью скрыть изображение. Вы можете сделать это, просто изменив свой alt атрибут на пустую строку. Пустая строка, а не нулевая строка

Так <img alt="" src... что все в порядке, <img alt src... не так ли.

Для полноты картины я бы также добавил aria-hidden="true" к изображению, хотя это излишне, людям полезно, когда они просматривают ваш код в поисках пустых alt атрибутов, чтобы увидеть, что это должно быть скрыто, и это не ошибка / отсутствующий alt атрибут.

 <article class='news'>
  <div class="content image">
    <img alt="" aria-hidden="true" src="https://via.placeholder.com/400x300.png">
  </div>
  <div class="content text">
    <h2>Title</h2>
    <small class="news--published">6-3-2020 1:27:20</small>
    <div class="body">
      <p>Lorem ipsum dolor.</p>
    </div>
    <a aria-label="Read more about {{node.title}}" href="/url">Read more<span aria-hidden="true" class="icon icon-arrow"></span></a>
  </div>
</article>
  

Изображение действительно важно

Нет проблем, это все часть обеспечения доступности сайта. Используя ваше лучшее суждение.

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

Люди часто думают, что это недопустимо, поскольку они прочитали «логический порядок табуляции / порядок фокусировки» и думают, что все элементы на странице должны быть в порядке DOM.

Они этого не делают, логический порядок фокусировки применяется к элементам управления и интерактивным элементам.

Изменение визуального порядка может быть достигнуто простым использованием flex и row-reverse в соответствии с приведенным ниже примером. Или вы могли бы использовать старомодные float левые и правые.

Это решение зависит от того, какие браузеры вы поддерживаете.

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

 .news {
          display: flex;
          flex-direction: row-reverse;
        }
        
 .content.text{
    flex: 2;
    padding: 20px;
 }
  .content.image{
    flex: 1;
 }  

 <article class='news'>
      <div class="content text">
        <h2>Title</h2>
        <small class="news--published">6-3-2020 1:27:20</small>
        <div class="body">
          <p>Lorem ipsum dolor.</p>
        </div>
        <a aria-label="Read more about {{node.title}}" href="/url">Read more<span aria-hidden="true" class="icon icon-arrow"></span></a>
      </div>
      <div class="content image">
        <img alt="temporary placeholder image" src="https://via.placeholder.com/400x300.png">
      </div>
      
    </article>  

Дополнительные на основе комментариев

Очевидно, что в HTML можно внести и другие улучшения.

Я не собирался вдаваться в подробности, но комментарий @Shannon Young о связывании article с the heading стоит включить.

Они предлагали сделать следующее:

 <article aria-labelledby="articleHeading1"/>
<h2 id="articleHeading1">Title</h2>
  

Это означает, что если пользователь программы чтения с экрана перемещается по разделам, раздел будет читаться как «статья, заголовок» (или аналогичный, в зависимости от программы чтения с экрана).

Они также прокомментировали использование <time> элемента и т. Д. Это то, что вам нужно исследовать самостоятельно.