Angular Tutorial: Router Link and Accessibility

ek3nk4r 2024-06-08

0 0 خواندن این مطلب 6 دقیقه زمان میبرد

Angular Tutorial: Router Link and Accessibility

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

ساخت اپلیکیشن هایی که برای همه در دسترس باشد می تواند برای بسیاری از توسعه دهندگان یک چالش باشد. اگر در استفاده از دستگاه‌ها یا دیدن آنچه روی صفحه‌نمایش وجود دارد، مشکل واقعی نداشته باشیم، می‌توانیم چیزهای ساده‌ای را که واقعاً برای ما که این تجملات را نداریم، نادیده بگیریم. بنابراین، ما باید به طور مستمر یاد بگیریم که چگونه می‌توانیم در این زمینه بهتر باشیم و چگونه می‌توانیم از ابزارهایی که قبلاً برای کمک در اختیار داریم استفاده کنیم. در این مثال، من به شما نشان می‌دهم که چگونه می‌توانیم با چند دستورالعمل از ماژول Angular Router، یک جزء لیست خرده نان موجود را برای همه قابل دسترس‌تر کنیم. باشه بریم سراغش

https://www.youtube.com/watch?v=56ADyGKS-DQ

فهرست مطالب

برنامه آزمایشی

برای مثال در این آموزش ما از این برنامه آزمایشی ساده استفاده خواهیم کرد. ما چند صفحه مختلف داریم که می توانیم به آنها پیمایش کنیم. این برنامه قبلاً با مسیریابی راه‌اندازی شده است، بنابراین وقتی روی پیوندها در ناوبری اصلی کلیک می‌کنیم، به درستی به صفحه مربوطه می‌رویم.

مثالی از یک برنامه کاربردی ساده که با Angular و Angular Routing Module ساخته شده است

ما همچنین منطقه آرد سوخاری را در اینجا در بالای هر صفحه داریم.

نمونه ای از یک لیست خرده نان که با Angular و Angular Routing Module ساخته شده است

خوب این پیوندها برخی از ویژگی‌های مهم دسترسی را ندارند که خواندن و درک آنها را برای همه کاربران آسان‌تر می‌کند، نه فقط برای افراد دارای معلولیت.

برای اولین بار، احتمالاً باید یک نمایش سبک قابل مشاهده برای صفحه فعلی در لیست خرده نان داشته باشیم. به این ترتیب، کاربران بینا می توانند به راحتی در یک نگاه متوجه شوند که در کجای لیست قرار دارند.

اما برای کسانی که قادر به دیدن این سبک نیستند، قادر به درک آن نیز نخواهند بود. بنابراین، ما باید برخی اطلاعات اضافی ARIA را به کد اضافه کنیم.

خبر خوب برای ما این است که هنگام استفاده از دستورالعمل RouterLink که در این مثال انجام خواهیم داد، این کار بسیار آسان است. خوب، بیایید به کدی نگاه کنیم.

کد موجود

برای این برنامه ما چندین مؤلفه برای صفحات مختلف داریم. بیایید نگاهی به مؤلفه پست بیندازیم که در هنگام پیمایش به یک پست وبلاگ فردی استفاده می شود.

در بالای قالب، یک جزء پودر سوخاری داریم.

post.component.html


     [breadcrumbs]="breadcrumbs">
    ...

این کامپوننت دارای ورودی () “breadcrumbs” است. بیایید ببینیم آرد سوخاری هایمان چگونه تنظیم می شود.

خوب، در اینجا ما یک آرایه از اشیاء “Link” ایجاد می کنیم که هر کدام دارای یک برچسب و یک مسیر هستند. در این مورد ما دو پیوند برای “وبلاگ” و “پست” داریم.

post.component.ts

protected breadcrumbs: Link[] = [
    {
        label: 'Blog',
        path: '/blog'
    },
    {
        label: 'Post',
        path: '/blog/post'
    }
];

اکنون، ما می‌توانیم این پیوندها را در آرایه‌های خود ببینیم، اما یک پیوند “خانه” نیز وجود دارد که ما آن را در این آرایه نمی‌آوریم.

برجسته کردن پیوندهای پوکه خرده نان با پیوند صفحه اصلی ثابت

بیایید به مؤلفه پودر سوخاری نگاه کنیم تا دلیل آن را ببینیم. در اینجا در قالب، از آنجایی که صفحه اصلی مسیر اصلی برنامه است، همیشه بخشی از خرده نان خواهد بود، بنابراین کدگذاری شده در آن هاردکد می شود.

