نکات دسترسی به صفحه کلید با استفاده از HTML و CSS

1. سایت خود را برای دسترسی به صفحه کلید تست کنید

مهمترین هدف دسترسی به صفحه کلید این است که هر عنصر تعاملی مانند پیوندها و کنترل های فرم را با Tab کلید این روشی است که کاربران فقط صفحه کلید در یک صفحه وب پیمایش می کنند. آزمایش وب سایت شما برای دسترسی به صفحه کلید در واقع بسیار آسان است: فقط دکمه را فشار دهید Tab را فشار دهید و از بالای صفحه به پایین پیمایش کنید و در حین حرکت عناصر فعال را برجسته کنید.

مشاهده کنید که رسیدن به محتوای اصلی با روش صفحه کلید Tabing چقدر آسان یا دشوار است. روی یک آیتم منو کلیک کنید، یک فرم را پر کنید، یک نوار لغزنده را اجرا کنید یا موقعیت فعلی خود را در صفحه دنبال کنید. شما همچنین می توانید جهت معکوس را با استفاده از Shift + Tab میانبر صفحه کلید

2. قابل توجه ایجاد کنید :focus سبک ها

CSS دارای یک :focus شبه کلاسی که وقتی کاربر روی یک مورد کلیک یا ضربه می‌زند یا آن را با Tab کلید این :focus حالت فقط برای عناصر قابل تمرکز، برای مثال <a>، <button>، <input>، <textarea>، <select>، و <area>.

هر مرورگر پیش فرض خود را دارد :focus سبک‌ها – معمولاً یک طرح سیاه نقطه‌دار در اطراف عنصر، یا یک درخشش تار، با این حال بسیاری از طراحان آن را به سلیقه آنها نمی‌دانند و آن را به طور کامل حذف می‌کنند. این در واقع اشتباه شماره یک است که دسترسی صفحه کلید را در صفحات وب خراب می کند. اگر سبک های پیش فرض را دوست ندارید، از چیزی استفاده کنید که با طراحی وب سایت شما مطابقت داشته باشد.

سبکی را انتخاب کنید که به راحتی قابل توجه باشد اما فقط به رنگ ها متکی نباشد. در اینجا یک مثال ممکن است که می تواند برای کاربران فقط صفحه کلید به خوبی کار کند:

1

:focus {

2

    outline: 3px solid red;   

3

}

3. حالت‌های قابل دسترسی با صفحه‌کلید ایجاد کنید

اطمینان حاصل کنید که وقتی یک گفتگوی مودال باز می شود، فوکوس صفحه کلید به عنصری در داخل گفتگو تغییر می کند، معمولاً اولین عنصر قابل فوکوس یا عنصر استاتیک با tabindex="-1" اگر محتوا شامل ساختارهای معنایی باشد.

استفاده کنید Tab و Shift + Tab برای پیمایش در میان عناصر درون گفتگو، اطمینان حاصل کنید که ترتیب فوکوس منطقی است. مطمئن شوید که Escape کلید گفتگو را می بندد.

برای پیکربندی این، می توانید از a استفاده کنید <div> با role="dialog" برای مدال مودال را با برچسب گذاری کنید aria-labelledby اگر عنوانی داشته باشد، یا aria-label برای مدال بدون عنوان قابل مشاهده این به کاربران صفحه‌خوان در درک محتوا و هدف مدال کمک می‌کند.

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

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

4. از طراحان غیر رنگی برای پیوندها استفاده کنید

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

مشابه به :focus استایل‌ها، هایپرلینک‌ها همچنین با استایل پیش‌فرض مرورگر ارائه می‌شوند – در بیشتر موارد زیر آن‌ها آبی است. با این حال، طراحان اغلب خط زیر را حذف می کنند و فقط از رنگ ها برای نشان دادن وجود پیوند استفاده می کنند. اگر زیرخط پیش فرض را بردارید، همیشه از آن استفاده کنید یک نشانگر غیر رنگی دیگر که با طراحی وب سایت شما مطابقت دارد، مانند حاشیه ها، نمادها یا خطوط کلی.

می توانید استفاده کنید title ویژگی برای توصیف محتوای یک پیوند، اما تنها زمانی قابل مشاهده می شود که کسی لینک را نگه دارد. کاربران فقط صفحه کلید به رویدادهای شناور دسترسی ندارند، بنابراین هرگز اطلاعات مهم را در آن قرار ندهید title صفت. همچنین به عنوان یک نشانگر غیر رنگی به حساب نمی آید. به عنوان مثال، هرگز این کار را انجام ندهید:

1

<a href="#" title="Important information">

2

    Click here

3

</a>

در عوض، این کار را انجام دهید:

1

<a href="#" title="Repetition of Important Information or addition of some secondary details">

2

    Important information

3

</a>

WCAG 2.0 همچنین در مورد این هشدار می دهد مشکلات دسترسی از عنوان صفت. یا با احتیاط از آن استفاده کنید یا اصلا استفاده نکنید.

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

فرم ها عناصر تعاملی هستند، بنابراین باید از طریق صفحه کلید قابل دسترسی باشند. کاربرانی که فقط صفحه‌کلید دارند باید بتوانند فرم‌ها را پر کنند، دکمه‌ها را فشار دهند، از لغزنده‌های محدوده استفاده کنند، گزینه‌ها را انتخاب کنند و کنترل‌ها را به راحتی اجرا کنند. اگر فرم‌هایی در وب‌سایت خود دارید، باید آن‌ها را یکی یکی با استفاده از آن تست کنید Tab کلید به فرم های ثبت نام، فرم های خبرنامه، فرم های ورود، فرم های نظر، سبد خرید و غیره فکر کنید.

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

• <button>
• <input>
• <textarea>
• <select>
• <option>

