ଅଭିଗମ୍ୟତା
ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ର ବ features ଶିଷ୍ଟ୍ୟ ଏବଂ ଉପଲବ୍ଧ ବିଷୟବସ୍ତୁ ସୃଷ୍ଟି ପାଇଁ ସୀମିତତା ବିଷୟରେ ଏକ ସଂକ୍ଷିପ୍ତ ସମୀକ୍ଷା |
ବୁଟଷ୍ଟ୍ରାପ୍ ପ୍ରସ୍ତୁତ ଶ yles ଳୀ, ଲେଆଉଟ୍ ଉପକରଣ ଏବଂ ଇଣ୍ଟରାକ୍ଟିଭ୍ ଉପାଦାନଗୁଡ଼ିକର ଏକ ସହଜ-ବ୍ୟବହାର framework ାଞ୍ଚା ପ୍ରଦାନ କରିଥାଏ, ଯାହାକି ବିକାଶକାରୀଙ୍କୁ ୱେବସାଇଟ୍ ଏବଂ ପ୍ରୟୋଗ ସୃଷ୍ଟି କରିବାକୁ ଅନୁମତି ଦେଇଥାଏ ଯାହା ଦୃଶ୍ୟମାନ ଆକର୍ଷଣୀୟ, କାର୍ଯ୍ୟକ୍ଷମ ଭାବରେ ସମୃଦ୍ଧ ଏବଂ ବାକ୍ସ ବାହାରେ ଉପଲବ୍ଧ ଅଟେ |
ସମୀକ୍ଷା ଏବଂ ସୀମା
ବୁଟଷ୍ଟ୍ରାପ୍ ସହିତ ନିର୍ମିତ ଯେକ project ଣସି ପ୍ରକଳ୍ପର ସାମଗ୍ରିକ ଅଭିଗମ୍ୟତା ଲେଖକଙ୍କ ମାର୍କଅପ୍, ଅତିରିକ୍ତ ଷ୍ଟାଇଲ୍ ଏବଂ ସ୍କ୍ରିପ୍ଟିଂ ଉପରେ ନିର୍ଭର କରେ | ଯଦିଓ, ଯଦି ସେଗୁଡିକ ସଠିକ୍ ଭାବରେ କାର୍ଯ୍ୟକାରୀ ହୋଇଛି, ବୁଟଷ୍ଟ୍ରାପ୍ ସହିତ ୱେବସାଇଟ୍ ଏବଂ ପ୍ରୟୋଗ ସୃଷ୍ଟି କରିବା ସମ୍ପୂର୍ଣ୍ଣ ସମ୍ଭବ ହେବା ଉଚିତ ଯାହାକି WCAG 2.1 (A / AA / AAA), ଧାରା 508 , ଏବଂ ସମାନ ସୁବିଧା ମାନ ଏବଂ ଆବଶ୍ୟକତା ପୂରଣ କରେ |
ଗଠନମୂଳକ ମାର୍କଅପ୍ |
ବୁଟଷ୍ଟ୍ରାପର ଷ୍ଟାଇଲିଂ ଏବଂ ଲେଆଉଟ୍ ବିଭିନ୍ନ ପ୍ରକାରର ମାର୍କଅପ୍ ସଂରଚନାରେ ପ୍ରୟୋଗ କରାଯାଇପାରିବ | ନିଜେ ବୁଟଷ୍ଟ୍ରାପ୍ ର ବ୍ୟବହାର ପ୍ରଦର୍ଶନ କରିବାକୁ ଏବଂ ଉପଯୁକ୍ତ ଅର୍ଥଗତ ମାର୍କଅପ୍ ବର୍ଣ୍ଣନା କରିବାକୁ ବିକାଶକାରୀଙ୍କୁ ସର୍ବୋତ୍ତମ ଅଭ୍ୟାସ ଉଦାହରଣ ସହିତ ଏହି ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ଲକ୍ଷ୍ୟ ରଖିଛି, ଯେଉଁଥିରେ ସମ୍ଭାବ୍ୟ ଆକ୍ସେସିବିଲିଟି ଚିନ୍ତାଧାରାକୁ ସମାଧାନ କରାଯାଇପାରିବ |
ପାରସ୍ପରିକ ଉପାଦାନଗୁଡ଼ିକ |
ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ର ଇଣ୍ଟରାକ୍ଟିଭ୍ ଉପାଦାନଗୁଡ଼ିକ ଯେପରିକି ମୋଡାଲ୍ ଡାୟଲଗ୍, ଡ୍ରପ୍ ଡାଉନ୍ ମେନୁ, ଏବଂ କଷ୍ଟମ୍ ଟୁଲ୍ ଟିପ୍ସ - ସ୍ପର୍ଶ, ମାଉସ୍ ଏବଂ କୀବୋର୍ଡ୍ ବ୍ୟବହାରକାରୀଙ୍କ ପାଇଁ କାମ କରିବା ପାଇଁ ଡିଜାଇନ୍ କରାଯାଇଛି | ପ୍ରଯୁଜ୍ୟ WAI - ARIA ଭୂମିକା ଏବଂ ଗୁଣଗୁଡିକର ବ୍ୟବହାର ମାଧ୍ୟମରେ , ଏହି ଉପାଦାନଗୁଡ଼ିକ ମଧ୍ୟ ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା (ଯେପରିକି ସ୍କ୍ରିନ୍ ରିଡର୍) ବ୍ୟବହାର କରି ବୁ able ିବା ଏବଂ କାର୍ଯ୍ୟକ୍ଷମ ହେବା ଉଚିତ |
ଯେହେତୁ ବୁଟଷ୍ଟ୍ରାପ୍ ର ଉପାଦାନଗୁଡିକ ଉଦ୍ଦେଶ୍ୟମୂଳକ ଭାବରେ ଯଥେଷ୍ଟ ଜେନେରିକ୍ ଭାବରେ ଡିଜାଇନ୍ ହୋଇଛି, ଲେଖକମାନେ ସେମାନଙ୍କ ଉପାଦାନର ସଠିକ୍ ପ୍ରକୃତି ଏବଂ କାର୍ଯ୍ୟକାରିତାକୁ ଅଧିକ ସଠିକ୍ ଭାବରେ ପହଞ୍ଚାଇବା ପାଇଁ ଅଧିକ ARIA ଭୂମିକା ଏବଂ ଗୁଣ, ଏବଂ ଜାଭାସ୍କ୍ରିପ୍ଟ ଆଚରଣ ଅନ୍ତର୍ଭୂକ୍ତ କରିବା ଆବଶ୍ୟକ କରିପାରନ୍ତି | ଏହା ସାଧାରଣତ the ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ରେ ଉଲ୍ଲେଖ କରାଯାଇଥାଏ |
ରଙ୍ଗ ବିପରୀତ |
ରଙ୍ଗର କିଛି ମିଶ୍ରଣ ଯାହା ବର୍ତ୍ତମାନ ବୁଟଷ୍ଟ୍ରାପ୍ ର ଡିଫଲ୍ଟ ପ୍ୟାଲେଟ୍ ତିଆରି କରେ - ବଟନ୍ ଭେରିଏସନ, ଆଲର୍ଟ ଭେରିଏସନ, ଫର୍ମ ବ valid ଧତା ସୂଚକ ଭଳି ଜିନିଷଗୁଡ଼ିକ ପାଇଁ framework ାଞ୍ଚାରେ ବ୍ୟବହୃତ ହୁଏ - ପର୍ଯ୍ୟାପ୍ତ ପରିମାଣର ରଙ୍ଗ ବିପରୀତ ହୋଇପାରେ (ସୁପାରିଶ କରାଯାଇଥିବା WCAG 2.1 ପାଠ୍ୟ ରଙ୍ଗ ବିପରୀତ ଅନୁପାତ 4.5: 1 | ଏବଂ WCAG 2.1 ଅଣ-ପାଠ୍ୟ ରଙ୍ଗ ବିପରୀତ ଅନୁପାତ 3: 1 ), ବିଶେଷତ when ଯେତେବେଳେ ଏକ ହାଲୁକା ପୃଷ୍ଠଭୂମି ବିରୁଦ୍ଧରେ ବ୍ୟବହୃତ ହୁଏ | ଲେଖକମାନେ ସେମାନଙ୍କର ରଙ୍ଗର ନିର୍ଦ୍ଦିଷ୍ଟ ବ୍ୟବହାର ପରୀକ୍ଷା କରିବାକୁ ଉତ୍ସାହିତ ହୁଅନ୍ତି ଏବଂ ଆବଶ୍ୟକ ସ୍ଥଳେ, ପର୍ଯ୍ୟାପ୍ତ ପରିମାଣର ରଙ୍ଗ ବିପରୀତ ଅନୁପାତ ନିଶ୍ଚିତ କରିବାକୁ ଏହି ଡିଫଲ୍ଟ ରଙ୍ଗଗୁଡ଼ିକୁ ମାନୁଆଲ ରୂପାନ୍ତର / ବିସ୍ତାର କରନ୍ତୁ |
ଭିଜୁଆଲ୍ ଲୁକ୍କାୟିତ ବିଷୟବସ୍ତୁ |
ବିଷୟବସ୍ତୁ ଯାହା ଦୃଶ୍ୟମାନ ଭାବରେ ଲୁକ୍କାୟିତ ହେବା ଉଚିତ, କିନ୍ତୁ ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ଯେପରିକି ସ୍କ୍ରିନ୍ ରିଡର୍ ପାଇଁ ଉପଲବ୍ଧ ହୋଇ ରହିଥାଏ, .visually-hidden
ଶ୍ରେଣୀ ବ୍ୟବହାର କରି ଷ୍ଟାଇଲ୍ ହୋଇପାରିବ | ଏପରି ପରିସ୍ଥିତିରେ ଏହା ଉପଯୋଗୀ ହୋଇପାରେ ଯେଉଁଠାରେ ଅତିରିକ୍ତ ଭିଜୁଆଲ୍ ସୂଚନା କିମ୍ବା ସୂଚକ (ଯେପରିକି ରଙ୍ଗର ବ୍ୟବହାର ଦ୍ୱାରା ସୂଚିତ ଅର୍ଥ) ଅଣ-ଭିଜୁଆଲ୍ ଉପଭୋକ୍ତାଙ୍କୁ ମଧ୍ୟ ପହଞ୍ଚାଇବା ଆବଶ୍ୟକ |
<p class="text-danger">
<span class="visually-hidden">Danger: </span>
This action is not reversible
</p>
ଭିଜୁଆଲ୍ ଲୁକ୍କାୟିତ ଇଣ୍ଟରାକ୍ଟିଭ୍ କଣ୍ଟ୍ରୋଲ୍ ପାଇଁ, ଯେପରିକି ପାରମ୍ପାରିକ “ସ୍କିପ୍” ଲିଙ୍କ୍, .visually-hidden-focusable
ଶ୍ରେଣୀ ବ୍ୟବହାର କରନ୍ତୁ | ଏହା ନିଶ୍ଚିତ କରିବ ଯେ ନିୟନ୍ତ୍ରଣ ଥରେ ଧ୍ୟାନ ଦିଆଯିବ (ଦୃଶ୍ୟମାନ କୀବୋର୍ଡ୍ ବ୍ୟବହାରକାରୀଙ୍କ ପାଇଁ) | ଅତୀତ ସଂସ୍କରଣରେ ସମାନ ଏବଂ ଶ୍ରେଣୀ ତୁଳନାରେ ସାବଧାନ ରୁହନ୍ତୁ, ବୁଟଷ୍ଟ୍ରାପ୍ 5 ଏକ ସ୍ୱତନ୍ତ୍ର ଶ୍ରେଣୀ ଅଟେ, ଏବଂ ଶ୍ରେଣୀ ସହିତ ମିଳିତ ଭାବରେ ବ୍ୟବହାର କରାଯିବା ଉଚିତ୍ ନୁହେଁ |.sr-only
.sr-only-focusable
.visually-hidden-focusable
.visually-hidden
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
ହ୍ରାସ ଗତି
prefers-reduced-motion
ମିଡିଆ ବ feature ଶିଷ୍ଟ୍ୟ ପାଇଁ ବୁଟଷ୍ଟ୍ରାପ୍ ସମର୍ଥନ ଅନ୍ତର୍ଭୁକ୍ତ କରେ | ବ୍ରାଉଜର୍ / ପରିବେଶରେ ଯାହା ଚାଳକକୁ ହ୍ରାସ ହୋଇଥିବା ଗତି ପାଇଁ ସେମାନଙ୍କର ପସନ୍ଦ ନିର୍ଦ୍ଦିଷ୍ଟ କରିବାକୁ ଅନୁମତି ଦିଏ, ବୁଟଷ୍ଟ୍ରାପରେ ଅଧିକାଂଶ CSS ପରିବର୍ତ୍ତନ ପ୍ରଭାବ (ଉଦାହରଣ ସ୍ୱରୂପ, ଯେତେବେଳେ ଏକ ମୋଡାଲ୍ ଡାୟଲଗ୍ ଖୋଲାଯାଏ କିମ୍ବା ବନ୍ଦ ହୋଇଯାଏ, କିମ୍ବା କାରୁସେଲରେ ସ୍ଲାଇଡିଂ ଆନିମେସନ୍) ଅକ୍ଷମ ହେବ, ଏବଂ ଅର୍ଥପୂର୍ଣ୍ଣ ଆନିମେସନ୍ () ଯେପରିକି ସ୍ପିନର୍ସ) ମନ୍ଥର ହୋଇଯିବ |
ସମର୍ଥନ କରୁଥିବା ବ୍ରାଉଜର୍ ଗୁଡିକରେ prefers-reduced-motion
, ଏବଂ ଯେଉଁଠାରେ ଉପଭୋକ୍ତା ସ୍ପଷ୍ଟ ଭାବରେ ସଙ୍କେତ ଦେଇ ନାହାଁନ୍ତି ଯେ ସେମାନେ ହ୍ରାସ ହୋଇଥିବା ଗତି (ଅର୍ଥାତ୍ କେଉଁଠାରେ) ପସନ୍ଦ କରିବେ , ବୁଟଷ୍ଟ୍ରାପ୍ ସମ୍ପତ୍ତି prefers-reduced-motion: no-preference
ବ୍ୟବହାର କରି ସୁଗମ ସ୍କ୍ରୋଲିଂକୁ ସକ୍ଷମ କରିଥାଏ |scroll-behavior
ଅତିରିକ୍ତ ଉତ୍ସଗୁଡ଼ିକ
- ୱେବ୍ ବିଷୟବସ୍ତୁ ଅଭିଗମ୍ୟତା ନିର୍ଦ୍ଦେଶାବଳୀ (WCAG) 2.1
- A11Y ପ୍ରକଳ୍ପ |
- MDN ଆକ୍ସେସିବିଲିଟି ଡକ୍ୟୁମେଣ୍ଟେସନ୍ |
- Tenon.io ଆକ୍ସେସିବିଲିଟି ଚେକର୍ |
- ରଙ୍ଗ କଣ୍ଟ୍ରାସ ଆନାଲିଜର (CCA)
- ଆକ୍ସେସିବିଲିଟି ସମସ୍ୟା ଚିହ୍ନଟ କରିବା ପାଇଁ “HTML କୋଡନିଫର୍” ବୁକମାର୍କଲେଟ୍ |
- ମାଇକ୍ରୋସଫ୍ଟ ଆକ୍ସେସିବିଲିଟି ଇନ୍ସାଇଟ୍ସ |
- ଡିକ୍ ଆକ୍ସ ପରୀକ୍ଷା ଉପକରଣ |
- ୱେବ୍ ଆକ୍ସେସିବିଲିଟିର ପରିଚୟ |