ꯄꯦꯖꯤꯅꯦꯁꯟ ꯇꯧꯕꯥ꯫

ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯀꯤ ꯁꯤꯔꯤꯖ ꯑꯃꯥ ꯇꯥꯛꯅꯕꯥ ꯄꯦꯖꯤꯅꯦꯁꯟ ꯎꯠꯅꯕꯥ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯦꯁꯟ ꯑꯃꯁꯨꯡ ꯈꯨꯗꯃꯁꯤꯡ ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯄꯦꯖꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯂꯩ꯫

ꯑꯣꯚꯔꯚꯤꯌꯨ ꯇꯧꯕꯥ꯫

ꯑꯩꯈꯣꯌꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯄꯦꯖꯤꯅꯦꯁꯅꯒꯤꯗꯃꯛꯇꯥ ꯀꯅꯦꯛꯇ ꯇꯧꯔꯕꯥ ꯂꯤꯉ꯭ꯀꯁꯤꯡꯒꯤ ꯑꯆꯧꯕꯥ ꯕ꯭ꯂꯣꯛ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯩ, ꯃꯁꯤꯅꯥ ꯂꯤꯉ꯭ꯀꯁꯤꯡ ꯑꯁꯤ ꯌꯥꯝꯅꯥ ꯂꯨꯅꯥ ꯑꯃꯁꯨꯡ ꯐꯖꯅꯥ ꯁ꯭ꯀꯦꯜ ꯇꯧꯕꯥ ꯉꯃꯍꯜꯂꯤ-ꯃꯁꯤ ꯄꯨꯝꯅꯃꯛ ꯑꯁꯤꯅꯥ ꯑꯆꯧꯕꯥ ꯍꯤꯠ ꯑꯦꯔꯤꯌꯥꯁꯤꯡ ꯄꯤꯕꯒꯥ ꯂꯣꯌꯅꯅꯥ꯫ ꯄꯦꯖꯤꯅꯦꯁꯟ ꯑꯁꯤ ꯂꯤꯁ꯭ꯠ HTML ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯦꯃꯒꯠꯄꯅꯤ ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯁꯤꯡꯅꯥ ꯂꯩꯔꯤꯕꯥ ꯂꯤꯉ꯭ꯀꯁꯤꯡꯒꯤ ꯃꯁꯤꯡ ꯑꯗꯨ ꯂꯥꯎꯊꯣꯀꯄꯥ ꯉꯃꯒꯅꯤ꯫ <nav>ꯔꯤꯗꯔꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯑꯇꯩ ꯃꯇꯦꯡ ꯄꯥꯡꯅꯕꯥ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡ ꯁ꯭ꯛꯔꯤꯟ ꯇꯧꯅꯕꯥ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯁꯦꯛꯁꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯁꯛ ꯈꯪꯗꯣꯛꯅꯕꯥ ꯔꯦꯄꯤꯡ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ, ꯄꯦꯖꯁꯤꯡꯗꯥ ꯑꯁꯤꯒꯨꯝꯕꯥ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯁꯦꯛꯁꯟ ꯑꯃꯗꯒꯤ ꯍꯦꯟꯅꯥ ꯂꯩꯕꯥ ꯌꯥꯕꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ, ꯃꯁꯤꯒꯤ ꯄꯥꯟꯗꯝ ꯑꯁꯤ ꯐꯣꯡꯗꯣꯛꯅꯕꯒꯤꯗꯃꯛꯇꯥ ꯗꯤꯁ꯭ꯛꯔꯤꯄꯇꯤꯕ aria-labelꯑꯃꯥ ꯄꯤꯕꯥ ꯑꯁꯤ ꯌꯥꯝꯅꯥ ꯐꯩ꯫ <nav>ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯀꯔꯤꯒꯨꯝꯕꯥ ꯄꯦꯖꯤꯅꯦꯁꯟ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯁꯤ ꯁꯥꯔꯆ ꯔꯤꯖꯜꯇ ꯁꯦꯠ ꯑꯃꯒꯤ ꯃꯔꯛꯇꯥ ꯅꯦꯚꯤꯒꯦꯠ ꯇꯧꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯔꯕꯗꯤ, ꯃꯇꯤꯛ ꯆꯥꯕꯥ ꯂꯦꯕꯦꯜ ꯑꯃꯥ ꯑꯣꯏꯕꯥ ꯌꯥꯏ aria-label="Search results pages".

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

ꯑꯥꯏꯀꯅꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯥ꯫

ꯄꯦꯖꯤꯅꯦꯁꯟ ꯂꯤꯉ꯭ꯛ ꯈꯔꯒꯤꯗꯃꯛ ꯇꯦꯛꯁꯇꯀꯤ ꯃꯍꯨꯠꯇꯥ ꯑꯥꯏꯀꯟ ꯅꯠꯠꯔꯒꯥ ꯁꯤꯝꯕꯣꯜ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ ꯄꯥꯝꯕꯤꯕ꯭ꯔꯥ? ariaꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯇꯤꯛ ꯆꯥꯕꯥ ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔ ꯁꯄꯣꯔꯠ ꯁꯣꯌꯗꯅꯥ ꯄꯤꯌꯨ꯫

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

