HTML | Breadcrumb & Pagination, WAI-ARIA ..λ―Έμ™„μ„±

크둱·2023λ…„ 3μ›” 1일
0

HTML

λͺ©λ‘ 보기
6/6

πŸ“Œ Breadcrumb


좜처: https://www.justinmind.com/blog/breadcrumb-website-navigation/

πŸ“Œ Pagination


좜처: https://www.frontendplanet.com/css-pagination-examples/

  • μˆœμ„œκ°€ μ€‘μš”ν•˜λ―€λ‘œ <ol> νƒœκ·Έ 이용
<div class="pagination">
    <a href="#" aria-label="Go to previous page" class="disabled">Previous</a>
    <ol> 
     <li class="current-page"> 
        <a href="#" aria-label="Go to page 1">1</a>
     </li>
     <li>
        <a href="#" aria-label="Go to page 2">2</a>
     </li>
     <li>
        <a href="#" aria-label="Go to page 3">3</a>
     </li>
    </ol>
</div>
  • λΉ„μŠ·ν•œ 예둜 dropdown menu λŠ” <ul> νƒœκ·Έλ₯Ό μ‚¬μš©ν•œλ‹€



πŸ’‘ WAI-ARIAλž€?

μ‹œκ°/인지 μž₯μ• μΈλ“€μ—κ²Œ μ›ΉνŽ˜μ΄μ§€ 탐색을 λ•λŠ” μ‚¬μš©μž κ²½ν—˜μ„ 제곡
더 μ •ν™•ν•œ 메세지λ₯Ό μ „ν•œλ‹€.

πŸ‘‰ μ˜ˆμ‹œ:

<a href="νŽ˜μ΄μ§€1 μ£Όμ†Œ" aria-label="Go to page 1">1</a>
  • aria-label : 슀크린 리더가 μ½μ–΄μ£ΌλŠ” λ‚΄μš©
  • aria-hidden = "true" : 슀크린 리더가 λ„˜κ²¨λ„ λ˜λŠ” 곳에 μ“΄λ‹€. ex. 별 이λͺ¨ν‹°μ½˜
profile
πŸ‘©β€πŸ’»μ•ˆλ…•ν•˜μ„Έμš”πŸŒž

0개의 λŒ“κΈ€