breadcrumbs.component.html

سپس حلقه ای داریم که در آن لینک های ارائه شده از ورودی () را حلقه بیرون می کنیم. برای این پیوندها می بینیم که آنها قبلاً با استفاده از دستورالعمل routerLink پیکربندی شده اند.

مسیرها با یک اسلش برای صفحه اصلی تنظیم می شوند:

و با مسیر ارائه شده از ورودی() برای breadcrumb های پویا:

خوب، بنابراین همه چیز در حال حاضر به این ترتیب تنظیم شده است.

افزودن یک کلاس «فعال» با دستورالعمل روترLinkActive

اولین کاری که ما انجام می دهیم این است که سبک های بصری “فعال” را در زمانی که لینک های خود فعال هستند، به آنها اضافه کنیم. از آنجایی که ما از دستورالعمل routerLink استفاده می کنیم، می توانیم به راحتی با دستورالعمل routerLinkActive یک کلاس برای این حالت اضافه کنیم.

این دستورالعمل زمانی که پیوند فعال می شود به طور خودکار یک کلاس اضافه می کند و زمانی که دیگر فعال نیست آن را حذف می کند.

خوب، اینجا در CSS برای مولفه breadcrumbs، من با استفاده از یک کلاس فعال، چند سبک برای حالت “active” اضافه کرده ام.

breadcrumbs.component.scss

a.active {
    color: #999;
    font-style: italic;
}

این کلاسی است که باید به صورت پویا با دستور routerLinkActive اضافه کنیم. تنها کاری که باید انجام دهیم این است که به الگو برگردیم و سپس دستور routerLinkActive را به پیوندهای breadcrumb خود اضافه کنیم. این دستور یک ورودی از یک یا چند رشته برای کلاس یا کلاس‌ها می‌گیرد که وقتی پیوند فعال است، به آن متصل می‌شود، بنابراین نام کلاس «فعال» خود را به آن می‌دهیم.

breadcrumbs.component.html

خودشه.

خوب این نوع کار کرد، برخی از سبک ها اعمال شدند، اما آنها نباید هم برای وبلاگ و هم برای پیوند پست اعمال شوند، درست است؟ آنها فقط باید برای پیوند پست اعمال شوند زیرا آن صفحه فعلی است.

مثالی از افزودن یک کلاس فعال و تطبیق تعداد زیادی لینک با دستورالعمل routerLinkActive

خوب، این اتفاق می افتد زیرا به طور پیش فرض، اگر URL اصلاً مطابقت داشته باشد، حتی اگر فقط زیر مجموعه ای از URL کامل باشد، مانند این مورد، فعال خواهد بود.

فراخوانی اینکه مسیر خرده نان وبلاگ در نشانی اینترنتی پست وبلاگ گنجانده شده است و باعث می شود زمانی که ما نمی خواهیم فعال باشد فعال شود.

در این حالت مسیر صفحه وبلاگ به صورت زیر است:

https://stackblitzstartersfkak21-wiab--4200--c3e5e364.local-credentialless.webcontainer.io/blog

و مسیر صفحه پست به صورت زیر است:

https://stackblitzstartersfkak21-wiab--4200--c3e5e364.local-credentialless.webcontainer.io/blog/post?title=Instagram%20Told%20Ars%20Technica%20it%20was%20%22Exploring%22%20More%20Ways%20for%20Users%20to%20Control%20Embedding

بنابراین، مسیر پست شامل مسیر وبلاگ نیز می شود که در نتیجه هر دو لینک “فعال” هستند.

افزودن وضعیت «فعال» برای پیوندها فقط زمانی که «تطابق دقیق» با ورودی روترLinkActiveOptions داشته باشند.

خوب این یک راه حل آسان برای ما است. دستورالعمل routerLinkActive یک ورودی دارد که می توانیم گزینه هایی را برای پیوند فعال ارسال کنیم. یکی از گزینه‌هایی که می‌توانیم ارائه کنیم، بررسی می‌کند که آیا مسیر دقیقاً مطابقت دارد یا خیر.

برای اضافه کردن این، فقط باید ورودی routerLinkActiveOptions را به پیوند خود اضافه کنیم. سپس به آن یک شی با “exact” ارسال می کنیم و آن را روی true قرار می دهیم.

بنابراین اکنون URL باید دقیقاً مطابقت داشته باشد تا فعال باشد، دیگر نمی تواند زیرمجموعه URL باشد.

بنابراین، در اینجا چگونه به نظر می رسد در حال حاضر.