ꯗꯤꯁꯑꯦꯕꯜ ꯑꯣꯏꯔꯕꯥ ꯑꯃꯁꯨꯡ ꯑꯦꯛꯇꯤꯕ ꯑꯣꯏꯕꯥ ꯔꯥꯖ꯭ꯌꯁꯤꯡ꯫

ꯄꯦꯖꯤꯅꯦꯁꯟ ꯂꯤꯉ꯭ꯀꯁꯤꯡ ꯑꯁꯤ ꯇꯣꯉꯥꯟ-ꯇꯣꯉꯥꯅꯕꯥ ꯐꯤꯚꯃꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯀꯁ꯭ꯇꯃꯁ ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ ꯑꯅ .disabled-ꯀ꯭ꯂꯤꯛ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯑꯣꯏꯅꯥ ꯎꯕꯥ ꯐꯪꯂꯤꯕꯥ ꯂꯤꯉ꯭ꯀꯁꯤꯡꯒꯤꯗꯃꯛ ꯑꯃꯁꯨꯡ .activeꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯄꯦꯖ ꯑꯗꯨ ꯇꯥꯛꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫

.disabledꯀ꯭ꯂꯥꯁ ꯑꯁꯤꯅꯥ sꯒꯤ ꯂꯤꯉ꯭ꯛ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤ ꯑꯁꯤ ꯗꯤꯁꯦꯕꯜ pointer-events: noneꯇꯧꯅꯕꯥ ꯍꯣꯠꯅꯕꯗꯥ<a> ꯁꯤꯖꯤꯟꯅꯔꯤꯉꯩꯗꯥ , ꯑꯗꯨꯒꯨꯝꯕꯥ CSS ꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯑꯗꯨ ꯍꯧꯖꯤꯛ ꯐꯥꯑꯣꯕꯥ ꯁ꯭ꯇꯦꯟꯗꯔꯗꯥꯏꯖ ꯇꯧꯗ꯭ꯔꯤ ꯑꯃꯁꯨꯡ ꯀꯤꯕꯣꯔꯗ ꯅꯦꯚꯤꯒꯦꯁꯅꯒꯤ ꯑꯦꯀꯥꯎꯟꯇ ꯇꯧꯗꯦ꯫ ꯑꯁꯤꯒꯨꯝꯕꯥ ꯃꯑꯣꯡꯗꯥ, ꯅꯍꯥꯛꯅꯥ ꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯔꯕꯥ ꯂꯤꯉ꯭ꯀꯁꯤꯡꯗꯥ ꯍꯥꯄꯆꯤꯅꯒꯗꯕꯅꯤ tabindex="-1"ꯑꯃꯁꯨꯡ ꯃꯈꯣꯌꯒꯤ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤ ꯑꯗꯨ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯗꯤꯁꯦꯕꯜ ꯇꯧꯅꯕꯥ ꯀꯁ꯭ꯇꯝ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯁꯤꯖꯤꯟꯅꯒꯗꯕꯅꯤ꯫

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

ꯀ꯭ꯂꯤꯛ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤ ꯂꯧꯊꯣꯛꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯄꯥꯟꯗꯝ ꯊꯝꯂꯤꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯑꯗꯨ ꯊꯃꯗꯨꯅꯥ ꯀꯤꯕꯣꯔꯗ ꯐꯣꯀꯁ ꯊꯤꯡꯅꯕꯥ, ꯅꯍꯥꯛꯅꯥ ꯑꯣꯄꯁꯅꯦꯜ ꯑꯣꯏꯅꯥ ꯑꯦꯛꯇꯤꯕ ꯅꯠꯠꯔꯒꯥ ꯗꯤꯁꯦꯕꯜ ꯑꯣꯏꯕꯥ ꯑꯦꯉ꯭ꯀꯔꯁꯤꯡ ꯑꯗꯨꯒꯤꯗꯃꯛ ꯁꯣꯞ ꯇꯧꯕꯥ ꯌꯥꯏ <span>, ꯅꯠꯠꯔꯒꯥ ꯃꯃꯥꯡꯒꯤ/ꯃꯊꯪꯒꯤ ꯑꯦꯔꯣꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ ꯑꯦꯉ꯭ꯀꯔ ꯑꯗꯨ ꯂꯧꯊꯣꯀꯄꯥ ꯌꯥꯏ꯫

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <span class="page-link">Previous</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <span class="page-link">
        2
        <span class="sr-only">(current)</span>
      </span>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

ꯁꯥꯏꯖ ꯇꯧꯕꯥ꯫

ꯐꯦꯟꯁꯤ ꯑꯆꯧꯕꯥ ꯅꯠꯔꯒꯥ ꯑꯄꯤꯀꯄꯥ ꯄꯦꯖꯅꯦꯁꯟ? ꯑꯍꯦꯅꯕꯥ ꯁꯥꯏꯖꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ .pagination-lgꯅꯠꯠꯔꯒꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫.pagination-sm

<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item active" aria-current="page">
      <span class="page-link">
        1
        <span class="sr-only">(current)</span>
      </span>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item active" aria-current="page">
      <span class="page-link">
        1
        <span class="sr-only">(current)</span>
      </span>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯇꯧꯕꯥ꯫

ꯐ꯭ꯂꯦꯛꯁꯕꯣꯛꯁ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯄꯦꯖꯤꯅꯦꯁꯟ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯒꯤ ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯍꯣꯡꯗꯣꯀꯄꯥ .

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>