パンくずリストのARIAディレクトリの役割を使用する必要がありますか？

Question

ブレッドクラムコンポーネントにアクセシビリティを追加しようとしています。これは<ul>要素に基づいています。私はARIAの役割を研究しており、私はdirectory roleを見つけました。しかし、パンくずリストのコンポーネントに本当に良いフィット感があるかどうか、そしてコンポーネントがその役割の説明に基づいて必要なものを実装しているかどうかはわかりません。私のパンくずリストのスタイリングや構造のデモは、以下の通りである：

ul.breadcrumbs { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    list-style: none; 
 
    margin: 10px 8px; 
 
    padding: 0; 
 
    border-radius: 4px; 
 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15); 
 
} 
 
ul.breadcrumbs li { 
 
    -webkit-box-flex: 1; 
 
    max-width: 100%; 
 
    -webkit-flex-grow: 1; 
 
    flex-grow: 1; 
 
    -webkit-flex-basis: 0; 
 
    flex-basis: 0; 
 
    position: relative; 
 
    text-align: center; 
 
    background: #e0e0e0; 
 
    height: 32px; 
 
    line-height: 32px; 
 
    margin-right: 18px; 
 
} 
 
ul.breadcrumbs li:before, 
 
ul.breadcrumbs li:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border: 0 solid #e0e0e0; 
 
    border-width: 16px 8px; 
 
} 
 
ul.breadcrumbs li:before { 
 
    left: -16px; 
 
    border-left-color: transparent; 
 
} 
 
ul.breadcrumbs li:after { 
 
    left: 100%; 
 
    border-color: transparent; 
 
    border-left-color: #e0e0e0; 
 
} 
 
ul.breadcrumbs li:first-child:before { 
 
    border: 0; 
 
} 
 
ul.breadcrumbs li:last-child { 
 
    margin-right: 0; 
 
} 
 
ul.breadcrumbs li:last-child:after { 
 
    border: 0; 
 
}

<ul class="breadcrumbs"> 
 
    <li><a href="#">Root</a> 
 
    </li> 
 
    <li><a href="#">Folder</a> 
 
    </li> 
 
    <li>File</li> 
 
</ul>

Answer 1

breacrumbsマイクロフォーマットは、より適切と思われ、役割navigationを使用しています、また http://microformats.org/wiki/breadcrumbs-formats

読む次質問：Proper ARIA handling of breadcrumb navigation