برای مثال، می‌توانید با HTML زیر یک نوار لغزنده قابل دسترسی برای صفحه کلید ایجاد کنید:

1

<input type="range" min="0" max="10">

کاربران صفحه کلید می توانند ابتدا روی آن تمرکز کنند Tab را فشار دهید، سپس نوار لغزنده را با آن بالا و پایین ببرید فضا.

اگر به دلایلی نیاز به استفاده از تگ HTML غیرقابل تمرکز برای یک عنصر تعاملی دارید، می توانید آن را با tabindex="0" صفت. به عنوان مثال، در اینجا یک <div> تبدیل به یک دکمه قابل فوکوس:

1

<div role="button" tabindex="0">

2

    Click me

3

</div>

این role="button" ویژگی در قطعه فوق یک نقش برجسته ARIA است. اگرچه کاربران فقط صفحه کلید به آن نیاز ندارند، اما برای کاربران صفحه‌خوان و دسترسی بصری ضروری است.

حتی اگر دکمه غیر بومی قابل فوکوس باشد، باز هم از نظر دسترسی به صفحه کلید نسبت به همتای اصلی خود پایین تر است. هنگامی که بخواهید یک کنترل کننده رویداد را به دکمه اضافه کنید، بلافاصله متوجه این موضوع خواهید شد. در اینجا شنونده رویداد کلیکی با بومی به نظر می رسد <button> عنصر:

1

<button onclick="alert('Hi, I am a native button!')">

2

    Click me

3

</button>

و، در اینجا معادل با استفاده از دکمه div است:

1

<div role="button" tabindex="0" onclick="alert('Hi, I am a non-native button!')">

2

    Click me

3

</div>

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

1

<div role="button" tabindex="0" onclick="alert('Hi, I am a non-native button!')" 

2

onkeydown="alert('Hi, I am a non-native button!')">

3

    Click me

4

</div>

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

6. پیوند «پرش به محتوای اصلی» را اضافه کنید

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

برای ایجاد یک پیوند ناوبری پرش عملکرد، باید آن را با استفاده از آن به محتوای اصلی متصل کنید id و href ویژگی های HTML به روش زیر:

1

<a class="skip-main" href="#main">Skip to main content</a>

2

<nav>Navigation</nav>

3

<main id="main" tabindex="-1">Main content</main>

شما همچنین باید اضافه کنید tabindex="-1" به ظرف محتوای اصلی نسبت دهید. این هم همینطور tabindex ما از بالا برای قابل فوکوس کردن دکمه غیر بومی استفاده کرده ایم. این tabindex ویژگی برای تغییر ترتیب ناوبری پیش فرض استفاده می شود. با ارزش 0، عناصر غیرقابل تمرکز را قابل تمرکز می کند. با ارزش -1، همچنین عناصر را قابل تمرکز می کند، اما با پیمایش صفحه کلید پیش فرض غیرقابل دسترس می شوند. برخی از مرورگرها مانند Chrome و IE نیاز به حضور دارند tabindex="-1" در هدف پیوند ناوبری پرش، بنابراین هرگز آن را حذف نکنید.

پیوند پرش به محتوا را فقط برای کاربران صفحه کلید آشکار کنید

می توانید از CSS استفاده کنید تا پیوند ناوبری پرش را فقط برای کاربران صفحه کلید قابل مشاهده کنید. در حالت پیش‌فرض، پیوند را با قرار دادن آن در خارج از viewport از دید کاربران عادی پنهان کنید. سپس، با ایجاد سبک‌های جداگانه برای حالت فوکوس که هنگام ضربه زدن کاربر فعال می‌شود، آن را برای کاربران صفحه‌کلید آشکار کنید. Tab کلید

شما می توانید این اثر را در سایت هایی مانند webaim.org، www.w3.orgو (طبق معمول) www.gov.uk:

CSS زیر یک نسخه ساده شده از کد پیمایش پرش دانشگاه ایالتی NC است کتابچه راهنمای دسترسی به فناوری اطلاعات:

1

a.skip-main {

2

    left: -999px;

3

    position: absolute;

4

    top: auto;

5

    width: 1px;

6

    height: 1px;

7

    overflow: hidden;

8

    z-index: -999;

9

}

10

a.skip-main:focus {

11

    left: auto;

12

    top: auto;

13

    width: 30%;

14

    height: auto;

15

    overflow: auto;

16

    margin: 0 35%;

17

    padding: 5px;

18

    font-size: 20px;

19

    outline: 3px solid red;

20

    text-align: center;

21

    z-index: 999;

22

}

هنگامی که کاربر ضربه می زند Tab کلید، .skip-main به عنصر حالت فوکوس داده می شود و پیوند ناوبری پرش روی صفحه ظاهر می شود.

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

مراحل بعدی

در این مقاله، چند نکته اساسی دسترسی به صفحه کلید را به اشتراک گذاشتم که می توانید با استفاده از HMTL و CSS پیاده سازی کنید. کارهای پیشرفته تری دیگری نیز وجود دارد که می توانید برای دسترسی به صفحه کلید انجام دهید. به عنوان مثال، شما می توانید:

علاوه بر این نکات، از استفاده از CAPTCHA اجتناب کنید در صورت امکان، همانطور که آنها دارند مشکلات جدی دسترسی، هم برای صفحه‌خوان و هم برای کاربرانی که فقط صفحه‌کلید دارند. اگر هنوز نیاز به استفاده از آنها دارید، بیش از دو راه برای حل آنها ارائه دهید، در غیر این صورت کاربرانی که نیاز به دسترسی دارند برای پردازش فرم های شما مشکل دارند. اگر از خودتان نکات دسترسی به صفحه کلید دارید، به ما اطلاع دهید!