ਪੰਨਾ ਨੰਬਰ
ਕਈ ਪੰਨਿਆਂ ਵਿੱਚ ਸੰਬੰਧਿਤ ਸਮਗਰੀ ਦੀ ਇੱਕ ਲੜੀ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਪੰਨਾ ਨੰਬਰ ਦਿਖਾਉਣ ਲਈ ਦਸਤਾਵੇਜ਼ ਅਤੇ ਉਦਾਹਰਨਾਂ।
ਅਸੀਂ ਆਪਣੇ ਪੰਨਿਆਂ ਲਈ ਕਨੈਕਟ ਕੀਤੇ ਲਿੰਕਾਂ ਦੇ ਇੱਕ ਵੱਡੇ ਬਲਾਕ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ, ਲਿੰਕਾਂ ਨੂੰ ਖੁੰਝਣ ਲਈ ਔਖਾ ਅਤੇ ਆਸਾਨੀ ਨਾਲ ਮਾਪਣਯੋਗ ਬਣਾਉਂਦੇ ਹਾਂ - ਇਹ ਸਭ ਵੱਡੇ ਹਿੱਟ ਖੇਤਰ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹੋਏ। ਪੰਨਾ ਨੰਬਰ ਸੂਚੀ 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
ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ .sr-only
ਉਪਯੋਗਤਾ ਦੇ ਨਾਲ ਸਹੀ ਸਕ੍ਰੀਨ ਰੀਡਰ ਸਹਾਇਤਾ ਪ੍ਰਦਾਨ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ ।
<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">«</span>
<span class="sr-only">Previous</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">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
ਪੰਨਾਬੰਦੀ ਲਿੰਕ ਵੱਖ-ਵੱਖ ਸਥਿਤੀਆਂ ਲਈ ਅਨੁਕੂਲਿਤ ਹਨ। ਉਹਨਾਂ ਲਿੰਕਾਂ ਲਈ ਵਰਤੋਂ .disabled
ਜੋ ਅਣ-ਕਲਿੱਕਯੋਗ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ ਅਤੇ .active
ਮੌਜੂਦਾ ਪੰਨੇ ਨੂੰ ਦਰਸਾਉਣ ਲਈ।
ਜਦੋਂ ਕਿ .disabled
ਕਲਾਸ s ਦੀ ਲਿੰਕ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਅਸਮਰੱਥ ਬਣਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼pointer-events: none
ਕਰਨ ਲਈ ਵਰਤਦੀ ਹੈ , ਉਹ CSS ਵਿਸ਼ੇਸ਼ਤਾ ਅਜੇ ਪ੍ਰਮਾਣਿਤ ਨਹੀਂ ਹੈ ਅਤੇ ਕੀਬੋਰਡ ਨੈਵੀਗੇਸ਼ਨ ਲਈ ਖਾਤਾ ਨਹੀਂ ਹੈ। ਇਸ ਤਰ੍ਹਾਂ, ਤੁਹਾਨੂੰ ਹਮੇਸ਼ਾ ਅਯੋਗ ਲਿੰਕਾਂ ਨੂੰ ਜੋੜਨਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਉਹਨਾਂ ਦੀ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਅਸਮਰੱਥ ਬਣਾਉਣ ਲਈ ਕਸਟਮ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ।<a>
tabindex="-1"
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active">
<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">
<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 disabled">
<a class="page-link" href="#" tabindex="-1">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>
</ul>
</nav>
<nav aria-label="...">
<ul class="pagination pagination-sm">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">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>
</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">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">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>