مثالی از افزودن routerLinkActiveOptions exact برای مطابقت فقط زمانی که مسیر دقیقاً مطابقت داشته باشد

کاملا وجود ندارد ما؟ در حال حاضر هیچ یک از لینک ها فعال نیست.

خوب، این اتفاق می افتد زیرا ما یک رشته پرس و جو در URL برای پست خود داریم. بنابراین ما هرگز در اینجا به یک تطابق دقیق نخواهیم رسید.

نمونه ای از رشته پرس و جو که از تطابق دقیق در URL پست جلوگیری می کند

بنابراین، کاری که می خواهم برای رفع این مشکل انجام دهم این است که رابط “پیوند” را تغییر می دهم. من قصد دارم یک ویژگی اختیاری “دقیق” را اضافه کنم.

link.ts

export interface Link {
  ...
  exact?: boolean;
}

سپس، بیایید به آرایه پودرهای نان برای صفحه پست برویم. در پیوند پست، exact را روی false قرار می دهم.

post.component.ts

protected breadcrumbs: Link[] = [
    ...,
    {
        label: 'Post',
        path: '/blog/post',
        exact: false
    }
];

خوب، حالا بیایید به مؤلفه پودر سوخاری برگردیم. بیایید منطق را تغییر دهیم تا اگر exact در پیوند تنظیم شده باشد، از مقدار ارائه شده استفاده کند، اگر نه درست باشد.

breadcrumbs.component.html

حالا بعد از اینکه ذخیره کردیم، کلاس “active” فقط باید روی لینک پست اعمال شود.

نمونه ای از سبک های فعال که اکنون به درستی اعمال می شوند

و هنگامی که ما در اطراف حرکت می کنیم، سایر صفحات نیز باید به درستی کار کنند.

خوب، به طوری که یک حالت بصری برای پیوند فعال به ما می دهد، اما برای کسانی که نمی توانند ببینند، ممکن است خرده نان برای آنها گیج کننده باشد. بنابراین، برای رفع این مشکل، باید برخی اطلاعات اضافی ARIA را اضافه کنیم.

افزودن ARIA برای دسترسی پیشرفته

اولین کاری که باید انجام دهیم واقعاً ربطی به Angular ندارد. فقط باید یک عدد اضافه کنیم aria-label ویژگی با مقدار “Breadcrumb” به عنصر حاوی لیست پیوندها. این فقط اطلاعات بیشتری در مورد نوع ناوبری در اختیار کاربر قرار می دهد.

breadcrumbs.component.html

 aria-label="Breadcrumb">
    ...

افزودن ویژگی aria-current با ورودی ariaCurrentWhenActive

خوب، کاری که باید انجام دهیم اضافه کردن یک است aria-current صفت با مقدار “page” به پیوند فعلی در خرده های نان.

خبر خوب بیشتر برای ما، این کار با ورودی ariaCurrentWhenActive برای دستورالعمل routerLinkActive بسیار آسان است.

تنها کاری که باید انجام دهیم این است که ورودی را اضافه کرده و سپس مقدار “page” را به آن بدهیم. ساده است.

اکنون، پس از ذخیره، هیچ چیز از نظر بصری تغییر نخواهد کرد زیرا تنها کاری که انجام دادیم این بود که وقتی آیتم فعال است، یک ویژگی aria را اضافه کردیم. برای دیدن این باید کد را بررسی کنیم. باید ببینیم که پیوند پست اکنون به درستی دارای ویژگی aria-current است. و اگر به پیوندهای دیگر نگاه کنیم، نباید این ویژگی اعمال شده را ببینیم

مثالی از مشخصه aria-current که به درستی بر روی پیوند پودر فعال با استفاده از ورودی ariaCurrentWhenActive برای دستورالعمل routerLinkActive اعمال می شود.

نتیجه

بنابراین، گاهی اوقات ما نیاز داریم که هم بازخورد بصری و هم غیربصری را برای کاربران خود اضافه کنیم تا همه آن ها برای همه منطقی باشد. خبر خوب این است که تیم Angular به طور مستمر روی راه‌هایی کار می‌کند که با افزودن چیزهایی که به آن نیاز داریم، این کار را برای ما آسان کند. و این واقعاً برای همه چیز خوبی است، اما وظیفه ما این است که مطمئن شویم به این موضوع فکر می کنیم و سهم خود را انجام می دهیم. و امیدوارم این مثال به شما کمک کند دقیقاً این کار را انجام دهید!