ARIA லேபிள்களுடன் உங்கள் ரியாக்ட் கேலெண்டர் கூறுகளை அணுகக்கூடியதாக மாற்றுதல்
அணுகல்தன்மை என்பது நவீன இணைய மேம்பாட்டின் முக்கியமான அம்சமாகும், பயன்பாடுகள் அனைத்து பயனர்களையும் உள்ளடக்கியதாக இருப்பதை உறுதி செய்கிறது. எதிர்வினை திட்டங்களில், போன்ற கூறுகளைப் பயன்படுத்துதல் டேபிக்கர் ஸ்கிரீன் ரீடர்களுக்கு அவற்றை அணுகக்கூடியதாக மாற்ற முயற்சிக்கும் போது, காலண்டர் UIகள் தனித்துவமான சவால்களை முன்வைக்கலாம்.
சமீபத்தில், நான் மாறும் வகையில் சேர்க்க வேண்டிய ஒரு திட்டத்தில் பணிபுரிந்தேன் ARIA லேபிள்கள் a இல் உள்ள தனிப்பட்ட நாள் கூறுகளுக்கு டேபிக்கர் கூறு. ஒவ்வொரு நாளின் நிலையின் அடிப்படையில் "தேர்ந்தெடுக்கப்பட்ட தேதி: ஜனவரி 1, 2024" அல்லது "கிடைக்காத தேதி: ஜனவரி 2, 2024" போன்ற அர்த்தமுள்ள தகவலை பயனர்களுக்கு வழங்குவதே இலக்காக இருந்தது.
முதலில், நான் போன்ற நிலையான தீர்வுகளை முயற்சித்தேன் ariaLabelFormatter அல்லது ரெண்டர்டே, ஆனால் விரைவில் உணர்ந்தேன் எதிர்வினை-நாள்-தேர்தல் அத்தகைய முட்டுக்கட்டைகளுக்கு நூலகத்தில் உள்ளமைக்கப்பட்ட ஆதரவு இல்லை. எனது அடுத்த உள்ளுணர்வு DOM பிந்தைய ரெண்டரைப் பயன்படுத்தி கையாளுவதாகும் useRef மற்றும் பயன்பாட்டு விளைவு. செயல்படும் போது, இந்த அணுகுமுறை உடையக்கூடியதாகவும், வர்க்கப் பெயர்களை பெரிதும் நம்பியதாகவும் உணர்ந்தது. 😕
உங்களின் ARIA லேபிள்களை மாறும் வகையில் சேர்க்க இந்த கட்டுரை மிகவும் வலுவான தீர்வு மூலம் உங்களை அழைத்துச் செல்லும் டேபிக்கர் நாட்கள். தேர்ந்தெடுக்கப்பட்ட, முடக்கப்பட்ட அல்லது கிடைக்காத நிலைகளை நீங்கள் கையாள்வது எதுவாக இருந்தாலும், உங்கள் காலெண்டரை அணுகக்கூடியதாகவும், திரை வாசிப்பவர்களுக்கு ஏற்றதாகவும் இருப்பதை உறுதி செய்வோம். உள்ளே நுழைவோம்! 🚀
கட்டளை | பயன்பாட்டின் உதாரணம் |
---|---|
useRef | const calendarRef = useRef(null); DayPicker கூறுகளின் DOM ஐ நேரடியாக அணுகுவதற்கும் கையாளுவதற்கும் மாறக்கூடிய குறிப்புப் பொருளை உருவாக்குகிறது. |
querySelectorAll | calendarRef.current.querySelectorAll(".rdp-day"); பொருந்தக்கூடிய அனைத்து கூறுகளையும் மீட்டெடுக்கிறது rdp-நாள் மேலும் கையாளுதலுக்காக DayPicker கூறுக்குள் வகுப்பு. |
setAttribute | day.setAttribute("aria-label", ariaLabel); மாறும் வகையில் சேர்க்கிறது அல்லது மாற்றுகிறது ஏரியா-லேபிள் ஸ்கிரீன் ரீடர்களுக்கான அணுகலை வழங்குவதற்கான பண்பு. |
components | கூறுகள்={{ நாள்: renderDay }} ARIA லேபிள் தனிப்பயனாக்கத்தை அனுமதிக்கும் ஒவ்வொரு நாளின் இயல்புநிலை ரெண்டரிங்கை மாற்றுவதற்கு தனிப்பயன் செயல்பாட்டைச் செலுத்துகிறது. |
modifiers | modifiers={{ வரையறுக்கப்பட்ட: calendarDates.limited }} நாட்களை பார்வை ரீதியாகவும் செயல்பாட்டு ரீதியாகவும் வேறுபடுத்துவதற்காக டேபிக்கரில் குறிப்பிட்ட நாள் நிலைகளை (எ.கா. வரையறுக்கப்பட்ட, கிடைக்கவில்லை) வரையறுக்கிறது. |
aria-label | ஸ்க்ரீன் ரீடர்கள் போன்ற உதவிகரமான தொழில்நுட்பங்களுக்கு அவற்றைப் புரிந்துகொள்ளக்கூடியதாகவும் செல்லக்கூடியதாகவும் மாற்றும் வகையில் சொற்பொருள் விளக்கத்தைச் சேர்க்கிறது. |
getByLabelText | screen.getByLabelText("தேர்ந்தெடுக்கப்பட்ட தேதி: ஜனவரி 1"); அலகு சோதனைகளில், இது கூறுகளை அவற்றின் மூலம் வினவுகிறது ஏரியா-லேபிள் அணுகல்தன்மை லேபிள்கள் சரியாகப் பயன்படுத்தப்படுவதை உறுதி செய்வதற்கான பண்புக்கூறு. |
useEffect | useEffect(() => {...}, [calendarDates]); டேபிக்கர் ரெண்டருக்குப் பிறகு லாஜிக்கைச் செயல்படுத்துகிறது, காலண்டர் நிலை மாறும்போது ARIA லேபிள்கள் மாறும் வகையில் சேர்க்கப்படுவதை உறுதி செய்கிறது. |
modifiersStyles | modifierStyles={{ வரையறுக்கப்பட்ட: லிமிடெட் ஸ்டைல் }} குறிப்பிட்ட நாள் மாற்றியமைப்பாளர்களுக்கு தனிப்பயன் ஸ்டைலிங்கைப் பயன்படுத்துகிறது, பயனர்களுக்கு அவர்களின் நிலைகளை பார்வைக்கு வேறுபடுத்துகிறது. |
generateAriaLabel | GenerateAriaLabel(நாள், மாற்றிகள்) ஒரு நாளின் நிலையை அடிப்படையாகக் கொண்டு சூழல் சார்ந்த ARIA லேபிள்களை மாறும் வகையில் உருவாக்கும் ஒரு பயன்பாட்டுச் செயல்பாடு. |
DayPicker க்கான டைனமிக் ARIA லேபிள்கள்: ஒரு ஆழமான வழிகாட்டி
கட்டும் போது ஒரு காலண்டர் கூறு டேபிக்கர் லைப்ரரியைப் பயன்படுத்தி ரியாக்ட் செய்வதில், ஸ்கிரீன் ரீடர்களுக்கான அணுகலை உறுதி செய்வது தந்திரமானதாக இருக்கும். முக்கிய சவால் மாறும் வகையில் சேர்ப்பதில் உள்ளது ARIA லேபிள்கள் நாளுக்கு நாள் கூறுகள், எனவே அவை "தேர்ந்தெடுக்கப்பட்டவை", "முடக்கப்பட்டவை" அல்லது "கிடைக்கவில்லை" போன்ற நிலைகளைத் தொடர்பு கொள்கின்றன. இதைத் தீர்க்க, நாங்கள் இரண்டு அணுகுமுறைகளைப் பயன்படுத்தினோம்: பிந்தைய ரெண்டர் DOM கையாளுதல் மற்றும் தனிப்பயன் ரெண்டரிங் செயல்பாடு. இந்தத் தீர்வுகள் எவ்வாறு செயல்படுகின்றன மற்றும் அணுகல்தன்மையை அடையப் பயன்படுத்தப்படும் முக்கிய கூறுகளைப் பற்றிப் பார்ப்போம். 🗓️
முதல் தீர்வு சார்ந்துள்ளது பிந்தைய ரெண்டர் DOM கையாளுதல் எதிர்வினைகளைப் பயன்படுத்துதல் useRef மற்றும் பயன்பாட்டு விளைவு. `useRef` உடன் DayPicker கூறுக்கான குறிப்பை உருவாக்குவதன் மூலம், நாம் ரெண்டர் செய்யப்பட்ட DOM நோட்களை அணுகலாம். `useEffect` ஹூக்கிற்குள், `querySelectorAll` ஐப் பயன்படுத்தி அனைத்து நாள் உறுப்புகளையும் (`.rdp-day`) வினவுகிறோம். ஒவ்வொரு நாளும், அதன் நிலையைத் தீர்மானிக்க அதன் வகுப்புப் பெயர்களைச் சரிபார்க்கிறோம். ஒரு நாளில் “rdp-day_selected” வகுப்பு இருந்தால், “தேர்ந்தெடுத்த தேதி: ஜனவரி 1, 2024” போன்ற ARIA லேபிளைச் சேர்ப்போம். காலண்டர் நிலை மாறும்போதெல்லாம் ARIA லேபிள்கள் மாறும் வகையில் புதுப்பிக்கப்படுவதை இந்த முறை உறுதி செய்கிறது.
இரண்டாவது தீர்வு, a வரையறுப்பதன் மூலம் தூய்மையான, அதிக எதிர்வினைக்கு உகந்த அணுகுமுறையை எடுக்கிறது விருப்ப ரெண்டர் செயல்பாடு. DayPicker இல், நாள் கூறுகளின் ரெண்டரிங்கை மேலெழுத, `கூறுகள்` ப்ராப் மூலம் தனிப்பயன் கூறுகளைப் பயன்படுத்துகிறோம். தனிப்பயன் செயல்பாடு ஒவ்வொரு நாளும் மற்றும் அதன் நிலை மாற்றிகளை அளவுருக்களாகப் பெறுகிறது. ஹெல்பர் செயல்பாட்டைப் பயன்படுத்தி, ஒவ்வொரு நாளின் நிலையின் அடிப்படையில் (எ.கா., தேர்ந்தெடுக்கப்பட்ட, முடக்கப்பட்டவை) ARIA லேபிள்களை மாறும் வகையில் உருவாக்குகிறோம். எடுத்துக்காட்டாக, "கிடைக்காத தேதி: ஜனவரி 2, 2024" என்பது முடக்கப்பட்டதாகக் குறிக்கப்பட்ட நாட்களுக்கு ஒதுக்கப்பட்டுள்ளது. இந்த அணுகுமுறை DOM கையாளுதலைத் தவிர்க்கிறது மற்றும் தீர்வை இன்னும் பராமரிக்கக்கூடியதாக வைத்திருக்கிறது.
இரண்டு முறைகளும் அவற்றின் நன்மை தீமைகளைக் கொண்டுள்ளன. ரெண்டருக்குப் பிந்தைய DOM கையாளுதல், ரெண்டர் செய்யப்பட்ட வெளியீட்டின் மீது நமக்குக் கட்டுப்பாட்டை வழங்கும் அதே வேளையில், இது வகுப்புப் பெயர்களைப் பெரிதும் சார்ந்துள்ளது, இது நூலகப் புதுப்பிப்புகளுடன் மாறக்கூடும். மறுபுறம், `கூறுகள்` ப்ராப்பைப் பயன்படுத்துவது, ரியாக்டின் டிக்ளரேட்டிவ் முன்னுதாரணத்துடன் சிறப்பாகச் சீரமைக்கப்பட்டு, குறியீட்டை சுத்தமாகவும், பிழைத்திருத்தத்தை எளிதாக்கவும் செய்கிறது. இறுதியில், இந்த அணுகுமுறைகளுக்கு இடையேயான தேர்வு உங்கள் திட்டத் தேவைகள் மற்றும் நூலகக் கட்டுப்பாடுகளைப் பொறுத்தது. எப்படியிருந்தாலும், இறுதி முடிவு, ஸ்கிரீன் ரீடர்களை நம்பியிருக்கும் பயனர்களுக்கு காலெண்டரை அணுகுவதை உறுதிசெய்து, அனைவருக்கும் பயன்பாட்டினை மேம்படுத்துகிறது. 🌟
டேபிக்கர் கூறுகளுக்கு ரியாக்ட் செய்ய ARIA லேபிள்களை எப்படி மாறும் வகையில் சேர்ப்பது
ரியாக்ட், ஜாவாஸ்கிரிப்ட் மற்றும் உகந்த முறைகளைப் பயன்படுத்தி டைனமிக் ஏரியா லேபிள் மேலாண்மை
// Solution 1: Adding ARIA labels with post-render DOM Manipulation
import React, { useEffect, useRef } from "react";
import { DayPicker } from "react-day-picker";
import "react-day-picker/dist/style.css";
const AccessibleDayPicker = ({ calendarDates, startDate, endDate }) => {
const calendarRef = useRef(null);
useEffect(() => {
if (calendarRef.current) {
const days = calendarRef.current.querySelectorAll(".rdp-day");
days.forEach((day) => {
const date = day.getAttribute("aria-label");
let ariaLabel = date;
if (day.classList.contains("rdp-day_selected")) {
ariaLabel = `Selected date: ${date}`;
} else if (day.classList.contains("rdp-day_disabled")) {
ariaLabel = `${date} is not available for selection.`;
}
day.setAttribute("aria-label", ariaLabel || date);
});
}
}, [calendarDates]);
return (
<div ref={calendarRef}>
<DayPicker
mode="single"
selected={calendarDates.selected}
onDayClick={() => {}}
showOutsideDays
disabled={{ before: startDate, after: endDate }}
modifiers={{
limited: calendarDates.limited,
unavailable: calendarDates.unavailable,
}}
/>
</div>
);
};
export default AccessibleDayPicker;
டேபிக்கரில் ARIA லேபிள்களுக்கான தனிப்பயன் ரேப்பரைச் செயல்படுத்துதல்
செயல்பாட்டுக் கூறுகளைப் பயன்படுத்தி எதிர்வினை அடிப்படையிலான ARIA லேபிள் தனிப்பயனாக்கம்
// Solution 2: Using a Custom Wrapper to Assign ARIA Labels
import React from "react";
import { DayPicker } from "react-day-picker";
const CustomDayPicker = ({ calendarDates, startDate, endDate }) => {
const generateAriaLabel = (date, modifiers) => {
if (modifiers.selected) return `Selected date: ${date.toDateString()}`;
if (modifiers.disabled) return `${date.toDateString()} is not available.`;
return date.toDateString();
};
const renderDay = (day, modifiers) => (
<div aria-label={generateAriaLabel(day, modifiers)}>
{day.getDate()}
</div>
);
return (
<DayPicker
mode="single"
selected={calendarDates.selected}
disabled={{ before: startDate, after: endDate }}
modifiers={{
limited: calendarDates.limited,
unavailable: calendarDates.unavailable,
}}
components={{ Day: renderDay }}
/>
);
};
export default CustomDayPicker;
ARIA லேபிள் பணிக்கான அலகு சோதனைகள்
ARIA லேபிள் ஒருமைப்பாட்டை உறுதி செய்ய ஜெஸ்ட் மற்றும் ரியாக்ட் டெஸ்டிங் லைப்ரரி
// Solution 3: Unit tests to validate ARIA label assignment
import React from "react";
import { render, screen } from "@testing-library/react";
import AccessibleDayPicker from "./AccessibleDayPicker";
import "@testing-library/jest-dom";
describe("AccessibleDayPicker ARIA labels", () => {
test("adds ARIA labels for selected and disabled days", () => {
const calendarDates = {
selected: new Date(2024, 0, 1),
unavailable: [new Date(2024, 0, 2)],
};
render(<AccessibleDayPicker calendarDates={calendarDates} />);
const selectedDay = screen.getByLabelText("Selected date: Monday, January 1, 2024");
expect(selectedDay).toBeInTheDocument();
const unavailableDay = screen.getByLabelText("Monday, January 2, 2024 is not available.");
expect(unavailableDay).toBeInTheDocument();
});
});
ரியாக்ட் டேபிக்கரில் ஸ்கிரீன் ரீடர் அணுகலை உறுதி செய்தல்
சேர்த்தல் ARIA லேபிள்கள் அணுகல்தன்மைக்கு மாறும் வகையில் முக்கியமானது, ஆனால் ரியாக்ட் டேபிக்கரில் உள்ளடக்கிய அனுபவத்தை உருவாக்குவதற்கு இன்னும் நிறைய இருக்கிறது. கவனிக்கப்படாத ஒரு அம்சம் உறுதியானது விசைப்பலகை வழிசெலுத்தல் மற்றும் கவனம் மேலாண்மை. ஸ்கிரீன் ரீடர் பயனர்கள் காலெண்டர்கள் போன்ற ஊடாடும் கூறுகளைக் கடப்பதற்கு விசைப்பலகை உள்ளீடுகளை பெரிதும் நம்பியுள்ளனர். DayPicker, அடிப்படை விசைப்பலகை வழிசெலுத்தலை ஆதரிக்கிறது, ஆனால் ARIA லேபிள்களுடன் தனிப்பயனாக்குவது அதை மேலும் உள்ளுணர்வுடன் மாற்றும்.
ஆராய வேண்டிய மற்றொரு பகுதி சர்வதேசமயமாக்கல் (i18n) ஆதரவு. உங்கள் திட்டம் பல்வேறு பகுதிகளைச் சேர்ந்த பயனர்களைக் குறிவைத்தால், ARIA லேபிள்கள் உள்ளூர்மயமாக்கப்பட்ட தேதி வடிவங்களையும் மொழியையும் பிரதிபலிக்க வேண்டும். எடுத்துக்காட்டாக, “ஜனவரி 1, 2024” என்பதற்குப் பதிலாக, பிரெஞ்சுப் பயனர் “1 ஜான்வியர் 2024” என்று கேட்க வேண்டும். `react-intl` அல்லது நேட்டிவ் ஜாவாஸ்கிரிப்ட் `Intl.DateTimeFormat` போன்ற நூலகங்கள் இந்த லேபிள்களை வெவ்வேறு இடங்களில் உள்ள ஸ்கிரீன் ரீடர்களுக்காக மாறும் வகையில் வடிவமைக்க உதவும்.
கடைசியாக, ஒரு நாளின் தற்போதைய கவனம் அல்லது நிலையைக் காண்பிப்பதன் மூலம் அணுகலை மேலும் மேம்படுத்தலாம். வழக்கத்தை இணைத்தல் CSS வகுப்புகள் `aria-current="date"` போன்ற ARIA பண்புக்கூறுகளுடன் காட்சி மற்றும் சொற்பொருள் அணுகலை உறுதி செய்கிறது. உதாரணமாக, ஸ்க்ரீன் ரீடர்களுக்கு சூழலை வழங்கும் அதே வேளையில் இன்றைய தேதியை நீங்கள் காட்சிப்படுத்தலாம். இந்த அளவிலான மெருகூட்டல் உங்கள் DayPicker வேலை செய்வதோடு மட்டுமல்லாமல் அனைத்துப் பயனர்களையும் உள்ளடக்கியதாக சிறந்து விளங்குவதை உறுதி செய்கிறது. 🎯
DayPicker இல் ARIA லேபிள்கள் பற்றி அடிக்கடி கேட்கப்படும் கேள்விகள்
- எவை ARIA labels DayPicker இல் பயன்படுத்தப்பட்டதா?
- ARIA லேபிள்கள் ஸ்கிரீன் ரீடர்களுக்கு அணுகக்கூடிய விளக்கங்களை வழங்குகின்றன, பயனர்கள் "தேர்ந்தெடுக்கப்பட்டவை" அல்லது "முடக்கப்பட்டவை" போன்ற நாள் நிலைகளைப் புரிந்துகொள்ள உதவுகின்றன.
- நான் எப்படி மாறும் வகையில் சேர்ப்பது ARIA attributes DOM கையாளுதலைப் பயன்படுத்தாமல்?
- டேபிக்கரைப் பயன்படுத்துதல் components ப்ராப், நீங்கள் நாள் ரெண்டரிங்கைத் தனிப்பயனாக்கலாம் மற்றும் நேரடியாக ARIA லேபிள்களைச் சேர்க்கலாம்.
- நான் உள்ளூர்மயமாக்கலாமா ARIA labels சர்வதேச பயனர்களுக்கு?
- ஆம், நீங்கள் பயன்படுத்தி தேதிகளை வடிவமைக்க முடியும் Intl.DateTimeFormat ARIA லேபிள்கள் உள்ளூர்மயமாக்கப்பட்ட தேதி வடிவங்களை பிரதிபலிக்கின்றன.
- நான் எப்படி மேம்படுத்துவது keyboard navigation ARIA லேபிள்களுடன்?
- டேபிக்கர் விசைப்பலகை வழிசெலுத்தலை சொந்தமாக ஆதரிக்கிறது, ஆனால் தனிப்பயன் சேர்க்கிறது focus styles பயன்பாடு மற்றும் அணுகல் இரண்டையும் மேம்படுத்துகிறது.
- டைனமிக் சேர்க்கும் போது செயல்திறன் செலவு உள்ளதா ARIA attributes?
- ரியாக்டின் நிலை மற்றும் முட்டுகளைப் பயன்படுத்தி ARIA பண்புக்கூறுகளை முறையாகச் செயல்படுத்துவது குறைந்த பட்ச செயல்திறன் மேல்நிலையை உறுதி செய்கிறது.
டைனமிக் ARIA லேபிள்களுடன் அணுகல்தன்மையை மேம்படுத்துதல்
சேர்த்தல் ARIA லேபிள்கள் உதவித் தொழில்நுட்பங்களுக்கான தனிப்பட்ட நாள் கூறுகளின் நிலையை விவரிப்பதன் மூலம் DayPicker அணுகலை மேம்படுத்துகிறது. ஸ்கிரீன் ரீடர்களை நம்பியிருக்கும் பயனர்களுக்கு இது தடையற்ற அனுபவத்தை உருவாக்குகிறது, "தேர்ந்தெடுக்கப்பட்டது" அல்லது "கிடைக்கவில்லை" போன்ற முக்கிய நிலைகள் தெளிவாக இருப்பதை உறுதி செய்கிறது. ✅
ரியாக்ட் ஹூக்குகள் மற்றும் தனிப்பயன் ரெண்டரிங் அணுகுமுறைகளை இணைப்பதன் மூலம், பயனுள்ள மற்றும் பராமரிக்கக்கூடிய தீர்வை நாங்கள் அடைகிறோம். நேரடி DOM கையாளுதல் அல்லது அறிவிப்பு முட்டுகள் மூலம், அனைத்து பயனர்களுக்கும் அணுகக்கூடிய உள்ளடக்கிய காலண்டர் இடைமுகத்தை வழங்குவதில் கவனம் செலுத்தப்படுகிறது. 🌟
ரியாக்ட் டேபிக்கரில் அணுகக்கூடிய ARIA லேபிள்களுக்கான ஆதாரங்கள் மற்றும் குறிப்புகள்
- அதிகாரி பற்றி விளக்குகிறார் ரியாக்ட்-டே-பிக்கர் கூறு செயல்பாடுகள் மற்றும் மாற்றிகளை ஆராய்வதற்கான நூலக ஆவணங்கள். மேலும் கண்டுபிடிக்கவும் எதிர்வினை-நாள்-தேர்வு ஆவணம் .
- அணுகல்தன்மையின் முக்கியத்துவம் மற்றும் ARIA சிறந்த நடைமுறைகளைக் குறிப்பிடுகிறது MDN வெப் டாக்ஸ். ARIA பண்புக்கூறுகள் பற்றிய விரிவான வழிகாட்டுதல் இங்கே கிடைக்கிறது MDN ARIA ஆவணம் .
- இணைய அணுகல்தன்மை மற்றும் பகிரப்பட்ட ஸ்கிரீன் ரீடர் இணக்கத்தன்மையை மேம்படுத்துவதற்கான கருத்துகளை ஆராய்கிறது WebAIM, இல் காணலாம் WebAIM: மனதில் இணைய அணுகல் .