HTML5文章標籤：文章內容？

我的問題可能是基於糟糕的設計。但是，我無法改變這一點，需要使用它。這是我講的視覺草案，它只是一個完整的網站的一部分：HTML5文章標籤：文章內容？

正如你可以看到有一篇文章的標題與背景圖像，然後麪包屑工具欄和最後，文章內容。現在，通常，如果不存在麪包屑工具欄，您可以簡單地將其包裝到<article>中。但麪包屑將文章分爲「前」文章和主文章部分。唯一的「乾淨的」 HTML5方法是將包裹物品包括與背景圖像中的報頭插入到一個<article>和麪包屑進入目標視覺位置進行定位。不過，我把這個分類爲「黑客」，我正在尋找更好的方法。

什麼是此方案的首選標記？

來源

2017-06-15 dude

您最好的選擇可能是隻是避免使用

或

乾脆，並把整個HTML文件作爲文章。是的，麪包屑

如果這是可能包含多篇文章的頁面的一部分，並且它們自己的麪包屑將其標題和內容分開......那麼我會解決CSS解決方法。 – BoltClock

CSS解決方法（在文章外部具有breadcrumb並仍然將其放置到帶有CSS的文章中）也是我的解決方法，直到有更好的解決方案 – dude

不會有當前需求的任何完美的解決方案。

正如前面的回答指出的那樣，nav與文章無關。

另外，WCAG指示的是：

1.3.2 Meaningful Sequence：當在其中內容被呈現的順序會影響它的意義，正確的讀出序列可以通過編程確定。（A級）

編輯：如果改變元件的順序可以保留有意義的序列（G57），當元件不匹配視覺上的DOM順序（see C27）屏幕閱讀器的視覺焦點指示符將不符合標準閱讀順序，這將導致使用屏幕閱讀器的視力低下人士的用戶體驗不佳。

所以這是不可能的嘗試CSS視覺黑客反轉元素的順序視覺上不破壞其他規則。

你可能會認爲第三種技術：

設置aria-hidden上的可見標題，
在article標籤使用aria-labelledby指向h1的article元素外：

例如：

<header> 
    <h1 aria-hidden="true" id="title">Your title</h1> 
    <nav><!-- nav here --></nav> 
</header> 

<article aria-labelledby="title"> 
    // article here 
</article>

另一種方法是複製標題元素，一個看得見，一個用於輔助技術

<header> 
    <div aria-hidden="true">Your title</div> 
    <nav><!-- nav here --></nav> 
</header> 

<article> 
    <h1 class="sr-only">Your title</h1> 
    // article here 
</article>

來源

2017-06-18 14:50:41 Adam

對不起，你能詳細說明一下嗎？（當內容呈現的順序影響其含義時，正確的閱讀順序可以通過編程確定（A級））。我不完全理解它背後的意思。還有一個問題：您的解決方案隱藏屏幕閱讀器的h1（標籤不會重複標題順序）。在我看來，這也將是一個糟糕的解決方法，因爲屏幕閱讀器無法通過鍵盤上的標題快捷鍵訪問標題？！ – dude

@dude我編輯了我的答案，對於這種情況我可能過於肯定，因爲我們可以認爲你的內容仍然有意義。我添加了另一個解決方案，但這仍然是一個臨時（我個人比較討厭使用那些「sr-only」css類） – Adam

感謝您的澄清。 Tab鍵順序的例子很有意義。如果沒有人會接受你的回答，我會再等幾天再回答。 – dude

這可能是這樣的 -

<article> 
    <header> 
     //APPLY BACKGROUND IMAGE 
     <h1>YOUR TITLE</h1> 
    </header> 

    <nav> 
     //USE BREADCRUMBS HERE 
    </nav> 

    <section> 
     //USE THIS FOR CONTENT 
    </section> 
</article>

來源

2017-06-16 07:36:47

但是，那麼文章將包含與文章 – dude

無關的內容（nav）將

@RudrakshPathak內不存在問題：取決於「問題」的含義。花花公子是正確的，'文章'內的內容必須與文章相關，但麪包屑'nav'與頁面相關，而不是與文章相關。如果是文章的導航*（例如，目錄或分頁等），那麼'article'中的'nav'元素就會有意義。 - 然而，你可以爭辯說，麪包屑是文章分類的某種「類別」，但是使用「nav」並不一定有意義。 – unor

HTML5文章標籤：文章內容？

回答

相關問題