Padariet savu React kalendāra komponentu pieejamu, izmantojot ARIA etiķetes
Pieejamība ir būtisks mūsdienu tīmekļa izstrādes aspekts, kas nodrošina, ka lietojumprogrammas ir iekļaujošas visiem lietotājiem. React projektos, izmantojot tādas sastāvdaļas kā Dienas atlasītājs kalendāra UI var radīt unikālas problēmas, mēģinot padarīt tās pieejamas ekrāna lasītājiem.
Nesen es strādāju pie projekta, kurā man vajadzēja dinamiski pievienot ARIA etiķetes uz atsevišķiem dienas elementiem a Dienas atlasītājs sastāvdaļa. Mērķis bija sniegt lietotājiem nozīmīgu informāciju, piemēram, “Atlasītais datums: 2024. gada 1. janvāris” vai “Nav pieejams datums: 2024. gada 2. janvāris”, pamatojoties uz katras dienas stāvokli.
Sākumā es mēģināju standarta risinājumus, piemēram ariaLabelFormatter vai RenderDay, bet ātri sapratu, ka reaģēt-dienu atlasītājs bibliotēkai trūka iebūvēta atbalsta šādiem rekvizītiem. Mans nākamais instinkts bija manipulēt ar DOM pēcrenderēšanu, izmantojot useRef un useEffect. Lai gan šī pieeja bija funkcionāla, tā šķita trausla un lielā mērā atkarīga no klašu nosaukumiem. 😕
Šajā rakstā tiks parādīts efektīvāks risinājums, lai dinamiski pievienotu ARIA etiķetes Dienas atlasītājs dienas. Neatkarīgi no tā, vai jūs saskaraties ar atlasītiem, atspējotiem vai nepieejamiem stāvokļiem, mēs nodrošināsim, ka jūsu kalendārs joprojām ir pieejams un ekrāna lasītājam draudzīgs. Iegremdējamies! 🚀
Pavēli | Lietošanas piemērs |
---|---|
useRef | const kalendārsRef = useRef(null); Izveido mainīgu atsauces objektu, lai tieši piekļūtu DayPicker komponenta DOM un ar to manipulētu. |
querySelectorAll | calendarRef.current.querySelectorAll(.rdp-day"); Izgūst visus elementus, kas atbilst rdp-diena klase DayPicker komponentā turpmākai manipulācijai. |
setAttribute | day.setAttribute("aria-label", ariaLabel); Dinamiski pievieno vai maina ārijas etiķete atribūtu, lai nodrošinātu piekļuvi ekrāna lasītājiem. |
components | komponenti={{ Diena: renderDay }} Ievada pielāgotu funkciju, lai aizstātu katras dienas noklusējuma renderēšanu, ļaujot pielāgot ARIA etiķeti. |
modifiers | modifikators={{ ierobežots: calendarDates.limited }} Definē konkrētus dienu stāvokļus (piemēram, ierobežots, nav pieejams) DayPicker, lai vizuāli un funkcionāli atšķirtu dienas. |
aria-label | Dienām pievieno semantisku aprakstu, padarot tās saprotamas un orientējamas palīgtehnoloģijām, piemēram, ekrāna lasītājiem. |
getByLabelText | screen.getByLabelText("Izvēlētais datums: 1. janvāris"); Vienību testos tas vaicā elementus pēc to ārijas etiķete atribūtu, lai nodrošinātu, ka pieejamības etiķetes tiek pareizi lietotas. |
useEffect | useEffect(() => {...}, [kalendāra datumi]); Izpilda loģiku pēc DayPicker renderēšanas, nodrošinot ARIA etiķešu dinamisku pievienošanu, mainoties kalendāra stāvoklim. |
modifiersStyles | modifiersStyles={{ ierobežots: ierobežots stils }} Konkrētiem dienas pārveidotājiem piemēro pielāgotu stilu, padarot to stāvokļus lietotājiem vizuāli atšķirīgus. |
generateAriaLabel | ģenerētAriaLabel(diena, modifikatori) Lietderības funkcija, kas dinamiski ģenerē kontekstam specifiskas ARIA iezīmes, pamatojoties uz dienas stāvokli. |
Dinamiskās ARIA etiķetes pakalpojumam DayPicker: padziļināts ceļvedis
Būvējot a kalendāra sastāvdaļa React, izmantojot DayPicker bibliotēku, ekrāna lasītāju pieejamības nodrošināšana var būt sarežģīta. Galvenais izaicinājums ir dinamiska pievienošana ARIA etiķetes līdz ikdienas elementiem, tāpēc tie paziņo tādus stāvokļus kā “atlasīts”, “invalīds” vai “nav pieejams”. Lai to atrisinātu, mēs izmantojām divas pieejas: pēcrenderēšanas DOM manipulācijas un pielāgotu renderēšanas funkciju. Apskatīsim, kā šie risinājumi darbojas, un galvenās sastāvdaļas, kas tiek izmantotas pieejamības nodrošināšanai. 🗓️
Pirmais risinājums balstās uz pēcrenderēšanas DOM manipulācijas izmantojot React useRef un useEffect. Izveidojot atsauci uz DayPicker komponentu ar "useRef", mēs varam piekļūt renderētajiem DOM mezgliem. Izmantojot 'useEffect' āķi, mēs vaicājam visas dienas elementus (.rdp-day), izmantojot 'querySelectorAll'. Katrai dienai mēs pārbaudām tās klases nosaukumus, lai noteiktu tās stāvokli. Ja dienai ir klase “rdp-day_selected”, mēs pievienojam ARIA iezīmi, piemēram, “Atlasītais datums: 2024. gada 1. janvāris”. Šī metode nodrošina, ka ARIA etiķetes tiek dinamiski atjauninātas ikreiz, kad mainās kalendāra stāvoklis.
Otrais risinājums izmanto tīrāku, reaģēšanai draudzīgāku pieeju, definējot a pielāgota renderēšanas funkcija. Programmā DayPicker mēs izmantojam pielāgotu komponentu, izmantojot komponentu rekvizītu, lai ignorētu dienas elementu renderēšanu. Pielāgotā funkcija kā parametrus saņem katru dienu un tās stāvokļa modifikatorus. Izmantojot palīgfunkciju, mēs dinamiski ģenerējam ARIA etiķetes, pamatojoties uz katras dienas stāvokli (piemēram, atlasīts, atspējots). Piemēram, “Nav pieejams datums: 2024. gada 2. janvāris” ir piešķirts dienām, kas atzīmētas kā atspējotas. Šī pieeja ļauj izvairīties no manipulācijām ar DOM un nodrošina risinājuma labāku apkopi.
Abām metodēm ir savi plusi un mīnusi. Lai gan pēcrenderēšanas DOM manipulācijas ļauj mums kontrolēt renderēto izvadi, tas lielā mērā ir atkarīgs no klašu nosaukumiem, kas var mainīties līdz ar bibliotēkas atjauninājumiem. No otras puses, komponentu izmantošana labāk atbilst React deklaratīvajai paradigmai, padarot kodu tīrāku un vieglāk atkļūdojamu. Galu galā izvēle starp šīm pieejām ir atkarīga no jūsu projekta prasībām un bibliotēkas ierobežojumiem. Jebkurā gadījumā gala rezultāts nodrošina, ka kalendārs ir pieejams lietotājiem, kuri paļaujas uz ekrāna lasītājiem, tādējādi uzlabojot lietojamību visiem. 🌟
Kā dinamiski pievienot ARIA etiķetes React DayPicker komponentam
Dinamiskā ARIA etiķešu pārvaldība, izmantojot React, JavaScript un optimizētās metodes
// 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;
Pielāgota iesaiņojuma ieviešana ARIA etiķetēm programmā DayPicker
Uz reaģēšanu balstīta ARIA etiķetes pielāgošana, izmantojot funkcionālos komponentus
// 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;
Vienību testi ARIA etiķešu piešķiršanai
Izjokot un reaģēt testēšanas bibliotēka, lai nodrošinātu ARIA etiķetes integritāti
// 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();
});
});
Ekrāna lasītāja pieejamības nodrošināšana programmā React DayPicker
Pievienošana ARIA etiķetes dinamiski ir ļoti svarīgi pieejamībai, taču ir vēl vairāk, lai radītu iekļaujošu pieredzi programmā React DayPicker. Viens aizmirstais aspekts ir nodrošināšana tastatūras navigācija un fokusa vadība. Ekrāna lasītāju lietotāji ļoti paļaujas uz tastatūras ievadi, lai šķērsotu interaktīvos komponentus, piemēram, kalendārus. Ierīce DayPicker atbalsta pamata tastatūras navigāciju, taču tās pielāgošana kopā ar ARIA etiķetēm var padarīt to intuitīvāku.
Vēl viena joma, kas jāizpēta, ir internacionalizācijas (i18n) atbalsts. Ja jūsu projekta mērķauditorija ir lietotāji no dažādiem reģioniem, ARIA etiķetēm ir jāatspoguļo lokalizēti datuma formāti un valoda. Piemēram, vārda “2024. gada 1. janvāris” vietā franču lietotājam ir jādzird “2024. gada 1. janvāris”. Tādas bibliotēkas kā “react-intl” vai vietējais JavaScript “Intl.DateTimeFormat” var palīdzēt dinamiski formatēt šīs etiķetes ekrāna lasītājiem dažādās lokalizācijās.
Visbeidzot, varat vēl vairāk uzlabot pieejamību, vizuāli norādot pašreizējo fokusu vai dienas stāvokli. Apvienojot pasūtījumu CSS nodarbības ar ARIA atribūtiem, piemēram, `aria-current="date"` nodrošina gan vizuālo, gan semantisko pieejamību. Piemēram, varat vizuāli izcelt šodienas datumu, vienlaikus nodrošinot kontekstu ekrāna lasītājiem. Šis slīpēšanas līmenis nodrošina, ka jūsu DayPicker ne tikai darbojas, bet arī lieliski iekļaujas visiem lietotājiem. 🎯
Bieži uzdotie jautājumi par ARIA etiķetēm pakalpojumā DayPicker
- Kas ir ARIA labels izmanto DayPicker?
- ARIA etiķetes nodrošina ekrāna lasītājiem pieejamus aprakstus, palīdzot lietotājiem izprast dienas stāvokļus, piemēram, “Atlasīts” vai “Atspējots”.
- Kā dinamiski pievienot ARIA attributes neizmantojot DOM manipulācijas?
- Izmantojot DayPicker components prop, varat pielāgot dienas renderēšanu un tieši pievienot ARIA etiķetes.
- Vai es varu lokalizēt ARIA labels starptautiskiem lietotājiem?
- Jā, jūs varat formatēt datumus, izmantojot Intl.DateTimeFormat lai nodrošinātu, ka ARIA etiķetes atspoguļo lokalizētu datuma formātu.
- Kā man uzlabot keyboard navigation līdzās ARIA etiķetēm?
- DayPicker atbalsta tastatūras navigāciju sākotnēji, bet pievieno pielāgotu focus styles uzlabo gan lietojamību, gan pieejamību.
- Vai, pievienojot dinamisku, pastāv veiktspējas izmaksas ARIA attributes?
- Pareiza ARIA atribūtu ieviešana, izmantojot React stāvokli un rekvizītus, nodrošina minimālu veiktspēju.
Pieejamības uzlabošana, izmantojot dinamiskās ARIA etiķetes
Pievienošana ARIA etiķetes uz DayPicker uzlabo pieejamību, aprakstot atsevišķu palīgtehnoloģiju dienas elementu stāvokli. Tas rada nevainojamu pieredzi lietotājiem, kuri paļaujas uz ekrāna lasītājiem, nodrošinot, ka galvenie stāvokļi, piemēram, “atlasīts” vai “nav pieejams”, ir skaidri. ✅
Apvienojot React āķus un pielāgotas renderēšanas pieejas, mēs panākam risinājumu, kas ir gan efektīvs, gan apkopjams. Neatkarīgi no tā, vai izmantojot tiešu DOM manipulāciju vai deklaratīvus rekvizītus, galvenā uzmanība joprojām tiek likta uz iekļaujoša kalendāra saskarnes nodrošināšanu, kas pieejama visiem lietotājiem. 🌟
Pieejamo ARIA etiķešu avoti un atsauces programmā React DayPicker
- Sīkāka informācija par oficiālo Reaģēt-dienu atlasītājs bibliotēkas dokumentācija komponentu funkcionalitātes un modifikatoru izpētei. Vairāk atrodiet vietnē Reaģēšanas dienas atlasītāja dokumentācija .
- Atsauces uz pieejamības nozīmi un ARIA paraugpraksi no MDN tīmekļa dokumenti. Sīki izstrādāti norādījumi par ARIA atribūtiem ir pieejami vietnē MDN ARIA dokumentācija .
- Izpēta koncepcijas, kā uzlabot tīmekļa pieejamību un ekrāna lasītāju saderību, kas tiek kopīgota WebAIM, ko var atrast vietnē WebAIM: prātā tīmekļa pieejamība .