diff --git a/.github/labeler.yml b/.github/labeler.yml index fe685be2174..482dfe94192 100644 --- a/.github/labeler.yml +++ b/.github/labeler.yml @@ -1,5 +1,7 @@ accessible-events: - wai-accessible-events +accessibility-principles: + - wai-accessibility-principles accessibility-training: - wai-accessibility-training audiences: diff --git a/.gitmodules b/.gitmodules index 743b10ca93b..42c0c38be02 100755 --- a/.gitmodules +++ b/.gitmodules @@ -10,10 +10,6 @@ path = _external/resources/wai-intro-accessibility url = https://github.com/w3c/wai-intro-accessibility.git branch = gh-pages -[submodule "_external/resources/wai-accessibility-principles"] - path = _external/resources/wai-accessibility-principles - url = https://github.com/w3c/wai-accessibility-principles.git - branch = master [submodule "_external/resources/wai-perspective-videos"] path = _external/resources/wai-perspective-videos url = https://github.com/w3c/wai-perspective-videos.git diff --git a/_external/resources/wai-accessibility-principles b/_external/resources/wai-accessibility-principles deleted file mode 160000 index 6d32c26c756..00000000000 --- a/_external/resources/wai-accessibility-principles +++ /dev/null @@ -1 +0,0 @@ -Subproject commit 6d32c26c7565f33898c84a120cac346043c532cf diff --git a/content-images/accessibility-principles/social.png b/content-images/accessibility-principles/social.png new file mode 100644 index 00000000000..3a8d0b90a51 Binary files /dev/null and b/content-images/accessibility-principles/social.png differ diff --git a/content-images/wai-accessibility-principles b/content-images/wai-accessibility-principles deleted file mode 120000 index 44dd43d7bdc..00000000000 --- a/content-images/wai-accessibility-principles +++ /dev/null @@ -1 +0,0 @@ -../_external/resources/wai-accessibility-principles/content-images/wai-accessibility-principles \ No newline at end of file diff --git a/pages/fundamentals/accessibility-principles/changelog.md b/pages/fundamentals/accessibility-principles/changelog.md new file mode 100644 index 00000000000..7f000f6fcf0 --- /dev/null +++ b/pages/fundamentals/accessibility-principles/changelog.md @@ -0,0 +1,89 @@ +--- +# Do not translate Changelog +title: "Changelog for Accessibility Principles" +title_html: 'Changelog for Accessibility Principles' +nav_title: "Changelog" +lang: en +last_updated: 2024-07-16 + +permalink: /fundamentals/accessibility-principles/changelog/ +ref: /fundamentals/accessibility-principles/changelog/ + +parent: /fundamentals/accessibility-principles/ +github: + label: wai-accessibility-principles +--- + +## July 2024 + +* Updated links to [User Stories](/people-use-web/user-stories/). + +## May 2019 + +* Links to QuickRef updated + +* Added to metadata/frontmatter: + + ``` + teaser_text: The Accessibility Principles page introduces some of the web accessibility requirements for websites, web applications, browsers, and other tools. It provides references to the international standards from W3C Web Accessibility Initiative (WAI) and to stories of web users. + ``` + +* Edit under [Content can be presented in different ways](/fundamentals/accessibility-principles/#adaptable). First list item changed from: + + ``` + * Headings, lists, tables and other structures in the content are marked-up properly + ``` + + to: + + ``` + * Headings, lists, tables, input fields, and content structures are marked-up properly + ``` + +* Edits under [Content is easier to see and hear](/fundamentals/accessibility-principles/#distinguishable). +List item added and changed from: + + ``` + * Text is resizable up to 200% without losing information, using a standard browser; + ``` + + to: + + ``` + * When users resize text up to 400% or change text spacing, no information is lost + * Text reflows in small windows ("viewports") and when users make the text larger + ``` + +* [Heading with seizures](/fundamentals/accessibility-principles/#safe). + + * Heading changed from: + + ``` + Content does not cause seizures + ``` + + to: + + ``` + Content does not cause seizures and physical reactions + ``` + + * Sentence and list added. Was: + + ``` + Content that flashes at certain rates or patterns can cause photosensitive reactions, including seizures. Flashing content is ideally avoided entirely or only used in a way that does not cause known risks. + ``` + + now: + + ``` + Content that flashes at certain rates or patterns can cause photosensitive reactions, including seizures. Flashing content is ideally avoided entirely or only used in a way that does not cause known risks. Also animations and moving content can cause discomfort and physical reactions. + + Examples of avoiding causing seizures and physical reactions: + - Do not include content that flashes at particular rates and patterns + - Warn users before flashing content is presented, and provide alternatives + - Provide mechanisms to switch off animations, unless they are essential + ``` + +* New section added – including heading, paragraphs, list, and 2 subsections: + **[Users can use different input modalities beyond keyboard](/fundamentals/accessibility-principles/#modalities)** diff --git a/pages/fundamentals/accessibility-principles/index.ar.md b/pages/fundamentals/accessibility-principles/index.ar.md new file mode 100644 index 00000000000..6fe89768188 --- /dev/null +++ b/pages/fundamentals/accessibility-principles/index.ar.md @@ -0,0 +1,716 @@ +--- +# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#". +# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:" + +title: مبادئ الوصول +nav_title: "مبادئ الوصول" +lang: ar +last_updated: 2023-12-06 # Put the date of this translation YYYY-MM-DD (with month in the middle) +description: نبذة عن مبادئ متطلبات إمكانية الوصول للويب للمواقع الالكترونية، تطبيقات الويب، المتصفحات وغيرها من الأدوات. + +translators: +- name: "محمد سليم" +contributors: +- name: "محمد الموسوي" +- name: "نايف العوضي" + +github: + label: wai-accessibility-principles + +permalink: /fundamentals/accessibility-principles/ar # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr +ref: /fundamentals/accessibility-principles/ # Do not change this + +image: /content-images/accessibility-principles/social.png + +# In the footer below: +# Do not change the dates +# Do not translate CHANGELOG +# Translate the other words, including "Date:" and "Editors:" +# Translate the Working Group name. Leave the Working Group acronym in English. +footer: > +

التاريخ: تم التحديث في 1 مايو 2019.

+

المحررون: Shadi Abou Zahra. شكر وتقدير .

+

تم تطويره بمساهمة فريق التعليم و التوعية (EOWG). طور سابقا من قبل WAI-AGE فريق, بمساعدةWAI-AGE مشروع.

+--- + +{::nomarkdown} +{% include box.html type="start" h="2" title="ملخص" class="full" %} +{:/} + +يقدم هذا التقرير بعض متطلبات إمكانية الوصول للويب؛ للمواقع، والتطبيقات، ومتصفحات الويب وغيرها من الأدوات. و يوفر أيضاً مراجع للمعايير الدولية من مبادرة W3C لإمكانية الوصول للويب (WAI) و [قصص مستخدمي الويب]( /people-use-web/user-stories/) + +**ملاحظة:** هذه القائمة لاتحتوي على كل متطلبات إمكانية الوصول. + +{::nomarkdown} +{% include box.html type="end" %} +{:/} + +{::options toc_levels="2,3" /} + +{::nomarkdown} +{% include_cached toc.html type="start" title="محتويات الصفحة" class="full" %} +{:/} + +- TOC is created automatically. +{:toc} + +{::nomarkdown} +{% include_cached toc.html type="end" %} +{:/} + + +{% include excol.html type="all" %} + +## متطلبات وصول الويب {#standards} + +إمكانية الوصول للويب تستند على عدة مكونات تعمل جنبًا الى جنب، وهي كالتالي: + +- **محتوى الويب**{:#webcontent} - ويعنى بأي جزء من الموقع الالكتروني، ويشمل ذلك النصوص، الصور، النماذج، الوسائط المتعددة، والكود البرمجي بما في ذلك التطبيقات البرمجية. +- **وكيل الويب**{:#useragents} - وهو تطبيق يستخدمه الناس للوصول الى محتوى شبكة الويب، ويشمل ذلك متصفحات أجهزه سطح المكتب، المتصفحات الصوتية، المتصفحات الخاصة بالهواتف الذكية، مشغلات الوسائط المتعددة، وبعض [التقنيات المساعدة]( /people-use-web/tools-techniques/#at "definition") +- **أدوات التأليف (البرمجة)**{:#authoringtools} - وهي برامج وتطبيقات تمكن الأشخاص من إنشاء محتوى في الويب، ويشمل ذلك محررات الكود البرمجي، أدوات تحويل المستندات، انظمة ادارة المحتوى، المدونات، نصوص قواعد البيانات، وبعض الأدوات الأخرى + +{% include excol.html type="start" %} + +### المزيد عن متطلبات الوصول للويب +{:.no_toc} + +{% include excol.html type="middle" %} + +هذه المكونات مترابطة و تدعم بعضها البعض. على سبيل المثال, **محتوى الويب** يحتاج إلى تضمين بدائل نصية عوضاً عن الصور. هذه المعلومات تحتاج إلى المعالجة من قبل **متصفح الويب** و بعد ذلك تنقل إلى **التكنولوجيا المساعدة**, كمثال قارئ الشاشة. لإنشاء بدائل نصية يحتاج المؤلفين إلى **أدوات تأليف** تدعمهم للقيام بذلك. المزيد من المعلومات متوفرة في [[المكونات الرئيسية للوصول الى الويب]]( /fundamentals/components) + +تلعب المعايير دوراً رئيسياً في تحديد متطلبات إمكانية الوصول للويب لكل مكون من هذه المكونات. بعض متطلبات الوصول سهلة التحقيق، بينما فهم أساسيات كيفية استخدام الأشخاص ذوي الإعاقة للويب يساعد في تنفيذها بشكل أكثر فعالية وكفاءة. تتطلب بعض جوانب إمكانية الوصول مهارات تقنية أو معرفة متقدمة عن كيفية استخدام الأشخاص للويب. في كل الأحوال ، [إشراك المستخدمين مبكراً خلال مشاريع الويب الخاصة بك]( /test-evaluate/involving-users/) سوف يساهم بجعل عملك أفضل وأسهل. + +مبادرة W3C لإمكانية الوصول للويب (WAI) توفر مجموعة من الإرشادات المعترف بها دوليًا كمعيار لإمكانية الوصول إلى الويب وتشمل + +- **[إرشادات الوصول إلى محتوى الويب (WCAG)]( /standards-guidelines/wcag/)** +- **[إرشادات الوصول إلى وكيل الويب (UAAG)]( /standards-guidelines/uaag/)** +- **[إرشادات الوصول إلى أداة التأليف (ATAG)]( /standards-guidelines/atag/)** + +هناك أيضًا مواصفات WAI **[للوصول تطبيقات الإنترنت الغنية (WAI-ARIA) ]( /standards-guidelines/aria/)** التي يمكن الوصول إليها والتي تتضمن محتوى ديناميكي و عناصر تحكم متقدمة في واجهة المستخدم تم تطويرها باستخدام Ajax و JavaScript وتقنيات الويب الأخرى ذات صلة. + +{% include excol.html type="end" %} + +## المعلومات المحسوسة و واجهة المستخدم {#perceivable} + +### بدائل النص للمحتوى الغير نصي {#alternatives} + +بدائل النصوص هي مساوية للمحتوى غير النصي، مثال على ذلك : +- مرادفات الصور القصيرة، ويشمل ذلك الايقونات، والأزرار، والرسومات +- وصف للبيانات على شكل مخططات واشكال توضيحية +- وصف مختصر عن المحتوى غير النصي مثل المحتوى الصوتي والمرئي +- تسميات توضيحية لأدوات التحكم في النماذج مثل المدخلات وبقية مكونات واجهة المستخدم + +بديلات النصوص تعمل كبديل جيد لصورة او وظيفة لإيصال المستخدمين لتجربة مستخدم متوازية، كمثال: بديل نص مناسب لزر البحث سيكون كلمة "*بحث*" عوضاً عن "*عدسة مكبرة". + +بديلات النصوص من الممكن تمثيلها بطرق مختلفة ومتنوعة، كمثال من الممكن ان يتم قراءتها بصوت عالي للأشخاص الذين لا يستطيعون رؤية الشاشة او للأشخاص الذين يعانون من صعوبات بالقراءة، قد يشمل ذلك أحجام معدلة للنصوص، او اظهار نصوص مكتوبة على أجهزة برايل . بديلات النصوص تعمل كأدوات بديلة عن ازرار التحكم لتسهيل استخدام لوحة المفاتيح، او الوصول باستخدام الأوامر الصوتية. من الممكن كذلك ان تعمل على التعرف على الأصوات (Speech input) او الملفات المرئية او اي صيغة من الملفات المستخدمة في الحاسوب، كالبرامج والتطبيقات البرمجية التي تعد جزءً من المواقع الالكترونية. + +{% include excol.html type="start" %} + +#### متطلبات الوصول المتعلقة بـ بدائل النصوص(روابط للوصف التقني) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [إرشادات – 1.1 بدائل النص]( https://www.w3.org/WAI/WCAG22/quickref/#text-alternatives) + + +**UAAG** + +- [إرشادات – 1.1 محتوى البديل]( https://www.w3.org/TR/UAAG20/#gl-access-alternative-content) + + +**ATAG** + +- [المبدأ أ.1: أدوات إنشاء واجهة المستخدم تتبع إرشادات وصول قابلة للتطبيق]( https://www.w3.org/TR/ATAG20/#principle_a1) +- [المبدأ أ.1.2: (أدوات إنشاء واجهة المستخدم) القيام بإتاحة المحتوى البديل للمؤلفين]( https://www.w3.org/TR/ATAG20/#gl_a21) +- [المبدأ أ.2.2: (أدوات إنشاء واجهة المستخدم) التأكد من إمكانية تحديد طريقة عرض التحرير بطريقة برمجية]( https://www.w3.org/TR/ATAG20/#gl_a22) +- [المبدأ أ.7.3: (أدوات إنشاء واجهة المستخدم) التأكد من أن طرق العرض يمكن الوصول إليها مثل وكلاء الويب المستخدمين]( https://www.w3.org/TR/ATAG20/#gl_b37) +- [الجزء ب. دعم إنتاج محتوى قابل للوصول]( https://www.w3.org/TR/ATAG20/#part_b) + + +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + +#### قصص ذات صلة ببدائل النصوص +{:#stories-related-to-text-alternatives.no_toc} + +{% include excol.html type="middle" %} + +- [أليكس، مراسل مصاب بالضغط النفسي المتكرر](/people-use-web/user-stories/#reporter) +- [مارتين، طالب عبر الإنترنت يعاني من ضعف السمع](people-use-web/user-stories/#onlinestudent/) +- [ليا، موظف أول كفيف](people-use-web/user-stories/#accountant/) +- [برييتي، طالب في المرحلة الإعدادية يعاني من اضطراب فرط الحركة وتشتت الانتباه وعسر القراءة](people-use-web/user-stories/#classroomstudent/) +- [ين، متقاعد مع ضعف البصر ورعاش اليد وفقدان خفيف للذاكرة على المدى القصير](people-use-web/user-stories/#retiree/) +- [قاسم، مراهق أصم و كفيف](people-use-web/user-stories/#teenager/) + +{% include excol.html type="end" %} + +### التسميات التوضيحية و البدائل الأخرى للوسائط المتعددة {#captions} + +بعض الأمثلة على الاشخاص الذين لا يستطيعون سماع الأصوات او رؤية الملفات المرئية في حاجة الى بدائل: + +- نصوص سردية او تسميات توضيحية للمحتوى الصوتي، مثال: تسجيلات مقابلات الراديو +- وصف توضيحي للأصوات، والتي تروي وصف التفاصيل المهمة بطريقة مرئية في مقطع مرئي +- لغة اشارة مرافقة للمحتوى الصوتي، بما في ذلك أي من الأدوات المساعدة لفهم الأصوات + +المحتوى النصي المكتوب بعناية والذي يحتوي على تسلسل من أي معلومات بديلة للأصوات أو مرئيات يساهم بشكل كبير في توفير وصول أساسي للمعلومة و يسهل إنتاج التسميات التوضيحية للمحتوى الصوتي. + +{% include excol.html type="start" %} + +#### متطلبات الوصول المتعلقة بـ الوسائط المتعددة (روابط للوصف التقني) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [إرشادات 2.1 – الوسائط المؤقتة](https://www.w3.org/WAI/WCAG22/quickref/#time-based-media) + +**UAAG** + + - [إرشادات 1.1 – المحتوى البديل]( https://www.w3.org/TR/UAAG20/#gl-access-alternative-content) +**ATAG** + +- [المبدآ أ.1: أدوات إنشاء واجهة مستخدم تتبع إرشادات وصول قابلة للتطبيق](https://www.w3.org/TR/ATAG20/#principle_a1) +- [إرشادات أ.1.2: (أدوات إنشاء واجهة المستخدم) القيام بإتاحة المحتوى البديل للمؤلفين](https://www.w3.org/TR/ATAG20/#gl_a21) +- [إرشادات أ.7.3: (أدوات إنشاء واجهة المستخدم) التأكد من أن المعاينات يمكن الوصول إليها مثل وكلاء المستخدم في السوق](https://www.w3.org/TR/ATAG20/#gl_a37) +- [الجزء ب. دعم إنتاج محتوى قابل للوصول](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %} +{% include excol.html type="start" %} + +#### قصص متعلقة بالوسائط المتعددة {#stories-related-to-multimedia} +{:.no_toc} + +{% include excol.html type="middle" %} + +- [مارتين، الب عبر الإنترنت يعاني من ضعف السمع](/people-use-web/user-stories/#onlinestudent) +- [ليا، موظف أول كفيف](/people-use-web/user-stories/#accountant) +- [قاسم، مراهق أصم و كفيف](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### محتويات يمكن تقديمها بطرق مختلف {#adaptable} + +لكي يتمكن المستخدمون من تغيير طريقة عرض المحتوى ، من الضروري أن: + +- يتم تمييز العناوين والقوائم والجداول وحقول الإدخال وهياكل المحتوى بشكل صحيح +- تسلسل المعلومات أو التعليمات مستقلة عن أي عرض تقديمي +- توفر المستعرضات والتقنيات المساعدة إعدادات لتخصيص العرض التقديمي + +تلبية هذه المتطلبات يسمح بقراءة المحتوى بشكل صحيح و بصوت عالٍ و واضح و تكييف الصوت تلبية احتياجات وتفضيلات مختلف الأشخاص. على سبيل المثال ، يمكن تقديم المحتوى باستخدام مجموعات ألوان مخصصة ، أو حجم النص ، أو أي تصميم آخر لتسهيل القراءة. يسهل هذا المتطلب أيضًا تقديم أشكالًا أخرى من التكيف ، بما في ذلك الإنشاء التلقائي لمخططات الصفحات والملخصات لمساعدة الأشخاص في الحصول على نظرة عامة والتركيز على أجزاء معينة بسهولة أكبر. + +{% include excol.html type="start" %} + +#### متطلبات الوصول المتعلقة بالتكيف (روابط للوصف التقني) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [إرشادات 3.1 - التكييف]( https://www.w3.org/WAI/WCAG22/quickref/#adaptable) + +**UAAG** + +- [إرشادات 4.1 – تكوين النص](https://www.w3.org/TR/UAAG20/#gl-text-config) +- [إرشادات 5.1 – تكوين النص](https://www.w3.org/TR/UAAG20/#gl-volume-config) +- [إرشادات 6.1 – تكوين النص](https://www.w3.org/TR/UAAG20/#gl-speech-config) +- [إرشادات 7.1 – تكوين النص](https://www.w3.org/TR/UAAG20/#gl-style-sheets-config) +- [إرشادات 9.1 – تكوين النص](https://www.w3.org/TR/UAAG20/#gl-alternative-views) +- [إرشادات 10.1 – تكوين النص](https://www.w3.org/TR/UAAG20/#gl-info-link) + +**ATAG** + +- [المبدأ أ.1: إدوات](https://www.w3.org/TR/ATAG20/#principle_a1) +- [إرشادات أ.2.2: (أدوات إنشاء واجهة المستخدم) التأكد من إمكانية تحديد عرض التحرير بطريقة برمجية](https://www.w3.org/TR/ATAG20/#gl_a22) +- [إرشادات أ.7.3: (أدوات إنشاء واجهة المستخدم) التأكد من أن المعاينات يمكن الوصول إليها مثل وكلاء المستخدم في السوق](https://www.w3.org/TR/ATAG20/#gl_b37) +- [الجزء ب. دعم إنتاج محتوى قابل للوصول](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### قصص ذات علاقة بالتكيف +{:.no_toc} + +{% include excol.html type="middle" %} + +- [ليي، متسوق عبر الإنترنت يعاني من عمى الألوان](/people-use-web/user-stories/#shopper) +- [أليكس، مراسل مصاب بالضغط النفسي المتكرر](/people-use-web/user-stories/#reporter) +- [ليا، موظف أول كفيف](/people-use-web/user-stories/#accountant) +- [برييتي، طالب في المرحلة الإعدادية يعاني من اضطراب فرط الحركة وتشتت الانتباه وعسر القراءة](/people-use-web/user-stories/#classroomstudent) +- [ين، متقاعد مع ضعف البصر ورعاش اليد وفقدان خفيف للذاكرة على المدى القصير](/people-use-web/user-stories/#retiree) +- [لويس، مساعد سوبر ماركت مصاب بمتلازمة داون](/people-use-web/user-stories/#supermarketassistant) +- [قاسم، مراهق أصم و كفيف](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### المحتوى يكون أسهل عند الرؤية والسمع {#distinguishable} + +المحتوى المميز يسهل رؤيته وسماعه. يتضمن هذا النوع من المحتوى الآتي: +- عدم استخدام اللون كطريقة وحيدة لنقل المعلومات أو تحديد المحتوى +- أن توفر مجموعات ألوان المقدمة والخلفية الافتراضية تباينًا كافيًا +- عدم فقد للمعلومات عندما يقوم المستخدمين بتغيير حجم النص حتى اربعة أضعاف أو تغيير تباعد النص +- يعاد تدفق النص في النوافذ الصغيرة ("إطارات العرض") وعندما يكبر المستخدمون النص +- يمكن تغيير حجم صور النص أو استبدالها بنص حقيقي أو تجنبها عند الإمكان +- يمكن للمستخدمين إيقاف أو ضبط مستوى الصوت الذي يتم تشغيله على موقع ويب +- صوت الخلفية يكون منخفض أو يمكن إيقاف تشغيله لتجنب التداخل أو التشتيت + +تساعد تلبية هذه المتطلبات في فصل المقدمة عن الخلفية وذلك لجعل المعلومات المهمة أكثر تميزًا. يتضمن ذلك الاخذ في عين الاعتبار الأشخاص الذين لا يستخدمون التقنيات المساعدة والأشخاص الذين يستخدمونها في التداخل من المحتوى الصوتي أو المرئي البارز في الخلفية. على سبيل المثال، العديد من الأشخاص المصابين بعمى الألوان لا يستخدمون أي أدوات معينة ويعتمدون على تصميم مناسب يوفر تباينًا كافيًا في اللون بين النص والخلفية المحيطة به. بالنسبة للأشخاص الآخرين، قد يتداخل الصوت الذي يتم تشغيله تلقائيًا مع تحويل النص إلى كلام أو مع [أجهزة الاستماع المساعدة (ALDs)](/teach-advocate/accessible-presentations/#ald "definition") + +{% include excol.html type="start" %} + +#### متطلبات الوصول المتعلقة بالتمييز (روابط للوصف التقني) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + + - [إرشادات 4.1: التمييز]( https://www.w3.org/WAI/WCAG22/quickref/#distinguishable) + +**UAAG** + +- [إرشادات 3.1: التمييز]( https://www.w3.org/WAI/WCAG22/quickref/#gl-interaction-highlight) +- [إرشادات 4.1: تكوين النص]( https://www.w3.org/WAI/WCAG22/quickref/#gl-text-config) +- [إرشادات 5.1: تكوين الصوت]( https://www.w3.org/WAI/WCAG22/quickref/#gl-volume-config) +- [إرشادات 6.1: تكوين الكلام المركب]( https://www.w3.org/WAI/WCAG22/quickref/#gl-speech-config) +- [إرشادات 7.1: تكوين ورقة أنماط المستخدم]( https://www.w3.org/WAI/WCAG22/quickref/#gl-style-sheets-config) +- [إرشادات 8.1: الاتجاه في منافذ العرض]( https://www.w3.org/WAI/WCAG22/quickref/#gl-viewport-orient) +- [إرشادات 9.1: الآراء البديلة]( https://www.w3.org/WAI/WCAG22/quickref/#gl-alternative-views) +- [إرشادات 10.1: معلومات العناصر]( https://www.w3.org/WAI/WCAG22/quickref/#gl-info-link) + +**ATAG** + +- [المبدأ أ.1: أدوات إنشاء واجهة المستخدم تتبع إرشادات وصول قابلة للتطبيق](https://www.w3.org/TR/ATAG20/#principle_a1) +- [إرشادات أ.7.3: (بالنسبة لأدوات إنشاء واجهة المستخدم) التأكد من أن المعاينات يمكن الوصول إليها مثل وكلاء المستخدم في السوق](https://www.w3.org/TR/ATAG20/#gl_b37) +- [الجزء ب. دعم إنتاج محتوى قابل للوصول](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### قصص ذات علاقة بالتمييز +{:.no_toc} + +{% include excol.html type="middle" %} + +- [ليي، متسوق عبر الإنترنت يعاني من عمى الألوان]( /people-use-web/user-stories/#shopper) +- [ليا، موظف أول كفيف]( /people-use-web/user-stories/#onlinestudent) +- [مارتين، طالب أون لاين يعاني من صعوبات بالسمع]( /people-use-web/user-stories/#accountant) +- [ين، متقاعد مع ضعف البصر ورعاش اليد وفقدان خفيف للذاكرة على المدى القصير]( /people-use-web/user-stories/#retiree) +- [قاسم، مراهق أصم و كفيف]( /people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +## واجهة مستخدم قابلة للتشغيل والتنقل {#operable} + +### إتاحة الوظائف من خلال لوحة المفاتيح {#keyboard} + +العديد من الأشخاص لا يستخدمون الفأرة ويعتمدون على لوحة المفاتيح للتفاعل مع الويب. يتطلب ذلك الوصول إلى لوحة المفاتيح لجميع الوظائف، بما في ذلك نماذج التحكم، المدخلات، ومكونات واجهة المستخدم الأخرى. + +تشمل إمكانية الوصول إلى لوحة المفاتيح ما يلي: +- جميع الوظائف المتوفرة عن طريق الفأرة تتوفر أيضاً عن طريق لوحة المفاتيح +- لا ينحصر تركيز لوحة المفاتيح في أي جزء من المحتوى +- توفر مستعرضات الويب، أدوات الإنشاء، والأدوات الأخرى دعمًا للوحة المفاتيح + +يساعد تلبية هذه المتطلبات مستخدمي لوحة المفاتيح، بما في ذلك الأشخاص الذين يستخدمون لوحات مفاتيح بديلة مثل لوحات المفاتيح ذات التخطيطات المريحة، لوحات المفاتيح على الشاشة، أو أجهزة السويتش. كما أنه يساعد الأشخاص الذين يستخدمون التعرف على الصوت (مدخلات الكلام) لتشغيل مواقع الويب وإملاء النص من خلال واجهة لوحة المفاتيح. + +{% include excol.html type="start" %} + +### متطلبات الوصول المتعلقة بلوحة المفاتيح (روابط للوصف التقني) + +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + + - [إرشادات 1.2: لوحة مفاتيح متاحة للوصول]( https://www.w3.org/WAI/WCAG22/quickref/#keyboard-accessible) + +**UAAG** + +- [إرشادات 1.2: لوحة مفاتيح متاحة للوصول]( https://www.w3.org/TR/UAAG20/#gl-keyboard-access) +- [إرشادات 2.2: لوحة مفاتيح متاحة للوصول]( https://www.w3.org/TR/UAAG20/#gl-sequential-navigation) +- [إرشادات 3.2: لوحة مفاتيح متاحة للوصول]( https://www.w3.org/TR/UAAG20/#gl-direct-navigation-and-activation) +- [إرشادات 11.2: لوحة مفاتيح متاحة للوصول]( https://www.w3.org/TR/UAAG20/#gl-other-devices) + +**ATAG** + +- [المبدأ أ.1: أدوات إنشاء واجهة المستخدم تتبع إرشادات وصول قابلة للتطبيق]( https://www.w3.org/TR/ATAG20/#principle_a1) +- [إرشادات أ.1.3: (لأدوات إنشاء واجهة المستخدم) توفير الوصول للوحة المفاتيح لخصائص الإنشاء]( https://www.w3.org/TR/ATAG20/#gl_a31) +- [الجزء ب. دعم إنتاج محتوى قابل للوصول]( https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### قصص ذات علاقة بالوصول للوحة المفاتيح +{:.no_toc} + +{% include excol.html type="middle" %} + +- [أليكس, مراسل مصاب بالضغط النفسي المتكرر]( /people-use-web/user-stories/#reporter) +- [ليا, موظف أول كفيف]( /people-use-web/user-stories/#accountant) + +{% include excol.html type="end" %} + +### وقت المستخدمين الكافي لقراءة المحتوى واستخدامه {#time} + +يحتاج بعض الأشخاص إلى وقت أطول من غيرهم لقراءة المحتوى واستخدامه. على سبيل المثال ، يحتاج بعض الأشخاص إلى مزيد من الوقت لكتابة نص، فهم الإرشادات، تشغيل عناصر التحكم ،أو لإكمال المهام على موقع ويب. + +أمثلة على توفير الوقت الكافي لهؤلاء الأشخاص: + +- وقف، تمديد، تعديل الحدود الزمنية ، إلا عند الضرورة +- إيقاف، تعليق، إخفاء، التنقل، أو تمرير المحتوى +- تأجيل أو توقيف أي محتوى قد يسبب انقطاع تجربة المستخدم، إلا عند الضرورة +- إعادة التوثيق عند انتهاء الجلسة دون فقد البيانات + +{% include excol.html type="start" %} + +#### متطلبات الوصول المتعلقة بالوقت الكافي (روابط للوصف التقني) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [إرشادات 2.2 – وقت كافي]( https://www.w3.org/WAI/WCAG22/quickref/#enough-time) + +**UAAG** + +- [إرشادات 2.2 – تفاعل مستقل عن الوقت]( https://www.w3.org/TR/UAAG20/#gl-time-independent) +- [إرشادات 2.2 – الوقت المتعلق بالوسائط]( https://www.w3.org/TR/UAAG20/#gl-control-inaccessible-content) + +**ATAG** + +- [المبدأ أ.1: أدوات إنشاء واجهة المستخدم تتبع إرشادات وصول قابلة للتطبيق]( https://www.w3.org/TR/ATAG20/#principle_a1) +- [إرشادات أ.3.2: ( لأدوات إنشاء واجهة المستخدم) توفير الوقت الكافي للمؤلفين]( https://www.w3.org/TR/ATAG20/#gl_a32) +- [الجزء ب. دعم إنتاج محتوى قابل للوصول]( https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### قصص ذات علاقة بالوقت الكافي +{:.no_toc} + +{% include excol.html type="middle" %} + +- [أليكس, مراسل مصاب بالضغط النفسي المتكرر](/people-use-web/user-stories/#reporter) +- [برييتي, طالب في المرحلة الإعدادية يعاني من اضطراب فرط الحركة وتشتت الانتباه وعسر القراءة](/people-use-web/user-stories/#classroomstudent) +- [ين, متقاعد مع ضعف البصر ورعاش اليد وفقدان خفيف للذاكرة على المدى القصير](/people-use-web/user-stories/#retiree) +- [لويس ، مساعد سوبر ماركت مصاب بمتلازمة داون](/people-use-web/user-stories/#supermarketassistant) +- [قاسم,مراهق أصم و كفيف](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### المحتوى لا يسبب أي نوبات وردود فعل جسدية {#safe} + +يمكن أن يتسبب المحتوى الذي يومض بمعدلات أو أنماط معينة في ردات فعل حساسة للضوء، و نوبات. يتم تجنب المحتوى الوامض كليًا أو استخدامه فقط بطريقة لا تسبب مخاطر معروفة. كما يمكن أن تسبب الرسوم المتحركة والمحتوى المتحرك إزعاجًا وردود أفعال جسدية. + +بعض الأمثلة لتجنب التسبب في نوبات او ردات فعل جسدية: + +- لا تقم بتضمين محتوى يومض بمعدلات وأنماط معينة +- تحذير المستخدمين قبل عرض المحتوى الوامض، وتقديم البدائل +- توفير آليات لإيقاف تشغيل الرسوم المتحركة ما لم تكن ضرورية + +{% include excol.html type="start" %} + +#### متطلبات الوصول المتعلقة بالنوبات (روابط للوصف التقني) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [إرشادات 3.2 - النوبات]( https://www.w3.org/WAI/WCAG22/quickref/#seizures-and-physical-reactions) + +**UAAG** + +- [إرشادات 9.2 - الومضات]( https://www.w3.org/TR/UAAG20/#gl-prevent-flash) + +**ATAG** + +- [المبدأ أ.1: أدوات إنشاء واجهة المستخدم تتبع إرشادات وصول قابلة للتطبيق]( https://www.w3.org/TR/ATAG20/#principle_a1) +- [إرشادات أ.3.3: (لأدوات إنشاء واجهة المستخدم) مساعدة المؤلفين بتجنب الومضات التي قد تسبب نوبات]( https://www.w3.org/TR/ATAG20/#gl_a33) +- [الجزء ب. دعم إنتاج محتوى قابل للوصول]( https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %} + +### إمكانية المستخدم للتنقل بسهولة ، العثور على المحتويات ، وتحديد أماكنهم {#navigable} + +المحتوى المنظم بشكل جيد يمكّن المستخدمين من استخدام الموقع والتنقل فيه على نحو فعال: + +- تحتوي الصفحات على عناوين واضحة ويتم تنظيمها باستخدام عناوين وصفية للأقسام +- يجب أن يكون هناك أكثر من طريقة للعثور على الصفحات ذات الصلة ضمن مجموعة من صفحات الويب +- يستطيع المستخدمين معرفة رقم الصفحة التي يتصفحونها حاليا ضمن نطاق محدد من الصفحات +- توفر طرق لتجاوز مجموعات المحتوى التي تتكرر على صفحات متعددة +- يكون تركيز لوحة المفاتيح مرئيًا، ويتبع ترتيب التركيز تسلسلًا ذا مغزى +- اي روابط يتم عرضها يكون الهدف منها وما تؤدي إليه واضحًا + +يساعد تلبية هذه المتطلبات الأشخاص على التنقل عبر صفحات الويب بطرق مختلفة، اعتمادًا على احتياجاتهم وتفضيلاتهم الخاصة. على سبيل المثال؛ بينما يعتمد بعض الأشخاص على هياكل التنقل الهرمية مثل أشرطة القوائم للعثور على صفحات ويب معينة، يعتمد الآخرون على وظائف البحث على مواقع الويب بدلاً من ذلك. بعض الأشخاص يرون المحتوى بينما البعض الآخرون قد يسمعونه أو يرونه ويسمعونه في نفس الوقت. قد يستخدم بعض الأشخاص المحتوى باستخدام الفأرة أو لوحة المفاتيح فقط ، بينما الآخرون قد يستخدمون كليهما. + +{% include excol.html type="start" %} + +#### متطلبات الوصول المتعلقة بالتنقل (روابط للوصف التقني) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + + - [إرشادات4.2: قابلية التنقل]( https://www.w3.org/WAI/WCAG22/quickref/#navigable) + +**UAAG** + +- [إرشادات 2.2: التنقل المتسلسل]( https://www.w3.org/TR/UAAG20/#gl-sequential-navigation) +- [إرشادات 3.2: التنقل والتفعيل المباشر]( https://www.w3.org/TR/UAAG20/#gl-direct-navigation-and-activation) +- [إرشادات 4.2: البحث النصي]( https://www.w3.org/TR/UAAG20/#gl-search-text) +- [إرشادات 5.2: التنقل الهيكلي]( https://www.w3.org/TR/UAAG20/#gl-nav-structure) +- [إرشادات 7.2: الضوابط الرسومية]( https://www.w3.org/TR/UAAG20/#gl-configure-controls) + +**ATAG** + +- [المبدأ أ.1: أدوات إنشاء واجهة المستخدم تتبع إرشادات وصول قابلة للتطبيق]( https://www.w3.org/TR/ATAG20/#principle_a1) +- [المبدأ أ.1.2: (أدوات إنشاء واجهة المستخدم) القيام بإتاحة المحتوى البديل للمؤلفين]( https://www.w3.org/TR/ATAG20/#gl_a21) +- [المبدأ أ.2.2: (أدوات إنشاء واجهة المستخدم) التأكد من إمكانية تحديد طريقة عرض التحرير بطريقة برمجية]( https://www.w3.org/TR/ATAG20/#gl_a22) +- [المبدأ أ.7.3: (أدوات إنشاء واجهة المستخدم) التأكد من أن طرق العرض يمكن الوصول إليها مثل وكلاء الويب المستخدمين]( https://www.w3.org/TR/ATAG20/#gl_b37) +- [الجزء ب. دعم إنتاج محتوى قابل للوصول]( https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### قصص ذات علاقة بالتنقل +{:.no_toc} + +{% include excol.html type="middle" %} + +- [أليكس, مراسل مصاب بالضغط النفسي المتكرر](/people-use-web/user-stories/#reporter) +- [ليا, موظف أول كفيف](/people-use-web/user-stories/#accountant) +- [برييتي, طالب في المرحلة الإعدادية يعاني من اضطراب فرط الحركة وتشتت الانتباه وعسر القراءة](/people-use-web/user-stories/#classroomstudent) +- [ين, متقاعد مع ضعف البصر ورعاش اليد وفقدان خفيف للذاكرة على المدى القصير](/people-use-web/user-stories/#retiree) +- [لويس ، مساعد سوبر ماركت مصاب بمتلازمة داون](/people-use-web/user-stories/#supermarketassistant) +- [قاسم,مراهق أصم و كفيف](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### إمكانية المستخدمين لاستخدام مختلف أساليب الإدخال غير لوحة المفاتيح {#modalities} + +انماط الإدخال المختلفة عن لوحة المفاتيح، مثل اللمس، أو الأوامر الصوتية والإيماءات تجعل من المحتوى سهل التعامل لكثير من الأشخاص، بنفس الوقت لا يمكن للجميع أن يستخدم كل هذه الأنماط بنفس الدرجة، هناك بعض الاعتبارات بالتصميم تمكن من اظهار هذه الأنماط بشكل يساعد على الاستفادة القصوى منها، كالتالي: + +- بعض الإيماءات التي تتطلب براعة بالحركة يجب أن تستبدل بإيماءات تكون أقل تعقيدًا +- مكونات مصممة لتفادي الضغط عليها بشكل غير متعمد، توفير خاصية التراجع كمثال +- المسميات التي تظهر للمستخدم من المهم أن تتوافق مع أسماء الكائنات البرمجية، لدعم استخدامها عبر الأوامر الصوتية +- الوظائف والأوامر التي يتم تفعيلها عبر الحركة من الممكن كذلك أن يتم تفعيلها عبر واجهة المستخدم +- الأزرار، روابط الويب وغيرها من المكونات من اللازم أن يتم إظهارها بحجم مناسب للتعرف عليها واستخدامها عبر اللمس + +الإيفاء بهذه المتطلبات يجعل من المحتوى سهل الاستعمال من قبل كثير من الناس ممن يملكون قدرات مختلفة باستخدام عدد كبير من الأجهزة المختلفة، هذا المحتوى من الممكن تصفحه من خلال أجهزة الهواتف الذكية والأجهزة اللوحية وأجهزة الخدمة الذاتية + +{% include excol.html type="start" id="" %} + +#### متطلبات الوصول المتعلقة بأنماط المدخلات (روابط للوصف التقني) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [إرشادات 5.2 – أنماط المدخلات]( https://www.w3.org/WAI/WCAG22/quickref/#input-modalities) + +{% include excol.html type="end" %}{% include excol.html type="start" id="" %} + +#### قصص متعلقة بأنماط المدخلات +{:.no_toc} + +{% include excol.html type="middle" %} + +- [أليكس, مراسل مصاب بالضغط النفسي المتكرر](/people-use-web/user-stories/#reporter) +- [ين, متقاعد مع ضعف البصر ورعاش اليد وفقدان خفيف للذاكرة على المدى القصير](/people-use-web/user-stories/#retiree) +- [لويس ، مساعد سوبر ماركت مصاب بمتلازمة داون](/people-use-web/user-stories/#supermarketassistant) + +{% include excol.html type="end" %} + +## المعلومات المفهومة و واجهة المستخدم {#understandable} + +### أن يكون النص قابل للقراءة والفهم {#readable} + +صانعوا المحتوى يحتاجون إلى التأكد من أن محتواهم قابل للقراءة والفهم لجميع الفئات الممكنة، يشمل ذلك أن يكون قابل للقراءة من خلال خاصية التحويل من نص-الى-صوت، مثل هذا المحتوى يشمل: + +- التعرف على اللغة الأساسية الخاصة بصفحة الويب، مثل العربية، الألمانية، والكورية +- التعرف على لغة المقاطع النصية، العبارات، والأجزاء الأخرى من صفحة الويب +- توفير تعريفات لأي كلمات او عبارات او وصف، او اختصارات غير شائعة +- استخدام ابسط واوضح لغة ممكنة + +الإيفاء بهذه المتطلبات يساعد البرامج والتطبيقات بما فيها التقنيات المساعدة على معالجة المحتوى النصي بشكل صحيح، على سبيل المثال، هذه المتطلبات تساعد التطبيقات على قراءة المحتوى بصوت عالي، وبناء ملخصات للصفحات و توفير تعريفات بالكلمات الغير شائعة مثل المصطلحات التقنية، كذلك تساعد الأشخاص الذين يواجهون مشاكل في فهم العبارات و الجمل والمفردات المعقدة، خاصة الأشخاص الذين يملكون انواع مختلفة من الإعاقات الإدراكية. + +{% include excol.html type="start" %} + +#### متطلبات الوصول المتعلقة بقابلية القراءة (روابط للوصف التقني) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [إرشادات 1.3 – قابل للقراءة]( https://www.w3.org/WAI/WCAG22/quickref/#readable) + +**ATAG** + +- [المبدأ أ.1: أدوات إنشاء واجهة المستخدم تتبع إرشادات وصول قابلة للتطبيق]( https://www.w3.org/TR/ATAG20/#principle_a1) +- [إرشادات.أ2.4: (لأدوات إنشاء واجهة المستخدم) بتوثيق واجهة المستخدم ، بما في ذلك جميع ميزات إمكانية الوصول]( https://www.w3.org/TR/ATAG20/#gl_b42) +- [الجزء ب. دعم إنتاج محتوى قابل للوصول]( https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### قصص ذات صلة بقابلية القراءة +{:.no_toc} + +{% include excol.html type="middle" %} + +- [مارتين, طالب أون لاين يعاني من صعوبات بالسمع]( /people-use-web/user-stories/#onlinestudent) +- [ليا, موظف أول كفيف](/people-use-web/user-stories/#accountant) +- [برييتي, طالب في المرحلة الإعدادية يعاني من اضطراب فرط الحركة وتشتت الانتباه وعسر القراءة](/people-use-web/user-stories/#classroomstudent) +- [ين, متقاعد مع ضعف البصر ورعاش اليد وفقدان خفيف للذاكرة على المدى القصير](/people-use-web/user-stories/#retiree) +- [لويس ، مساعد سوبر ماركت مصاب بمتلازمة داون](/people-use-web/user-stories/#supermarketassistant) + +{% include excol.html type="end" %} + +### أن يظهر و يعمل المحتوى بطريقة يمكن توقعها {#predictable} + +الكثير من الأشخاص يستندون على واجهات المستخدم المتوقعة، والتي تكون احيانًا مشوشة او غير واضحة في مظهرها او طريقة عملها، هنا بعض الأمثلة لإنشاء محتوى قابل للتوقع والاستخدام: + +- آليه التنقل بين الصفحات مكرره على عدة صفحات وتظهر في نفس المكان كل مره +- مكونات واجهة المستخدم التي تظهر بشكل متكرر تحمل نفس المسميات كل مرة +- أي تعديل على الصفحة او محتوياتها لا يتم دون وعي من المستخدم + +الإيفاء بهذه المتطلبات يساعد الأشخاص على التعود بشكل سريع على أساليب التنقل الموجودة في الموقع. واستخدامهم بالطريقة التي تلائم احتياجاتهم، على سبيل المثال: بعض الأشخاص يقومون بتخصيص بعض ازرار لوحة المفاتيح لبعض الوظائف التي يقومون بها بشكل دوري لزيادة فاعلية التنقل من خلال لوحة المفاتيح، البعض الآخر يتذكر الخطوات للوصول لصفحات محددة او لإكمال عملية محددة في موقع الويب، جميعهم يستندون على العمليات المكررة والثابته. + +{% include excol.html type="start" %} + +#### متطلبات الوصول المتعلقة بالتوقعات (روابط للوصف التقني) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [إرشادات 2.3 – التوقع]( https://www.w3.org/WAI/WCAG22/quickref/#predictable) + +**UAAG** + +- [إرشادات 3.3 – التنبؤ]( https://www.w3.org/TR/UAAG20/#gl-predictable-operation) + +**ATAG** + +- [المبدأ أ.1: أدوات إنشاء واجهة المستخدم تتبع إرشادات وصول قابلة للتطبيق]( https://www.w3.org/TR/ATAG20/#principle_a1) +- [المبدأ أ.2.2: (أدوات إنشاء واجهة المستخدم) التأكد من إمكانية تحديد طريقة عرض التحرير بطريقة برمجية]( https://www.w3.org/TR/ATAG20/#gl_a22) +- [المبدأ أ.2.4: (أدوات إنشاء واجهة المستخدم) التأكد من أن طرق العرض يمكن الوصول إليها مثل وكلاء الويب المستخدمين]( https://www.w3.org/TR/ATAG20/#gl_b37) +- [الجزء ب. دعم إنتاج محتوى قابل للوصول]( https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### قصص ذات صلة بالتنبؤ +{:.no_toc} + +{% include excol.html type="middle" %} + +- [أليكس, مراسل مصاب بالضغط النفسي المتكرر](/people-use-web/user-stories/#reporter) +- [ليا, موظف أول كفيف](/people-use-web/user-stories/#accountant) +- [برييتي, طالب في المرحلة الإعدادية يعاني من اضطراب فرط الحركة وتشتت الانتباه وعسر القراءة](/people-use-web/user-stories/#classroomstudent) +- [ين, متقاعد مع ضعف البصر ورعاش اليد وفقدان خفيف للذاكرة على المدى القصير](/people-use-web/user-stories/#retiree) +- [لويس ، مساعد سوبر ماركت مصاب بمتلازمة داون](/people-use-web/user-stories/#supermarketassistant) +- [قاسم,مراهق أصم و كفيف](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### مساعدة المستخدمين على تلافي اخطائهم وتصحيحه {#tolerant} + + النماذج وغيرها من أنماط التفاعل من الممكن ان تكون غير واضحة و صعبة الاستخدام لكثير من الأشخاص، ونتيجة لذلك يصبح الاشخاص اكثر عرضة لارتكاب الأخطاء أثناء استخدام مواقع الويب، بالتالي بعض الأمثلة لمساعدة المستخدمين على تجاوز وتصحيح هذه الأخطاء: + +- تعليمات وصفية، رسائل خطأ، و اقتراحات تصحيحية +- توفير نقاط مساعدة حسب الموضوع للعمليات او التفاعلات المعقدة +- فرصة لمراجعة، تصحيح، او استرجاع المدخلات عند الضرورة + +الإيفاء بهذه المتطلبات يساعد الأشخاص الذين لا يستطيعون رؤية أو سماع المحتوى، ومن الممكن ان لا يتعرفون على بعض العلاقات او التسلسلات المحددة او أي دلالات اخرى، كذلك يساعد الاشخاص الذين يواجهون صعوبات في فهم العمليات، من الذين يعانون من الارتباك، والتشويش، او النسيان، او يرتكبون اخطاء عند استخدام النماذج او اي تفاعل مع الموقع لأي سبب اخر. + +{% include excol.html type="start" %} + +#### متطلبات الوصول المتعلقة بمساعدة المدخلات (روابط للوصف التقني) (links to technical specification) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + - [إرشادات 3.3: مساعدة المدخلات]( https://www.w3.org/WAI/WCAG22/quickref/#input-assistance) + +**UAAG** + +- [إرشادات 1.3: الأخطاء]( https://www.w3.org/TR/UAAG20/#gl-avoid-mistakes) + +**ATAG** + +- [المبدأ أ.1: أدوات إنشاء واجهة المستخدم تتبع إرشادات وصول قابلة للتطبيق]( https://www.w3.org/TR/ATAG20/#principle_a1) +- [المبدأ أ.2.2: (أدوات إنشاء واجهة المستخدم) التأكد من إمكانية تحديد طريقة عرض التحرير بطريقة برمجية]( https://www.w3.org/TR/ATAG20/#gl_a22) +- [المبدأ أ.1.4: (لأدوات إنشاء واجهة المستخدم) مساعدة المؤلف بتجنب الأخطاء المتكررة]( https://www.w3.org/TR/ATAG20/#gl_b41) +- [الجزء ب. دعم إنتاج محتوى قابل للوصول]( https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### قصص ذات علاقة بمساعدة المدخلات +{:.no_toc} + +{% include excol.html type="middle" %} + +- [ليي, متسوق عبر الإنترنت يعاني من عمى الألوان]( /people-use-web/user-stories/#shopper) +- [أليكس, مراسل مصاب بالضغط النفسي المتكرر](/people-use-web/user-stories/#reporter) +- [برييتي, طالب في المرحلة الإعدادية يعاني من اضطراب فرط الحركة وتشتت الانتباه وعسر القراءة](/people-use-web/user-stories/#classroomstudent) +- [ين, متقاعد مع ضعف البصر ورعاش اليد وفقدان خفيف للذاكرة على المدى القصير](/people-use-web/user-stories/#retiree) +- [لويس ، مساعد سوبر ماركت مصاب بمتلازمة داون](/people-use-web/user-stories/#supermarketassistant) + +{% include excol.html type="end" %} + +## المحتوى القوي/النشط و الترجمة الملائمة {#robust} + +### تناسق المحتوى مع أدوات المستخدمين الحالية والمستقبلية {#compatible} + +المحتوى القوي/النشط هو المتناسق مع مختلف المتصفحات والتكنولوجيا المساعدة و مختلف وكلاء الويب، مثال عن كيفية الوصول الى هذا المحتوى يتلخص في: + +- التأكد من سهولة تفسير النقاط ذات العلامات الدلالية، مثل التأكد من أنها صالحه وسهله الفهم +- توفير اسم و وظيفة و قيمة لأي مكون غير أساسي من مكونات واجهة المستخدم + +الإيفاء بهذه المتطلبات يساعد على التأكد من ملائمة المحتوى لوكلاء الويب بشكل فعال، خاصة التقنيات المساعدة، حيث أنه يمكن التقنيات المساعدة من معالجة و تفسير المحتوى بالشكل المطلوب، يشمل ذلك الأزرار و حقول الإدخال التي لا تندرج ضمن معايير الويب الأساسية. +{% include excol.html type="start" %} + +#### متطلبات الوصول المتعلقة بالتلائم (روابط للوصف التقني) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [إرشادات 1.4: التلائم]( https://www.w3.org/WAI/WCAG22/quickref/#compatible) + +**UAAG** + +- [إرشادات 6.2: إعدادات التفضيل]( https://www.w3.org/TR/UAAG20/#gl-store-prefs) +- [إرشادات 1.4: التقنية المساعدة]( https://www.w3.org/TR/UAAG20/#gl-AT-access) +- [إرشادات 1.5: إتباع المواصفات]( https://www.w3.org/TR/UAAG20/#gl-obs-env-conventions) + +**ATAG** + +- [المبدأ أ.1: أدوات إنشاء واجهة المستخدم تتبع إرشادات وصول قابلة للتطبيق]( https://www.w3.org/TR/ATAG20/#principle_a1) +- [الجزء ب. دعم إنتاج محتوى قابل للوصول]( https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### قصص ذات صلة بالتلاؤم +{:.no_toc} + +{% include excol.html type="middle" %} + +- [ليي, متسوق عبر الإنترنت يعاني من عمى الألوان](/people-use-web/user-stories/#shopper) +- [أليكس, مراسل مصاب بالضغط النفسي المتكرر](/people-use-web/user-stories/#reporter) +- [ليا, موظف أول كفيف](/people-use-web/user-stories/#accountant) +- [برييتي, طالب في المرحلة الإعدادية يعاني من اضطراب فرط الحركة وتشتت الانتباه وعسر القراءة](/people-use-web/user-stories/#classroomstudent) +- [لويس ، مساعد سوبر ماركت مصاب بمتلازمة داون](/people-use-web/user-stories/#supermarketassistant) +- [قاسم,مراهق أصم و كفيف](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +{% include excol.html type="all" %} diff --git a/pages/fundamentals/accessibility-principles/index.cs.md b/pages/fundamentals/accessibility-principles/index.cs.md new file mode 100644 index 00000000000..c302da9cb9c --- /dev/null +++ b/pages/fundamentals/accessibility-principles/index.cs.md @@ -0,0 +1,719 @@ +--- +# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#". +# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:" + +title: Zásady přístupnosti +nav_title: "Zásady přístupnosti" +lang: cs +last_updated: 2023-12-06 # Put the date of this translation YYYY-MM-DD (with month in the middle) +description: Přehled základních požadavků na webovou přístupnost pro webové stránky, webové aplikace, prohlížeče a další nástroje. +teaser_text: Stránka Zásady přístupnosti představuje některé požadavky na přístupnost webu pro webové stránky, webové aplikace, prohlížeče a další nástroje. Poskytuje odkazy na mezinárodní standardy z Iniciativy pro webovou přístupnost W3C (WAI) a na příběhy uživatelů webu. + +translators: +- name: "Kristýna Švecová" + +github: + label: wai-accessibility-principles + +permalink: /fundamentals/accessibility-principles/cs # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr +ref: /fundamentals/accessibility-principles/ # Do not change this + +changelog: /fundamentals/accessibility-principles/changelog/ # Do not change this +image: /content-images/accessibility-principles/social.png + +# In the footer below: +# Do not change the dates +# Do not translate CHANGELOG +# Translate the other words, including "Date:" and "Editors:" +# Translate the Working Group name. Leave the Working Group acronym in English. +footer: > +

Datum: Aktualizováno 10. května 2019. CHANGELOG

+

Editoři: Shadi Abou Zahra. Poděkování.

+

Vyvinuto Pracovní skupinou pro vzdělání a osvětu (EOWG). Dříve vyvinuto s Pracovní skupinou WAI-AGE za podpory Projektu WAI-AGE.

+--- + +{::nomarkdown} +{% include box.html type="start" h="2" title="Shrnutí" class="full" %} +{:/} + +Tato stránka představuje některé požadavky na přístupnost webu pro webové stránky, webové aplikace, prohlížeče a další nástroje. Poskytuje odkazy na mezinárodní standardy z Iniciativy pro webovou přístupnost W3C (WAI) a na [příběhy uživatelů webu](/people-use-web/user-stories/). + +**Poznámka:** Toto není kompletní seznam všech požadavků na přístupnost. + +{::nomarkdown} +{% include box.html type="end" %} +{:/} + + +{::options toc_levels="2,3" /} + +{::nomarkdown} +{% include_cached toc.html type="start" title="Obsah stránky" class="full" %} +{:/} + +- TOC is created automatically. +{:toc} + +{::nomarkdown} +{% include_cached toc.html type="end" %} +{:/} + + +{% include excol.html type="all" %} + +## Standardy webové přístupnosti {#standards} + +Webová přístupnost spoléhá na několik komponent, které spolupracují. Některé z nich jsou: + +- **Obsah webu**{:#webcontent} - jakákoliv část webové stránky, která obsahuje text, obrázky, formuláře a multimédia, stejně tak markup kód, skripty, aplikace a další. +- **Uživatelské agenty**{:#useragents} - software, který lidé používají pro přístup k webovému obsahu. Jedná se o grafické prohlížeče pro PC, hlasové prohlížeče, mobilní prohlížeče, přehrávače multimédií, pluginy a některé [kompenzační pomůcky](/people-use-web/tools-techniques/#at "definition"). +- **Vývojové nástroje**{:#authoringtools} - software nebo služby, které se používají k tvorbě webového obsahu, včetně editorů kódu, nástrojů pro převod dokumentů, systémů pro správu obsahu, blogů, databázových skriptů a dalších. + +{% include excol.html type="start" %} + +### Další informace o standardech webové přístupnosti +{:.no_toc} + +{% include excol.html type="middle" %} + +Výše zmíněné komponenty jsou propojeny a vzájemně se podporují. Například **webový obsah** musí zahrnovat textové alternativy pro obrázky. Tato informace musí být zpracována **webovými prohlížeči** a předána **asistenčním technologiím**, například čtečkám obrazovky. Autoři potřebují **vývojové nástroje**, které jim umožní tvorbu těchto textových alternativ. Více informací je v [[Základních komponentech webové přístupnosti]](/fundamentals/components/). + +Standardy hrají zásadní roli v definování požadavků na přístupnost pro každý z těchto komponentů. Splnění některých požadavků na přístupnost je jednoduché, přesto porozumnění základům, jak osoby se zdravotním postižením používají Web, pomáhá tyto požadavky splnit efektivněji. Některé aspekty přístupnosti vyžadují více technických dovedností nebo pokročilé znalosti toho, jak lidé používají Web. V každém případě [zapojení uživatelů ze začátku a během projektů](/test-evaluate/involving-users/) zlepší a usnadní vaši práci. + +Iniciativa pro webovou přístupnost W3C (WAI) poskytuje soubor pokynů, které jsou mezinárodně uznávány jako standard pro webovou přístupnost. Jedná se o: + +- **[Pokyny pro zpřístupnění obsahu webu (WCAG)](/standards-guidelines/wcag/)** +- **[Pokyny k uživatelským agentům (UAAG)](/standards-guidelines/uaag/)** +- **[Pokyny pro zpřístupnění vývojových nástrojů (ATAG)](/standards-guidelines/atag/)** + +K dispozici jsou také WAI specifikace pro **[Přístupné internetové aplikace (WAI-ARIA)](/standards-guidelines/aria/)**, které zahrnují dynamický obsah a pokročilé ovládací prvky uživatelského rozhraní vyvinuté s použitím Ajaxu, JavaScriptu a souvisejících webových technologií. + +{% include excol.html type="end" %} + +## Vnímatelné informace a uživatelské rozhraní {#perceivable} + +### Textové alternativy pro netextový obsah {#alternatives} + +Textové alternativy jsou ekvivalenty pro netextový obsah. Mezi příklady patří: + +- Krátké alternativy pro obrázky, včetně ikon, tlačítek a grafického obsahu +- Popis dat znázorněných v grafech, diagramech a ilustracích +- Krátký popis netextového obsahu jako audio a video souborů +- Popisky pro ovládací prvky formulářů, vstupů a dalších komponent uživatelského rozhraní + +Textové alternativy vyjadřují význam obrázku nebo pomáhají poskytnout srovnatelný uživatelský prožitek. Například vhodná textová alternativa pro tlačítko vyhledávání je "*vyhledat*", ne "*lupa*". + +Textové alternativy lze prezentovat různými způsoby. Například mohou být nahlas přečteny pro uživatele, kteří nevidí obrazovku a pro lidi s obtížemi při čtení. Mohou být zvětšeny na vlastní velikost textu nebo zobrazeny na braillských zařízeních. Textové alternativy slouží jako popisky pro ovládácí prvky a funkce pro usnadnění navigace pomocí klávesnice a navigace pomocí rozpoznávání hlasu (hlasový vstup). Také slouží jako popisky pro audio, video a další formáty. Mohou také popisovat aplikace, které jsou vloženy jako součást webové stránky. + +{% include excol.html type="start" %} + +#### Požadavky na přístupnost související s textovými alternativami (odkazy na technické specifikace) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Pokyn 1.1 - Textové alternativy](https://www.w3.org/WAI/WCAG22/quickref/#text-alternatives) + +**UAAG** + +- [Pokyn 1.1 - Alternativní obsah](https://www.w3.org/TR/UAAG20/#gl-access-alternative-content) + +**ATAG** + +- [Princip A.1: Uživatelská rozhraní nástrojů pro tvorbu se řídí příslušnými pokyny pro přístupnost](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Pokyn A.2.1: (Pro uživatelské rozhraní nástrojů pro tvorbu) Zpřístupněte autorům alternativní obsah](https://www.w3.org/TR/ATAG20/#gl_a21) +- [Pokyn A.2.2: (Pro uživatelské rozhraní nástrojů pro tvorbu) Zajistěte, aby bylo možné programově určit zobrazení pro úpravy](https://www.w3.org/TR/ATAG20/#gl_a22) +- [Pokyn A.3.7: (Pro uživatelské rozhraní nástrojů pro tvorbu) Zajistěte, aby náhledy byly přinejmenším stejně přístupné jako v běžných uživatelských agentech](https://www.w3.org/TR/ATAG20/#gl_a37) +- [Část B. Podporujte tvorbu přístupného obsahu](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + +#### Příběhy související s textovými alternativami +{:#stories-related-to-text-alternatives.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, reportér s poškozením z opakovaného namáhání](/people-use-web/user-stories/#reporter) +- [Martine, online studentka, která špatně slyší](/people-use-web/user-stories/#onlinestudent) +- [Ilya, vedoucí pracovnice, která je slepá](/people-use-web/user-stories/#accountant) +- [Preety, studentka střední školy s poruchou pozornosti, hyperaktivitou a dislexií](/people-use-web/user-stories/#classroomstudent) +- [Yun, důchodce se slabým zrakem, třesem rukou a mírnou ztrátou krátkodobé paměti](/people-use-web/user-stories/#retiree) +- [Kaseem, teenagerka, která je hluchá a slepá](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### Titulky a další alternativy pro multimédia {#captions} + +Osoby, které neslyší audio nebo nevidí video potřebují alternativy. Například: + +- Textové přepisy a titulky pro audio, jako třeba nahrávky rozhlasových rozhovorů +- Audio popis líčí důležité vizuální detaily ve videu +- Znaková řeč pro audio včetně důležitých sluchových prožitků + +Dobře napsané textové přepisy, které obsahují správnou posloupnost všech zvukových a vizuálních informací, poskytují základní úroveň přístupnosti a usnadňují tvorbu titulků a audio popisů. + +{% include excol.html type="start" %} + +#### Požadavky na přístupnost související s multimédii (odkazy na technické specifikace) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Pokyn 1.2 - Média závisející na času](https://www.w3.org/WAI/WCAG22/quickref/#time-based-media) + +**UAAG** + +- [Pokyn 1.1 - Alternativní obsah](https://www.w3.org/TR/UAAG20/#gl-access-alternative-content) + +**ATAG** + +- [Princip A.1: Uživatelská rozhraní nástrojů pro tvorbu se řídí příslušnými pokyny pro přístupnost](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Pokyn A.2.1: (Pro uživatelské rozhraní nástrojů pro tvorbu) Zpřístupněte autorům alternativní obsah](https://www.w3.org/TR/ATAG20/#gl_a21) +- [Pokyn A.3.7: (Pro uživatelské rozhraní nástrojů pro tvorbu) Zajistěte, aby náhledy byly přinejmenším stejně přístupné jako v běžných uživatelských agentech](https://www.w3.org/TR/ATAG20/#gl_a37) +- [Část B. Podporujte tvorbu přístupného obsahu](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %} +{% include excol.html type="start" %} + +#### Příběhy související s multimédii {#stories-related-to-multimedia} +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Martine, online studentka, která špatně slyší](/people-use-web/user-stories/#onlinestudent) +- [Ilya, vedoucí pracovnice, která je slepá](/people-use-web/user-stories/#accountant) +- [Kaseem, teenagerka, která je hluchá a slepá](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### Obsah lze prezentovat různými způsoby {#adaptable} + +Aby uživatelé mohli změnit prezentaci obsahu, je nutné, aby: + +- nadpisy, seznamy, tabulky, vstupní políčka formulářů a struktury obsahu byly správně označeny +- pořadí informací a instrukcí nezáleželo na prezentaci +- prohlížeče a asistenční technologie poskytovaly nastavení pro přizpůsobení prezentace + +Splnění tohoto požadavku umožňuje správné čtení obsahu nahlas, zvětšení nebo přizpůsobení tak, aby vyhovovalo potřebám a preferencím různých lidí. Obsah může být například prezentován pomocí vlastních barevných kombinací, velikosti textu nebo jiných úprav vzhledu, které usnadní čtení. Tento požadavek také usnadňuje další formy přizpůsobení, včetně automatického generování obrysů a souhrnů stránek, které lidem pomohou získat přehled a snadněji se zaměřit na konkrétní části. + +{% include excol.html type="start" %} + +#### Požadavky na přístupnost související s přizpůsobivostí (odkazy na technické specifikace) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Pokyn 1.3 - Přizpůsobivost](https://www.w3.org/WAI/WCAG22/quickref/#adaptable) + +**UAAG** + +- [Pokyn 1.4 - Konfigurace textu](https://www.w3.org/TR/UAAG20/#gl-text-config) +- [Pokyn 1.5 - Konfigurace hlasitosti](https://www.w3.org/TR/UAAG20/#gl-volume-config) +- [Pokyn 1.6 - Konfigurace syntetizované řeči](https://www.w3.org/TR/UAAG20/#gl-speech-config) +- [Pokyn 1.7 - Konfigurace šablony stylů uživatele](https://www.w3.org/TR/UAAG20/#gl-style-sheets-config) +- [Pokyn 1.9 - Alternativní zobrazení](https://www.w3.org/TR/UAAG20/#gl-alternative-views) +- [Pokyn 1.10 - Informace o elementech](https://www.w3.org/TR/UAAG20/#gl-info-link) + +**ATAG** + +- [Princip A.1: Uživatelská rozhraní nástrojů pro tvorbu se řídí příslušnými pokyny pro přístupnost](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Pokyn A.2.2: (Pro uživatelské rozhraní nástrojů pro tvorbu) Zajistěte, aby bylo možné programově určit zobrazení pro úpravy](https://www.w3.org/TR/ATAG20/#gl_a22) +- [Pokyn A.3.7: (Pro uživatelské rozhraní nástrojů pro tvorbu) Zajistěte, aby náhledy byly přinejmenším stejně přístupné jako v běžných uživatelských agentech](https://www.w3.org/TR/ATAG20/#gl_a37) +- [Část B. Podporujte tvorbu přístupného obsahu](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Příběhy související s přizpůsobivostí +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Lee, online nakupující, který je barvoslepý](/people-use-web/user-stories/#shopper) +- [Alex, reportér s poškozením z opakovaného namáhání](/people-use-web/user-stories/#reporter) +- [Ilya, vedoucí pracovnice, která je slepá](/people-use-web/user-stories/#accountant) +- [Preety, studentka střední školy s poruchou pozornosti, hyperaktivitou a dislexií](/people-use-web/user-stories/#classroomstudent) +- [Yun, důchodce se slabým zrakem, třesem rukou a mírnou ztrátou krátkodobé paměti](/people-use-web/user-stories/#retiree) +- [Luis, asistent v supermarketu s Downovým syndromem](/people-use-web/user-stories/#supermarketassistant) +- [Kaseem, teenagerka, která je hluchá a slepá](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### Obsah je lépe vidět a slyšet {#distinguishable} + +Rozlišitelný obsah je lépe vidět a slyšet. Příklady takového obsahu jsou: + +- Barva není jediný nositel informace nebo identifikátor obsahu +- Výchozí kombinace barvy popředí a pozadí má dostatečný barevný kontrast +- Pokud uživatel zvětší text na 400% nebo změní velikost řádkování, žádné informace nejsou ztraceny +- Přeformátování textu v malých oknech („výřezech“) a při zvětšení textu uživatelem +- U obrázků textu lze změnit velikost. Lepší je ale nahradit je textem nebo se jim pokud možno vyhnout +- Uživatel může pozastavit, zastavit nebo změnit hlasitost zvuku, který hraje na webové stránce +- Audio na pozadí je potichu a je možné ho vypnout, aby nerušilo nebo nerozptylovalo uživatele + +Splnění tohoto požadavku pomáhá oddělit popředí od pozadí, takže jsou důležité informace lépe rozlišitelné. Toto má vliv jak na osoby, co nepoužívají asistenční technologie, tak na ty, kteří je používají. Ti mohou vnímat rušení, pokud je v pozadí výrazný audio nebo vizuální obsah. Například mnoho lidí s barvoslepostí nepoužívá určité nástroje a spoléhají se na vlastní design, který má dostatečný barevný kontrast mezi textem a jeho pozadím. Pro ostatní může zvuk na pozadí rušit převod textu na řeč nebo [asistenční zařízení pro slyšení (ALDs)](/teach-advocate/accessible-presentations/#ald "definition"). + +{% include excol.html type="start" %} + +#### Požadavky na přístupnost související s rozlišitelností (odkazy na technické specifikace) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Pokyn 1.4 - Rozlišitelnost](https://www.w3.org/WAI/WCAG22/quickref/#distinguishable) + +**UAAG** + +- [Pokyn 1.3 - Zvýraznění](https://www.w3.org/TR/UAAG20/#gl-interaction-highlight) +- [Pokyn 1.4 - Konfigurace textu](https://www.w3.org/TR/UAAG20/#gl-text-config) +- [Pokyn 1.5 - Konfigurace hlasitosti](https://www.w3.org/TR/UAAG20/#gl-volume-config) +- [Pokyn 1.6 - Konfigurace syntetizované řeči](https://www.w3.org/TR/UAAG20/#gl-speech-config) +- [Pokyn 1.7 - Konfigurace šablony stylů uživatele](https://www.w3.org/TR/UAAG20/#gl-style-sheets-config) +- [Pokyn 1.8 - Orientace ve výřezech](https://www.w3.org/TR/UAAG20/#gl-viewport-orient) +- [Pokyn 1.9 - Alternativní zobrazení](https://www.w3.org/TR/UAAG20/#gl-alternative-views) +- [Pokyn 1.10 - Informace o elementech](https://www.w3.org/TR/UAAG20/#gl-info-link) + +**ATAG** + +- [Princip A.1: Uživatelská rozhraní nástrojů pro tvorbu se řídí příslušnými pokyny pro přístupnost](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Pokyn A.3.7: (Pro uživatelské rozhraní nástrojů pro tvorbu) Zajistěte, aby náhledy byly přinejmenším stejně přístupné jako v běžných uživatelských agentech](https://www.w3.org/TR/ATAG20/#gl_a37) +- [Část B. Podporujte tvorbu přístupného obsahu](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Příběhy související s rozlišitelností +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Lee, online nakupující, který je barvoslepý](/people-use-web/user-stories/#shopper) +- [Martine, online student who is hard of hearing](/people-use-web/user-stories/#onlinestudent) +- [Ilya, vedoucí pracovnice, která je slepá](/people-use-web/user-stories/#accountant) +- [Yun, důchodce se slabým zrakem, třesem rukou a mírnou ztrátou krátkodobé paměti](/people-use-web/user-stories/#retiree) +- [Kaseem, teenagerka, která je hluchá a slepá](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +## Ovladatelné uživatelské rozhraní a navigace {#operable} + +### Funkce jsou dostupné pomocí klávesnice {#keyboard} + +Mnoho lidí pro interakci s webem nepoužívá myš, ale spoléhá na klávesnici. To vyžaduje přístup ke všem funkcím z klávesnice, včetně ovládacích prvků formulářů, vstupů a dalších komponent uživatelského rozhraní. + +Přístupnost klávesnice znamená, že: + +- Všechny funkce, které jsou dostupné myší jsou také dostupné klávesnicí +- Focus klávesnice neuvízne v žádné části obsahu +- Webové prohlížeče, nástroje pro tvorbu a další nástroje podporují ovládání klávesnicí + +Splnění tohoto požadavku pomáhá uživatelům klávesnice včetně osob, které používají alternativní klávesnice jako třeba klávesnice s ergonomickým rozložením, klávesnice na obrazovce nebo tlačítková zářízení. Také pomáhá osobám, které používají rozpoznávání hlasu (hlasový vstup) k ovládání webových stránek a k diktování textu použitím klávesnice. + +{% include excol.html type="start" %} + +#### Požadavky na přístupnost související s přístupností z klávesnice (odkazy na technické specifikace) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Pokyn 2.1 - Přístupnost z klávesnice](https://www.w3.org/WAI/WCAG22/quickref/#keyboard-accessible) + +**UAAG** + +- [Pokyn 2.1 - Přístup z klávesnice](https://www.w3.org/TR/UAAG20/#gl-keyboard-access) +- [Pokyn 2.2 - Sekvenční navigace](https://www.w3.org/TR/UAAG20/#gl-sequential-navigation) +- [Pokyn 2.3 - Přímá navigace a aktivace](https://www.w3.org/TR/UAAG20/#gl-direct-navigation-and-activation) +- [Pokyn 2.11 - Další vstupní zařízení](https://www.w3.org/TR/UAAG20/#gl-other-devices) + +**ATAG** + +- [Princip A.1: Uživatelská rozhraní nástrojů pro tvorbu se řídí příslušnými pokyny pro přístupnost](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Pokyn A.3.1: (Pro uživatelské rozhraní nástrojů pro tvorbu) Podporujte přístup z klávesnice k autorským funkcím](https://www.w3.org/TR/ATAG20/#gl_a31) +- [Část B. Podporujte tvorbu přístupného obsahu](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Příběhy související s přístupností z klávesnice +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, reportér s poškozením z opakovaného namáhání](/people-use-web/user-stories/#reporter) +- [Ilya, vedoucí pracovnice, která je slepá](/people-use-web/user-stories/#accountant) + +{% include excol.html type="end" %} + +### Uživatelé mají dostatek času na přečtení a použití obsahu {#time} + +Někteří lidé potřebují více času než jiní pro čtení a použití obsahu. Například někteří lidé vyžadují více času pro napsání textu, porozumnění instrukcím, ovládání ovládacích prvků nebo jiný způsob provedení úkonů na webové stránce. + +Mezi příklady poskytnutí dostatku času patří poskytnutí možnosti: + +- Zastavení, zvýšení nebo přizpůsobení časových limitů, pokud to je v dané situaci možné +- Pozastavit, zastavit nebo skrýt pohyb, blikání nebo posouvání obsahu +- Odložit nebo potlačit vyrušení, pokud to je v dané situaci možné +- Opětovného přihlášení po vypršení relace bez ztráty dat + +{% include excol.html type="start" %} + +#### Požadavky na přístupnost související s dostatkem času (odkazy na technické specifikace) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Pokyn 2.2 - Dostatek času](https://www.w3.org/WAI/WCAG22/quickref/#enough-time) + +**UAAG** + +- [Pokyn 2.8 - Časově nezávislé interakce](https://www.w3.org/TR/UAAG20/#gl-time-independent) +- [Pokyn 2.10 - Časově závislá média](https://www.w3.org/TR/UAAG20/#gl-control-inaccessible-content) + +**ATAG** + +- [Princip A.1: Uživatelská rozhraní nástrojů pro tvorbu se řídí příslušnými pokyny pro přístupnost](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Pokyn A.3.2: (Pro uživatelské rozhraní nástrojů pro tvorbu) Poskytněte autorům dostatek času](https://www.w3.org/TR/ATAG20/#gl_a32) +- [Část B. Podporujte tvorbu přístupného obsahu](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Příběhy související s dostatkem času +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, reportér s poškozením z opakovaného namáhání](/people-use-web/user-stories/#reporter) +- [Preety, studentka střední školy s poruchou pozornosti, hyperaktivitou a dislexií](/people-use-web/user-stories/#classroomstudent) +- [Yun, důchodce se slabým zrakem, třesem rukou a mírnou ztrátou krátkodobé paměti](/people-use-web/user-stories/#retiree) +- [Luis, asistent v supermarketu s Downovým syndromem](/people-use-web/user-stories/#supermarketassistant) +- [Kaseem, teenagerka, která je hluchá a slepá](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### Obsah nezpůsobuje záchvaty a fyzické reakce {#safe} + +Obsah, který bliká určitou rychlostí nebo vzorem může způsobit fotocitlivé reakce včetně záchvatů. Blikající obsah by ideálně neměl být zobrazen vůbec nebo tak, aby nezpůsoboval známá rizika. Animace a pohybující se obsah může také způsobovat zdravotní potíže a fyzické reakce. + +Příklady, jak se nezpůsobovat záchvaty a fyzické reakce: + +- Nepoužívejte obsah, který bliká určitou rychlostí nebo vzorem +- Varujte uživatele před zobrazením blikajícího obsahu a poskytněte alternativy +- Poskytněte možnost vypnout animace, pokud nejsou nezbytné + +{% include excol.html type="start" %} + +#### Požadavky na přístupnost související se záchvaty (odkazy na technické specifikace) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Pokyn 2.3 - Záchvaty](https://www.w3.org/WAI/WCAG22/quickref/#seizures-and-physical-reactions) + +**UAAG** + +- [Pokyn 2.9 - Blikání](https://www.w3.org/TR/UAAG20/#gl-prevent-flash) + +**ATAG** + +- [Princip A.1: Uživatelská rozhraní nástrojů pro tvorbu se řídí příslušnými pokyny pro přístupnost](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Pokyn A.3.3: (Pro uživatelské rozhraní nástrojů pro tvorbu) Pomozte autorům vyhnout se blikání, které by mohlo způsobit záchvat](https://www.w3.org/TR/ATAG20/#gl_a33) +- [Část B. Podporujte tvorbu přístupného obsahu](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %} + +### Uživatelé mohou snadno procházet a vyhledávat obsah, snadno určí, kde se nacházejí {#navigable} + +Dobře zorganizovaný obsah pomáhá uživatelům orientovat se a efektivně procházet obsah. Mezi příklady patří: + +- Stránky mají jasný titul a popisné nadpisy jednotlivých sekcí +- Najít relevantní stránky v rámci řady webových stránek lze více než jedním způsobem +- Uživatelé jsou informovaní o současné lokaci v rámci několika souvisejících stránek +- Je možné přeskočit části obsahu, které se opakují na více stránkách +- Focus klávesnice je vidět a pořadí focusu dává smysl +- Účel odkazu je jasný, nejlépe i v případě, kdy je odkaz zobrazen samostatně + +Splnění tohoto požadavku pomáhá lidem navigovat webovou stránkou různými způsoby podle jejich konkrétních potřeb a preferencí. Například někteří lidé při hledání určité webové stránky spoléhají na hierarchické navigační struktury, jako jsou panely nabídek. Jiní ale ve stejné situaci spoléhají spíše na funkci vyhledávání na webových stránkách. Někteří obsah vidí, jiný slyší nebo slyší a vidí zároveň. Někteří uživatelé používají pouze myš nebo klávesnici, zatímco jiní mohou používat obojí. + +{% include excol.html type="start" %} + +#### Požadavky na přístupnost související s navigací (odkazy na technické specifikace) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Pokyn 2.4 - Navigace](https://www.w3.org/WAI/WCAG22/quickref/#navigable) + +**UAAG** + +- [Pokyn 2.2 - Sekvenční navigace](https://www.w3.org/TR/UAAG20/#gl-sequential-navigation) +- [Pokyn 2.3 - Přímá navigace a aktivace](https://www.w3.org/TR/UAAG20/#gl-direct-navigation-and-activation) +- [Pokyn 2.4 - Textové vyhledávání](https://www.w3.org/TR/UAAG20/#gl-search-text) +- [Pokyn 2.5 - Strukturální navigace](https://www.w3.org/TR/UAAG20/#gl-nav-structure) +- [Pokyn 2.7 - Grafické ovládací prvky](https://www.w3.org/TR/UAAG20/#gl-configure-controls) + +**ATAG** + +- [Princip A.1: Uživatelská rozhraní nástrojů pro tvorbu se řídí příslušnými pokyny pro přístupnost](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Pokyn A.2.2: (Pro uživatelské rozhraní nástrojů pro tvorbu) Zajistěte, aby bylo možné programově určit zobrazení pro úpravy](https://www.w3.org/TR/ATAG20/#gl_a22) +- [Pokyn A.3.4: (Pro uživatelské rozhraní nástrojů pro tvorbu) Vylepšete navigaci a úpravy prostřednictvím struktury obsahu](https://www.w3.org/TR/ATAG20/#gl_a34) +- [Pokyn A.3.5: (Pro uživatelské rozhraní nástrojů pro tvorbu) Poskytněte textové vyhledávání obsahu](https://www.w3.org/TR/ATAG20/#gl_a35) +- [Část B. Podporujte tvorbu přístupného obsahu](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Příběhy související s navigací +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, reportér s poškozením z opakovaného namáhání](/people-use-web/user-stories/#reporter) +- [Ilya, vedoucí pracovnice, která je slepá](/people-use-web/user-stories/#accountant) +- [Preety, studentka střední školy s poruchou pozornosti, hyperaktivitou a dislexií](/people-use-web/user-stories/#classroomstudent) +- [Yun, důchodce se slabým zrakem, třesem rukou a mírnou ztrátou krátkodobé paměti](/people-use-web/user-stories/#retiree) +- [Luis, asistent v supermarketu s Downovým syndromem](/people-use-web/user-stories/#supermarketassistant) +- [Kaseem, teenagerka, která je hluchá a slepá](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### Uživatelé mohou použít různé způsoby vstupu mimo klávesnici {#modalities} + +Způsoby vstupu kromě klávesnice, jako třeba aktivace dotykem, hlasové rozpoznávání (hlasový vstup) a gesta, umožňují pro mnoho lidí snadnější použití obsahu. Přesto ne všichni mohou použít kterýkoliv z těchto způsobů nebo ve stejné míře. Specifický design maximalizuje výhody těchto způsobů. To zahrnuje: + +- Gesta vyžadující obratnost nebo jemný pohyb mají alternativy, které nevyžadují velkou obratnost +- Komponenty jsou navrženy tak, aby se zabránilo nechtěné aktivaci, například poskytnutím funkce Zpět +- Popisky prezentované uživatelům se shodují s odpovídajícími názvy objektů v kódu, což podporuje aktivaci hlasem +- Funkčnost aktivovanou pohybem lze aktivovat také prostřednictvím komponent uživatelského rozhraní +- Tlačítka, odkazy a další aktivní komponenty jsou dostatečně velké, aby se snadněji aktivovaly dotykem + +Splnění tohoto požadavku usnadňuje používání obsahu pro mnoho lidí se širokou škálou schopností využívajících širokou škálu zařízení. To zahrnuje obsah používaný v mobilních telefonech, tabletech a samoobslužných terminálech, jako jsou automaty na jízdenky. + +{% include excol.html type="start" id="" %} + +#### Požadavky na přístupnost související se způsoby vstupu (odkazy na technické specifikace) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Pokyn 2.5 - Způsoby vstupu](https://www.w3.org/WAI/WCAG22/quickref/#input-modalities) + +{% include excol.html type="end" %}{% include excol.html type="start" id="" %} + +#### Příběhy související se způsoby vstupu +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, reportér s poškozením z opakovaného namáhání](/people-use-web/user-stories/#reporter) +- [Yun, důchodce se slabým zrakem, třesem rukou a mírnou ztrátou krátkodobé paměti](/people-use-web/user-stories/#retiree) +- [Luis, asistent v supermarketu s Downovým syndromem](/people-use-web/user-stories/#supermarketassistant) + +{% include excol.html type="end" %} + +## Srozumitelné informace a uživatelské rozhraní {#understandable} + +### Text je čitelný a srozumitelný {#readable} + +Autoři obsahu musí zajistit, aby byl text čitelný pro co nejširší publikum, včetně toho, kdy je čten nahlas pomocí převodu textu na řeč. Toto zahrnuje: + +- Určení primárního jazyka webové stránky, jako třeba arabština, holandština nebo korejština +- Určení jazyka textu, frází nebo jiných částí webové stránky +- Poskytnutí definic pro nezvyklá slova, fráze, idiomy a zkratky +- Použití nejjasnějšího a nejjednoduššího možného vyjadřování nebo poskytnutí zjednodušených verzí + +Splnění tohoto požadavku pomáhá softwaru včetně asistenčních technologií správně zpracovat textový obsah. Například pomáhá tento požadavek softwaru nahlas přečíst obsah, generovat shrnutí stránky a poskytnout definice pro nezvyklá slova jako třeba technický slang. Také pomáhá lidem, kteří mají potíže s porozumněním složitějších vět, frází a slov. Zejména pomáhá osobám s různými typy kognitivních poruch. + +{% include excol.html type="start" %} + +#### Požadavky na přístupnost související s čitelností (odkazy na technické specifikace) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Pokyn 3.1 - Čitelnost](https://www.w3.org/WAI/WCAG22/quickref/#readable) + +**ATAG** + +- [Princip A.1: Uživatelská rozhraní nástrojů pro tvorbu se řídí příslušnými pokyny pro přístupnost](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Pokyn A.4.2: (Pro uživatelské rozhraní nástrojů pro tvorbu) Zdokumentujte uživatelské rozhraní včetně všech funkcí přístupnosti](https://www.w3.org/TR/ATAG20/#gl_b42) +- [Část B. Podporujte tvorbu přístupného obsahu](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Příběhy související s čitelností +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Martine, online studentka, která špatně slyší](/people-use-web/user-stories/#onlinestudent) +- [Ilya, vedoucí pracovnice, která je slepá](/people-use-web/user-stories/#accountant) +- [Preety, studentka střední školy s poruchou pozornosti, hyperaktivitou a dislexií](/people-use-web/user-stories/#classroomstudent) +- [Yun, důchodce se slabým zrakem, třesem rukou a mírnou ztrátou krátkodobé paměti](/people-use-web/user-stories/#retiree) +- [Luis, asistent v supermarketu s Downovým syndromem](/people-use-web/user-stories/#supermarketassistant) + +{% include excol.html type="end" %} + +### Obsah vypadá a funguje předvídatelně {#predictable} + +Mnoho lidí spoléhá na předvídatelné uživatelské rozhraní a jsou dezorientovaní nebo rozptýlení nekonzistentním vzhledem nebo chováním. Mezi příklady předvídatelného obsahu patří: + +- Navigační mechanismy, které se opakují na více stránkách, se objevují pokaždé na stejném místě +- Komponenty uživatelského rozhraní, které se na webové stránce opakují, mají pokaždé stejné popisky +- K významným změnám na webové stránce nedojde bez souhlasu uživatele + +Splnění tohoto požadavku pomáhá lidem rychle se naučit funkčnost a navigační mechanismy dostupné na webové stránce a ovládat je podle svých konkrétních potřeb a preferencí. Někteří lidé například přiřazují vlastní klávesové zkratky funkcím, které často používají, aby vylepšili navigaci klávesnicí. Jiní si zapamatují kroky k dosažení určitých stránek nebo k dokončení operací na webové stránce. Oba příklady spoléhají na předvídatelnou a konzistentní funkčnost. + +{% include excol.html type="start" %} + +#### Požadavky na přístupnost související s předvídatelností (odkazy na technické specifikace) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Pokyn 3.2 - Předvídatelnost](https://www.w3.org/WAI/WCAG22/quickref/#predictable) + +**UAAG** + +- [Pokyn 3.3 - Předvídatelnost](https://www.w3.org/TR/UAAG20/#gl-predictable-operation) + +**ATAG** + +- [Princip A.1: Uživatelská rozhraní nástrojů pro tvorbu se řídí příslušnými pokyny pro přístupnost](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Pokyn A.2.2: (Pro uživatelské rozhraní nástrojů pro tvorbu) Zajistěte, aby bylo možné programově určit zobrazení pro úpravy](https://www.w3.org/TR/ATAG20/#gl_a22) +- [Pokyn A.4.2: (Pro uživatelské rozhraní nástrojů pro tvorbu) Zdokumentujte uživatelské rozhraní včetně všech funkcí přístupnosti](https://www.w3.org/TR/ATAG20/#gl_b42) +- [Část B. Podporujte tvorbu přístupného obsahu](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Příběhy související s předvídatelností +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, reportér s poškozením z opakovaného namáhání](/people-use-web/user-stories/#reporter) +- [Ilya, vedoucí pracovnice, která je slepá](/people-use-web/user-stories/#accountant) +- [Preety, studentka střední školy s poruchou pozornosti, hyperaktivitou a dislexií](/people-use-web/user-stories/#classroomstudent) +- [Yun, důchodce se slabým zrakem, třesem rukou a mírnou ztrátou krátkodobé paměti](/people-use-web/user-stories/#retiree) +- [Luis, asistent v supermarketu s Downovým syndromem](/people-use-web/user-stories/#supermarketassistant) +- [Kaseem, teenagerka, která je hluchá a slepá](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### Uživatelům se pomáhá vyhnout se chybám a opravit je {#tolerant} + +Formuláře a další interakce mohou být pro některé uživatele matoucí nebo obtížně použitelné. V důsledku toho je pravděpodobnější, že udělají chybu. Mezi příklady pomoci uživatelům vyvarovat se chybám a opravit je patří: + +- Jasné instrukce, chybové zprávy a návrhy na opravu +- Kontextová nápověda pro složitější funkce a interakci +- V případě potřeby příležitost zkontrolovat, opravit nebo zrušit odeslání + +Splnění tohoto požadavku pomáhá lidem, kteří nevidí nebo neslyší obsah a nemusí rozpoznat implicitní vztahy, sekvence a další podněty. Pomáhá také lidem, kteří nerozumí funkčnosti, jsou dezorientovaní nebo zmatení, zapomínají nebo dělají chyby při vyplňování formulářů a interakcích z jakéhokoli jiného důvodu. + +{% include excol.html type="start" %} + +#### Požadavky na přístupnost související s asistencí pro vstup (odkazy na technické specifikace) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Pokyn 3.3 - Asistence pro vstup](https://www.w3.org/WAI/WCAG22/quickref/#input-assistance) + +**UAAG** + +- [Pokyn 3.1 - Chyby](https://www.w3.org/TR/UAAG20/#gl-avoid-mistakes) + +**ATAG** + +- [Princip A.1: Uživatelská rozhraní nástrojů pro tvorbu se řídí příslušnými pokyny pro přístupnost](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Pokyn A.2.2: (Pro uživatelské rozhraní nástrojů pro tvorbu) Zajistěte, aby bylo možné programově určit zobrazení pro úpravy](https://www.w3.org/TR/ATAG20/#gl_a22) +- [Pokyn A.4.1: (Pro uživatelské rozhraní nástrojů pro tvorbu) Pomozte autorům vyhnout se chybám a opravit je](https://www.w3.org/TR/ATAG20/#gl_b41) +- [Část B. Podporujte tvorbu přístupného obsahu](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Příběhy související s asistencí vstupu +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Lee, online nakupující, který je barvoslepý](/people-use-web/user-stories/#shopper) +- [Alex, reportér s poškozením z opakovaného namáhání](/people-use-web/user-stories/#reporter) +- [Preety, studentka střední školy s poruchou pozornosti, hyperaktivitou a dislexií](/people-use-web/user-stories/#classroomstudent) +- [Yun, důchodce se slabým zrakem, třesem rukou a mírnou ztrátou krátkodobé paměti](/people-use-web/user-stories/#retiree) +- [Luis, asistent v supermarketu s Downovým syndromem](/people-use-web/user-stories/#supermarketassistant) + +{% include excol.html type="end" %} + +## Robustní obsah a spolehlivá interpretace {#robust} + +### Obsah je kompatibilní se současnými i budoucími uživatelskými nástroji {#compatible} + +Robustní obsah je kompatibilní s různými prohlížeči, asistenčními technologiemi a dalšími uživatelskými agenty. Mezi příklady toho, jak toho lze dosáhnout, patří: + +- Zajistit, že program je spolehlivě interpretován, například zajištěním jeho platnosti +- Poskytnutí názvu, role a hodnoty pro nestandardní součásti uživatelského rozhraní + +Splnění tohoto požadavku pomáhá maximalizovat kompatibilitu se současnými i budoucími uživatelskými agenty, včetně asistenčních technologií. Zejména umožňuje asistenčním technologiím spolehlivé zpracování obsahu a jeho prezentaci nebo ovládání různými způsoby. To zahrnuje nestandardní (skriptovaná) tlačítka, vstupní pole a další ovládací prvky. + +{% include excol.html type="start" %} + +#### Požadavky na přístupnost související s kompatibilitou (odkazy na technické specifikace) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Pokyn 4.1 - Kompatibilita](https://www.w3.org/WAI/WCAG22/quickref/#compatible) + +**UAAG** + +- [Pokyn 2.6 - Nastavení předvoleb](https://www.w3.org/TR/UAAG20/#gl-store-prefs) +- [Pokyn 4.1 - Asistenční technologie](https://www.w3.org/TR/UAAG20/#gl-AT-access) +- [Pokyn 5.1 - Dodržujte specifikace](https://www.w3.org/TR/UAAG20/#gl-obs-env-conventions) + +**ATAG** + +- [Princip A.1: Uživatelská rozhraní nástrojů pro tvorbu se řídí příslušnými pokyny pro přístupnost](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Část B. Podporujte tvorbu přístupného obsahu](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Příběhy související s kompatibilitou +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Lee, online nakupující, který je barvoslepý](/people-use-web/user-stories/#shopper) +- [Alex, reportér s poškozením z opakovaného namáhání](/people-use-web/user-stories/#reporter) +- [Ilya, vedoucí pracovnice, která je slepá](/people-use-web/user-stories/#accountant) +- [Preety, studentka střední školy s poruchou pozornosti, hyperaktivitou a dislexií](/people-use-web/user-stories/#classroomstudent) +- [Luis, asistent v supermarketu s Downovým syndromem](/people-use-web/user-stories/#supermarketassistant) +- [Kaseem, teenagerka, která je hluchá a slepá](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +{% include excol.html type="all" %} + diff --git a/pages/fundamentals/accessibility-principles/index.es.md b/pages/fundamentals/accessibility-principles/index.es.md new file mode 100755 index 00000000000..bc8ea2a4886 --- /dev/null +++ b/pages/fundamentals/accessibility-principles/index.es.md @@ -0,0 +1,722 @@ +--- +# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#". +# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:" + +title: Principios de accesibilidad +nav_title: "Principios de accesibilidad" +lang: es +last_updated: 2023-12-06 # Put the date of this translation YYYY-MM-DD (with month in the middle) +description: Una visión general de los requisitos fundamentales de accesibilidad para sitios web, aplicaciones web, navegadores y otras herramientas. +teaser_text: La página de Principios de Accesibilidad introduce algunos de los requisitos de accesibilidad web para sitios web, aplicaciones web, navegadores y otras herramientas, facilitando referencias a estándares internacionales de la Iniciativa de Accesibilidad Web del W3C (WAI) y a historias de usuarios web. + +translators: +- name: "Jorge Rumoroso" + link: "https://twitter.com/rumoroso" +contributors: +- name: "Martín Álvarez-Espinar (CTIC)" + +github: + label: wai-accessibility-principles + +permalink: /fundamentals/accessibility-principles/es # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr +ref: /fundamentals/accessibility-principles/ # Do not change this + +image: /content-images/accessibility-principles/social.png +changelog: /fundamentals/accessibility-principles/changelog/ # Do not change this + +# In the footer below: +# Do not change the dates +# Do not translate CHANGELOG +# Translate the other words, including "Date:" and "Editors:" +# Translate the Working Group name. Leave the Working Group acronym in English. +footer: > +

Fecha: Actualizado 10 Mayo 2019. CHANGELOG

+

Editores: Shadi Abou_Zahra. Agradecimientos.

+

Desarrollado por el Grupo de Trabajo de Educación y Divulgación (EOWG). Previamente desarrollado con la WAI-AGE Task Force, con el apoyo del Proyecto WAI-AGE .

+--- + +{::nomarkdown} +{% include box.html type="start" h="2" title="Resumen" class="full" %} +{:/} + +Esta página introduce algunos de los requisitos de accesibilidad para sitios web, aplicaciones web, navegadores y otras herramientas, facilitando referencias a estándares internacionales de la Iniciativa de Accesibilidad Web del W3C (WAI) y a [historias de usuarios web](/people-use-web/user-stories/). + +**Nota:** Este documento no es una lista completa de todos los requisitos de accesibilidad. + +{::nomarkdown} +{% include box.html type="end" %} +{:/} + + +{::options toc_levels="2,3" /} + +{::nomarkdown} +{% include_cached toc.html type="start" title="Page Contents" class="full" %} +{:/} + +- TOC is created automatically. +{:toc} + +{::nomarkdown} +{% include_cached toc.html type="end" %} +{:/} + + +{% include excol.html type="all" %} + +## Estándares de accesibilidad web {#standards} + +La accesibilidad web se basa en varios componentes que trabajan juntos. Entre ellos se incluyen: + +- **Contenido Web**{:#webcontent} – hace referencia a cualquier parte de un sitio web, incluyendo texto, imágenes, formularios y multimedia, así como a cualquier código de marcado, scripts, aplicaciones y demás. +- **Agentes de usuario**{:#useragents} – software que las personas utilizan para acceder al contenido web, incluyendo navegadores gráficos de escritorio, navegadores de voz, navegadores de teléfono móvil, reproductores multimedia, plug-ins y algunas [tecnologías de apoyo](/people-use-web/tools-techniques/#at "definition"). +- **Herramientas de autor**{:#authoringtools} – software o servicios que las personas utilizan para producir contenido web, incluyendo editores de código, herramientas de conversión de documentos, sistemas de gestión de contenido, blogs, scripts de base de datos y otras herramientas. + +{% include excol.html type="start" %} + +### Más acerca de estándares de accesibilidad web +{:.no_toc} + +{% include excol.html type="middle" %} + +Estos componentes se interrelacionan y dan soporte mutuamente. Por ejemplo, el **contenido web** necesita incluir alternativas textuales para las imágenes. Esta información necesita ser procesada por los **navegadores web** y luego ser transmitida a las **tecnologías de apoyo**, como los lectores de pantalla. Para crear dichas alternativas textuales, los autores necesitan **herramientas de autor** con soporte para dicha función. Más información sobre el tema en [[Componentes Esenciales de la Accesibilidad Web]](/fundamentals/components/). + +Los estándares juegan un papel vital en la definición de los requisitos de accesibilidad de estos componentes. Algunos requisitos de accesibilidad son fáciles de cumplir y, simplemente entendiendo los conceptos básicos de cómo las personas con discapacidad utilizan la Web, ayuda a implementarlos de forma más eficaz y eficiente. Algunos aspectos de la accesibilidad requieren más habilidades técnicas o conocimientos avanzados sobre el uso que hacen las personas de la Web. En todos los casos, [involucrar a los usuarios desde el principio y a lo largo de sus proyectos web](/test-evaluate/involving-users/) hará su trabajo mejor y más fácil. + +La Iniciativa de Accesibilidad Web del W3C (WAI) facilita un conjunto de pautas que son reconocidas internationalmente como estándares para la accesibilidad web. Estas incluyen: + +- **[Pautas de Accesibilidad al Contenido Web (WCAG)](/standards-guidelines/wcag/)** +- **[Pautas de Accesibilidad de Agente de Usuario (UAAG)](/standards-guidelines/uaag/)** +- **[Pautas de Accesibilidad de Herramientas de Autor (ATAG)](/standards-guidelines/atag/)** + +También hay una especificación WAI para **[Aplicaciones de internet enriquecidas y accesibles (WAI-ARIA)](/standards-guidelines/aria/)**, que incluyen contenido dinámico y controles avanzados de usuario desarrollados con Ajax, JavasScript, y otras tecnologías web relacionadas. + +{% include excol.html type="end" %} + +## Información perceptible e interfaz de usuario {#perceivable} + +### Alternativas de texto para contenido no textual {#alternatives} + +Las alternativas de texto son equivalentes para el contenido no textual. Entre los ejemplos se incluyen: + +- Equivalentes cortos para imágenes, incluyendo iconos, botones y gráficos +- Descripción de los datos representados en gráficos, diagramas e ilustraciones +- Breves descripciones de contenido no textual como archivos de audio y vídeo +- Etiquetas para controles de formulario, entrada de datos y otros componentes de la interfaz de usuario + +Las alternativas textuales transmiten el propósito o función de una imagen para proporcionar una experiencia de usuario equivalente. Por ejemplo, una alternativa textual apropiada para un botón de búsqueda sería "*buscar*" en lugar de "*lupa*". + +Las alternativas textuales pueden ser presentadas de varias maneras. Por ejemplo, pueden ser leidas en voz alta para personas que no pueden ver la pantalla y para aquellas con dificultades de lectura, ampliadas a tamaño de texto personalizados, o mostrarse en dispositivos braille. Las alternativas textuales sirven como etiquetas para controles y funcionalidad que ayudan a la navegación con teclado o por reconocimiento de voz (entrada por voz). También actuan como etiquetas para identificar audios, videos y archivos en otros formatos, así como aplicaciones que están integradas como parte de un sitio web. + +{% include excol.html type="start" %} + +#### Requisitos de accesibilidad relacionados con alternativas textuales (enlaces a la especificación técnica) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Pauta 1.1 – Alternativas Textuales](https://www.w3.org/WAI/WCAG22/quickref/#text-alternatives) + +**UAAG** + +- [Pauta 1.1 – Contenido Alternativo](https://www.w3.org/TR/UAAG20/#gl-access-alternative-content) + +**ATAG** + +- [Principio A.1: Las interfaces de usuario de las herramientas de autor siguen las pautas de accesibilidad aplicables](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Pauta A.2.1: (Para la interfaz de herramienta de autor) Hacer disponible el contenido alternativo para los autores](https://www.w3.org/TR/ATAG20/#gl_a21) +- [Pauta A.2.2: (Para la interfaz de herramienta de autor) Asegurar que la presentación de la vista de edición pueda ser determinada programáticamente](https://www.w3.org/TR/ATAG20/#gl_a22) +- [Pauta A.3.7: (Para la interfaz de herramienta de autor) Asegurar que las previsualizaciones son al menos tan accesibles como los agentes de usuario del mercado](https://www.w3.org/TR/ATAG20/#gl_a37) +- [Apartado B. Soporte la producción de contenido accesible](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + +#### Historias de usuario relacionadas con alternativas de texto +{:#stories-related-to-text-alternatives.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, reportero con lesión por esfuerzo repetitivo](/people-use-web/user-stories/#reporter) +- [Martine, estudiante online con problemas de audición](/people-use-web/user-stories/#onlinestudent) +- [Ilya, ejecutiva senior con ceguera](/people-use-web/user-stories/#accountant) +- [Preety, estudiante de secundaria con trastorno por déficit de atención e hiperactividad y dislexia](/people-use-web/user-stories/#classroomstudent) +- [Yun, retirada, con visión reducida, temblores en manos y leve perdida de memoria a corto plazo](/people-use-web/user-stories/#retiree) +- [Kaseem, adolescente con sordera y ceguera](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### Subtítulos y otras alternativas para multimedia {#captions} + +Las personas que no pueden oír audio o ver video necesitan alternativas. Entre los ejemplos se incluyen: + +- Transcripciones textuales y subtítulos para contenido de audio, como grabaciones de una entrevista de radio +- Audiodescripciones, que son narraciones que describen importantes detalles en un vídeo +- Interpretación en lenguaje de signos de contenido de audio, incluyendo experiencias auditivas relevantes + +Las transcripciones de texto bien escritas que contienen una correcta secuencia de cualquier información auditiva o visual proporcionan un nivel básico de accesibilidad y facilitan la producción de subtítulos y descripciones de audio. + +{% include excol.html type="start" %} + +#### Requisitos de accesibilidad relacionados con multimedia (enlaces a la especificación técnica) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Pauta 1.2 – Medios tempodependentes](https://www.w3.org/WAI/WCAG22/quickref/#time-based-media) + +**UAAG** + +- [Pauta 1.1 – Contenido alternativo](https://www.w3.org/TR/UAAG20/#gl-access-alternative-content) + +**ATAG** + +- [Principio A.1: Las interfaces de usuario de las herramientas de autor siguen las pautas de accesibilidad aplicables](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Pauta A.2.1: (Para la interfaz de herramienta de autor) Hacer disponible el contenido alternativo para los autores](https://www.w3.org/TR/ATAG20/#gl_a21) +- [Pauta A.3.7: (Para la interfaz de herramienta de autor) Asegurar que las previsualizaciones son al menos tan accesibles como los agentes de usuario del mercado](https://www.w3.org/TR/ATAG20/#gl_a37) +- [Apartado B. Soporte la producción de contenido accesible](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %} +{% include excol.html type="start" %} + +#### Historias de usuario relacionadas con multimedia {#stories-related-to-multimedia} +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Martine, estudiante online con problemas de audición](/people-use-web/user-stories/#onlinestudent) +- [Ilya, ejecutiva senior con ceguera](/people-use-web/user-stories/#accountant) +- [Kaseem, adolescente con sordera y ceguera](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### Contenido que puede ser presentado de diferentes maneras {#adaptable} + +Para que los usuarios sean capaces de cambiar la presentación del contenido, es necesario que: + +- Encabezados, listas, tablas, campos de formulario y estructuras de contenido utilicen el marcado apropiado +- El orden de la información o la secuencia de instrucciones sean independientes de la presentación +- Los navegadores y tecnologías de apoyo faciliten configuraciones para personalizar la presentación + +El cumplimiento de este requisito permite que el contenido se lea correctamente en voz alta, se amplíe o se adapte para satisfacer las necesidades y preferencias de diferentes personas. Por ejemplo, se puede presentar usando combinaciones de color personalizadas, tamaño de texto u otro estilo para facilitar la lectura. Este requisito también facilita otras formas de adaptación, incluyendo la generación automática de esquemas de página y resúmenes para ayudar a obtener una visión general y a centrarse en partes concretas con más facilidad. + +{% include excol.html type="start" %} + +#### Requisitos de accesibilidad relacionados con adaptabilidad (enlaces a la especificación técnica) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Pauta 1.3 - Adaptable](https://www.w3.org/WAI/WCAG22/quickref/#adaptable) + +**UAAG** + +- [Pauta 1.4 – Configuración de texto](https://www.w3.org/TR/UAAG20/#gl-text-config) +- [Pauta 1.5 – Configuración del volumen](https://www.w3.org/TR/UAAG20/#gl-volume-config) +- [Pauta 1.6 - Configuración de voz sintetizada](https://www.w3.org/TR/UAAG20/#gl-speech-config) +- [Pauta 1.7 – Configuración de hojas de estilo de usuario](https://www.w3.org/TR/UAAG20/#gl-style-sheets-config) +- [Pauta 1.9 – Vistas alternativas](https://www.w3.org/TR/UAAG20/#gl-alternative-views) +- [Pauta 1.10 – Información de elementos](https://www.w3.org/TR/UAAG20/#gl-info-link) + +**ATAG** + +- [Principio A.1: Las interfaces de usuario de las herramientas de autor siguen las pautas de accesibilidad aplicables](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Pauta A.2.2: (Para la interfaz de herramienta de autor) Asegurar que la presentación de la vista de edición pueda ser determinada programáticamente](https://www.w3.org/TR/ATAG20/#gl_a22) +- [Pauta A.3.7: (Para la interfaz de herramienta de autor) Asegurar que las previsualizaciones son al menos tan accessibles como los agentes de usuario del mercado](https://www.w3.org/TR/ATAG20/#gl_a37) +- [Apartado B. Soporte la producción de contenido accesible](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Historias de usuario relacionadas con adaptabilidad +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Lee, comprador online con daltonismo](/people-use-web/user-stories/#shopper) +- [Alex, reportero con lesión por esfuerzo repetitivo](/people-use-web/user-stories/#reporter) +- [Ilya, ejecutiva senior con ceguera](/people-use-web/user-stories/#accountant) +- [Preety, estudiante de secundaria con trastorno por déficit de atención e hiperactividad y dislexia](/people-use-web/user-stories/#classroomstudent) +- [Yun, retirada, con visión reducida, temblores en manos y leve perdida de memoria a corto plazo](/people-use-web/user-stories/#retiree) +- [Luis, asistente en un supermercado con síndrome de Down](/people-use-web/user-stories/#supermarketassistant) +- [Kaseem, adolescente con sordera y ceguera](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### Contenido más fácil de ver y escuchar {#distinguishable} + +El contenido distinguible es más fácil de ver y leer. Algunos ejemplos: + +- El color no se utiliza como única forma de transmitir información o identificar el contenido +- Las combinaciones predeterminadas de color de primer plano y fondo proporcionan suficiente contraste +- Cuando los usuarios redimensionan el texto hasta un 400% o cambian el espaciado del texto, no se pierde información +- Reflujo de texto en ventanas pequeñas ("viewports") y cuando los usuarios hacen el texto más grande +- Las imágenes de texto se redimensionan, se sustituyen por texto real o se evitan en la medida de lo posible +- Los usuarios pueden pausar, detener o ajustar el volumen de audio que se reproduce en un sitio web +- El audio de fondo es bajo o se puede apagar para evitar interferencias o distracciones + +Cumplir con este requisito ayuda a separar el primer plano del fondo para hacer que la información importante sea más distinguible. Esto incluye consideraciones tanto para las personas que no utilizan tecnologías de apoyo como para las que si las utilizan y que pueden percibir interferencias de contenido de audio o visual del segundo plano. Por ejemplo, muchas personas con daltonismo no utilizan ninguna herramienta en particular y confían en un diseño adecuado que proporcione suficiente contraste de color entre el texto y el fondo que lo rodea. Para otras personas, el audio que se reproduce automáticamente podría interferir con el sistema de "texto a voz" o con [dispositivos de ayuda auditiva (ALD)](/teach-advocate/accessible-presentations/#ald "definition"). + +{% include excol.html type="start" %} + +#### Requisitos de accesibilidad relacionados con distinguible (enlaces a la especificación técnica) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Pauta 1.4 - Distinguible](https://www.w3.org/WAI/WCAG22/quickref/#distinguishable) + +**UAAG** + +- [Pauta 1.3 - Resaltado](https://www.w3.org/TR/UAAG20/#gl-interaction-highlight) +- [Pauta 1.4 – Configuración de texto](https://www.w3.org/TR/UAAG20/#gl-text-config) +- [Pauta 1.5 – Configuración de volumen](https://www.w3.org/TR/UAAG20/#gl-volume-config) +- [Pauta 1.6 – Configuración de voz sintetizada](https://www.w3.org/TR/UAAG20/#gl-speech-config) +- [Pauta 1.7 – Configuración de hojas de estilo de usuario](https://www.w3.org/TR/UAAG20/#gl-style-sheets-config) +- [Pauta 1.8 – Orientación de la vista](https://www.w3.org/TR/UAAG20/#gl-viewport-orient) +- [Pauta 1.9 – Vistas alternativas](https://www.w3.org/TR/UAAG20/#gl-alternative-views) +- [Pauta 1.10 – Información de elementos](https://www.w3.org/TR/UAAG20/#gl-info-link) + +**ATAG** + +- [Principio A.1: Las interfaces de usuario de las herramientas de autor siguen las pautas de accesibilidad aplicables](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Pauta A.3.7: (Para la interfaz de herramienta de autor) Asegurar que las previsualizaciones son al menos tan accessibles como los agentes de usuario del mercado](https://www.w3.org/TR/ATAG20/#gl_a37) +- [Apartado B. Soporte la producción de contenido accesible](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Historias de usuario relacionadas con peceptibilidad +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Lee, comprador online con daltonismo](/people-use-web/user-stories/#s#reporter) +- [Martine, estudiante online con problemas de audición](/people-use-web/user-stories/#reporter) +- [Ilya, ejecutiva senior con ceguera](/people-use-web/user-stories/#accountant) +- [Yun, retirada, con visión reducida, temblores en manos y leve perdida de memoria a corto plazo](/people-use-web/user-stories/#retiree) +- [Kaseem, adolescente con sordera y ceguera](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +## Interfaz de usuario y navegación operables {#operable} + +### Funcionalidad disponible desde el teclado {#keyboard} + +Muchas personas no utilizan el ratón y dependen del teclado para interactuar con la Web. Esto requiere acceso mediante teclado a todas las funciones, incluidos los controles de formulario, entrada de datos y otros componentes de la interfaz de usuario. + +La accesibilidad con teclado incluye: + +- Toda la funcionalidad que está disponible con ratón también está disponible con teclado +- El foco del teclado no queda atrapado en ninguna parte del contenido +- Los navegadores web, herramientas de autor y otras herramientas facilitan soporte para teclado + +El cumplimiento de este requisito ayuda a los usuarios de teclado, incluidos quienes que utilizan teclados alternativos, como teclados con diseños ergonómicos, teclados en pantalla o dispositivos de conmutación. También ayuda a las personas que utilizan reconocimiento de voz (entrada por voz) para operar sitios web y dictar texto a través de la interfaz del teclado. + +{% include excol.html type="start" %} + +#### Requisitos de accesibilidad relacionados con accesibilidad de teclado (enlaces a la especificación técnica) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Pauta 2.1 – Accesible por teclado](https://www.w3.org/WAI/WCAG22/quickref/#keyboard-accessible) + +**UAAG** + +- [Pauta 2.1 – Acceso con teclado](https://www.w3.org/TR/UAAG20/#gl-keyboard-access) +- [Pauta 2.2 – Navegación secuencial](https://www.w3.org/TR/UAAG20/#gl-sequential-navigation) +- [Pauta 2.3 – Navegación y activación directa](https://www.w3.org/TR/UAAG20/#gl-direct-navigation-and-activation) +- [Pauta 2.11 – Otros metodos de entrada](https://www.w3.org/TR/UAAG20/#gl-other-devices) + +**ATAG** + +- [Principio A.1: Las interfaces de usuario de las herramientas de autor siguen las pautas de accesibilidad aplicables](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Pauta A.3.1: (Para la interfaz de herramientas de autor) Proporcionar acceso mediante teclado a las funciones de creación](https://www.w3.org/TR/ATAG20/#gl_a31) +- [Apartado B. Soporte la producción de contenido accesible](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Historias de usuario relacionadas con la accesibilidad de teclado +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, reportero con lesión por esfuerzo repetitivo](/people-use-web/user-stories/#reporter) +- [Ilya, ejecutiva senior con ceguera](/people-use-web/user-stories/#accountant) + +{% include excol.html type="end" %} + +### Los usuarios tienen tiempo suficiente para leer y utilizar el contenido {#time} + +Algunas personas necesitan más tiempo que otras para leer y utilizar el contenido. Por ejemplo, hay quienes requieren más tiempo para escribir texto, comprender instrucciones, operar controles o incluso para completar tareas en un sitio web. + +Entre los ejemplos de cómo proporcionar tiempo suficiente se incluyen los mecanismos para: + +- Detener, extender o ajustar los límites de tiempo, excepto cuando sea necesario +- Pausar, detener u ocultar movimiento, parpadeo o desplazamiento del contenido +- Posponer o suprimir interrupciones, excepto cuando sean necesarias +- Re-autenticar cuando la sesión expire sin perdida de datos + +{% include excol.html type="start" %} + +#### Requisitos de accesibilidad relacionados con tiempo suficiente (enlaces a la especificación técnica) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Pauta 2.2 - Tiempo suficiente](https://www.w3.org/WAI/WCAG22/quickref/#enough-time) + +**UAAG** + +- [Pauta 2.8 - Interacción independiente de tiempo](https://www.w3.org/TR/UAAG20/#gl-time-independent) +- [Pauta 2.10 - Media basada en tiempo](https://www.w3.org/TR/UAAG20/#gl-control-inaccessible-content) + +**ATAG** + +- [Principio A.1: Las interfaces de usuario de las herramientas de autor siguen las pautas de accesibilidad aplicables](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Pauta A.3.2: (Para la interfaz de usuario de la herramienta de creación) Proporcionar a los autores el tiempo suficiente](https://www.w3.org/TR/ATAG20/#gl_a32) +- [Apartado B. Soporte la producción de contenido accesible](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Historias de usuario relacionadas con tiempo suficiente +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, reportero con lesión por esfuerzo repetitivo](/people-use-web/user-stories/#reporter) +- [Preety, estudiante de secundaria con trastorno por déficit de atención e hiperactividad y dislexia](/people-use-web/user-stories/#classroomstudent) +- [Yun, retirada, con visión reducida, temblores en manos y leve perdida de memoria a corto plazo](/people-use-web/user-stories/#retiree) +- [Luis, asistente en un supermercado con síndrome de Down](/people-use-web/user-stories/#supermarketassistant) +- [Kaseem, adolescente con sordera y ceguera](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### El contenido no causa convulsiones ni reacciones físicas {#safe} + +El contenido que parpadea a ciertas velocidades o siguiendo determinados patrones puede causar reacciones fotosensibles, incluyendo convulsiones. Lo ideal es evitar totalmente el contenido parpadeante o sólo utilizarlo de forma que no cause riesgos conocidos. También las animaciones y el contenido en movimiento pueden causar incomodidad y reacciones físicas. + +Estos son algunos ejemplos de cómo evitar causar convulsiones o reacciones físicas: + +- No incluir contenido que parpadea a ciertas velocidades y siguiendo determinados patrones +- Alertar a los usuarios antes de mostrar contenido parpadeante y proporcionar alternativas +- Facilitar mecanismos para desconectar las animaciones, excepto cuando sean esenciales + +{% include excol.html type="start" %} + +#### Requisitos de accesibilidad relacionados con convulsiones (enlaces a la especificación técnica) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Pauta 2.3 - Convulsiones](https://www.w3.org/WAI/WCAG22/quickref/#seizures-and-physical-reactions) + +**UAAG** + +- [Pauta 2.9 - Parpadeo](https://www.w3.org/TR/UAAG20/#gl-prevent-flash) + +**ATAG** + +- [Principio A.1: Las interfaces de usuario de las herramientas de autor siguen las pautas de accesibilidad aplicables](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Pauta A.3.3: (Para la interfaz de herramienta de autor) Ayudar a los autores a evitar parpadeo que pudiera causar convulsiones](https://www.w3.org/TR/ATAG20/#gl_a33) +- [Apartado B. Soporte la producción de contenido accesible](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %} + +### Los usuarios pueden navegar facilmente, encontrar contenido, y determinar dónde están {#navigable} + +El contenido bien organizado ayuda a los usuarios a orientarse y navegar eficazmente. Por ejemplo: + +- Páginas que tienen títulos claros y estan organizadas utilizando encabezados de sección descriptivos +- Existe más de un camino para encontrar las paginas relevantes en un conjunto de páginas web +- Los usuarios son informados sobre donde se encuentran dentro de un conjunto de páginas relacionadas +- Hay formas de evitar los bloques de contenido que se repiten en varias páginas +- El foco del teclado es visible y el orden del foco sigue una secuencia significativa +- El propósito de un enlace es evidente, idealmente incluso cuando el enlace se ve por sí solo + +Cumplir este requisito ayuda a las personas a navegar a través de las páginas web de diferentes maneras, dependiendo de sus necesidades particulares y de sus preferencias. Por ejemplo, mientras que algunas personas confían en estructuras jerárquicas de navegación, como las barras de menú, para encontrar páginas web específicas, otras confían en las funciones de búsqueda de los sitios web. Algunas personas pueden ver el contenido mientras que otras lo pueden escuchar o incluso ver y escuchar al mismo tiempo. Algunas personas pueden utilizar el contenido sólo con el ratón o solo con el teclado, mientras que otras pueden usar ambos. + +{% include excol.html type="start" %} + +#### Requisitos de accesibilidad relacionados con la navegación (enlaces a la especificación técnica) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Pauta 2.4 - Navegable](https://www.w3.org/WAI/WCAG22/quickref/#navigable) + +**UAAG** + +- [Pauta 2.2 - Navegación secuencial](https://www.w3.org/TR/UAAG20/#gl-sequential-navigation) +- [Pauta 2.3 - Navegación y activación directa](https://www.w3.org/TR/UAAG20/#gl-direct-navigation-and-activation) +- [Pauta 2.4 - Busqueda de texto](https://www.w3.org/TR/UAAG20/#gl-search-text) +- [Pauta 2.5 - Navegación estructural](https://www.w3.org/TR/UAAG20/#gl-nav-structure) +- [Pauta 2.7 - Controles gráficos](https://www.w3.org/TR/UAAG20/#gl-configure-controls) + +**ATAG** + +- [Principio A.1: Las interfaces de usuario de las herramientas de autor siguen las pautas de accesibilidad aplicables](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Pauta A.2.2: (Para la interfaz de herramienta de autor) Asegurar que la presentación de la vista de editicion puede determinarse programáticamente](https://www.w3.org/TR/ATAG20/#gl_a22) +- [Pauta A.3.4: (Para la interfaz de herramienta de autor) Mejorar la navegación y la edición a través de la estructura del contenido](https://www.w3.org/TR/ATAG20/#gl_a34) +- [Pauta A.3.5: (Para la interfaz de herramienta de autor) Facilitar búsqueda de texto en el contenido](https://www.w3.org/TR/ATAG20/#gl_a35) +- [Apartado B. Soporte la producción de contenido accesible](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Historias de usuario relacionadas con la navegación +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, reportero con lesión por esfuerzo repetitivo](/people-use-web/user-stories/#reporter) +- [Ilya, profesional senior con ceguera](/people-use-web/user-stories/#accountant) +- [Preety, estudiante de secundaria con trastorno por déficit de atención e hiperactividad y dislexia](/people-use-web/user-stories/#classroomstudent) +- [Yun, retirada, con visión reducida, temblores en manos y leve perdida de memoria a corto plazo](/people-use-web/user-stories/#retiree) +- [Luis, asistente en un supermercado con síndrome de Down](/people-use-web/user-stories/#supermarketassistant) +- [Kaseem, adolescente con sordera y ceguera](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### Los usuarios pueden utilizar diferentes modalidades de entrada además del teclado {#modalities} + +Las modalidades de entrada más allá del teclado, como la activación táctil, el reconocimiento de voz (entrada por voz) y los gestos, hacen que el contenido sea más fácil de usar para muchas personas. Sin embargo, no todas pueden utilizar cada una de estas modalidades o utilizarlas en la misma medida. Las consideraciones particulares del diseño pueden maximizar el beneficio de cada una de ellas. Por ejemplo: + +- Gestos que requieren destreza o movimientos finos que tienen alternativas que no requieren avanzada destreza +- Componentes que están diseñados para evitar la activación accidental, por ejemplo facilitando la función de deshacer +- Etiquetas que corresponden con nombres en el código, lo cual da soporte a la activación por voz +- Funcionalidad que es activada con movimiento y que también puede activarse mediante componentes de la interfaz de usuario +- Botones, enlaces y otros componentes activos que tienen el tamaño suficiente para facilitar la activación por tacto + +Cumplir este requisito hace que el contenido más fácil de usar por cualquier persona con un amplios rangos de habilidades y de dispositivos. Ello incluye el contenido utilizado en teléfonos móbiles, tablets y terminales de autoservicio como las máquinas de ticket. + +{% include excol.html type="start" id="" %} + +#### Requisitos de accesibilidad relacionados con modalidades de entrada (enlaces a la especificación técnica) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Pauta 2.5 - Modalidades de entrada](https://www.w3.org/WAI/WCAG22/quickref/#input-modalities) + +{% include excol.html type="end" %}{% include excol.html type="start" id="" %} + +#### Historias de usuario relacionadas con modalidades de entrada +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, reportero con lesión por esfuerzo repetitivo](/people-use-web/user-stories/#reporter) +- [Yun, retirada, con visión reducida, temblores en manos y leve perdida de memoria a corto plazo](/people-use-web/user-stories/#retiree) +- [Luis, asistente en un supermercado con síndrome de Down](/people-use-web/user-stories/#supermarketassistant) + +{% include excol.html type="end" %} + +## Información comprensible e interfaz de usuario {#understandable} + +### El texto es legible y comprensible {#readable} + +Los autores de contenido deben asegurar que el contenido textual es legible y comprensible para la más amplia audiencia, incluyendo cuando es leido por herramientas texto-a-voz. Para ello, algunos ejemplos de lo que se puede hacer son: + +- Identificar el idioma primario de la página web, como el árabe, holandés o coreano +- Identifiar el idioma de fragmentos de texto, frases, u otras partes de la página web +- Proporcionar definiciones para palabras no comunes, fráses, modismos y abreviaturas inusuales +- Utilizar el lenguaje más claro y simple posible, o proporcionar versiones simplificadas + +El cumplimiento de este requisito ayuda al software, incluyendo las tecnologías de apoyo, a procesar correctamente el contenido del texto. Por ejemplo, este requisito ayuda al software a leer el contenido en voz alta, a generar resúmenes de páginas y a proporcionar definiciones para palabras inusuales como la jerga técnica. También ayuda a las personas que tienen dificultad para entender oraciones más complejas, frases o vocabulario. En particular, ayuda a las personas con diferentes tipos de discapacidad cognitiva. + +{% include excol.html type="start" %} + +#### Requisitos de accesibilidad relacionados con la legibilidad (enlaces a la especificación técnica) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Pauta 3.1 - Legible](https://www.w3.org/WAI/WCAG22/quickref/#readable) + +**ATAG** + +- [Principio A.1: Las interfaces de usuario de las herramientas de autor siguen las pautas de accesibilidad aplicables](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Pauta A.4.2: (Para la interfaz de herramienta de autor) Documentar la interfaz de usuario, incluidas todas las características de accesibilidad](https://www.w3.org/TR/ATAG20/#gl_b42) +- [Apartado B. Soporte la producción de contenido accesible](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Historias de usuario relacionadas con la legibilidad +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Martine, estudiante online con problemas de audición](/people-use-web/user-stories/#onlinestudent) +- [Ilya, profesional senior con ceguera](/people-use-web/user-stories/#accountant) +- [Preety, estudiante de secundaria con trastorno por déficit de atención e hiperactividad y dislexia](/people-use-web/user-stories/#classroomstudent) +- [Yun, retirada, con visión reducida, temblores en manos y leve perdida de memoria a corto plazo](/people-use-web/user-stories/#retiree) +- [Luis, asistente en un supermercado con síndrome de Down](/people-use-web/user-stories/#supermarketassistant) + +{% include excol.html type="end" %} + +### El contenido aparece y opera de forma predecible {#predictable} + +Muchas personas confían en interfaces de usuario predecibles y se desorientan o distraen con apariciones y comportamientos no consistentes. Algunos ejemplos para hacer el contenido más predecible serían: + +- Mecanismos de navegación que se repiten en multiples páginas y que aparecen siempre en el mismo lugar +- Componentes de la interfaz de usuaro que se repiten en páginas web y que tienen las mismas etiquetas +- Cambios significativos en la página web que no ocurren sin el consentimiento del usuario + +El cumplimiento de este requisito ayuda a las personas a aprender rápidamente la funcionalidad y los mecanismos de navegación que se ofrecen en un sitio web, y a manejarlos de acuerdo con sus necesidades y preferencias específicas. Por ejemplo, algunas personas asignan teclas de acceso directo personalizadas a funciones que utilizan con frecuencia para mejorar la navegación con el teclado. Otras memorizan los pasos para llegar a determinadas páginas o para completar procesos en un sitio web. Ambos tipos de personas dependen de que la funcionalidad sea predecible y consistente. + +{% include excol.html type="start" %} + +#### Requisitos de accesibilidad relacionados con la predecibilidad (enlaces a la especificación técnica) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Pauta 3.2 - Predecible](https://www.w3.org/WAI/WCAG22/quickref/#predictable) + +**UAAG** + +- [Pauta 3.3 - Predecible](https://www.w3.org/TR/UAAG20/#gl-predictable-operation) + +**ATAG** + +- [Principio A.1: Las interfaces de usuario de las herramientas de autor siguen las pautas de accesibilidad aplicables](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Pauta A.2.2: (Para la interfaz de herramienta de autor) Asegurar que la presentación de la vista de edición pueda ser determinada programáticamente](https://www.w3.org/TR/ATAG20/#gl_a22) +- [Pauta A.4.2: (Para la interfaz de herramienta de autor) Documentar la interfaz de usuario, incluidas todas las características de accesibilidad](https://www.w3.org/TR/ATAG20/#gl_b42) +- [Apartado B. Soporte la producción de contenido accesible](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Historias de usuario relacionadas con predecibilidad +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, reportero con lesión por esfuerzo repetitivo](/people-use-web/user-stories/#reporter) +- [Ilya, profesional senior con ceguera](/people-use-web/user-stories/#accountant) +- [Preety, estudiante de secundaria con trastorno por déficit de atención e hiperactividad y dislexia](/people-use-web/user-stories/#classroomstudent) +- [Yun, retirada, con visión reducida, temblores en manos y leve perdida de memoria a corto plazo](/people-use-web/user-stories/#retiree) +- [Luis, asistente en un supermercado con síndrome de Down](/people-use-web/user-stories/#supermarketassistant) +- [Kaseem, adolescente con sordera y ceguera](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### Asistencia a los usuarios para prevenir y corregir errores {#tolerant} + +Los formularios y otros elementos de interacción pueden ser confusos o dificultar su uso para muchas personas y como resultado, ellas serán más propensas a cometer errores. Algunos ejemplos de ayuda para prevenir y corregir errores serían: + +- Intrucciones descriptivas, mensajes de error y sugerencias de corrección +- Ayuda contextual para funcionalidades e interacciones más complejas +- Opción de revisar, corregir o revertir envíos si es necesario + +El cumplimiento de este requisito ayuda a las personas que no ven o no oyen el contenido y que es posible que no reconozcan las relaciones implícitas, las secuencias y otros indicios visuales. También ayuda a las personas que no entienden la funcionalidad, están desorientadas o confundidas, olvidan o cometen errores usando formularios y elementos de interacción por cualquier otra razón. + +{% include excol.html type="start" %} + +#### Requisitos de accesibilidad relacionados con la entrada de datos asistida (enlaces a la especificación técnica) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Pauta 3.3 - Entrada de datos asistida](https://www.w3.org/WAI/WCAG22/quickref/#input-assistance) + +**UAAG** + +- [Pauta 3.1 - Errores](https://www.w3.org/TR/UAAG20/#gl-avoid-mistakes) + +**ATAG** + +- [Principio A.1: Las interfaces de usuario de las herramientas de autor siguen las pautas de accesibilidad aplicables](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Pauta A.2.2: (Para la interfaz de herramienta de autor) Asegurar que la presentación de la vista de edición pueda ser determinada programáticamente](https://www.w3.org/TR/ATAG20/#gl_a22) +- [Pauta A.4.1: (Para la interfaz de herramienta de autor) Ayudar a los autores a prevenir y corregir errores](https://www.w3.org/TR/ATAG20/#gl_b41) +- [Apartado B. Soporte la producción de contenido accesible](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Historias de usuario relacionadas con la ayuda en la entrada de datos +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Lee, comprador online con daltonismo](/people-use-web/user-stories/#shopper) +- [Alex, reportero con lesión por esfuerzo repetitivo](/people-use-web/user-stories/#reporter) +- [Preety, estudiante de secundaria con trastorno por déficit de atención e hiperactividad y dislexia](/people-use-web/user-stories/#classroomstudent) +- [Yun, retirada, con visión reducida, temblores en manos y leve perdida de memoria a corto plazo](/people-use-web/user-stories/#retiree) +- [Luis, asistente en un supermercado con síndrome de Down](/people-use-web/user-stories/#supermarketassistant) + +{% include excol.html type="end" %} + +## Contenido robusto e interpretación confiable {#robust} + +### El contenido es compatible con las herramientas de usuaro actuales y futuras {#compatible} + +El contenido robusto es compatible con diferentes navegadores, tecnologías de apoyo y otros agentes de usuaro. Entre los ejemplos de como esto se puede conseguir se incluyen: + +- Asegurarse de que el marcado puede interpretarse de forma confiable, por ejemplo, asegurando que es válido +- Proporcionar un nombre, rol y valor para los componentes no estándar de la interfaz de usuario + +El cumplimiento de este requisito ayuda a maximizar la compatibilidad con los agentes de usuario actuales y futuros, incluyendo las tecnologías de apoyo. En particular, permite a las tecnologías de apoyo procesar el contenido de forma confiable y presentarlo u operarlo de diferentes maneras. Se incluyen en este punto los botones no estándar (programados), campos de formulario y otros controles. + +{% include excol.html type="start" %} + +#### Requisitos de accesibilidad relacionados con compatibilidad (enlaces a la especificación técnica) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Pauta 4.1 - Compatible](https://www.w3.org/WAI/WCAG22/quickref/#compatible) + +**UAAG** + +- [Pauta 2.6 - Configuración de preferencias](https://www.w3.org/TR/UAAG20/#gl-store-prefs) +- [Pauta 4.1 - Tecnologías de apoyo](https://www.w3.org/TR/UAAG20/#gl-AT-access) +- [Pauta 5.1 - Seguir las especificaciones](https://www.w3.org/TR/UAAG20/#gl-obs-env-conventions) + +**ATAG** + +- [Principio A.1: Las interfaces de usuario de las herramientas de autor siguen las pautas de accesibilidad aplicables](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Apartado B. Soporte la producción de contenido accesible](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Historias de usuario relacionadas con compatibilidad +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Lee, comprador online con daltonismo](/people-use-web/user-stories/#shopper) +- [Alex, reportero con lesión por esfuerzo repetitivo](/people-use-web/user-stories/#reporter) +- [Ilya, profesional senior con ceguera](/people-use-web/user-stories/#accountant) +- [Preety, estudiante de secundaria con trastorno por déficit de atención e hiperactividad y dislexia](/people-use-web/user-stories/#classroomstudent) +- [Luis, asistente en un supermercado con síndrome de Down](/people-use-web/user-stories/#supermarketassistant) +- [Kaseem, adolescente con sordera y ceguera](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +{% include excol.html type="all" %} + diff --git a/pages/fundamentals/accessibility-principles/index.fr.md b/pages/fundamentals/accessibility-principles/index.fr.md new file mode 100644 index 00000000000..57adc57b891 --- /dev/null +++ b/pages/fundamentals/accessibility-principles/index.fr.md @@ -0,0 +1,967 @@ +--- +# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#". +# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:" + +title: Principes d’accessibilité +lang: fr +last_updated: 2023-12-06 # Put the date of this translation YYYY-MM-DD (with month in the middle) +description: Un aperçu des exigences d’accessibilité web fondamentales pour les sites et les applications web, les navigateurs et autres outils. +teaser_text: La page « Principes d’accessibilité » présente certaines exigences d’accessibilité pour les sites et les applications web, les navigateurs et autres outils. Elle fournit des liens vers les standards internationaux de l’Initiative Accessibilité du Web (WAI) du W3C et vers une page parlant des particularités de quelques utilisateurs du Web. + +translators: +- name: "Stéphane Deschamps" +contributors: +- name: "@code-elegant" + +permalink: /fundamentals/accessibility-principles/fr +ref: /fundamentals/accessibility-principles/ + +github: + label: wai-accessibility-principles + +image: /content-images/accessibility-principles/social.png +changelog: /fundamentals/accessibility-principles/changelog/ # Do not change this + +# In the footer below: +# Do not change the dates +# Do not translate CHANGELOG +# Translate the other words, including "Date:" and "Editors:" +# Translate the Working Group name. Leave the Working Group acronym in English. +footer: > +

Date: Updated 10 May 2019.

+

Editors: Shadi Abou Zahra. Acknowledgments.

+

Developed by the Education and Outreach Working Group (EOWG). Previously developed with the WAI-AGE Task Force, with support of the WAI-AGE Project.

+--- + +{::nomarkdown} +{% include box.html type="start" h="2" title="Résumé" class="full" %} +{:/} + +Cette page introduit certaines exigences d’accessibilité web fondamentales pour les sites et les applications web, les navigateurs et autres outils. Elle fournit des liens vers les standards internationaux de l’Initiative Accessibilité du Web (WAI) du W3C et vers une page parlant des particularités de [quelques utilisateurs du Web](/people-use-web/user-stories/). + +**Note :** ce n’est pas une liste exhaustive de toutes les exigences d’accessibilité. + +{::nomarkdown} +{% include box.html type="end" %} +{:/} + +{::options toc_levels="2,3" /} + +{::nomarkdown} +{% include_cached toc.html type="start" title="Contenu de la page" class="full" %} +{:/} + +- TOC is created automatically. +{:toc} + + + +{::nomarkdown} +{% include_cached toc.html type="end" %} +{:/} + + +{% include excol.html type="all" %} + +## Standards d’accessibilité Web {#standards} + +L’accessibilité web s’appuie sur plusieurs composants qui travaillent ensemble. Certains d’entre eux sont : + +- **Les contenus web**{:#webcontent} : ce terme s’applique à toute partie d’un site web, y compris le texte, les images, les formulaires et le multimédia, aussi bien que tout code, script, application, et ainsi de suite. +- **Les agents utilisateurs**{:#useragents} : des logiciels que l’on utilise pour accéder aux contenus web, incluant les navigateurs graphiques de bureau, les navigateurs vocaux, les navigateurs mobiles, les lecteurs multimédia, les modules d’extension (plug-ins), et certaines [technologies d’assistance](/people-use-web/tools-techniques/). +- **Outils de production de contenu**{:#authoringtools} : des logiciels ou des services que l’on utilise pour produit des contenus web, incluant les éditeurs de code, les outils de conversion de documents, les systèmes de gestion de contenus, les blogs, les scripts de bases de données, et d’autres outils. + +{% include excol.html type="start" %} + +### Plus sur les standards d’accessibilité web + +{:.no_toc} + +{% include excol.html type="middle" %} + +Ces composants sont liés les uns aux autres et se complètent mutuellement. Par exemple, le **contenu web** doit inclure des textes alternatifs pour les images. Cette information doit être interprétée par les **navigateurs web** puis transmise aux **technologies d’assistance**, comme les lecteurs d’écran. Pour créer ces alternatives textuelles, les auteurs ont besoin **d’outils de production de contenus** qui leur permettent de le faire. Plus d’information est disponible dans [Composants essentiels pour l’accessibilité web](/fundamentals/components/). + +Les standards jouent un rôle vital dans la définition des exigences d’accessibilité pour chacun de ces composants. Certaines exigences d’accessibilité sont facilement atteignables, cependant comprendre les bases du l’usage du Web par des personnes ayant un handicap aide à les mettre en place plus efficacement. Certains aspects de l’accessibilité réclament plus de compétences techniques ou de connaissances expertes de la façon dont les gens utilisent le Web. Dans tous les cas, [impliquer les utilisateurs dès le début et tout le long de vos projets web](/test-evaluate/involving-users/) rendra votre travail plus facile et de meilleure qualité. + +L’Initiative d’Accessibilité Web (WAI) fournit une liste de recommandations qui sont reconnues internationalement comme le standard pour l’accessibilité web. Elles incluent : + +- **[Recommandations d’accessibilité des contenus web (WCAG)](/standards-guidelines/wcag/)** +- **[Recommandations d’accessibilité des agents utilisateurs (UAAG)](/standards-guidelines/uaag/)** +- **[Recommandations d’accessibilité des outils de production de contenu (ATAG)](/standards-guidelines/atag/)** + +Il existe aussi une spécification WAI pour les **[Applications internet riches accessibles (WAI-ARIA)](/standards-guidelines/aria/)**, qui inclut les contenus dynamiques et les contrôles d’interface utilisateur avancés développés avec Ajax, JavaScript et d’autres technologies web liées. + +{% include excol.html type="end" %} + +## Information perceptible et interface utilisateur {#perceivable} + +### Alternatives textuelles pour les contenus non textuels {#alternatives} + +Les alternatives textuelles sont un équivalent des contenus non textuels. Par exemple : + +- Des équivalents courts pour les images, y compris les icônes, les boutons et les graphiques +- Une description des données représentées sur des graphes, des diagrammes et des illustrations +- Des descriptions courtes de contenus non textuels comme les fichiers audio et vidéo +- Des étiquettes pour les éléments de formulaires, de saisie, et d’autres composants d’interface utilisateur + +Les alternatives textuelles véhiculent le but d’une image ou sa fonction pour fournir une expérience utilisateur équivalente. Par exemple, le texte alternatif approprié d’un bouton de recherche pourrait être « *recherche* » plutôt que « *loupe* ». + +Les alternatives textuelles peuvent être présentées sous des formes variées. Par exemple, elles peuvent être lues à voix haute aux personnes qui ne peuvent pas voir l’écran ou à des personnes ayant des difficultés à lire, elles peuvent être agrandies pour ceux qui ont personnalisé la taille d’affichage des textes, ou affichées sur des plages Braille. Les alternatives textuelles servent d’étiquettes pour les contrôles et les fonctionnalités et facilitent la navigation au clavier ou via la reconnaissance vocale (contrôle à la voix). Elles permettent aussi d’identifier les fichiers audio, vidéo et dans d’autres formats, ainsi que les applications intégrées dans un site web. + +{% include excol.html type="start" %} + +#### Exigences d’accessibilité liées aux alternatives textuelles (liens vers les spécifications techniques, en anglais) + +{:.no_toc} + +{% include excol.html type="middle" %} + +{::nomarkdown} +{% include lang.html type="start" lang="en" %} +{:/} + +**WCAG** + +- [Guideline 1.1 - Text + Alternatives](https//www.w3.org/WAI/WCAG22/quickref/#text-equiv){: hreflang="en"} + +**UAAG** + +- [Guideline 1.1 - Alternative + content](https://www.w3.org/TR/UAAG20/#gl-access-alternative-content){: hreflang="en"} + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable + accessibility + guidelines](https://www.w3.org/TR/ATAG20/#principle_a1){: hreflang="en"} +- [Guideline A.2.1: (For the authoring tool user interface) Make + alternative content available to + authors](https://www.w3.org/TR/ATAG20/#gl_a21){: hreflang="en"} +- [Guideline A.2.2: (For the authoring tool user interface) Ensure + that editing-view presentation can be programmatically + determined](https://www.w3.org/TR/ATAG20/#gl_a22){: hreflang="en"} +- [Guideline A.3.7: (For the authoring tool user interface) Ensure + that previews are at least as accessible as in-market user + agents](https://www.w3.org/TR/ATAG20/#gl_a37){: hreflang="en"} +- [Part B. Support the production of accessible + content](https://www.w3.org/TR/ATAG20/#part_b){: hreflang="en"} + +{::nomarkdown} +{% include lang.html type="end" %} +{:/} + +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + +#### Histoires d’utilisateurs liées aux alternatives textuelles + +{:#stories-related-to-text-alternatives.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, journaliste avec un trouble musculosquelettique](/people-use-web/user-stories/#reporter) +- [Martine, étudiante en ligne, malentendante](/people-use-web/user-stories/#onlinestudent) +- [Ilya, cadre supérieure, aveugle](/people-use-web/user-stories/#accountant) +- [Preety, élève de collège avec un trouble du déficit de l’attention avec hyperactivité et dyslexique](/people-use-web/user-stories/#classroomstudent) +- [Yun, retraité avec une mauvaise vue, un tremblement des mains, et une perte de mémoire à court terme](/people-use-web/user-stories/#retiree) +- [Kaseem, adolescente qui est sourde et aveugle](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### Sous-titres et autres alternatives pour le multimédia {#captions} + +Une personne qui ne peut pas entendre le son ou voir la vidéo a besoin d’alternatives, par exemple : + +- Des retranscriptions sous forme textuelle, des sous-titres pour les contenus audio, tels que les enregistrements ou une interview radio +- Des audio-descriptions, qui sont une narration qui décrit les détails visuels importants d’une vidéo +- Des traductions en langue des signes du contenu audio, y compris l’expérience audio pertinente + +Des retranscriptions texte bien écrites contenant la séquence correcte de toutes les informations auditives et visuelles fournissent un niveau d’accessibilité de base et facilitent la production de sous-titres et d’audio-descriptions. + +{% include excol.html type="start" %} + +#### Exigences d’accessibilité liées au multimédia (liens vers les spécifications techniques, en anglais) + +{:.no_toc} + +{% include excol.html type="middle" %} + +{::nomarkdown} +{% include lang.html type="start" lang="en" %} +{:/} + +**WCAG** + +- [Guideline 1.2 - Time-based + Media](https//www.w3.org/WAI/WCAG22/quickref/#media-equiv) + +**UAAG** + +- [Guideline 1.1 - Alternative + content](https://www.w3.org/TR/UAAG20/#gl-access-alternative-content) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable + accessibility + guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Guideline A.2.1: (For the authoring tool user interface) Make + alternative content available to + authors](https://www.w3.org/TR/ATAG20/#gl_a21) +- [Guideline A.3.7: (For the authoring tool user interface) Ensure + that previews are at least as accessible as in-market user + agents](https://www.w3.org/TR/ATAG20/#gl_a37) +- [Part B. Support the production of accessible + content](https://www.w3.org/TR/ATAG20/#part_b) + + +{::nomarkdown} +{% include lang.html type="end" %} +{:/} +{% include excol.html type="end" %} +{% include excol.html type="start" %} + +#### Histoires d’utilisateurs liées au multimédia {#stories-related-to-multimedia} + +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Martine, étudiante en ligne, malentendante](/people-use-web/user-stories/#onlinestudent) +- [Ilya, cadre supérieure, aveugle](/people-use-web/user-stories/#accountant) +- [Kaseem, adolescente qui est sourde et aveugle](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### Du contenu qui peut être présenté de différentes façons {#adaptable} + +Pour que les utilisateurs puissent changer la présentation des contenus, il est nécessaire que : + +- Les titres, les listes, les tableaux, les champs de saisie et structures de contenu soient convenablement balisés +- Les séquences d’informations ou d’instructions soient indépendantes de toute présentation +- Les navigateurs et les technologies d’assistance fournissent des réglages permettant de personnaliser la présentation + +Être conforme à cette exigence permet que le contenu soit correctement lu par une synthèse vocale, agrandi, ou adapté pour satisfaire aux besoins et aux préférences de différentes personnes. Par exemple, il peut être présenté dans une combinaison de couleurs personnalisée, dans une taille de police différente, ou selon des règles de style permettant d’en faciliter la lecture. Cette exigence facilite aussi d’autres formes d’adaptation, comme la génération automatique de plans de page ou de résumés pour permettre d’avoir une vue d’ensemble de la page et de se concentrer sur un endroit en particulier plus facilement. + +{% include excol.html type="start" %} + +#### Exigences d’accessibilité liées à l’adaptabilité (liens vers les spécifications techniques, en anglais) + +{:.no_toc} + +{% include excol.html type="middle" %} + +{::nomarkdown} +{% include lang.html type="start" lang="en" %} +{:/} + +**WCAG** + +- [Guideline 1.3 - + Adaptable](https//www.w3.org/WAI/WCAG22/quickref/#content-structure-separation) + +**UAAG** + +- [Guideline 1.4 - Text + configuration](https://www.w3.org/TR/UAAG20/#gl-text-config) +- [Guideline 1.5 - Volume + configuration](https://www.w3.org/TR/UAAG20/#gl-volume-config) +- [Guideline 1.6 - Synthesized speech + configuration](https://www.w3.org/TR/UAAG20/#gl-speech-config) +- [Guideline 1.7 - User style sheet + configuration](https://www.w3.org/TR/UAAG20/#gl-style-sheets-config) +- [Guideline 1.9 - Alternative + views](https://www.w3.org/TR/UAAG20/#gl-alternative-views) +- [Guideline 1.10 - Element + Information](https://www.w3.org/TR/UAAG20/#gl-info-link) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable + accessibility + guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Guideline A.2.2: (For the authoring tool user interface) Ensure + that editing-view presentation can be programmatically + determined](https://www.w3.org/TR/ATAG20/#gl_a22) +- [Guideline A.3.7: (For the authoring tool user interface) Ensure + that previews are at least as accessible as in-market user + agents](https://www.w3.org/TR/ATAG20/#gl_a37) +- [Part B. Support the production of accessible + content](https://www.w3.org/TR/ATAG20/#part_b) + +{::nomarkdown} +{% include lang.html type="end" %} +{:/} + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Histoires d’utilisateurs liées à l’adaptabilité + +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Lee, client de site Web marchand, daltonien](/people-use-web/user-stories/#shopper) +- [Alex, journaliste avec un trouble musculosquelettique](/people-use-web/user-stories/#reporter) +- [Ilya, cadre supérieure, aveugle](/people-use-web/user-stories/#accountant) +- [Preety, élève de collège avec un trouble du déficit de l’attention avec hyperactivité et dyslexique](/people-use-web/user-stories/#classroomstudent) +- [Yun, retraité avec une mauvaise vue, un tremblement des mains, et une perte de mémoire à court terme](/people-use-web/user-stories/#retiree) +- [Luis, assistant en supermarché, atteint du syndrome de Down](/people-use-web/user-stories/#supermarketassistant) +- [Kaseem, adolescente qui est sourde et aveugle](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### Du contenu plus facile à voir et à entendre {#distinguishable} + +Un contenu perceptible est plus facile à lire et à voir. Par exemple : + +- La couleur n’est pas le seul moyen de véhiculer de l’information ou d’identifier du contenu +- Les couleurs de premier plan et de fond par défaut fournissent un contraste suffisant +- Quand les utilisateurs redimensionnent le texte jusqu’à 400% ou changent l’espacement du texte, aucune information n’est perdue +- Le texte est bien refusionné dans des petites fenêtres (« viewports ») et quand les utilisateurs agrandissent le texte +- Les images contenant du texte sont redimensionnables, remplacées par du véritable texte, ou évitées quand c’est possible +- Les utilisateurs peuvent pauser, arrêter, ou ajuster le volume du son joué sur un site web +- Les sons d’arrière-plan sont bas ou peuvent être coupés, pour éviter toute interférence ou distraction + +Être conforme à cette exigence permet de séparer le premier et l’arrière-plan, de rendre les informations importantes plus faciles à distinguer. Cela intègre aussi bien les besoins de personnes qui n’utilisent pas de technologies d’assistance que de celles utilisant des technologies d’assistance, qui peuvent subir des interférences dues à des éléments audio ou visuels à l’arrière-plan. Par exemple, de nombreuses personnes daltoniennes n’utilisent pas d’outil particulier et s’appuient sur un design correct qui fournit des contrastes suffisants entre le texte et son arrière-plan. Pour d’autres, une piste audio jouée automatiquement peut interférer avec une synthèse vocale ou un outil de [lecture assistée (ALD)](/teach-advocate/accessible-presentations/#ald){: hreflang="en"}. + +{% include excol.html type="start" %} + +#### Exigences d’accessibilité liées à la perception (liens vers les spécifications techniques, en anglais) + +{:.no_toc} + +{% include excol.html type="middle" %} + +{::nomarkdown} +{% include lang.html type="start" lang="en" %} +{:/} + +**WCAG** + +- [Guideline 1.4 - + Distinguishable](https//www.w3.org/WAI/WCAG22/quickref/#visual-audio-contrast) + +**UAAG** + +- [Guideline 1.3 - + Highlighting](https://www.w3.org/TR/UAAG20/#gl-interaction-highlight) +- [Guideline 1.4 - Text + configuration](https://www.w3.org/TR/UAAG20/#gl-text-config) +- [Guideline 1.5 - Volume + configuration](https://www.w3.org/TR/UAAG20/#gl-volume-config) +- [Guideline 1.6 - Synthesized speech + configuration](https://www.w3.org/TR/UAAG20/#gl-speech-config) +- [Guideline 1.7 - User style sheet + configuration](https://www.w3.org/TR/UAAG20/#gl-style-sheets-config) +- [Guideline 1.8 - Orientation in + viewports](https://www.w3.org/TR/UAAG20/#gl-viewport-orient) +- [Guideline 1.9 - Alternative + views](https://www.w3.org/TR/UAAG20/#gl-alternative-views) +- [Guideline 1.10 - Element + Information](https://www.w3.org/TR/UAAG20/#gl-info-link) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable + accessibility + guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Guideline A.3.7: (For the authoring tool user interface) Ensure + that previews are at least as accessible as in-market user + agents](https://www.w3.org/TR/ATAG20/#gl_a37) +- [Part B. Support the production of accessible + content](https://www.w3.org/TR/ATAG20/#part_b) + +{::nomarkdown} +{% include lang.html type="end" %} +{:/} + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Histoires d’utilisateurs liées à la perception + +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Lee, client de site Web marchand, daltonien](/people-use-web/user-stories/#shopper) +- [Martine, étudiante en ligne, malentendante](/people-use-web/user-stories/#onlinestudent) +- [Ilya, cadre supérieure, aveugle](/people-use-web/user-stories/#accountant) +- [Yun, retraité avec une mauvaise vue, un tremblement des mains, et une perte de mémoire à court terme](/people-use-web/user-stories/#retiree) +- [Kaseem, adolescente qui est sourde et aveugle](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +## Interface utilisateur et navigation opérables {#operable} + +### Des fonctionnalités disponibles au clavier {#keyboard} + +De nombreuses personnes n’utilisent pas de souris et s’appuient sur le clavier pour interagir avec le Web. Cela demande que toutes les fonctionnalités soient utilisables au clavier, y compris les éléments de formulaires, de saisie et autres composants de l’interface utilisateur. + +L’accessibilité au clavier comprend : + +- Toute fonctionnalité disponible à la souris doit aussi être disponible au clavier +- Le focus clavier ne doit pas être piégé dans une partie du contenu +- Les navigateurs, les outils de production de contenu et autres outils doivent être utilisables au clavier + +Être conforme à cette exigence aide les personnes qui n’utilisent que le clavier, y compris celles utilisant un clavier alternatif, un clavier ergonomique, un clavier virtuel à l’écran, ou un contacteur. Cela aide aussi les personnes utilisant des logiciels de reconnaissance vocale pour interagir avec les sites web et pour dicter du texte à travers l’interface du clavier. + +{% include excol.html type="start" %} + +#### Exigences d’accessibilité liées à l’accessibilité au clavier (liens vers les spécifications techniques, en anglais) + +{:.no_toc} + +{% include excol.html type="middle" %} + +{::nomarkdown} +{% include lang.html type="start" lang="en" %} +{:/} + +**WCAG** + +- [Guideline 2.1 - Keyboard + accessible](https//www.w3.org/WAI/WCAG22/quickref/#keyboard-operation) + +**UAAG** + +- [Guideline 2.1 - Keyboard + access](https://www.w3.org/TR/UAAG20/#gl-keyboard-access) +- [Guideline 2.2 - Sequential + navigation](https://www.w3.org/TR/UAAG20/#gl-sequential-navigation) +- [Guideline 2.3 - Direct navigation and + activation](https://www.w3.org/TR/UAAG20/#gl-direct-navigation-and-activation) +- [Guideline 2.11 - Other Input + Devices](https://www.w3.org/TR/UAAG20/#gl-other-devices) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable + accessibility + guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Guideline A.3.1: (For the authoring tool user interface) Provide + keyboard access to authoring + features](https://www.w3.org/TR/ATAG20/#gl_a31) +- [Part B. Support the production of accessible + content](https://www.w3.org/TR/ATAG20/#part_b) + +{::nomarkdown} +{% include lang.html type="end" %} +{:/} + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Histoires d’utilisateurs liées à l’accessibilité au clavier + +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, journaliste avec un trouble musculosquelettique](/people-use-web/user-stories/#reporter) +- [Ilya, cadre supérieure, aveugle](/people-use-web/user-stories/#accountant) + +{% include excol.html type="end" %} + +### Donner assez de temps aux utilisateurs pour lire et utiliser le contenu {#time} + +Certaines personnes ont besoin de plus de temps que d’autres pour lire et utiliser le contenu. Par exemple certaines personnes ont besoin de plus de temps pour saisir du texte, pour comprendre des instructions, pour manipuler des contrôles, ou d’une façon générale pour mener à bien des tâches complexes sur un site web. + +Là où il faut fournir assez de temps, cela implique de fournir des mécanismes pour : + +- Arrêter, étendre ou ajuster des limites de temps, sauf quand elles sont nécessaires +- Pauser, arrêter ou cacher des contenus mouvants, clignotants ou déroulants +- Repousser ou supprimer les interruptions, sauf quand elles sont nécessaires +- Se ré-authentifier quand une session expire sans perdre de données + +{% include excol.html type="start" %} + +#### Exigences d’accessibilité liées au temps (liens vers les spécifications techniques, en anglais) + +{:.no_toc} + +{% include excol.html type="middle" %} + +{::nomarkdown} +{% include lang.html type="start" lang="en" %} +{:/} + +**WCAG** + +- [Guideline 2.2 - Enough + time](https//www.w3.org/WAI/WCAG22/quickref/#time-limits) + +**UAAG** + +- [Guideline 2.8 - Time-independent + interaction](https://www.w3.org/TR/UAAG20/#gl-time-independent) +- [Guideline 2.10 - Time-based + media](https://www.w3.org/TR/UAAG20/#gl-control-inaccessible-content) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable + accessibility + guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Guideline A.3.2: (For the authoring tool user interface) Provide + authors with enough time](https://www.w3.org/TR/ATAG20/#gl_a32) +- [Part B. Support the production of accessible + content](https://www.w3.org/TR/ATAG20/#part_b) + +{::nomarkdown} +{% include lang.html type="end" %} +{:/} + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Histoires d’utilisateurs liées aux questions de temps + +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, journaliste avec un trouble musculosquelettique](/people-use-web/user-stories/#reporter) +- [Preety, élève de collège avec un trouble du déficit de l’attention avec hyperactivité et dyslexique](/people-use-web/user-stories/#classroomstudent) +- [Yun, retraité avec une mauvaise vue, un tremblement des mains, et une perte de mémoire à court terme](/people-use-web/user-stories/#retiree) +- [Luis, assistant en supermarché, atteint du syndrome de Down](/people-use-web/user-stories/#supermarketassistant) +- [Kaseem, adolescente qui est sourde et aveugle](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### Le contenu ne provoque pas de crises d’épilepsie ou de réactions physiques {#safe} + +Le contenu qui clignote à certaines fréquences ou selon certains schémas peut provoquer des réactions photosensibles, dont des crises d’épilepsie. Idéalement il faut éviter complètement de faire des contenus clignotants, ou ne les fournir que d’une façon qui n’induit aucun risque connu. De plus les animations et les contenus mobiles peuvent induire un inconfort et des réactions physiques. + +Comment éviter de provoquer des crises ou des réactions physiques : + +- Ne pas inclure de contenu qui clignote selon un rythme ou un schéma particulier +- Prévenir les utilisateurs avant le leur présenter un contenu qui clignote, et fournir une alternative +- Fournir un mécanisme pour couper les animations, à moins qu’elles ne soient essentielles + +{% include excol.html type="start" %} + +#### Exigences d’accessibilité liées à l’épilepsie (liens vers les spécifications techniques, en anglais) + +{:.no_toc} + +{% include excol.html type="middle" %} + +{::nomarkdown} +{% include lang.html type="start" lang="en" %} +{:/} + +**WCAG** + +- [Guideline 2.3 - + Seizures](https//www.w3.org/WAI/WCAG22/quickref/#seizure) + +**UAAG** + +- [Guideline 2.9 - + Flashing](https://www.w3.org/TR/UAAG20/#gl-prevent-flash) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable + accessibility + guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Guideline A.3.3: (For the authoring tool user interface) Help + authors avoid flashing that could cause + seizures](https://www.w3.org/TR/ATAG20/#gl_a33) +- [Part B. Support the production of accessible + content](https://www.w3.org/TR/ATAG20/#part_b) + +{::nomarkdown} +{% include lang.html type="end" %} +{:/} + +{% include excol.html type="end" %} + +### Les utilisateurs peuvent facilement naviguer, trouver des contenus, et déterminer où ils sont {#navigable} + +Un contenu bien organisé permet aux utilisateurs de s’orienter et de naviguer efficacement. Par exemple : + +- Les pages comportent des titres clairs et chaque page est organisée grâce à des titres de sections explicites +- Il y a plus d’une façon de trouver les pages cherchées dans un ensemble de pages web +- Les utilisateurs sont informés de leur position actuelle dans un ensemble de pages web +- Il existe des moyens de contourner des blocs de contenu répétés sur des pages multiples +- Le focus clavier est toujours visible, et le focus suit une séquence pertinente +- Le but de chaque lien est évident, dans l’idéal même si le lien est extrait de son contexte + +Être conforme à cette exigence permet de naviguer dans les pages web par des moyens variés, selon les besoins et les préférences particuliers à chaque personne. Par exemple, tandis que certaines personnes s’appuient sur les structures hiérarchiques de navigation telles les barres de menus pour trouver une page web en particulier, d’autres s’appuient plutôt sur les fonctions de recherche des sites. Certaines personnes peuvent voir le contenu tandis que d’autres peuvent l’écouter, ou le voir et l’écouter en même temps. Certaines personnes peuvent accéder au contenu uniquement avec une souris ou un clavier, tandis que d’autres utilisent les deux. + +{% include excol.html type="start" %} + +#### Exigences d’accessibilité liées à la navigation (liens vers les spécifications techniques, en anglais) + +{:.no_toc} + +{% include excol.html type="middle" %} + +{::nomarkdown} +{% include lang.html type="start" lang="en" %} +{:/} + +**WCAG** + +- [Guideline 2.4 - + Navigable](https//www.w3.org/WAI/WCAG22/quickref/#navigation-mechanisms) + +**UAAG** + +- [Guideline 2.2 - Sequential + navigation](https://www.w3.org/TR/UAAG20/#gl-sequential-navigation) +- [Guideline 2.3 - Direct navigation and + activation](https://www.w3.org/TR/UAAG20/#gl-direct-navigation-and-activation) +- [Guideline 2.4 - Text + search](https://www.w3.org/TR/UAAG20/#gl-search-text) +- [Guideline 2.5 - Structural + navigation](https://www.w3.org/TR/UAAG20/#gl-nav-structure) +- [Guideline 2.7 - Graphical + controls](https://www.w3.org/TR/UAAG20/#gl-configure-controls) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable + accessibility + guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Guideline A.2.2: (For the authoring tool user interface) Ensure + that editing-view presentation can be programmatically + determined](https://www.w3.org/TR/ATAG20/#gl_a22) +- [Guideline A.3.4: (For the authoring tool user interface) Enhance + navigation and editing via content + structure](https://www.w3.org/TR/ATAG20/#gl_a34) +- [Guideline A.3.5: (For the authoring tool user interface) Provide + text search of the content](https://www.w3.org/TR/ATAG20/#gl_a35) +- [Part B. Support the production of accessible + content](https://www.w3.org/TR/ATAG20/#part_b) + +{::nomarkdown} +{% include lang.html type="end" %} +{:/} + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Histoires d’utilisateurs liées aux questions de navigation + +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, journaliste avec un trouble musculosquelettique](/people-use-web/user-stories/#reporter) +- [Ilya, cadre supérieure, aveugle](/people-use-web/user-stories/#accountant) +- [Preety, élève de collège avec un trouble du déficit de l’attention avec hyperactivité et dyslexique](/people-use-web/user-stories/#classroomstudent) +- [Yun, retraité avec une mauvaise vue, un tremblement des mains, et une perte de mémoire à court terme](/people-use-web/user-stories/#retiree) +- [Luis, assistant en supermarché, atteint du syndrome de Down](/people-use-web/user-stories/#supermarketassistant) +- [Kaseem, adolescente qui est sourde et aveugle](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### Les utilisateurs peuvent utiliser différentes modalités d’entrée au-delà du clavier {#modalities} + +Les modalités d’entrée, au-delà du clavier, telles que l’activation au toucher, la reconnaissance vocale (saisie à la voix), et les gestes, rendent le contenu plus facile d’usage pour de nombreuses personnes. Cependant tout le monde ne peut pas utiliser chacune de ces modalités d’entrée, ni avec la même facilité. Une considération particulière dans le design maximise le bénéfice qu’on peut tirer de ces modalités d’entrée. Par exemple : + +- Les gestes qui requièrent une dextérité ou des mouvements fins comportent une alternative qui ne demande pas une grande dextérité +- Les composants sont conçus pour éviter une activation accidentelle, par exemple en fournissant une fonctionnalité d’annulation +- Les intitulés présentés aux utilisateurs correspondent à des noms d’objets dans le code, pour permettre l’activation à la voix +- Une fonctionnalité activée par le mouvement peut aussi être activée à travers des composants de l’interface utilisateur +- Les boutons, les liens, et autres composants actifs, sont assez gros pour être facilement activés au toucher + +En satisfaisant à cette exigence, on rend le contenu plus facile d’usage pour de nombreuses personnes avec une large gamme de compétences utilisant une large gamme de périphériques. Cela inclut le contenu présenté sur les téléphones mobiles, sur les tablettes, et sur les périphériques en self-service comme les terminaux de billetterie. + +{% include excol.html type="start" id="" %} + +#### Exigences d’accessibilité liées aux modalités d’entrée (liens vers les spécifications techniques, en anglais) + +{:.no_toc} + +{% include excol.html type="middle" %} + +{::nomarkdown} +{% include lang.html type="start" lang="en" %} +{:/} + +**WCAG** + +- [Guideline 2.5 - Input Modalities](https://www.w3.org/WAI/WCAG22/quickref/#input-modalities) + +{::nomarkdown} +{% include lang.html type="end" %} +{:/} + +{% include excol.html type="end" %}{% include excol.html type="start" id="" %} + +#### Histoires d’utilisateurs liées aux questions de modalités d’entrée + +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, journaliste avec un trouble musculosquelettique](/people-use-web/user-stories/#reporter) +- [Yun, retraité avec une mauvaise vue, un tremblement des mains, et une perte de mémoire à court terme](/people-use-web/user-stories/#retiree) +- [Luis, assistant en supermarché, atteint du syndrome de Down](/people-use-web/user-stories/#supermarketassistant) + +{% include excol.html type="end" %} + +## Des informations et une interface utilisateur compréhensibles {#understandable} + +### Le texte est lisible et compréhensible {#readable} + +Les auteurs de contenus doivent s’assurer que le contenu textuel est lisible et compréhensible par le plus grand nombre, y compris quand ce contenu est vocalisé par une synthèse vocale. Un tel contenu : + +- Identifie la langue principale de la page web, par exemple arabe, hollandais ou coréen +- Identifie la langue de passages de texte, d’expressions étrangères, ou d’autres partie de la page web +- Fournit des définitions pour les mots, les expressions, les idiomes et les abréviations inhabituels +- Utilise un langage le plus clair et le plus simple, ou fournit une version simplifiée + +Être conforme à cette exigence permet aux logiciels, y compris aux technologies d’assistance, d’interpréter le texte correctement. Par exemple, cette exigence aide le logiciel à lire le contenu à voix haute, à générer des résumés de pages, et à fournir des définitions pour les mots inhabituels, tel le jargon technique. Elle aide aussi les personnes qui ont des difficultés à comprendre des phrases, des expressions ou du vocabulaire complexes. En particulier, elle est utile à plusieurs types de déficiences cognitives. + +{% include excol.html type="start" %} + +#### Exigences d’accessibilité liées à la lisibilité (liens vers les spécifications techniques, en anglais) + +{:.no_toc} + +{% include excol.html type="middle" %} + +{::nomarkdown} +{% include lang.html type="start" lang="en" %} +{:/} + +**WCAG** + +- [Guideline 3.1 - + Readable](https//www.w3.org/WAI/WCAG22/quickref/#meaning) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable + accessibility + guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Guideline A.4.2: (For the authoring tool user interface) Document + the user interface, including all accessibility + features](https://www.w3.org/TR/ATAG20/#gl_b42) +- [Part B. Support the production of accessible + content](https://www.w3.org/TR/ATAG20/#part_b) + +{::nomarkdown} +{% include lang.html type="end" %} +{:/} + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Histoires d’utilisateurs liées aux questions de lisibilité + +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Martine, étudiante en ligne, malentendante](/people-use-web/user-stories/#onlinestudent) +- [Ilya, cadre supérieure, aveugle](/people-use-web/user-stories/#accountant) +- [Preety, élève de collège avec un trouble du déficit de l’attention avec hyperactivité et dyslexique](/people-use-web/user-stories/#classroomstudent) +- [Yun, retraité avec une mauvaise vue, un tremblement des mains, et une perte de mémoire à court terme](/people-use-web/user-stories/#retiree) +- [Luis, assistant en supermarché, atteint du syndrome de Down](/people-use-web/user-stories/#supermarketassistant) + +{% include excol.html type="end" %} + +### Le contenu apparaît et fonctionne de façon prévisible {#predictable} + +Un grand nombre de personnes s’appuie sur des interfaces prévisibles et est désorienté ou distrait par une apparence ou un comportement incohérent. Rendre le contenu plus prévisible implique notamment que : + +- Les mécanismes de navigation qui sont répétés sur plusieurs pages apparaissent toujours à la même place +- Les éléments d’interface répétés sur plusieurs pages ont toujours le même intitulé +- Les changements significatifs dans la page web n’arrivent pas sans le consentement de l’utilisateur + +Être conforme à cette exigence aide les utilisateurs à apprendre facilement les mécanismes de navigation et les fonctionnalités fournis par un site, et pour interagir avec eux selon leurs besoins et leurs préférences spécifiques. Par exemple, certaines personnes assignent des raccourcis clavier personnalisés à des fonctions qu’ils utilisent souvent pour améliorer la navigation au clavier. D’autres mémorisent les étapes à accomplir pour atteindre une page en particulier ou pour aller au bout d’un processus sur un site web. Tous ces exemples s’appuient sur des fonctionnalités prévisibles et cohérentes. + +{% include excol.html type="start" %} + +#### Exigences d’accessibilité liées à la prédictibilité (liens vers les spécifications techniques, en anglais) + +{:.no_toc} + +{% include excol.html type="middle" %} + +{::nomarkdown} +{% include lang.html type="start" lang="en" %} +{:/} + +**WCAG** + +- [Guideline 3.2 - + Predictable](https//www.w3.org/WAI/WCAG22/quickref/#consistent-behavior) + +**UAAG** + +- [Guideline 3.3 - + Predictable](https://www.w3.org/TR/UAAG20/#gl-predictable-operation) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable + accessibility + guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Guideline A.2.2: (For the authoring tool user interface) Ensure + that editing-view presentation can be programmatically + determined](https://www.w3.org/TR/ATAG20/#gl_a22) +- [Guideline A.4.2: (For the authoring tool user interface) Document + the user interface, including all accessibility + features](https://www.w3.org/TR/ATAG20/#gl_b42) +- [Part B. Support the production of accessible + content](https://www.w3.org/TR/ATAG20/#part_b) + +{::nomarkdown} +{% include lang.html type="end" %} +{:/} + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Histoires d’utilisateurs liées aux questions de prédictibilité + +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, journaliste avec un trouble musculosquelettique](/people-use-web/user-stories/#reporter) +- [Ilya, cadre supérieure, aveugle](/people-use-web/user-stories/#accountant) +- [Preety, élève de collège avec un trouble du déficit de l’attention avec hyperactivité et dyslexique](/people-use-web/user-stories/#classroomstudent) +- [Yun, retraité avec une mauvaise vue, un tremblement des mains, et une perte de mémoire à court terme](/people-use-web/user-stories/#retiree) +- [Luis, assistant en supermarché, atteint du syndrome de Down](/people-use-web/user-stories/#supermarketassistant) +- [Kaseem, adolescente qui est sourde et aveugle](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### Les utilisateurs sont accompagnés pour éviter et corriger les erreurs {#tolerant} + +Les formulaires et d’autres systèmes interactifs peuvent induire de la confusion et de la difficulté d’usage pour de nombreuses personnes, et entraîner un risque de saisie accru. Parmi les moyens d’aider les utilisateurs à éviter et à corriger des erreurs, citons notamment : + +- Des instructions, des messages d’erreur et des suggestions de correction explicites +- De l’aide contextuelle pour les fonctionnalités et les interactions complexes +- Une chance de réviser, corriger ou annuler les informations fournies si nécessaire + +Être conforme à cette exigence aide les personnes qui ne voient pas ou n’entendent pas le contenu, et qui peuvent ne pas reconnaître des relations ou des séquences implicites, ou d’autres invitations à interagir. Elle aide aussi les personnes qui ne comprennent pas la fonctionnalité, sont désorientées ou confuses, oublient, ou font des erreurs dans la saisie de formulaires ou trouvent l’interaction difficile pour toute autre raison. + +{% include excol.html type="start" %} + +#### Exigences d’accessibilité liées à l’assistance à la saisie (liens vers les spécifications techniques, en anglais) + +{:.no_toc} + +{% include excol.html type="middle" %} + +{::nomarkdown} +{% include lang.html type="start" lang="en" %} +{:/} + +**WCAG** + +- [Guideline 3.3 - Input + assistance](https//www.w3.org/WAI/WCAG22/quickref/#minimize-error) + +**UAAG** + +- [Guideline 3.1 - + Mistakes](https://www.w3.org/TR/UAAG20/#gl-avoid-mistakes) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable + accessibility + guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Guideline A.2.2: (For the authoring tool user interface) Ensure + that editing-view presentation can be programmatically + determined](https://www.w3.org/TR/ATAG20/#gl_a22) +- [Guideline A.4.1: (For the authoring tool user interface) Help + authors avoid and correct + mistakes](https://www.w3.org/TR/ATAG20/#gl_b41) +- [Part B. Support the production of accessible + content](https://www.w3.org/TR/ATAG20/#part_b) + +{::nomarkdown} +{% include lang.html type="end" %} +{:/} + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Histoires d’utilisateurs liées aux questions d’assistance à la saisie + +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Lee, client de site Web marchand, daltonien](/people-use-web/user-stories/#shopper) +- [Alex, journaliste avec un trouble musculosquelettique](/people-use-web/user-stories/#reporter) +- [Preety, élève de collège avec un trouble du déficit de l’attention avec hyperactivité et dyslexique](/people-use-web/user-stories/#classroomstudent) +- [Yun, retraité avec une mauvaise vue, un tremblement des mains, et une perte de mémoire à court terme](/people-use-web/user-stories/#retiree) +- [Luis, assistant en supermarché, atteint du syndrome de Down](/people-use-web/user-stories/#supermarketassistant) + +{% include excol.html type="end" %} + +## Du contenu robuste et une interprétation fiable {#robust} + +### Le contenu est compatible avec les logiciels utilisateurs actuels et futurs {#compatible} + +Un contenu robuste est compatible avec de multiples navigateurs, outils d’assistance et autres agents utilisateurs. Pour y parvenir il faut notamment : + +- S’assurer que le code peut être interprété de façon fiable, par exemple en s’assurant qu’il est valide +- Fournir un nom, un rôle et une valeur pour chacun des éléments non standard de l’interface utilisateur + +Être conforme à cette exigence aide à maximiser la compatibilité avec les agents utilisateurs actuels, y compris les technologies d’assistance. En particulier, elle permet aux technologies d’assistance d’interpréter le contenu de façon fiable, et de le présenter et de le faire fonctionner de différentes manières. Cela inclut les boutons, les champs de saisie et les autres contrôles non-standard (scriptés). + +{% include excol.html type="start" %} + +#### Exigences d’accessibilité liées à la compatibilité (liens vers les spécifications techniques, en anglais) + +{:.no_toc} + +{% include excol.html type="middle" %} + +{::nomarkdown} +{% include lang.html type="start" lang="en" %} +{:/} + +**WCAG** + +- [Guideline 4.1 - + Compatible](https//www.w3.org/WAI/WCAG22/quickref/#ensure-compat) + +**UAAG** + +- [Guideline 2.6 - Preference + settings](https://www.w3.org/TR/UAAG20/#gl-store-prefs) +- [Guideline 4.1 - Assistive + technology](https://www.w3.org/TR/UAAG20/#gl-AT-access) +- [Guideline 5.1 - Follow + specifications](https://www.w3.org/TR/UAAG20/#gl-obs-env-conventions) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable + accessibility + guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Part B. Support the production of accessible + content](https://www.w3.org/TR/ATAG20/#part_b) + +{::nomarkdown} +{% include lang.html type="end" %} +{:/} + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Histoires d’utilisateurs liées aux questions de compatibilité + +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Lee, client de site Web marchand, daltonien](/people-use-web/user-stories/#shopper) +- [Alex, journaliste avec un trouble musculosquelettique](/people-use-web/user-stories/#reporter) +- [Ilya, cadre supérieure, aveugle](/people-use-web/user-stories/#accountant) +- [Preety, élève de collège avec un trouble du déficit de l’attention avec hyperactivité et dyslexique](/people-use-web/user-stories/#classroomstudent) +- [Luis, assistant en supermarché, atteint du syndrome de Down](/people-use-web/user-stories/#supermarketassistant) +- [Kaseem, adolescente qui est sourde et aveugle](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +{% include excol.html type="all" %} diff --git a/pages/fundamentals/accessibility-principles/index.ko.md b/pages/fundamentals/accessibility-principles/index.ko.md new file mode 100755 index 00000000000..8cc5453840a --- /dev/null +++ b/pages/fundamentals/accessibility-principles/index.ko.md @@ -0,0 +1,720 @@ +--- +# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#". +# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:" + +title: 접근성 원칙 +nav_title: "접근성 원칙" +lang: ko +last_updated: 2023-12-06 # Put the date of this translation YYYY-MM-DD (with month in the middle) +description: 웹 사이트, 웹 어플리케이션, 브라우저와 다른 도구를 위한 기본적 웹 접근성 필요조건에 대한 개요 +teaser_text: 접근성 원칙 페이지는 웹 사이트, 웹 어플리케이션, 브라우저와 다른 도구를 위한 웹 접근성 필요조건에 대해 소개하고 있습니다. W3C 웹의 국제 표준에 대해 언급하고 있습니다. + +translators: +- name: "Yong Ui Lee" # Replace @@ with translator name + link: "https://twitter.com/yongui9" +contributors: +- name: "Jun Ho Lee" + +github: + label: wai-accessibility-principles + +permalink: /fundamentals/accessibility-principles/ko # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr +ref: /fundamentals/accessibility-principles/ # Do not change this + +image: /content-images/accessibility-principles/social.png + +# In the footer below: +# Do not change the dates +# Do not translate CHANGELOG +# Translate the other words, including "Date:" and "Editors:" +# Translate the Working Group name. Leave the Working Group acronym in English. +footer: > +

날짜: 2019년 5월 10일 업데이트됨.

+

편집자: Shadi Abou_Zahra. Acknowledgments.

+

교육과 활동관련 실무 그룹인 (EOWG)의 지원을 받아 제작되었습니다. WAI-AGE Task Force, with support of the WAI-AGE 프로젝트의 지원과 WAI-AGE 팀에 의해 제작되었습니다.

+--- + +{::nomarkdown} +{% include box.html type="start" h="2" title="Summary" class="full" %} +{:/} + +이 페이지는 웹 사이트, 웹 어플리케이션, 브라우저와 다른 도구를 위한 웹 접근성 필요조건에 대해 소개하고 있습니다. W3C 웹 접근성 이니셔티브(WAI)의 국제 표준과 [웹 사용자 이야기](/people-use-web/user-stories/)에 대해 언급하고 있습니다. + +**주석:** 본 내용은 모든 접근성 필요조건을 목록화 한 것은 아닙니다. + +{::nomarkdown} +{% include box.html type="end" %} +{:/} + + +{::options toc_levels="2,3" /} + +{::nomarkdown} +{% include_cached toc.html type="start" title="Page Contents" class="full" %} +{:/} + +- TOC is created automatically. +{:toc} + +{::nomarkdown} +{% include_cached toc.html type="end" %} +{:/} + + +{% include excol.html type="all" %} + +## 웹 접근성 표준 {#standards} + +웹 접근성은 함께 동작하는 여러 요소에 의존합니다. 요소에는 다음의 내용이 포합됩니다. : + +- **웹 콘텐츠**{:#webcontent} - 텍스트, 이미지, 폼 요소, 멀티미디어, 마크업 코드, 스크립트, 어플리케이션 등을 포함하는 웹 사이트의 일부를 가리킵니다. +- **사용자 에이전트**{:#useragents} - 사용자가 웹 콘텐츠에 접근할 수 있도록 하는 소프트웨어(데스크탑 그래픽 브라우저, 음성 브라우저, 모바일 브라우저, 멀티미디어 플레이어, 플러그인과 여러 [보조 기술](/people-use-web/tools-techniques/#at "definition"))를 가리킵니다. +- **저작 도구**{:#authoringtools} - 코드 에디터, 문서 변환 도구, 저작물 관리 시스템, 블로그, 데이터 베이스 스크립트와 같은 사용자가 웹 콘텐츠를 생산할 수 있도록 하는 소프트웨어나 서비스를 가리킵니다. + +{% include excol.html type="start" %} + +### 웹 접근성 표준 더 자세히 살펴보기 +{:.no_toc} + +{% include excol.html type="middle" %} + +이 요소들은 서로를 지원하고 밀접한 관련이 있습니다. 예를 들어, **웹 콘텐츠**는 이미지에 대체 텍스트를 포함해야 합니다. 이 정보는 **웹 브라우저**가 처리하고, 스크린 리더와 같은 **보조 기술**에 전달됩니다. 저자들은 대체 텍스트를 작성하기 위해 **저작 도구**를 필요로 합니다. 더 자세한 내용은 [[웹 접근성 필수 요소]](/fundamentals/components/)를 확인하세요. + +표준은 각 요소들의 접근성 필요조건을 정의하는 데에 중요한 역할을 합니다. 몇 접근성 필요조건은 충족하기 쉽지만 장애가 있는 사용자가 웹을 어떻게 사용하는지에 대한 기본을 이해한다면 더 효과적으로 충족할 수 있을 것입니다. 접근성의 일부는 사용자가 웹을 사용하는 방법에 대한 고차원적인 기술과 지식이 필요합니다. 모든 경우에서 [웹 프로젝트 초기 단계와 전체에 사용자 포함시키기](/test-evaluate/involving-users/)는 당신이 더 일하기 쉽고, 나은 결과를 얻는 데에 도움을 줄 것입니다. + +W3C 웹 접근성 이니셔티브(WAI)는 웹 접근성 관련 국제 표준으로 사용되는 지침들을 제공합니다. 다음의 내용이 포합됩니다. : + +- **[웹 콘텐츠 접근성 지침 (WCAG)](/standards-guidelines/wcag/)** +- **[사용자 에이전트 접근성 지침 (UAAG)](/standards-guidelines/uaag/)** +- **[웹 저작 도구 접근성 지침 (ATAG)](/standards-guidelines/atag/)** + +**[접근 가능한 리치 인터넷 어플리케이션 (WAI-ARIA)](/standards-guidelines/aria/)**에 대한 WAI 명세도 있습니다. 이는 Ajax, JavaScript와 관련된 웹 기술로 만들어진 고차원 사용자 인터페이스 컨트롤과 다양한 콘텐츠를 포함합니다. + +{% include excol.html type="end" %} + +## 인지가능한 정보와 사용자 인터페이스 {#perceivable} + +### 텍스트가 아닌 콘텐츠를 위한 대체 텍스트 {#alternatives} + +대체 텍스트는 텍스트가 아닌 콘텐츠에 대응되는 것입니다. 다음은 예시입니다. : + +- 아이콘, 버튼, 그래픽을 포함한 이미지에 대한 짧은 문구 +- 차트, 다이어그램, 삽화에 있는 정보 설명 +- 오디오나 영상과 같은 텍스트가 아닌 콘텐츠에 대한 짧은 설명 +- 폼 요소, 인풋, 다른 사용자 인터페이스 요소에 대한 라벨 + +대체 텍스트는 사용자에게 동등한 경험을 제공하고 이미지나 기능의 목적을 전달하기 위해 사용됩니다. 예를 들어, 검색 버튼의 경우 " *돋보기* " 보다는 " *검색* "이 적절한 대체 텍스트입니다. + +대체 텍스트는 다양한 방법으로 표현할 수 있습니다. 예를 들어, 화면을 보지 못하거나 읽는데 어려움을 겪는 사람들이 음성으로 읽는 용도로 사용할 수 있고, 사용자가 설정한 폰트 사이즈로 키울 수 있고, 점자 단말기에 표시할 수도 있습니다. 대체 텍스트는 음성 인식(음성 제어) 탐색이나 키보드 탐색을 보조하는 제어, 기능을 위한 라벨로 제공될 수 있습니다. 오디오, 영상, 다른 형식의 파일, 웹 사이트의 일부분으로 삽입되어 있는 어플리케이션을 구분하기 위한 라벨 역할을 할 수도 있습니다. + +{% include excol.html type="start" %} + +#### 대체 텍스트와 관련된 접근성 필요조건 (기술 명세 링크) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [지침 1.1 - 대체 텍스트](https://www.w3.org/WAI/WCAG22/quickref/#text-alternatives) + +**UAAG** + +- [지침 1.1 - 대체 콘텐츠](https://www.w3.org/TR/UAAG20/#gl-access-alternative-content) + +**ATAG** + +- [원칙 A.1: 저작 도구 사용자 인터페이스는 해당되는 접근성 지침을 따른다.](https://www.w3.org/TR/ATAG20/#principle_a1) +- [지침 A.2.1: 저작 도구 사용자 인터페이스에서 저자가 대체 텍스트에 접근할 수 있도록 해야 한다.](https://www.w3.org/TR/ATAG20/#gl_a21) +- [지침 A.2.2: 저작 도구 사용자 인터페이스에서 편집 화면을 프로그램적으로 조작할 수 있도록 해야 한다.](https://www.w3.org/TR/ATAG20/#gl_a22) +- [지침 A.3.7: 저작 도구 사용자 인터페이스에서 적어도 인마켓 사용자 에이전트 만큼의 미리보기 접근성을 보장해야 한다.](https://www.w3.org/TR/ATAG20/#gl_b37) +- [Part B. 접근 가능한 콘텐츠 생산을 지원해야 한다.](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + +#### 대체 텍스트와 관련된 이야기 +{:#stories-related-to-text-alternatives.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, 반복성 긴장 장애가 있는 리포터](/people-use-web/user-stories/#reporter) +- [Martine, 청력이 약한 온라인 수강생](/people-use-web/user-stories/#onlinestudent) +- [Ilya, 시각장애가 있는 고위 간부](/people-use-web/user-stories/#accountant) +- [Preety, 주의력결핍과다활동장애와 난독증이 있는 중학생](/people-use-web/user-stories/#classroomstudent) +- [Yun, 저시력, 수전증, 경도 건망증이 있는 퇴직자](/people-use-web/user-stories/#retiree) +- [Kaseem, 시청각장애가 있는 10대](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### 멀티미디어를 위한 캡션과 다른 대안 {#captions} + +오디오를 듣지 못하고, 영상을 보지못하는 사용자에게는 대안이 필요합니다. 다음은 예시입니다. : + +- 라디오 인터뷰 녹음과 같은 오디오 콘텐츠를 위한 텍스트 대본과 캡션 +- 영상의 중요한 시각적 정보를 묘사하는 나레이션인 오디오 설명 +- 청각 경험(auditory experiences)과 관련된 오디오 콘텐츠에 대한 수화 + +정확한 음성, 시각 정보 순서가 잘 정리된 텍스트 대본은 기본적인 접근성을 제공하고, 캡션과 오디오 설명 제공이 가능하게 합니다. + +{% include excol.html type="start" %} + +#### 멀티미디어와 관련된 접근성 필요조건 (기술 명세 링크) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [지침 1.2 - 시간 기반 미디어(Time-based Media)](https://www.w3.org/WAI/WCAG22/quickref/#time-based-media) + +**UAAG** + +- [지침 1.1 - 대체 콘텐츠](https://www.w3.org/TR/UAAG20/#gl-access-alternative-content) + +**ATAG** + +- [원칙 A.1: 저작 도구 사용자 인터페이스는 해당되는 접근성 지침을 따른다.](https://www.w3.org/TR/ATAG20/#principle_a1) +- [지침 A.2.1: 저작 도구 사용자 인터페이스에서 저자가 대체 텍스트에 접근할 수 있도록 해야 한다.](https://www.w3.org/TR/ATAG20/#gl_a21) +- [지침 A.3.7: 저작 도구 사용자 인터페이스에서 적어도 인마켓 사용자 에이전트 만큼의 미리보기 접근성을 보장해야 한다.](https://www.w3.org/TR/ATAG20/#gl_b37) +- [Part B. 접근 가능한 콘텐츠 생산을 지원해야 한다.](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %} +{% include excol.html type="start" %} + +#### 멀티미디어와 관련된 이야기 {#stories-related-to-multimedia} +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Martine, 청력이 약한 온라인 수강생](/people-use-web/user-stories/#onlinestudent) +- [Ilya, 시각장애가 있는 고위 간부](/people-use-web/user-stories/#accountant) +- [Kaseem, 시청각장애가 있는 10대](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### 다양한 방법으로 제공될 수 있는 콘텐츠 {#adaptable} + +사용자를 위해 콘텐츠 제공방식을 바꾸고자 한다면 다음 내용을 따라야 합니다. : + +- 헤딩, 목록, 표, 인풋 필드와 콘텐츠 구조들은 적절하게 마크업되어야 합니다. +- 정보나 지시사항의 순서는 보여지는 것에 의존하면 안됩니다. +- 브라우저와 보조 기술은 제공 방식을 개인화 할 수 있는 설정을 제공해야 합니다. + +위의 내용을 준수한다면 콘텐츠를 정확하기 읽고, 확대하고, 각 개인의 선호와 필요를 충족시킬 수 있을 것입니다. 예를 들어, 개인이 설정한 색상 조합, 폰트 사이즈 등과 같은 읽는 것을 돕는 여러 스타일 속성을 사용해 제공할 수 있습니다. 사람들이 개요에 접근할 수 있도록 하고, 특정 부분에 더 쉽게 접근할 수 있도록 하기 위한 페이지 아웃라인과 요약을 자동으로 해주는 것과 같은 방법에서 또한 적용할 수 있습니다. + +{% include excol.html type="start" %} + +#### 적응성과 관련된 접근성 조건 (기술 명세 링크) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [지침 1.3 - 적응성](https://www.w3.org/WAI/WCAG22/quickref/#adaptable) + +**UAAG** + +- [지침 1.4 - 텍스트 설정](https://www.w3.org/TR/UAAG20/#gl-text-config) +- [지침 1.5 - 볼륨 설정](https://www.w3.org/TR/UAAG20/#gl-volume-config) +- [지침 1.6 - 합성된 음성(Synthesized speech) 설정](https://www.w3.org/TR/UAAG20/#gl-speech-config) +- [지침 1.7 - 사용자 스타일 시트 설정](https://www.w3.org/TR/UAAG20/#gl-style-sheets-config) +- [지침 1.9 - 대체 화면 제공](https://www.w3.org/TR/UAAG20/#gl-alternative-views) +- [지침 1.10 - 요소 정보](https://www.w3.org/TR/UAAG20/#gl-info-link) + +**ATAG** + +- [원칙 A.1: 저작 도구 사용자 인터페이스는 해당되는 접근성 지침을 따른다.](https://www.w3.org/TR/ATAG20/#principle_a1) +- [지침 A.2.2: 저작 도구 사용자 인터페이스에서 편집창 화면을 프로그램적으로 조작 가능하도록 해야 한다.](https://www.w3.org/TR/ATAG20/#gl_a22) +- [지침 A.3.7: 저작 도구 사용자 인터페이스에서 적어도 인마켓 사용자 에이전트 만큼의 미리보기 접근성을 보장해야 한다.](https://www.w3.org/TR/ATAG20/#gl_b37) +- [Part B. 접근 가능한 콘텐츠 생산을 지원해야 한다.](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### 적응성과 관련된 이야기 +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Lee, 온라인 쇼핑을 하는 색맹인](/people-use-web/user-stories/#shopper) +- [Alex, 반복성 긴장 장애가 있는 리포터](/people-use-web/user-stories/#reporter) +- [Ilya, 시각장애가 있는 고위 간부](/people-use-web/user-stories/#accountant) +- [Preety, 주의력결핍과다활동장애와 난독증이 있는 중학생](/people-use-web/user-stories/#classroomstudent) +- [Yun, 저시력, 수전증, 경도 건망증이 있는 퇴직자](/people-use-web/user-stories/#retiree) +- [Luis, 다운증후군이 있는 슈퍼마켓 직원](/people-use-web/user-stories/#supermarketassistant) +- [Kaseem, 시청각장애가 있는 10대](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### 보고 듣기 더 쉬운 콘텐츠 {#distinguishable} + +명료한 콘텐츠는 보고 듣기 더 쉽습니다. 다음 콘텐츠가 포함됩니다. : + +- 색상이 정보 전달이나 콘텐츠 구분에 유일한 방법이면 안됩니다. +- 기본 전경색-배경색의 조합은 충분한 대비를 제공해야 합니다. +- 사용자가 텍스트를 400%로 조절하거나 텍스트 간격을 조정했을 때 정보 유실이 없어야 합니다. +- 작은 화면(뷰포트)이나 텍스트를 크게 했을 때 텍스트는 위치가 재조정되어야 합니다. +- 텍스트 이미지는 조절 가능하고 실제 텍스트로 교체되거나 가능하면 피해야 합니다. +- 사용자가 웹 사이트에서 재생되는 소리의 볼륨을 조절하거나 멈출 수 있어야 합니다. +- 배경음악은 낮은 볼륨이거나 끌 수 있어야 하고 방해 요인이 되어서는 안됩니다. + +위의 내용을 준수한다면 중요한 정보를 더 눈에 띄게 하기 위한 전경과 배경 구분에 도움이 됩니다. 소리, 배경에 있는 콘텐츠로 탐색하는 데에 방해를 받는 보조 기술을 사용하는 사람과 사용하지 않는 사람 모두를 고려한 것입니다. 예를 들어, 색맹이 있는 사람들은 특별한 도구를 사용하지 않고 텍스트와 주변 배경 사이의 충분한 대비를 제공하는 적절한 디자인에 의존합니다. 또 어떤 사람에게는 자동으로 재생되는 소리가 텍스트 음성변환이나 [assistive listening devices (ALDs)](/teach-advocate/accessible-presentations/#ald "definition")의 사용을 방해할 수 있습니다. + +{% include excol.html type="start" %} + +#### 명료성과 관련된 접근성 필요조건(기술 명세 링크) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [지침 1.4 - 명료성](https://www.w3.org/WAI/WCAG22/quickref/#distinguishable) + +**UAAG** + +- [지침 1.3 - 강조(Highlighting)](https://www.w3.org/TR/UAAG20/#gl-interaction-highlight) +- [지침 1.4 - 텍스트 설정](https://www.w3.org/TR/UAAG20/#gl-text-config) +- [지침 1.5 - 볼륨 설정](https://www.w3.org/TR/UAAG20/#gl-volume-config) +- [지침 1.6 - 합성된 음성(Synthesized speech) 설정](https://www.w3.org/TR/UAAG20/#gl-speech-config) +- [지침 1.7 - 사용자 스타일시트 설정](https://www.w3.org/TR/UAAG20/#gl-style-sheets-config) +- [지침 1.8 - 뷰포트 안에 맞추기](https://www.w3.org/TR/UAAG20/#gl-viewport-orient) +- [지침 1.9 - 대체 화면 제공](https://www.w3.org/TR/UAAG20/#gl-alternative-views) +- [지침 1.10 - 요소 정보](https://www.w3.org/TR/UAAG20/#gl-info-link) + +**ATAG** + +- [원칙 A.1: 저작 도구 사용자 인터페이스는 해당되는 접근성 지침을 따른다.](https://www.w3.org/TR/ATAG20/#principle_a1) +- [지침 A.3.7: 저작 도구 사용자 인터페이스에서 적어도 인마켓 사용자 에이전트 만큼의 미리보기 접근성을 보장해야 한다.](https://www.w3.org/TR/ATAG20/#gl_b37) +- [Part B. 접근 가능한 콘텐츠 생산을 지원해야 한다.](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### 명료성과 관련된 이야기 +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Lee, 온라인 쇼핑을 하는 색맹인](/people-use-web/user-stories/#shopper) +- [Martine, 청력이 약한 온라인 수강생](/people-use-web/user-stories/#onlinestudent) +- [Ilya, 시각장애가 있는 고위 간부](/people-use-web/user-stories/#accountant) +- [Yun, 저시력, 수전증, 경도 건망증이 있는 퇴직자](/people-use-web/user-stories/#retiree) +- [Kaseem, 시청각장애가 있는 10대](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +## 운용가능한 사용자 인터페이스와 내비게이션 {#operable} + +### 키보드로 사용 가능한 기능 {#keyboard} + +웹을 탐색하는 데에 마우스보다 키보드를 사용하는 사람들도 많습니다. 키보드로 탐색하기 위해서는 폼 컨트롤, 인풋과 다른 사용자 인터페이스 요소를 포함한 모든 기능에 키보드 접근이 가능해야 합니다. + +키보드 접근성은 다음의 내용을 포함합니다. : + +- 마우스로 사용 가능한 기능은 키보드로도 사용 가능해야 합니다. +- 키보드 초점은 콘텐츠에 갇히면 안됩니다. +- 웹 브라우저, 저작 도구를 포함한 도구들은 키보드 지원을 제공해야 합니다. + +위의 내용을 준수한다면 것은 인체 공학 키보드, 화상 키보드, 스위치와 같은 대체 키보드를 사용하는 사용자를 포함한 키보드 사용자에게 도움이 됩니다. 또한 키보드 인터페이스로 텍스트를 입력하고 사이트를 사용하는 데에 음성 인식(음성 입력)을 사용하는 사용자에게도 도움이 됩니다. + +{% include excol.html type="start" %} + +#### 키보드 접근성과 관련된 접근성 필요조건 (기술 명세 링크) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [지침 2.1 - 키보드 접근성](https://www.w3.org/WAI/WCAG22/quickref/#keyboard-accessible) + +**UAAG** + +- [지침 2.1 - 키보드 접근](https://www.w3.org/TR/UAAG20/#gl-keyboard-access) +- [지침 2.2 - 순차적 내비게이션](https://www.w3.org/TR/UAAG20/#gl-sequential-navigation) +- [지침 2.3 - 직접(direct) 내비게이션과 활성화](https://www.w3.org/TR/UAAG20/#gl-direct-navigation-and-activation) +- [지침 2.11 - 다른 입력 장치](https://www.w3.org/TR/UAAG20/#gl-other-devices) + +**ATAG** + +- [원칙 A.1: 저작 도구 사용자 인터페이스는 해당되는 접근성 지침을 따른다.](https://www.w3.org/TR/ATAG20/#principle_a1) +- [지침 A.3.1: 저작 도구 사용자 인터페이스에서 저작 기능에 키보드 접근성을 제공해야 한다.](https://www.w3.org/TR/ATAG20/#gl_a31) +- [Part B. 접근 가능한 콘텐츠 생산을 지원해야 한다.](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### 키보드 접근성과 관련된 이야기 +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, 반복성 긴장 장애가 있는 리포터](/people-use-web/user-stories/#reporter) +- [Ilya, 시각장애가 있는 고위 간부](/people-use-web/user-stories/#accountant) + +{% include excol.html type="end" %} + +### 콘텐츠를 읽고 사용하는 데에 충분한 시간이 필요한 사용자 {#time} + +콘텐츠를 읽고 사용하는 데에 더 많은 시간이 필요한 사람들이 있습니다. 예를 들어, 많은 사람들이 타이핑을 하고 지시 사항을 이해하고 컨트롤 요소들을 조작하는 등의 사이트에서 하려는 일을 완수하기 위해 더 많은 시간이 필요합니다. + +충분한 시간을 제공하는 방법들은 다음과 같습니다. : + +- 필수적인 상황이 아니라면 시간 제한을 조정하여 연장하고 멈출 수 있어야 합니다. +- 스크롤되거나 깜빡이거나 움직이는 콘텐츠는 멈추거나 숨길 수 있어야 합니다. +- 필수적인 상황이 아니라면 방해 요소를 제거할 수 있어야 합니다. +- 데이터 손실 없이 세션이 만료되었을 때 권한이 다시 부여되어야 합니다. + +{% include excol.html type="start" %} + +#### 충분한 시간 제공과 관련된 접근성 필요조건 (기술 명세 링크) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [지침 2.2 - 충분한 시간 제공](https://www.w3.org/WAI/WCAG22/quickref/#enough-time) + +**UAAG** + +- [지침 2.8 - 시간 독립적 상호작용(Time-independent interaction)](https://www.w3.org/TR/UAAG20/#gl-time-independent) +- [지침 2.10 - 시간 기반 미디어(Time-based media)](https://www.w3.org/TR/UAAG20/#gl-control-inaccessible-content) + +**ATAG** + +- [원칙 A.1: 저작 도구 사용자 인터페이스는 해당되는 접근성 지침을 따른다.](https://www.w3.org/TR/ATAG20/#principle_a1) +- [지침 A.3.2: 저작 도구 사용자 인터페이스에서 저자에게 충분한 시간을 제공해야 한다.](https://www.w3.org/TR/ATAG20/#gl_a32) +- [Part B. 접근 가능한 콘텐츠 생산을 지원해야 한다.](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### 충분한 시간 제공과 관련된 이야기 +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, 반복성 긴장 장애가 있는 리포터](/people-use-web/user-stories/#reporter) +- [Preety, 주의력결핍과다활동장애와 난독증이 있는 중학생](/people-use-web/user-stories/#classroomstudent) +- [Yun, 저시력, 수전증, 경도 건망증이 있는 퇴직자](/people-use-web/user-stories/#retiree) +- [Luis, 다운증후군이 있는 슈퍼마켓 직원](/people-use-web/user-stories/#supermarketassistant) +- [Kaseem, 시청각장애가 있는 10대](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### 발작이나 신체적 반응을 유발하지 않는 콘텐츠 {#safe} + +특정 속도로 번쩍이는 콘텐츠나 패턴은 발작을 포함한 감광성 반응을 유발할 수 있습니다. 번쩍이는 콘텐츠는 전반적으로 피해야 하고, 알려진 위험을 일으키지 않는 선에서만 사용해야 합니다. 또한 애니메이션이나 움직이는 콘텐츠도 신체적 반응과 불편함을 줄 수 있습니다. + +발작과 신체적 반응 유발을 피하는 방법은 다음과 같습니다. : + +- 특정 속도로 번쩍이는 콘텐츠나 패턴은 지양해야 합니다. +- 번쩍이는 콘텐츠가 나타나기 전 사용자에게 경고하고 대안을 제공해야 합니다. +- 필수적인 것이 아니라면 애니메이션을 끌 수 있는 방법을 제공해야 합니다. + +{% include excol.html type="start" %} + +#### 발작과 관련된 접근성 필요조건 (기술 명세 링크) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [지침 2.3 - 발작 예방](https://www.w3.org/WAI/WCAG22/quickref/#seizures-and-physical-reactions) + +**UAAG** + +- [지침 2.9 - 번쩍임 예방](https://www.w3.org/TR/UAAG20/#gl-prevent-flash) + +**ATAG** + +- [원칙 A.1: 저작 도구 사용자 인터페이스는 해당되는 접근성 지침을 따른다.](https://www.w3.org/TR/ATAG20/#principle_a1) +- [지침 A.3.3: 저작 도구 사용자 인터페이스에서 저자가 발작을 유발하는 번쩍임을 피할 수 있도록 지원해야 한다.](https://www.w3.org/TR/ATAG20/#gl_a33) +- [Part B. 접근 가능한 콘텐츠 생산을 지원해야 한다.](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %} + +### 쉽게 콘텐츠를 찾고 탐색하고 현재 위치를 알 수 있는 사용자 {#navigable} + +구조화가 잘된 콘텐츠는 사용자가 자신의 위치를 알고 효과적으로 탐색하도록 합니다. 다음의 내용을 포함합니다. : + +- 페이지는 명확한 제목을 갖고 있어야 하고, 섹션별 제목도 구조화가 잘 되어 있어야 합니다. +- 웹 페이지 세트 내에서 관련된 페이지를 찾을 수 있는 방법을 한 개 이상 제공해야 합니다. +- 웹 페이지 세트 내에서 현재 위치 정보를 사용자에게 제공해야 합니다. +- 여러 페이지에서 반복적으로 있는 콘텐츠는 뛰어 넘기 기능을 제공해야 합니다. +- 키보드 포커스는 시각적으로 인지가 가능해야 하고, 포커스 순서는 의미적인 순서와 일치해야 합니다. +- 링크의 목적은 명확하게 눈에 띄는 것이기에 해당 링크가 현재 보여질 때에도 명확해야 합니다. + +위의 내용을 준수한다면 사용자의 필요와 선호에 따라 다양한 방법으로 웹 페이지를 탐색하는 데에 도움이 될 것입니다. 예를 들어, 특정 페이지에 접근하기 위해 메뉴 바와 같은 계층적 내비게이션을 사용하는 사람이 있는 반면, 사이트의 기능 찾기를 사용하는 사람들도 있습니다. 콘텐츠를 보는 사람도 있고, 듣는 사람이 있고, 보면서 듣는 사람도 있을 것입니다. 마우스나 키보드로 탐색하는 사람이 있고, 마우스와 키보드를 동시에 사용하는 사람들도 있습니다. + +{% include excol.html type="start" %} + +#### 내비게이션과 관련된 접근성 필요조건 (기술 명세 링크) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [지침 2.4 - 탐색 가능](https://www.w3.org/WAI/WCAG22/quickref/#navigable) + +**UAAG** + +- [지침 2.2 - 순차적 내비게이션](https://www.w3.org/TR/UAAG20/#gl-sequential-navigation) +- [지침 2.3 - 직접(direct) 내비게이션과 활성화](https://www.w3.org/TR/UAAG20/#gl-direct-navigation-and-activation) +- [지침 2.4 - 텍스트 검색](https://www.w3.org/TR/UAAG20/#gl-search-text) +- [지침 2.5 - 구조적 내비게이이션](https://www.w3.org/TR/UAAG20/#gl-nav-structure) +- [지침 2.7 - 그래픽 컨트롤](https://www.w3.org/TR/UAAG20/#gl-configure-controls) + +**ATAG** + +- [원칙 A.1: 저작 도구 사용자 인터페이스는 해당되는 접근성 지침을 따른다.](https://www.w3.org/TR/ATAG20/#principle_a1) +- [지침 A.2.2: 저작 도구 사용자 인터페이스에서 편집창 화면을 프로그램적으로 조작 가능하도록 해야 한다.](https://www.w3.org/TR/ATAG20/#gl_a22) +- [지침 A.3.4: 저작 도구 사용자 인터페이스에서 콘텐츠 구조 수정과 내비게이션을 쉽게 해야 한다.](https://www.w3.org/TR/ATAG20/#gl_a34) +- [지침 A.3.5: 저작 도구 사용자 인터페이스에서 텍스트 검색 기능을 제공해야 한다.](https://www.w3.org/TR/ATAG20/#gl_a35) +- [Part B. 접근 가능한 콘텐츠 생산을 지원해야 한다.](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### 내비게이션과 관련된 이야기 +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, 반복성 긴장 장애가 있는 리포터](/people-use-web/user-stories/#reporter) +- [Ilya, 시각장애가 있는 고위 간부](/people-use-web/user-stories/#accountant) +- [Preety, 주의력결핍과다활동장애와 난독증이 있는 중학생](/people-use-web/user-stories/#classroomstudent) +- [Yun, 저시력, 수전증, 경도 건망증이 있는 퇴직자](/people-use-web/user-stories/#retiree) +- [Luis, 다운증후군이 있는 슈퍼마켓 직원](/people-use-web/user-stories/#supermarketassistant) +- [Kaseem, 시청각장애가 있는 10대](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### 키보드 외의 다양한 입력 장치를 사용할 수 있는 사용자 {#modalities} + +키보드 외의 터치 활성화(touch activation), 음성 인식, 제스처과 같은 다양한 입력 장치들은 더 많은 사람들이 콘텐츠에 접근하기 쉽게 합니다. 하지만 모든 사람들이 이러한 입력 장치 전부를 동등한 수준으로 사용할 수 있는 것은 아닙니다. 특정 디자인적 고려가 이러한 입력 장치들의 이점을 더 극대화시킬 수 있습니다. 다음의 내용을 포함합니다. : + +- 능숙함과 미세한 움직임을 요구하는 제스처는 높은 수준의 능숙함을 요하지 않는 대안을 제공해야 합니다. +- 요소는 취소 기능을 제공하는 것과 같이 의도치 않은 활성화를 피할 수 있도록 디자인되어야 합니다. +- 음성으로 활성화되도록 하기 위해 라벨은 코드에서 상응하는 객체 이름과 맞게 작성해야 합니다. +- 움직임으로 활성화되는 기능은 사용자 인터페이스 요소를 통해서도 활성화되어야 합니다. +- 버튼, 링크와 같은 활성화 요소들은 터치로도 쉽게 활성화되도록 사이즈가 커야 합니다. + +위의 내용을 준수한다면 다양한 장치를 사용하는 여러 사람들이 콘텐츠를 더 쉽게 사용할 수 있게 될 것입니다. 모바일 폰, 태블릿, 티켓 판매기와 같은 자동서비스단말기에서 사용되는 콘텐츠도 포함됩니다. + +{% include excol.html type="start" id="" %} + +#### 입력 장치와 관련된 접근성 필요조건 (기술 명세 링크) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [지침 2.5 - 입력 양식](https://www.w3.org/WAI/WCAG22/quickref/#input-modalities) + +{% include excol.html type="end" %}{% include excol.html type="start" id="" %} + +#### 입력 장치와 관련된 이야기 +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, 반복성 긴장 장애가 있는 리포터](/people-use-web/user-stories/#reporter) +- [Yun, 저시력, 수전증, 경도 건망증이 있는 퇴직자](/people-use-web/user-stories/#retiree) +- [Luis, 다운증후군이 있는 슈퍼마켓 직원](/people-use-web/user-stories/#supermarketassistant) + +{% include excol.html type="end" %} + +## 이해하기 쉬운 정보와 사용자 인터페이스 {#understandable} + +### 읽고 이해하기 쉬운 텍스트 {#readable} + +콘텐츠 저자는 텍스트를 음성을 읽어주는(text-to-speech) 경우를 포함하여 최대한 많은 사람들이 텍스트 콘텐츠를 읽고 이해하기 쉽도록 해야 합니다. 다음의 내용을 포함합니다. : + +- 아랍어, 독일어, 한국어와 같은 웹 페이지의 주요 언어들을 구분해야 합니다. +- 텍스트 구문, 관용구나 웹 페이지의 여러 부분들의 언어를 구분해야 합니다. +- 생소한 단어, 구문, 관용구, 약어들에 대한 설명을 제공해야 합니다. +- 최대한 명확하고, 단순한 언어를 사용하거나 단순화한 버전을 제공해야 합니다. + +위의 내용을 준수한다면 보조 기술을 포함한 소프트웨어가 텍스트 콘텐츠에 정확하게 접근할 수 있게 될 것입니다. 예를 들어, 이 필요조건들은 소프트웨어가 콘텐츠를 읽어주고, 페이지 요약본을 만들어주고, 기술 용어와 같은 생소한 단어들의 뜻을 제공하는 것을 쉽게 할 것입니다. 또한 복잡한 문장, 관용구, 단어를 이해하는 데에 어려움을 겪는 사람들에게 도움이 될 것입니다. 특히, 다양한 인지 장애를 가진 사람들에게 도움이 될 것입니다. + +{% include excol.html type="start" %} + +#### 가독성과 관련된 접근성 필요조건 (기술 명세 링크) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [지침 3.1 - 가독성](https://www.w3.org/WAI/WCAG22/quickref/#readable) + +**ATAG** + +- [원칙 A.1: 저작 도구 사용자 인터페이스는 해당되는 접근성 지침을 따른다.](https://www.w3.org/TR/ATAG20/#principle_a1) +- [지침 A.4.2: 저작 도구 사용자 인터페이스에서 모든 접근성 기능을 포함한 사용자 인터페이스를 문서화해야 한다.](https://www.w3.org/TR/ATAG20/#gl_b42) +- [Part B. 접근 가능한 콘텐츠 생산을 지원해야 한다.](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### 가독성과 관련된 이야기 +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Martine, 청력이 약한 온라인 수강생](/people-use-web/user-stories/#onlinestudent) +- [Ilya, 시각장애가 있는 고위 간부](/people-use-web/user-stories/#accountant) +- [Preety, 주의력결핍과다활동장애와 난독증이 있는 중학생](/people-use-web/user-stories/#classroomstudent) +- [Yun, 저시력, 수전증, 경도 건망증이 있는 퇴직자](/people-use-web/user-stories/#retiree) +- [Luis, 다운증후군이 있는 슈퍼마켓 직원](/people-use-web/user-stories/#supermarketassistant) + +{% include excol.html type="end" %} + +### 예측 가능한 방식으로 보여지고 조작할 수 있는 콘텐츠 {#predictable} + +대부분의 사람들은 예측 가능한 사용자 인터페이스에 의존하기에 일관성이 없는 행동이나 외관에 낯설어하고 산만하게 느낍니다. 더 예측 가능한 콘텐츠를 만드는 예시로 다음의 내용이 포합됩니다. : + +- 여러 페이지에서 사용되는 내비게이션은 같은 위치에 있어야 합니다. +- 웹 페이지에서 반복되는 사용자 인터페이스 요소는 항상 같은 라벨을 갖고 있어야 합니다. +- 웹 페이지에서의 중요한 변화는 사용자의 동의가 있어야 합니다. + +위의 내용을 준수한다면 사이트에서 제공된 내비게이션 방법과 기능을 더 빨리 배우고, 사용자의 목적과 선호에 맞게 사용할 수 있을 것입니다. 예를 들어, 일부 사람들은 키보드 내비게이션 사용성을 높이기 위해 그들이 자주 사용하는 기능을 각자만의 단축키로 지정할 수 있습니다. 또 다른 사람들은 특정 페이지에 접근하고 사이트에서의 과정을 완수하기 위해 과정을 기억해 둘 수 있습니다. 둘 다 예측 가능하고 일관된 기능성에 관련 있습니다. + +{% include excol.html type="start" %} + +#### 예측 가능성과 관련된 접근성 필요 조건 (기술 명세 링크) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [지침 3.2 - 예측 가능성](https://www.w3.org/WAI/WCAG22/quickref/#predictable) + +**UAAG** + +- [지침 3.3 - 예측 가능성](https://www.w3.org/TR/UAAG20/#gl-predictable-operation) + +**ATAG** + +- [원칙 A.1: 저작 도구 사용자 인터페이스는 해당되는 접근성 지침을 따른다.](https://www.w3.org/TR/ATAG20/#principle_a1) +- [지침 A.2.2: 저작 도구 사용자 인터페이스에서 편집창 화면을 프로그램적으로 조작 가능하도록 해야 한다.](https://www.w3.org/TR/ATAG20/#gl_a22) +- [지침 A.4.2: 저작 도구 사용자 인터페이스에서 모든 접근성 기능을 포함한 사용자 인터페이스를 문서화해야 한다.](https://www.w3.org/TR/ATAG20/#gl_b42) +- [Part B. 접근 가능한 콘텐츠 생산을 지원해야 한다.](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### 예측 가능성과 관련된 이야기 +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, 반복성 긴장 장애가 있는 리포터](/people-use-web/user-stories/#reporter) +- [Ilya, 시각장애가 있는 고위 간부](/people-use-web/user-stories/#accountant) +- [Preety, 주의력결핍과다활동장애와 난독증이 있는 중학생](/people-use-web/user-stories/#classroomstudent) +- [Yun, 저시력, 수전증, 경도 건망증이 있는 퇴직자](/people-use-web/user-stories/#retiree) +- [Luis, 다운증후군이 있는 슈퍼마켓 직원](/people-use-web/user-stories/#supermarketassistant) +- [Kaseem, 시청각장애가 있는 10대](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### 실수를 피하고 수정할 수 있는 기능을 제공받는 사용자 {#tolerant} + +사람들은 폼 요소와 다른 상호작용 요소들에 많은 어려움을 느끼고 그 결과 실수로 이어지게 됩니다. 사용자가 실수를 피하고 수정할 수 있도록 하는 예시로 다음의 내용이 포합됩니다. : + +- 지시 사항, 에러 메시지, 수정을 위한 내용을 포함해야 합니다. +- 맥락 민감성(context-sensitive)은 더 복잡한 기능과 상호작용을 돕습니다. +- 리뷰하고 수정할 기회와 필요하다면 제출한 것을 회수할 수 있는 기회를 제공해야 합니다. + +위의 내용을 준수한다면 콘텐츠를 보거나 들을 수 없는 사용자나 복잡한 관계, 순서, 단서들을 인지하지 못하는 사용자들에게 도움이 될 것입니다. 또한 기능을 이해하지 못하고 혼란스러워하고 잊어버리는 사용자나 어떠한 이유로 폼 요소를 사용하는 데에 실수를 한 사용자에게도 도움이 될 것입니다. + +{% include excol.html type="start" %} + +#### 입력 도움과 관련된 접근성 필요조건 (기술 명세 링크) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [지침 3.3 - 입력 도움](https://www.w3.org/WAI/WCAG22/quickref/#input-assistance) + +**UAAG** + +- [지침 3.1 - 실수 피하기](https://www.w3.org/TR/UAAG20/#gl-avoid-mistakes) + +**ATAG** + +- [원칙 A.1: 저작 도구 사용자 인터페이스는 해당되는 접근성 지침을 따른다.](https://www.w3.org/TR/ATAG20/#principle_a1) +- [지침 A.2.2: 저작 도구 사용자 인터페이스에서 편집창 화면을 프로그램적으로 조작 가능하도록 해야 한다.](https://www.w3.org/TR/ATAG20/#gl_a22) +- [지침 A.4.1: 저작 도구 사용자 인터페이스에서 사용자가 실수를 피하고 수정할 수 있도록 해야 한다.](https://www.w3.org/TR/ATAG20/#gl_b41) +- [Part B. 접근 가능한 콘텐츠 생산을 지원해야 한다.](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### 입력 도움과 관련된 이야기 +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Lee, 온라인 쇼핑을 하는 색맹인](/people-use-web/user-stories/#shopper) +- [Alex, 반복성 긴장 장애가 있는 리포터](/people-use-web/user-stories/#reporter) +- [Preety, 주의력결핍과다활동장애와 난독증이 있는 중학생](/people-use-web/user-stories/#classroomstudent) +- [Yun, 저시력, 수전증, 경도 건망증이 있는 퇴직자](/people-use-web/user-stories/#retiree) +- [Luis, 다운증후군이 있는 슈퍼마켓 직원](/people-use-web/user-stories/#supermarketassistant) + +{% include excol.html type="end" %} + +## 견고한 콘텐츠와 정확한 설명 {#robust} + +### 현재와 미래 사용자 도구와 호환 가능한 콘텐츠 {#compatible} + +견고한 콘텐츠는 다른 브라우저, 보조 기술, 다른 사용자 에이전트에서도 사용이 가능합니다. 사용되는 예시로 다음이 포함합니다. : + +- 유효성 보장과 같이 마크업이 정확하게 해석될 수 있도록 해야 합니다. +- 비표준 사용자 인터페이스 요소를 위해 name, role, value를 제공해야 합니다. + +위의 내용을 준수한다면 현재와 미래 사용자 에이전트, 보조 기술의 호환성을 높일 수 있습니다. 특히 보조 기술이 콘텐츠에 정확하게 접근하고, 다양한 방법으로 운용할 수 있도록 할 수 있습니다. 스크립트로 된 비표준 버튼, 인풋 필드와 다른 컨트롤 요소들을 포함합니다. + +{% include excol.html type="start" %} + +#### 호환성과 관련된 접근성 필요조건 (기술 명세 링크) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [지침 4.1 - 호환성](https://www.w3.org/WAI/WCAG22/quickref/#compatible) + +**UAAG** + +- [지침 2.6 - 환경설정](https://www.w3.org/TR/UAAG20/#gl-store-prefs) +- [지침 4.1 - 보조 기술](https://www.w3.org/TR/UAAG20/#gl-AT-access) +- [지침 5.1 - 명세 준수(Follow specifications)](https://www.w3.org/TR/UAAG20/#gl-obs-env-conventions) + +**ATAG** + +- [원칙 A.1: 저작 도구 사용자 인터페이스는 해당되는 접근성 지침을 따른다.](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Part B. 접근 가능한 콘텐츠 생산을 지원해야 한다.](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### 호환성과 관련된 이야기 +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Lee, 온라인 쇼핑을 하는 색맹인](/people-use-web/user-stories/#shopper) +- [Alex, 반복성 긴장 장애가 있는 리포터](/people-use-web/user-stories/#reporter) +- [Ilya, 시각장애가 있는 고위 간부](/people-use-web/user-stories/#accountant) +- [Preety, 주의력결핍과다활동장애와 난독증이 있는 중학생](/people-use-web/user-stories/#classroomstudent) +- [Luis, 다운증후군이 있는 슈퍼마켓 직원](/people-use-web/user-stories/#supermarketassistant) +- [Kaseem, 시청각장애가 있는 10대](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +{% include excol.html type="all" %} \ No newline at end of file diff --git a/pages/fundamentals/accessibility-principles/index.md b/pages/fundamentals/accessibility-principles/index.md new file mode 100755 index 00000000000..0c1e21ca8af --- /dev/null +++ b/pages/fundamentals/accessibility-principles/index.md @@ -0,0 +1,726 @@ +--- +# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#". +# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:" + +title: Accessibility Principles +nav_title: "Accessibility Principles" +lang: en # Change "en" to the translated language shortcode +last_updated: 2024-07-15 # Put the date of this translation YYYY-MM-DD (with month in the middle) +description: An overview of the fundamental web accessibility requirements for websites, web applications, browsers, and other tools. +teaser_text: The Accessibility Principles page introduces some of the web accessibility requirements for websites, web applications, browsers, and other tools. It provides references to the international standards from W3C Web Accessibility Initiative (WAI) and to stories of web users. + +# translators: # remove from the beginning of this line and the lines below: "# " (the hash sign and the space) +# - name: "Jan Doe" # Replace Jan Doe with translator name +# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple translators +# contributors: +# - name: "Jan Doe" # Replace Jan Doe with contributor name, or delete this line if none +# - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple contributors + +github: + label: wai-accessibility-principles + +permalink: /fundamentals/accessibility-principles/ # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr +ref: /fundamentals/accessibility-principles/ # Do not change this + +image: /content-images/accessibility-principles/social.png +changelog: /fundamentals/accessibility-principles/changelog/ # Do not change this + +# In the footer below: +# Do not change the dates +# Do not translate CHANGELOG +# Translate the other words, including "Date:" and "Editors:" +# Translate the Working Group name. Leave the Working Group acronym in English. +footer: > +

Date: Updated 16 July 2024. CHANGELOG

+

Editors: Shadi Abou Zahra. Acknowledgments.

+

Developed by the Education and Outreach Working Group (EOWG). Previously developed with the WAI-AGE Task Force, with support of the WAI-AGE Project.

+--- + +{::nomarkdown} +{% include box.html type="start" h="2" title="Summary" class="full" %} +{:/} + +This page introduces some of the web accessibility requirements for websites, web applications, browsers, and other tools. It provides references to the international standards from W3C Web Accessibility Initiative (WAI) and to [stories of web users](/people-use-web/user-stories/). + +**Note:** This is not a complete list of all accessibility requirements. + +{::nomarkdown} +{% include box.html type="end" %} +{:/} + + +{::options toc_levels="2,3" /} + +{::nomarkdown} +{% include_cached toc.html type="start" title="Page Contents" class="full" %} +{:/} + +- TOC is created automatically. +{:toc} + +{::nomarkdown} +{% include_cached toc.html type="end" %} +{:/} + + +{% include excol.html type="all" %} + +## Web accessibility standards {#standards} + +Web accessibility relies on several components that work together. Some of these include: + +- **Web content**{:#webcontent} - refers to any part of a website, including text, images, forms, and multimedia, as well as any markup code, scripts, applications, and such. +- **User agents**{:#useragents} - software that people use to access web content, including desktop graphical browsers, voice browsers, mobile phone browsers, multimedia players, plug-ins, and some [assistive technologies](/people-use-web/tools-techniques/#at "definition"). +- **Authoring tools**{:#authoringtools} - software or services that people use to produce web content, including code editors, document conversion tools, content management systems, blogs, database scripts, and other tools. + +{% include excol.html type="start" %} + +### More about web accessibility standards +{:.no_toc} + +{% include excol.html type="middle" %} + +These components inter-relate and support each other. For instance, **web content** needs to include text alternatives for images. This information needs to be processed by **web browsers** and then conveyed to **assistive technologies**, such as screen readers. To create such text alternatives, authors need **authoring tools** that support them to do so. More background is provided in [[Essential Components of Web Accessibility]](/fundamentals/components/). + +Standards play a vital role in defining accessibility requirements for each of these components. Some accessibility requirements are easy to meet, yet understanding the basics of how people with disabilities use the Web helps implement them more effectively and efficiently. Some aspects of accessibility require more technical skills or advanced knowledge of how people use the Web. In all cases, [involving users early and throughout your web projects](/test-evaluate/involving-users/) will make your work better and easier. + +The W3C Web Accessibility Initiative (WAI) provides a set of guidelines that are internationally recognized as the standard for web accessibility. These include: + +- **[Web Content Accessibility Guidelines (WCAG)](/standards-guidelines/wcag/)** +- **[User Agent Accessibility Guidelines (UAAG)](/standards-guidelines/uaag/)** +- **[Authoring Tool Accessibility Guidelines (ATAG)](/standards-guidelines/atag/)** + +There is also a WAI specification for **[Accessible Rich Internet Applications (WAI-ARIA)](/standards-guidelines/aria/)**, which include dynamic content and advanced user interface controls developed with Ajax, JavaScript, and related web technologies. + +{% include excol.html type="end" %} + +## Perceivable information and user interface {#perceivable} + +### Text alternatives for non-text content {#alternatives} + +Text alternatives are equivalents for non-text content. Examples include: + +- Short equivalents for images, including icons, buttons, and graphics +- Description of data represented on charts, diagrams, and illustrations +- Brief descriptions of non-text content such as audio and video files +- Labels for form controls, input, and other user interface components + +Text alternatives convey the purpose of an image or function to provide an equivalent user experience. For instance, an appropriate text alternative for a search button would be "*search*" rather than "*magnifying lens*". + +Text alternatives can be presented in a variety of ways. For instance, they can be read aloud for people who cannot see the screen and for people with reading difficulties, enlarged to custom text sizes, or displayed on braille devices. Text alternatives serve as labels for controls and functionality to aid keyboard navigation and navigation by voice recognition (speech input). They also act as labels to identify audio, video, and files in other formats, as well as applications that are embedded as part of a website. + +{% include excol.html type="start" %} + +#### Accessibility requirements related to text alternatives (links to technical specification) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Guideline 1.1 - Text Alternatives](https://www.w3.org/WAI/WCAG22/quickref/#text-alternatives) + +**UAAG** + +- [Guideline 1.1 - Alternative content](https://www.w3.org/TR/UAAG20/#gl-access-alternative-content) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Guideline A.2.1: (For the authoring tool user interface) Make alternative content available to authors](https://www.w3.org/TR/ATAG20/#gl_a21) +- [Guideline A.2.2: (For the authoring tool user interface) Ensure that editing-view presentation can be programmatically determined](https://www.w3.org/TR/ATAG20/#gl_a22) +- [Guideline A.3.7: (For the authoring tool user interface) Ensure that previews are at least as accessible as in-market user agents](https://www.w3.org/TR/ATAG20/#gl_a37) +- [Part B. Support the production of accessible content](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + +#### Stories related to text alternatives +{:#stories-related-to-text-alternatives.no_toc} + +{% include excol.html type="middle" %} + +- [[Ade, reporter with limited use of his arms]](/people-use-web/user-stories/story-one/) +- [[Lakshmi, senior accountant who is blind]](/people-use-web/user-stories/story-three/) +- [[Dhruv, older adult student who is deaf]](/people-use-web/user-stories/story-six/) +- [[Marta, marketing assistant who is deaf and blind]](/people-use-web/user-stories/story-seven/) +- [[Stefan, student with attention deficit hyperactivity disorder and dyslexia]](/people-use-web/user-stories/story-eight/) +- [[Elias, retiree with low vision, hand tremor, and mild short-term memory loss]](/people-use-web/user-stories/story-nine/) + +{% include excol.html type="end" %} + +### Captions and other alternatives for multimedia {#captions} + +People who cannot hear audio or see video need alternatives. Examples include: + +- Text transcripts and captions for audio content, such as recordings of a radio interview +- Audio descriptions, which are narrations to describe important visual details in a video +- Sign language interpretation of audio content, including relevant auditory experiences + +Well-written text transcripts containing the correct sequence of any auditory or visual information provide a basic level of accessibility and facilitate the production of captions and audio descriptions. + +{% include excol.html type="start" %} + +#### Accessibility requirements related to multimedia (links to technical specification) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Guideline 1.2 - Time-based Media](https://www.w3.org/WAI/WCAG22/quickref/#time-based-media) + +**UAAG** + +- [Guideline 1.1 - Alternative content](https://www.w3.org/TR/UAAG20/#gl-access-alternative-content) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Guideline A.2.1: (For the authoring tool user interface) Make alternative content available to authors](https://www.w3.org/TR/ATAG20/#gl_a21) +- [Guideline A.3.7: (For the authoring tool user interface) Ensure that previews are at least as accessible as in-market user agents](https://www.w3.org/TR/ATAG20/#gl_a37) +- [Part B. Support the production of accessible content](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %} +{% include excol.html type="start" %} + +#### Stories related to multimedia {#stories-related-to-multimedia} +{:.no_toc} + +{% include excol.html type="middle" %} + +- [[Lakshmi, senior accountant who is blind]](/people-use-web/user-stories/story-three/) +- [[Dhruv, older adult student who is deaf]](/people-use-web/user-stories/story-six/) +- [[Marta, marketing assistant who is deaf and blind]](/people-use-web/user-stories/story-seven/) + +{% include excol.html type="end" %} + +### Content can be presented in different ways {#adaptable} + +For users to be able to change the presentation of content, it is necessary that: + +- Headings, lists, tables, input fields, and content structures are marked-up properly +- Sequences of information or instructions are independent of any presentation +- Browsers and assistive technologies provide settings to customize the presentation + +Meeting this requirement allows content to be correctly read aloud, enlarged, or adapted to meet the needs and preferences of different people. For instance, it can be presented using custom color combinations, text size, or other styling to facilitate reading. This requirement also facilitates other forms of adaptation, including automatic generation of page outlines and summaries to help people get an overview and to focus on particular parts more easily. + +{% include excol.html type="start" %} + +#### Accessibility requirements related to adaptability (links to technical specification) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Guideline 1.3 - Adaptable](https://www.w3.org/WAI/WCAG22/quickref/#adaptable) + +**UAAG** + +- [Guideline 1.4 - Text configuration](https://www.w3.org/TR/UAAG20/#gl-text-config) +- [Guideline 1.5 - Volume configuration](https://www.w3.org/TR/UAAG20/#gl-volume-config) +- [Guideline 1.6 - Synthesized speech configuration](https://www.w3.org/TR/UAAG20/#gl-speech-config) +- [Guideline 1.7 - User style sheet configuration](https://www.w3.org/TR/UAAG20/#gl-style-sheets-config) +- [Guideline 1.9 - Alternative views](https://www.w3.org/TR/UAAG20/#gl-alternative-views) +- [Guideline 1.10 - Element information](https://www.w3.org/TR/UAAG20/#gl-info-link) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Guideline A.2.2: (For the authoring tool user interface) Ensure that editing-view presentation can be programmatically determined](https://www.w3.org/TR/ATAG20/#gl_a22) +- [Guideline A.3.7: (For the authoring tool user interface) Ensure that previews are at least as accessible as in-market user agents](https://www.w3.org/TR/ATAG20/#gl_a37) +- [Part B. Support the production of accessible content](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Stories related to adaptability +{:.no_toc} + +{% include excol.html type="middle" %} + +- [[Ade, reporter with limited use of his arms]](/people-use-web/user-stories/story-one/) +- [[Ian, data entry clerk with autism]](/people-use-web/user-stories/story-two/) +- [[Lexie, online shopper who cannot distinguish between certain colors (color blindness)]](/people-use-web/user-stories/story-four/) +- [[Sophie, basketball fan with Down syndrome]](/people-use-web/user-stories/story-five/) +- [[Marta, marketing assistant who is deaf and blind]](/people-use-web/user-stories/story-seven/) +- [[Stefan, student with attention deficit hyperactivity disorder and dyslexia]](/people-use-web/user-stories/story-eight/) +- [[Elias, retiree with low vision, hand tremor, and mild short-term memory loss]](/people-use-web/user-stories/story-nine/) + +{% include excol.html type="end" %} + +### Content is easier to see and hear {#distinguishable} + +Distinguishable content is easier to see and hear. Such content includes: + +- Color is not used as the only way of conveying information or identifying content +- Default foreground and background color combinations provide sufficient contrast +- When users resize text up to 400% or change text spacing, no information is lost +- Text reflows in small windows ("viewports") and when users make the text larger +- Images of text are resizable, replaced with actual text, or avoided where possible +- Users can pause, stop, or adjust the volume of audio that is played on a website +- Background audio is low or can be turned off, to avoid interference or distraction + +Meeting this requirement helps separate foreground from background, to make important information more distinguishable. This includes considerations for people who do not use assistive technologies and for people using assistive technologies who may observe interference from prominent audio or visual content in the background. For instance, many people with color blindness do not use any particular tools and rely on a proper design that provides sufficient color contrast between text and its surrounding background. For others, audio that is automatically played could interfere with text-to-speech or with [assistive listening devices (ALDs)](/teach-advocate/accessible-presentations/#ald "definition"). + +{% include excol.html type="start" %} + +#### Accessibility requirements related to distinguishability (links to technical specification) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Guideline 1.4 - Distinguishable](https://www.w3.org/WAI/WCAG22/quickref/#distinguishable) + +**UAAG** + +- [Guideline 1.3 - Highlighting](https://www.w3.org/TR/UAAG20/#gl-interaction-highlight) +- [Guideline 1.4 - Text configuration](https://www.w3.org/TR/UAAG20/#gl-text-config) +- [Guideline 1.5 - Volume configuration](https://www.w3.org/TR/UAAG20/#gl-volume-config) +- [Guideline 1.6 - Synthesized speech configuration](https://www.w3.org/TR/UAAG20/#gl-speech-config) +- [Guideline 1.7 - User style sheet configuration](https://www.w3.org/TR/UAAG20/#gl-style-sheets-config) +- [Guideline 1.8 - Orientation in viewports](https://www.w3.org/TR/UAAG20/#gl-viewport-orient) +- [Guideline 1.9 - Alternative views](https://www.w3.org/TR/UAAG20/#gl-alternative-views) +- [Guideline 1.10 - Element information](https://www.w3.org/TR/UAAG20/#gl-info-link) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Guideline A.3.7: (For the authoring tool user interface) Ensure that previews are at least as accessible as in-market user agents](https://www.w3.org/TR/ATAG20/#gl_a37) +- [Part B. Support the production of accessible content](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Stories related to distinguishability +{:.no_toc} + +{% include excol.html type="middle" %} + +- [[Ian, data entry clerk with autism]](/people-use-web/user-stories/story-two/) +- [[Lakshmi, senior accountant who is blind]](/people-use-web/user-stories/story-three/) +- [[Lexie, online shopper who cannot distinguish between certain colors (color blindness)]](/people-use-web/user-stories/story-four/) +- [[Dhruv, older adult student who is deaf]](/people-use-web/user-stories/story-six/) +- [[Marta, marketing assistant who is deaf and blind]](/people-use-web/user-stories/story-seven/) +- [[Elias, retiree with low vision, hand tremor, and mild short-term memory loss]](/people-use-web/user-stories/story-nine/) + +{% include excol.html type="end" %} + +## Operable user interface and navigation {#operable} + +### Functionality is available from a keyboard {#keyboard} + +Many people do not use the mouse and rely on the keyboard to interact with the Web. This requires keyboard access to all functionality, including form controls, input, and other user interface components. + +Keyboard accessibility includes: + +- All functionality that is available by mouse is also available by keyboard +- Keyboard focus does not get trapped in any part of the content +- Web browsers, authoring tools, and other tools provide keyboard support + +Meeting this requirement helps keyboard users, including people using alternative keyboards such as keyboards with ergonomic layouts, on-screen keyboards, or switch devices. It also helps people using voice recognition (speech input) to operate websites and to dictate text through the keyboard interface. + +{% include excol.html type="start" %} + +#### Accessibility requirements related to keyboard accessibility (links to technical specification) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Guideline 2.1 - Keyboard accessible](https://www.w3.org/WAI/WCAG22/quickref/#keyboard-accessible) + +**UAAG** + +- [Guideline 2.1 - Keyboard access](https://www.w3.org/TR/UAAG20/#gl-keyboard-access) +- [Guideline 2.2 - Sequential navigation](https://www.w3.org/TR/UAAG20/#gl-sequential-navigation) +- [Guideline 2.3 - Direct navigation and activation](https://www.w3.org/TR/UAAG20/#gl-direct-navigation-and-activation) +- [Guideline 2.11 - Other Input Devices](https://www.w3.org/TR/UAAG20/#gl-other-devices) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Guideline A.3.1: (For the authoring tool user interface) Provide keyboard access to authoring features](https://www.w3.org/TR/ATAG20/#gl_a31) +- [Part B. Support the production of accessible content](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Stories related to keyboard accessibility +{:.no_toc} + +{% include excol.html type="middle" %} + +- [[Ade, reporter with limited use of his arms]](/people-use-web/user-stories/story-one/) +- [[Lakshmi, senior accountant who is blind]](/people-use-web/user-stories/story-three/) + +{% include excol.html type="end" %} + +### Users have enough time to read and use the content {#time} + +Some people need more time than others to read and use the content. For instance, some people require more time to type text, understand instructions, operate controls, or to otherwise complete tasks on a website. + +Examples of providing enough time include providing mechanisms to: + +- Stop, extend, or adjust time limits, except where necessary +- Pause, stop, or hide moving, blinking, or scrolling content +- Postpone or suppress interruptions, except where necessary +- Re-authenticate when a session expires without losing data + +{% include excol.html type="start" %} + +#### Accessibility requirements related to sufficient time (links to technical specification) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Guideline 2.2 - Enough time](https://www.w3.org/WAI/WCAG22/quickref/#enough-time) + +**UAAG** + +- [Guideline 2.8 - Time-independent interaction](https://www.w3.org/TR/UAAG20/#gl-time-independent) +- [Guideline 2.10 - Time-based media](https://www.w3.org/TR/UAAG20/#gl-control-inaccessible-content) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Guideline A.3.2: (For the authoring tool user interface) Provide authors with enough time](https://www.w3.org/TR/ATAG20/#gl_a32) +- [Part B. Support the production of accessible content](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Stories related to sufficient time +{:.no_toc} + +{% include excol.html type="middle" %} + +- [[Ade, reporter with limited use of his arms]](/people-use-web/user-stories/story-one/) +- [[Sophie, basketball fan with Down syndrome]](/people-use-web/user-stories/story-five/) +- [[Marta, marketing assistant who is deaf and blind]](/people-use-web/user-stories/story-seven/) +- [[Stefan, student with attention deficit hyperactivity disorder and dyslexia]](/people-use-web/user-stories/story-eight/) +- [[Elias, retiree with low vision, hand tremor, and mild short-term memory loss]](/people-use-web/user-stories/story-nine/) + +{% include excol.html type="end" %} + +### Content does not cause seizures and physical reactions {#safe} + +Content that flashes at certain rates or patterns can cause photosensitive reactions, including seizures. Flashing content is ideally avoided entirely or only used in a way that does not cause known risks. Also animations and moving content can cause discomfort and physical reactions. + +Examples of avoiding causing seizures and physical reactions: + +- Do not include content that flashes at particular rates and patterns +- Warn users before flashing content is presented, and provide alternatives +- Provide mechanisms to switch off animations, unless they are essential + +{% include excol.html type="start" %} + +#### Accessibility requirements related to seizures (links to technical specification) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Guideline 2.3 - Seizures](https://www.w3.org/WAI/WCAG22/quickref/#seizures-and-physical-reactions) + +**UAAG** + +- [Guideline 2.9 - Flashing](https://www.w3.org/TR/UAAG20/#gl-prevent-flash) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Guideline A.3.3: (For the authoring tool user interface) Help authors avoid flashing that could cause seizures](https://www.w3.org/TR/ATAG20/#gl_a33) +- [Part B. Support the production of accessible content](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Stories related to seizures +{:.no_toc} + +{% include excol.html type="middle" %} + +- [[Ian, data entry clerk with autism]](/people-use-web/user-stories/story-two/) + + +{% include excol.html type="end" %} + +### Users can easily navigate, find content, and determine where they are {#navigable} + +Well organized content helps users to orient themselves and to navigate effectively. Such content includes: + +- Pages have clear titles and are organized using descriptive section headings +- There is more than one way to find relevant pages within a set of web pages +- Users are informed about their current location within a set of related pages +- There are ways to bypass blocks of content that are repeated on multiple pages +- The keyboard focus is visible, and the focus order follows a meaningful sequence +- The purpose of a link is evident, ideally even when the link is viewed on its own + +Meeting this requirement helps people to navigate through web pages in different ways, depending on their particular needs and preferences. For instance, while some people rely on hierarchical navigation structures such as menu bars to find specific web pages, others rely on search functions on websites instead. Some people may be seeing the content while others may be hearing it or seeing and hearing it at the same time. Some people may be using the content with only a mouse or a keyboard, while others may be using both. + +{% include excol.html type="start" %} + +#### Accessibility requirements related to navigation (links to technical specification) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Guideline 2.4 - Navigable](https://www.w3.org/WAI/WCAG22/quickref/#navigable) + +**UAAG** + +- [Guideline 2.2 - Sequential navigation](https://www.w3.org/TR/UAAG20/#gl-sequential-navigation) +- [Guideline 2.3 - Direct navigation and activation](https://www.w3.org/TR/UAAG20/#gl-direct-navigation-and-activation) +- [Guideline 2.4 - Text search](https://www.w3.org/TR/UAAG20/#gl-search-text) +- [Guideline 2.5 - Structural navigation](https://www.w3.org/TR/UAAG20/#gl-nav-structure) +- [Guideline 2.7 - Graphical controls](https://www.w3.org/TR/UAAG20/#gl-configure-controls) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Guideline A.2.2: (For the authoring tool user interface) Ensure that editing-view presentation can be programmatically determined](https://www.w3.org/TR/ATAG20/#gl_a22) +- [Guideline A.3.4: (For the authoring tool user interface) Enhance navigation and editing via content structure](https://www.w3.org/TR/ATAG20/#gl_a34) +- [Guideline A.3.5: (For the authoring tool user interface) Provide text search of the content](https://www.w3.org/TR/ATAG20/#gl_a35) +- [Part B. Support the production of accessible content](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Stories related to navigation +{:.no_toc} + +{% include excol.html type="middle" %} + +- [[Ade, reporter with limited use of his arms]](/people-use-web/user-stories/story-one/) +- [[Ian, data entry clerk with autism]](/people-use-web/user-stories/story-two/) +- [[Lakshmi, senior accountant who is blind]](/people-use-web/user-stories/story-three/) +- [[Sophie, basketball fan with Down syndrome]](/people-use-web/user-stories/story-five/) +- [[Marta, marketing assistant who is deaf and blind]](/people-use-web/user-stories/story-seven/) +- [[Stefan, student with attention deficit hyperactivity disorder and dyslexia]](/people-use-web/user-stories/story-eight/) +- [[Elias, retiree with low vision, hand tremor, and mild short-term memory loss]](/people-use-web/user-stories/story-nine/) + +{% include excol.html type="end" %} + +### Users can use different input modalities beyond keyboard {#modalities} + +Input modalities beyond keyboard, such as touch activation, voice recognition (speech input), and gestures make content easier to use for many people. Yet not everyone can use each of these input modalities, and to the same degree. Particular design considerations maximize the benefit of these input modalities. This includes: + +- Gestures that require dexterity or fine movement have alternatives that do not require high dexterity +- Components are designed to avoid accidental activation, for example by providing undo functionality +- Labels presented to users match corresponding object names in the code, to support activation by voice +- Functionality that is activated by movement can also be activated through user interface components +- Buttons, links, and other active components are large enough to make them easier to activate by touch + +Meeting this requirement makes the content easier to use for many people with a wide range of abilities using a wide range of devices. This includes content used on mobile phones, tablet computers, and self-service terminals such as ticketing machines. + +{% include excol.html type="start" id="" %} + +#### Accessibility requirements related to input modalities (links to technical specification) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Guideline 2.5 - Input Modalities](https://www.w3.org/WAI/WCAG22/quickref/#input-modalities) + +{% include excol.html type="end" %}{% include excol.html type="start" id="" %} + +## Understandable information and user interface {#understandable} + +### Text is readable and understandable {#readable} + +Content authors need to ensure that text content is readable and understandable to the broadest audience possible, including when it is read aloud by text-to-speech. Such content includes: + +- Identifying the primary language of a web page, such as Arabic, Dutch, or Korean +- Identifying the language of text passages, phrases, or other parts of a web page +- Providing definitions for any unusual words, phrases, idioms, and abbreviations +- Using the clearest and simplest language possible, or providing simplified versions + +Meeting this requirement helps software, including assistive technology, to process text content correctly. For instance, this requirement helps software to read the content aloud, to generate page summaries, and to provide definitions for unusual words such as technical jargon. It also helps people who have difficulty understanding more complex sentences, phrases, and vocabulary. In particular, it helps people with different types of cognitive disabilities. + +{% include excol.html type="start" %} + +#### Accessibility requirements related to readability (links to technical specification) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Guideline 3.1 - Readable](https://www.w3.org/WAI/WCAG22/quickref/#readable) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Guideline A.4.2: (For the authoring tool user interface) Document the user interface, including all accessibility features](https://www.w3.org/TR/ATAG20/#gl_b42) +- [Part B. Support the production of accessible content](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Stories related to readability +{:.no_toc} + +{% include excol.html type="middle" %} + +- [[Ian, data entry clerk with autism]](/people-use-web/user-stories/story-two/) +- [[Lakshmi, senior accountant who is blind]](/people-use-web/user-stories/story-three/) +- [[Sophie, basketball fan with Down syndrome]](/people-use-web/user-stories/story-five/) +- [[Dhruv, older adult student who is deaf]](/people-use-web/user-stories/story-six/) +- [[Stefan, student with attention deficit hyperactivity disorder and dyslexia]](/people-use-web/user-stories/story-eight/) +- [[Elias, retiree with low vision, hand tremor, and mild short-term memory loss]](/people-use-web/user-stories/story-nine/) + +{% include excol.html type="end" %} + +### Content appears and operates in predictable ways {#predictable} + +Many people rely on predictable user interfaces and are disoriented or distracted by inconsistent appearance or behavior. Examples of making content more predictable include: + +- Navigation mechanisms that are repeated on multiple pages appear in the same place each time +- User interface components that are repeated on web pages have the same labels each time +- Significant changes on a web page do not happen without the consent of the user + +Meeting this requirement helps people to quickly learn the functionality and navigation mechanisms provided on a website, and to operate them according to their specific needs and preferences. For instance, some people assign personalized shortcut keys to functions they frequently use to enhance keyboard navigation. Others memorize the steps to reach certain pages or to complete processes on a website. Both rely on predictable and consistent functionality. + +{% include excol.html type="start" %} + +#### Accessibility requirements related to predictability (links to technical specification) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Guideline 3.2 - Predictable](https://www.w3.org/WAI/WCAG22/quickref/#predictable) + +**UAAG** + +- [Guideline 3.3 - Predictable](https://www.w3.org/TR/UAAG20/#gl-predictable-operation) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Guideline A.2.2: (For the authoring tool user interface) Ensure that editing-view presentation can be programmatically determined](https://www.w3.org/TR/ATAG20/#gl_a22) +- [Guideline A.4.2: (For the authoring tool user interface) Document the user interface, including all accessibility features](https://www.w3.org/TR/ATAG20/#gl_b42) +- [Part B. Support the production of accessible content](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Stories related to predictability +{:.no_toc} + +{% include excol.html type="middle" %} + +- [[Ade, reporter with limited use of his arms]](/people-use-web/user-stories/story-one/) +- [[Ian, data entry clerk with autism]](/people-use-web/user-stories/story-two/) +- [[Lakshmi, senior accountant who is blind]](/people-use-web/user-stories/story-three/) +- [[Sophie, basketball fan with Down syndrome]](/people-use-web/user-stories/story-five/) +- [[Marta, marketing assistant who is deaf and blind]](/people-use-web/user-stories/story-seven/) +- [[Stefan, student with attention deficit hyperactivity disorder and dyslexia]](/people-use-web/user-stories/story-eight/) +- [[Elias, retiree with low vision, hand tremor, and mild short-term memory loss]](/people-use-web/user-stories/story-nine/) + +{% include excol.html type="end" %} + +### Users are helped to avoid and correct mistakes {#tolerant} + +Forms and other interaction can be confusing or difficult to use for many people, and, as a result, they may be more likely to make mistakes. Examples of helping users to avoid and correct mistakes include: + +- Descriptive instructions, error messages, and suggestions for correction +- Context-sensitive help for more complex functionality and interaction +- Opportunity to review, correct, or reverse submissions if necessary + +Meeting this requirement helps people who do not see or hear the content, and may not recognize implicit relationships, sequences, and other cues. It also helps people who do not understand the functionality, are disoriented or confused, forget, or make mistakes using forms and interaction for any other reason. + +{% include excol.html type="start" %} + +#### Accessibility requirements related to input assistance (links to technical specification) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Guideline 3.3 - Input assistance](https://www.w3.org/WAI/WCAG22/quickref/#input-assistance) + +**UAAG** + +- [Guideline 3.1 - Mistakes](https://www.w3.org/TR/UAAG20/#gl-avoid-mistakes) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Guideline A.2.2: (For the authoring tool user interface) Ensure that editing-view presentation can be programmatically determined](https://www.w3.org/TR/ATAG20/#gl_a22) +- [Guideline A.4.1: (For the authoring tool user interface) Help authors avoid and correct mistakes](https://www.w3.org/TR/ATAG20/#gl_b41) +- [Part B. Support the production of accessible content](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Stories related to input assistance +{:.no_toc} + +{% include excol.html type="middle" %} + +- [[Ade, reporter with limited use of his arms]](/people-use-web/user-stories/story-one/) +- [[Sophie, basketball fan with Down syndrome]](/people-use-web/user-stories/story-five/) +- [[Stefan, student with attention deficit hyperactivity disorder and dyslexia]](/people-use-web/user-stories/story-eight/) +- [[Elias, retiree with low vision, hand tremor, and mild short-term memory loss]](/people-use-web/user-stories/story-nine/) + +{% include excol.html type="end" %} + +## Robust content and reliable interpretation {#robust} + +### Content is compatible with current and future user tools {#compatible} + +Robust content is compatible with different browsers, assistive technologies, and other user agents. Examples of how this can be achieved include: + +- Ensuring markup can be reliably interpreted, for instance by ensuring it is valid +- Providing a name, role, and value for non-standard user interface components + +Meeting this requirement helps maximize compatibility with current and future user agents, including assistive technologies. In particular, it enables assistive technologies to process the content reliably, and to present or to operate it in different ways. This includes non-standard (scripted) buttons, input fields, and other controls. + +{% include excol.html type="start" %} + +#### Accessibility requirements related to compatibility (links to technical specification) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Guideline 4.1 - Compatible](https://www.w3.org/WAI/WCAG22/quickref/#compatible) + +**UAAG** + +- [Guideline 2.6 - Preference settings](https://www.w3.org/TR/UAAG20/#gl-store-prefs) +- [Guideline 4.1 - Assistive technology](https://www.w3.org/TR/UAAG20/#gl-AT-access) +- [Guideline 5.1 - Follow specifications](https://www.w3.org/TR/UAAG20/#gl-obs-env-conventions) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Part B. Support the production of accessible content](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Stories related to compatibility +{:.no_toc} + +{% include excol.html type="middle" %} + +- [[Ade, reporter with limited use of his arms]](/people-use-web/user-stories/story-one/) +- [[Lakshmi, senior accountant who is blind]](/people-use-web/user-stories/story-three/) +- [[Lexie, online shopper who cannot distinguish between certain colors (color blindness)]](/people-use-web/user-stories/story-four/) +- [[Sophie, basketball fan with Down syndrome]](/people-use-web/user-stories/story-five/) +- [[Marta, marketing assistant who is deaf and blind]](/people-use-web/user-stories/story-seven/) +- [[Stefan, student with attention deficit hyperactivity disorder and dyslexia]](/people-use-web/user-stories/story-eight/) +- [[Elias, retiree with low vision, hand tremor, and mild short-term memory loss]](/people-use-web/user-stories/story-nine/) + +{% include excol.html type="end" %} + +{% include excol.html type="all" %} + diff --git a/pages/fundamentals/accessibility-principles/index.ru.md b/pages/fundamentals/accessibility-principles/index.ru.md new file mode 100755 index 00000000000..2859f06be72 --- /dev/null +++ b/pages/fundamentals/accessibility-principles/index.ru.md @@ -0,0 +1,724 @@ +--- +# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#". +# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:" + +title: Принципы доступности +nav_title: "Принципы доступности" +lang: ru +last_updated: 2023-12-06 # Put the date of this translation YYYY-MM-DD (with month in the middle) +description: Обзор основных требований веб-доступности для вебсайтов, веб приложений, браузеров и других инструментов. +teaser_text: The Accessibility Principles page introduces some of the web accessibility requirements for websites, web applications, browsers, and other tools. It provides references to the international standards from W3C Web Accessibility Initiative (WAI) and to stories of web users. + +translators: +- name: "Daniel Novichkov" + +github: + label: wai-accessibility-principles + +permalink: /fundamentals/accessibility-principles/ru # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr +ref: /fundamentals/accessibility-principles/ # Do not change this + +image: /content-images/accessibility-principles/social.png +changelog: /fundamentals/accessibility-principles/changelog/ # Do not change this + +# In the footer below: +# Do not change the dates +# Do not translate CHANGELOG +# Translate the other words, including "Date:" and "Editors:" +# Translate the Working Group name. Leave the Working Group acronym in English. +footer: > +

Дата: Обновлено 10 Мая 2019. CHANGELOG

+

Редакторы: Shadi Abou Zahra. Благодарности.

+

Разработано Education and Outreach Working Group (EOWG). Ранее разработано WAI-AGE Task Force, при поддержке WAI-AGE Project.

+--- + +{::nomarkdown} +{% include box.html type="start" h="2" title="Summary" class="full" %} +{:/} + +На этой странице представлены некоторые требования доступности для веб-сайтов, веб-приложений, браузеров и других инструментов. В ней приведены ссылки на международные стандарты W3C Web Accessibility Initiative (WAI) и [истории интернет пользователей](/people-use-web/user-stories/). + +**Примечание:** Этот текст не является полным списком требований доступности. + +{::nomarkdown} +{% include box.html type="end" %} +{:/} + + +{::options toc_levels="2,3" /} + +{::nomarkdown} +{% include_cached toc.html type="start" title="Содержание страницы" class="full" %} +{:/} + +- TOC is created automatically. +{:toc} + +{::nomarkdown} +{% include_cached toc.html type="end" %} +{:/} + + +{% include excol.html type="all" %} + +## Стандарты веб-доступности {#standards} + +Веб-доступность состоит из нескольких компонентов, которые взаимодействуют друг с другом, включая: + +- **Веб контент**{:#webcontent} - относится к любой части веб-сайта, включая текст, изображения, формы, мультимедиа, а также любой код разметки, скрипты, приложения и тому подобное. +- **Пользовательские агенты**{:#useragents} - программное обеспечение, которое используют пользователи для доступа к веб-контенту, включая графические десктопные браузеры, голосовые браузеры, браузеры мобильных телефонов, проигрыватели мультимедиа, плагины и некоторые [вспомогательные технологии](/people-use-web/tools-techniques/#at "definition"). +- **Инструменты разработки**{:#authoringtools} - программное обеспечение или сервисы, которые используются для создания веб-контента, включая редакторы кода, инструменты преобразования документов, системы управления контентом, блоги, сценарии баз данных и другие инструменты. + +{% include excol.html type="start" %} + +### Подробнее о стандартах веб-доступности +{:.no_toc} + +{% include excol.html type="middle" %} + +Эти компоненты взаимосвязаны и поддерживают друг друга. Например, **веб-контент** должен включать текстовые версии изображений. Эта информация должна обрабатываться **веб-браузерами** и затем передаваться **вспомогательным технологиям**, например программам экранного чтения. Для создания текстовых версий, авторам нужны **инструменты разработки**, которые их поддерживают. Более подробная информация представлена в [Основные компоненты веб-доступности](/fundamentals/components/). + +Стандарты играют жизненно важную роль в определении требований доступности для каждого из этих компонентов. Некоторые требования доступности легко выполнить, но понимание основ того, как люди с ограниченными возможностями используют Интернет, помогает реализовать их более эффективно и действенно. Некоторые аспекты доступности требуют дополнительных технических навыков или глубоких знаний о том, как люди используют Интернет. В любом случае [вовлечение пользователей на раннем этапе и во всех ваших веб-проектах](/test-evaluate/involving-users/) сделает вашу работу лучше и проще. +Инициатива W3C по веб-доступности (WAI) предоставляет набор руководящих принципов, которые признаны во всем мире в качестве стандарта веб-доступности. Они включают: + +- **[Web Content Accessibility Guidelines (WCAG)](/standards-guidelines/wcag/)** +- **[User Agent Accessibility Guidelines (UAAG)](/standards-guidelines/uaag/)** +- **[Authoring Tool Accessibility Guidelines (ATAG)](/standards-guidelines/atag/)** + +Также имеется спецификация WAI для **[Accessible Rich Internet Applications (WAI-ARIA)](/standards-guidelines/aria/)**, которые описывают динамический контент и расширенные элементы управления пользовательским интерфейсом, разработанные с помощью Ajax, JavaScript и похожими веб-технологиями. и затем передаваться вспомогательным технологиям, например программам экранного чтения. + +{% include excol.html type="end" %} + +## Воспринимаемость информации и пользовательского интерфейса {#perceivable} + +### Текстовые версии для нетекстового контента {#alternatives} + +Текстовые версии являются эквивалентами нетекстового контента. Примеры: + +- Короткие эквиваленты изображений, включая значки, кнопки и графику +- Описание данных, представленных на графиках, диаграммах и иллюстрациях +- Краткие описания нетекстового контента, такого как аудио и видео файлы +- Ярлыки для элементов управления, ввода и других компонентов пользовательского интерфейса + +Текстовые версии описывают цель изображения или функции для обеспечения эквивалентного пользовательского взаимодействия. Например, подходящей текстовой альтернативой для кнопки поиска будет "*поиск*", а не "*увеличительная линза*". + +Текстовые версии могут быть представлены различными способами. +Например, они могут зачитываться вслух пользователям, которые не могут видеть экран или испытывают трудности при чтении, при значительном увеличении размеров текста или отображении его на устройствах Брайля. +Текстовые версии служат метками элементов управления и функций, помогая управлять контентом с клавиатуры или голосом (голосовой ввод). +Они служат метками аудио, видео и других файлов, а также приложений, встроенных в веб-сайты. + +{% include excol.html type="start" %} + +#### Требования доступности текстовых версий (ссылки на техническую спецификацию) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Guideline 1.1 - Text Alternatives](https://www.w3.org/WAI/WCAG22/quickref/#text-alternatives) + +**UAAG** + +- [Guideline 1.1 - Alternative content](https://www.w3.org/TR/UAAG20/#gl-access-alternative-content) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Guideline A.2.1: (For the authoring tool user interface) Make alternative content available to authors](https://www.w3.org/TR/ATAG20/#gl_a21) +- [Guideline A.2.2: (For the authoring tool user interface) Ensure that editing-view presentation can be programmatically determined](https://www.w3.org/TR/ATAG20/#gl_a22) +- [Guideline A.3.7: (For the authoring tool user interface) Ensure that previews are at least as accessible as in-market user agents](https://www.w3.org/TR/ATAG20/#gl_a37) +- [Part B. Support the production of accessible content](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + +#### Истории про текстовые версии +{:#stories-related-to-text-alternatives.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, reporter with repetitive stress injury](/people-use-web/user-stories/#reporter) +- [Martine, online student who is hard of hearing](/people-use-web/user-stories/#onlinestudent) +- [Ilya, senior staff member who is blind](/people-use-web/user-stories/#accountant) +- [Preety, middle school student with Attention Deficit Hyperactivity Disorder and Dyslexia](/people-use-web/user-stories/#classroomstudent) +- [Yun, retiree with low vision, hand tremor, and mild short-term memory loss](/people-use-web/user-stories/#retiree) +- [Kaseem, teenager who is deaf and blind](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### Субтитры и другие альтернативы для мультимедиа {#captions} + +Альтернативные версии нужны людям, которые не могут слышать аудио или видеть видео контент. Например: + +- Текстовые расшифровки и субтитры для аудиоконтента, например, для записей радиоинтервью +- Аудиоописание, которое описывает важные визуальные детали видеоконтента +- Перевод аудиоконтента и звуков на жестовый язык для передачи звукового сопровождения + +Хорошо написанные расшифровки текста, содержащие корректную последовательность любой звуковой или визуальной информации, обеспечивают базовый уровень доступности и облегчают создание субтитров и аудиоописаний. +{% include excol.html type="start" %} + +#### Требования доступности к мультимедиа (ссылки на техническую спецификацию) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Guideline 1.2 - Time-based Media](https://www.w3.org/WAI/WCAG22/quickref/#time-based-media) + +**UAAG** + +- [Guideline 1.1 - Alternative content](https://www.w3.org/TR/UAAG20/#gl-access-alternative-content) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Guideline A.2.1: (For the authoring tool user interface) Make alternative content available to authors](https://www.w3.org/TR/ATAG20/#gl_a21) +- [Guideline A.3.7: (For the authoring tool user interface) Ensure that previews are at least as accessible as in-market user agents](https://www.w3.org/TR/ATAG20/#gl_a37) +- [Part B. Support the production of accessible content](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %} +{% include excol.html type="start" %} + +#### Истории про мультимедиа {#stories-related-to-multimedia} +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Martine, online student who is hard of hearing](/people-use-web/user-stories/#onlinestudent) +- [Ilya, senior staff member who is blind](/people-use-web/user-stories/#accountant) +- [Kaseem, teenager who is deaf and blind](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### Контент может быть представлен разными способами {#adaptable} + +Пользователи могут менять способы представления контента, для этого необходимо чтобы: +- Заголовки, списки, таблицы, поля ввода и структура контента были корректно размечены +- Последовательность информации или инструкций не зависела от способа представления +- Браузеры и вспомогательные технологии давали возможность настройки изменения представления. + +Выполнение этого требования позволит корректно зачитывать контент вслух, увеличивать или адаптировать контент иным способом в соответствии с потребностями и предпочтениями разных людей. Например, контент может быть представлен с использованием пользовательских цветовых комбинаций, размера текста или других стилей для облегчения чтения. Это требование также облегчает другие формы изменения представления контента, включая автоматическое создание контуров страниц и создание резюме страниц, для упрощения ознакомления с контентом и фокусировкой на его конкретных частях. + +{% include excol.html type="start" %} + +#### Требования доступности к адаптивности (ссылки на техническую спецификацию) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Guideline 1.3 - Adaptable](https://www.w3.org/WAI/WCAG22/quickref/#adaptable) + +**UAAG** + +- [Guideline 1.4 - Text configuration](https://www.w3.org/TR/UAAG20/#gl-text-config) +- [Guideline 1.5 - Volume configuration](https://www.w3.org/TR/UAAG20/#gl-volume-config) +- [Guideline 1.6 - Synthesized speech configuration](https://www.w3.org/TR/UAAG20/#gl-speech-config) +- [Guideline 1.7 - User style sheet configuration](https://www.w3.org/TR/UAAG20/#gl-style-sheets-config) +- [Guideline 1.9 - Alternative views](https://www.w3.org/TR/UAAG20/#gl-alternative-views) +- [Guideline 1.10 - Element information](https://www.w3.org/TR/UAAG20/#gl-info-link) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Guideline A.2.2: (For the authoring tool user interface) Ensure that editing-view presentation can be programmatically determined](https://www.w3.org/TR/ATAG20/#gl_a22) +- [Guideline A.3.7: (For the authoring tool user interface) Ensure that previews are at least as accessible as in-market user agents](https://www.w3.org/TR/ATAG20/#gl_a37) +- [Part B. Support the production of accessible content](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Истории про адаптивность +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Lee, online shopper with color blindness](/people-use-web/user-stories/#shopper) +- [Alex, reporter with repetitive stress injury](/people-use-web/user-stories/#reporter) +- [Ilya, senior staff member who is blind](/people-use-web/user-stories/#accountant) +- [Preety, middle school student with Attention Deficit Hyperactivity Disorder and Dyslexia](/people-use-web/user-stories/#classroomstudent) +- [Yun, retiree with low vision, hand tremor, and mild short-term memory loss](/people-use-web/user-stories/#retiree) +- [Luis, supermarket assistant with Down syndrome](/people-use-web/user-stories/#supermarketassistant) +- [Kaseem, teenager who is deaf and blind](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### Контент легче видеть и слышать {#distinguishable} + +Контрастный контент легче видеть и слышать. В таком контенте: + +- Цвет не используется как единственный способ передачи информации или идентификации контента +- Комбинации цветов переднего плана и фона по умолчанию обеспечивают достаточный контраст +- Никакая информация не теряется, если пользователь увеличивает размер текста до 400% или меняет межстрочный интервал +- Текст адаптируется для корректного отображения на уменьшенных экранах («области просмотра») и при его увеличении +- При изображении текста в графическом виде размер можно изменить, заменить его текстовой версией или по возможности не использовать изображение текста +- Пользователи могут поставить на паузу, выключить или регулировать громкость аудио, воспроизводимого на веб-сайте +- Фоновый звук тихий или его можно отключить, чтобы избежать помех или отвлечения пользователя + +Выполнение этого требования помогает отделить передний план от фона, чтобы выделить важную информацию. Это поможет как использующим, так и не использующим вспомогательные технологии пользователям избегать помех аудио или визуального контента, проигрываемого в фоновом режиме. +Например, многие пользователи с дальтонизмом не используют какие-либо специальные инструменты, полагаясь на дизайн с достаточным цветовым контрастом между текстом и окружающим его фоном. Автоматически воспроизводимый аудиоконтент может мешать пользователям функции речевого воспроизведения текста или [вспомогательных устройств прослушивания (ALD)](/teach-advocate/accessible-presentations/#ald "definition"). + +{% include excol.html type="start" %} + +#### Требования доступности к контрастности (ссылки на техническую спецификацию) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Guideline 1.4 - Distinguishable](https://www.w3.org/WAI/WCAG22/quickref/#distinguishable) + +**UAAG** + +- [Guideline 1.3 - Highlighting](https://www.w3.org/TR/UAAG20/#gl-interaction-highlight) +- [Guideline 1.4 - Text configuration](https://www.w3.org/TR/UAAG20/#gl-text-config) +- [Guideline 1.5 - Volume configuration](https://www.w3.org/TR/UAAG20/#gl-volume-config) +- [Guideline 1.6 - Synthesized speech configuration](https://www.w3.org/TR/UAAG20/#gl-speech-config) +- [Guideline 1.7 - User style sheet configuration](https://www.w3.org/TR/UAAG20/#gl-style-sheets-config) +- [Guideline 1.8 - Orientation in viewports](https://www.w3.org/TR/UAAG20/#gl-viewport-orient) +- [Guideline 1.9 - Alternative views](https://www.w3.org/TR/UAAG20/#gl-alternative-views) +- [Guideline 1.10 - Element information](https://www.w3.org/TR/UAAG20/#gl-info-link) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Guideline A.3.7: (For the authoring tool user interface) Ensure that previews are at least as accessible as in-market user agents](https://www.w3.org/TR/ATAG20/#gl_a37) +- [Part B. Support the production of accessible content](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Истории про контрастность +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Lee, online shopper with color blindness](/people-use-web/user-stories/#shopper) +- [Martine, online student who is hard of hearing](/people-use-web/user-stories/#onlinestudent) +- [Ilya, senior staff member who is blind](/people-use-web/user-stories/#accountant) +- [Yun, retiree with low vision, hand tremor, and mild short-term memory loss](/people-use-web/user-stories/#retiree) +- [Kaseem, teenager who is deaf and blind](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +## Управляемость пользовательского интерфейса и навигации {#operable} + +### Вся функциональность доступна с клавиатуры {#keyboard} + +Многие люди используют клавиатуру, а не мышь для взаимодействия с интернетом. Для этого им необходим доступ с клавиатуры ко всем функциям, включая элементы управления форм, ввода и других компонентов пользовательского интерфейса. +Доступность с клавиатуры подразумевает: + +- Все функции, доступные с помощью мыши, равно доступны и с клавиатуры +- Фокус клавиатуры не блокируется какой-либо частью контента +- Веб-браузеры, инструменты разработки и другие инструменты предоставляют поддержку управления с клавиатуры. + +Выполнение этого требования помогает пользователям клавиатуры, включая людей, использующих альтернативные клавиатуры, например, эргономические, экранные клавиатуры или переключающие устройства. +Это также поможет пользователям функции распознавания голоса (голосового ввода) управлять веб-сайтами и наговаривать текст через интерфейс клавиатуры. + +{% include excol.html type="start" %} + +#### Требования к доступности управления с клавиатуры (ссылки на технические характеристики) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Guideline 2.1 - Keyboard accessible](https://www.w3.org/WAI/WCAG22/quickref/#keyboard-accessible) + +**UAAG** + +- [Guideline 2.1 - Keyboard access](https://www.w3.org/TR/UAAG20/#gl-keyboard-access) +- [Guideline 2.2 - Sequential navigation](https://www.w3.org/TR/UAAG20/#gl-sequential-navigation) +- [Guideline 2.3 - Direct navigation and activation](https://www.w3.org/TR/UAAG20/#gl-direct-navigation-and-activation) +- [Guideline 2.11 - Other Input Devices](https://www.w3.org/TR/UAAG20/#gl-other-devices) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Guideline A.3.1: (For the authoring tool user interface) Provide keyboard access to authoring features](https://www.w3.org/TR/ATAG20/#gl_a31) +- [Part B. Support the production of accessible content](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Истории про доступность управления с клавиатуры +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, reporter with repetitive stress injury](/people-use-web/user-stories/#reporter) +- [Ilya, senior staff member who is blind](/people-use-web/user-stories/#accountant) + +{% include excol.html type="end" %} + +### Пользователям даётся достаточно времени, для ознакомления и использования контента {#time} + +Некоторым людям нужно больше времени, чтобы ознакомиться с контентом и использовать его. Например, кому-то требуется больше времени для набора текста, понимания инструкций, использования элементов управления или выполнения иных своих задач на веб-сайте. + +Примеры предоставления достаточного времени подразумевают возможности: + +- Остановить, продлить или изменить временные ограничения, за исключением случаев, когда такое ограничение необходимо +- Приостановить, остановить или скрыть перемещение, мерцание или прокрутку содержимого +- Отложить или подавить прерывания за исключением случаев, когда они необходимы +- Повторно войти по истечении сеанса без потери ранее введённых данных +{% include excol.html type="start" %} + +#### Требования к доступности, связанные с временными ограничениями (ссылки на техническую спецификацию) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Guideline 2.2 - Enough time](https://www.w3.org/WAI/WCAG22/quickref/#enough-time) + +**UAAG** + +- [Guideline 2.8 - Time-independent interaction](https://www.w3.org/TR/UAAG20/#gl-time-independent) +- [Guideline 2.10 - Time-based media](https://www.w3.org/TR/UAAG20/#gl-control-inaccessible-content) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Guideline A.3.2: (For the authoring tool user interface) Provide authors with enough time](https://www.w3.org/TR/ATAG20/#gl_a32) +- [Part B. Support the production of accessible content](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Истории про ограничения времени +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, reporter with repetitive stress injury](/people-use-web/user-stories/#reporter) +- [Preety, middle school student with Attention Deficit Hyperactivity Disorder and Dyslexia](/people-use-web/user-stories/#classroomstudent) +- [Yun, retiree with low vision, hand tremor, and mild short-term memory loss](/people-use-web/user-stories/#retiree) +- [Luis, supermarket assistant with Down syndrome](/people-use-web/user-stories/#supermarketassistant) +- [Kaseem, teenager who is deaf and blind](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### Контент не вызывает судорог и иных физических реакций {#safe} + +Контент, мерцающий с определённой частотой или в определённом ритме, может вызвать фоточувствительные реакции, включая судороги. В идеале следует избегать мерцания контента или использовать его только так, чтобы не создавать таких рисков. Анимация и движущийся контент могут также вызывать дискомфорт и физические реакции. + +Примеры как избегать судорог и физических реакций: + +- Не используйте контент, который мерцает с определённой частотой и в определённом ритме +- Предупреждайте пользователей перед отображением мерцающего контента и предлагайте альтернативы +- Предоставьте возможность отключения анимации, если она не является необходимой + + +{% include excol.html type="start" %} + +#### Требования доступности, относящиеся к приступам (ссылки на техническую спецификацию) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Guideline 2.3 - Seizures](https://www.w3.org/WAI/WCAG22/quickref/#seizures-and-physical-reactions) + +**UAAG** + +- [Guideline 2.9 - Flashing](https://www.w3.org/TR/UAAG20/#gl-prevent-flash) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Guideline A.3.3: (For the authoring tool user interface) Help authors avoid flashing that could cause seizures](https://www.w3.org/TR/ATAG20/#gl_a33) +- [Part B. Support the production of accessible content](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %} + +### Пользователи могут легко перемещаться, находить нужный контент и определять, где они находятся {#navigable} + +Хорошо организованный контент помогает пользователям ориентироваться и эффективно перемещаться по нему. Такой контент подразумевает: + +- На страницах есть чёткие заголовки, и они организованы с использованием описательных заголовков разделов +- Пользователям доступно несколько способов найти нужные страницы среди других веб-страниц +- Пользователям доступна информация об их текущем местоположении в наборе связанных страниц +- Пользователям доступна возможность обойти блоки повторяющегося на нескольких страницах контента +- Фокус клавиатуры очевиден, порядок его перемещения понятен и последователен +- Цель ссылки очевидна, в идеале, даже если она просматривается пользователем в отрыве от контекста + +Выполнение этого требования помогает пользователям перемещаться по веб-страницам различными способами в зависимости от их потребностей и предпочтений. +Например, одни пользователи для поиска нужных им веб-страниц перемещаются по структуре элементов навигации, таких как строки меню, тогда как другие используют функцию поиска на веб-сайте. +Одни пользователи могут видеть контент, другие могут его слышать, или слышать и видеть одновременно. +Некоторые пользователи могут работать с контентом при помощи только мыши или только клавиатуры, другие могут использовать и то, и другое. + +{% include excol.html type="start" %} + +#### Требования доступности к навигации (ссылки на техническую спецификацию) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Guideline 2.4 - Navigable](https://www.w3.org/WAI/WCAG22/quickref/#navigable) + +**UAAG** + +- [Guideline 2.2 - Sequential navigation](https://www.w3.org/TR/UAAG20/#gl-sequential-navigation) +- [Guideline 2.3 - Direct navigation and activation](https://www.w3.org/TR/UAAG20/#gl-direct-navigation-and-activation) +- [Guideline 2.4 - Text search](https://www.w3.org/TR/UAAG20/#gl-search-text) +- [Guideline 2.5 - Structural navigation](https://www.w3.org/TR/UAAG20/#gl-nav-structure) +- [Guideline 2.7 - Graphical controls](https://www.w3.org/TR/UAAG20/#gl-configure-controls) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Guideline A.2.2: (For the authoring tool user interface) Ensure that editing-view presentation can be programmatically determined](https://www.w3.org/TR/ATAG20/#gl_a22) +- [Guideline A.3.4: (For the authoring tool user interface) Enhance navigation and editing via content structure](https://www.w3.org/TR/ATAG20/#gl_a34) +- [Guideline A.3.5: (For the authoring tool user interface) Provide text search of the content](https://www.w3.org/TR/ATAG20/#gl_a35) +- [Part B. Support the production of accessible content](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Истории про доступность навигации +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, reporter with repetitive stress injury](/people-use-web/user-stories/#reporter) +- [Ilya, senior staff member who is blind](/people-use-web/user-stories/#accountant) +- [Preety, middle school student with Attention Deficit Hyperactivity Disorder and Dyslexia](/people-use-web/user-stories/#classroomstudent) +- [Yun, retiree with low vision, hand tremor, and mild short-term memory loss](/people-use-web/user-stories/#retiree) +- [Luis, supermarket assistant with Down syndrome](/people-use-web/user-stories/#supermarketassistant) +- [Kaseem, teenager who is deaf and blind](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### Пользователи могут использовать различные способы ввода кроме клавиатуры {#modalities} + +Способы ввода отличные от клавиатуры, такие как активация касанием, распознавание голоса (речевой ввод) и жесты, упрощают работу с контентом для многих людей. Не все могут использовать каждый из этих способов в равной степени хорошо, а для некоторых они вообще недоступны. Учёт особенных требований к дизайну облегчит использование этих способов ввода. Это включает в себя: + +- Жесты, требующие высокой ловкости или точности движения, могут быть заменены на менее точные +- Компоненты разработаны так, чтобы можно было избегать их случайной активации, например, доступна функция отмены последнего действия +- Ярлыки, отображаемые пользователям, соответствуют названиям объектов в коде для поддержки активации голосом +- Функциональность, активируемая движением, может быть активирована и компонентами пользовательского интерфейса +- Кнопки, ссылки и другие активные компоненты имеют достаточный размер для их активации касанием. Выполнение этого требования упрощает использование контента для многих людей с различными особенностями, использующих разные устройства. Это и поддержка контента, используемого на мобильных телефонах, планшетных компьютерах и терминалах самообслуживания, таких как билетные автоматы. + +{% include excol.html type="start" id="" %} + +#### Требования доступности способов ввода (ссылки на техническую спецификацию) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Guideline 2.5 - Input Modalities](https://www.w3.org/WAI/WCAG22/quickref/#input-modalities) + +{% include excol.html type="end" %}{% include excol.html type="start" id="" %} + +#### Истории про доступность ввода +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, reporter with repetitive stress injury](/people-use-web/user-stories/#reporter) +- [Yun, retiree with low vision, hand tremor, and mild short-term memory loss](/people-use-web/user-stories/#retiree) +- [Luis, supermarket assistant with Down syndrome](/people-use-web/user-stories/#supermarketassistant) + +{% include excol.html type="end" %} + +## Понятные информация и пользовательский интерфейс {#understandable} + +### Текст легко читать и понимать {#readable} + +Авторы контента должны позаботиться о том, чтобы их текст было легко читать и понимать максимально широкой аудитории, в том числе, когда он зачитывается вслух с помощью преобразования текста в речь. Это включает в себя: + +- Определение основного языка веб-страницы, например арабского, голландского или корейского +- Определение языка параграфов, фраз или других частей веб-страницы +- Предоставление определений для любых необычных слов, фраз, идиом и сокращений +- Использование самого ясного и простого языка или создание упрощённых версий текста + +Выполнение этого требования поможет программному обеспечению, включая вспомогательные технологии, правильно обработать текстовый контент. +Это требование поможет программному обеспечению зачитывать контент вслух, создавать резюме страниц и давать определения для редко употребляемых слов, таких как технический жаргон. +Это также поможет людям, которым трудно понимать сложные предложения, фразы и слова. +В частности, это поможет людям с различными типами когнитивных нарушений. +{% include excol.html type="start" %} + +#### Требования доступности лёгкости чтения (ссылки на техническую спецификацию) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Guideline 3.1 - Readable](https://www.w3.org/WAI/WCAG22/quickref/#readable) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Guideline A.4.2: (For the authoring tool user interface) Document the user interface, including all accessibility features](https://www.w3.org/TR/ATAG20/#gl_b42) +- [Part B. Support the production of accessible content](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Истории про лёгкость прочтения +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Martine, online student who is hard of hearing](/people-use-web/user-stories/#onlinestudent) +- [Ilya, senior staff member who is blind](/people-use-web/user-stories/#accountant) +- [Preety, middle school student with Attention Deficit Hyperactivity Disorder and Dyslexia](/people-use-web/user-stories/#classroomstudent) +- [Yun, retiree with low vision, hand tremor, and mild short-term memory loss](/people-use-web/user-stories/#retiree) +- [Luis, supermarket assistant with Down syndrome](/people-use-web/user-stories/#supermarketassistant) + +{% include excol.html type="end" %} + +### Контент загружается и работает предсказуемым образом {#predictable} + +Пользователи ожидают определённого поведения пользовательских интерфейсов; нестандартный вид или поведение интерфейса их отвлекает или даже дезориентирует. Примеры повышения предсказуемости контента: + +- Механизмы навигации, повторяющиеся на нескольких страницах, всегда расположены на одном и том же месте +- Компоненты пользовательского интерфейса, повторяющиеся на веб-страницах, всегда имеют одинаковые ярлыки. +- Важные изменения на веб-странице происходят только с согласия пользователя + +Выполнение этого требования помогает людям быстро изучить функциональные возможности и механизмы навигации, представленные на веб-сайте, и управлять ими в соответствии со своими конкретными потребностями и предпочтениями. Например, некоторые пользователи назначают свои сочетания клавиш для функций, которыми они часто пользуются, чтобы упростить навигацию с помощью клавиатуры. +Другие запоминают шаги для перехода на определённые страницы или завершения процессов на веб-сайте. И те и другие рассчитывают на предсказуемое и последовательное поведение контента. + +{% include excol.html type="start" %} + +#### Требования доступности к предсказуемости (ссылки на техническую спецификацию) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Guideline 3.2 - Predictable](https://www.w3.org/WAI/WCAG22/quickref/#predictable) + +**UAAG** + +- [Guideline 3.3 - Predictable](https://www.w3.org/TR/UAAG20/#gl-predictable-operation) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Guideline A.2.2: (For the authoring tool user interface) Ensure that editing-view presentation can be programmatically determined](https://www.w3.org/TR/ATAG20/#gl_a22) +- [Guideline A.4.2: (For the authoring tool user interface) Document the user interface, including all accessibility features](https://www.w3.org/TR/ATAG20/#gl_b42) +- [Part B. Support the production of accessible content](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Истории про предсказуемость +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, reporter with repetitive stress injury](/people-use-web/user-stories/#reporter) +- [Ilya, senior staff member who is blind](/people-use-web/user-stories/#accountant) +- [Preety, middle school student with Attention Deficit Hyperactivity Disorder and Dyslexia](/people-use-web/user-stories/#classroomstudent) +- [Yun, retiree with low vision, hand tremor, and mild short-term memory loss](/people-use-web/user-stories/#retiree) +- [Luis, supermarket assistant with Down syndrome](/people-use-web/user-stories/#supermarketassistant) +- [Kaseem, teenager who is deaf and blind](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### Пользовательские ошибки предупреждаются и исправляются {#tolerant} + +Формы и другие элементы пользовательского взаимодействия могут сбивать с толку или затруднять работу многих людей, и в результате чего они с большей вероятностью могут совершать ошибки. Примерами того, как помочь пользователям избегать и исправлять ошибки, могут служить: + +- Информативные инструкции, сообщения об ошибках и предложения по исправлению +- Контекстно-зависимая справка для сложных функций и взаимодействия +- Возможность просмотреть, исправить или отменить введённую информацию при необходимости + +Выполнение этого требования поможет людям, которые не видят и не слышат контент, а потому могут не распознавать неявные связи, последовательности и другие указания. Это также поможет людям, которые не понимают функциональность, дезориентированы или сбиты с толку, забывают или делают ошибки по любой другой причине при использовании форм и иных элементов взаимодействия. + +{% include excol.html type="start" %} + +#### Требования доступности помощи при вводе (ссылки на техническую спецификацию) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Guideline 3.3 - Input assistance](https://www.w3.org/WAI/WCAG22/quickref/#input-assistance) + +**UAAG** + +- [Guideline 3.1 - Mistakes](https://www.w3.org/TR/UAAG20/#gl-avoid-mistakes) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Guideline A.2.2: (For the authoring tool user interface) Ensure that editing-view presentation can be programmatically determined](https://www.w3.org/TR/ATAG20/#gl_a22) +- [Guideline A.4.1: (For the authoring tool user interface) Help authors avoid and correct mistakes](https://www.w3.org/TR/ATAG20/#gl_b41) +- [Part B. Support the production of accessible content](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Истории про доступность помощи при вводе +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Lee, online shopper with color blindness](/people-use-web/user-stories/#shopper) +- [Alex, reporter with repetitive stress injury](/people-use-web/user-stories/#reporter) +- [Preety, middle school student with Attention Deficit Hyperactivity Disorder and Dyslexia](/people-use-web/user-stories/#classroomstudent) +- [Yun, retiree with low vision, hand tremor, and mild short-term memory loss](/people-use-web/user-stories/#retiree) +- [Luis, supermarket assistant with Down syndrome](/people-use-web/user-stories/#supermarketassistant) + +{% include excol.html type="end" %} + +## Надёжный контент и надёжная интерпретация {#robust} + +### Контент совместим с имеющимися и будущими пользовательскими инструментами {#compatible} + +Надёжный контент совместим с различными браузерами, вспомогательными технологиями и другими пользовательскими агентами. Примеры, как можно этого достичь, включают: + +- Обеспечение надёжной интерпретации разметки, например, через проверку её валидности +- Обозначение названия, роли и значения для нестандартных компонентов пользовательского интерфейса + +Выполнение этого требования помогает улучшить совместимость с существующими и будущими пользовательскими агентами, включая вспомогательные технологии. В частности, оно позволяет вспомогательным технологиям корректно обрабатывать контент и представлять или управлять им различными способами. Сюда входят нестандартные (скриптовые) кнопки, поля ввода и другие элементы управления. + +{% include excol.html type="start" %} + +#### Требования доступности к совместимости (ссылки на техническую спецификацию) +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [Guideline 4.1 - Compatible](https://www.w3.org/WAI/WCAG22/quickref/#compatible) + +**UAAG** + +- [Guideline 2.6 - Preference settings](https://www.w3.org/TR/UAAG20/#gl-store-prefs) +- [Guideline 4.1 - Assistive technology](https://www.w3.org/TR/UAAG20/#gl-AT-access) +- [Guideline 5.1 - Follow specifications](https://www.w3.org/TR/UAAG20/#gl-obs-env-conventions) + +**ATAG** + +- [Principle A.1: Authoring tool user interfaces follow applicable accessibility guidelines](https://www.w3.org/TR/ATAG20/#principle_a1) +- [Part B. Support the production of accessible content](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### Истории про совместимость +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Lee, online shopper with color blindness](/people-use-web/user-stories/#shopper) +- [Alex, reporter with repetitive stress injury](/people-use-web/user-stories/#reporter) +- [Ilya, senior staff member who is blind](/people-use-web/user-stories/#accountant) +- [Preety, middle school student with Attention Deficit Hyperactivity Disorder and Dyslexia](/people-use-web/user-stories/#classroomstudent) +- [Luis, supermarket assistant with Down syndrome](/people-use-web/user-stories/#supermarketassistant) +- [Kaseem, teenager who is deaf and blind](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +{% include excol.html type="all" %} + diff --git a/pages/fundamentals/accessibility-principles/index.zh-hans.md b/pages/fundamentals/accessibility-principles/index.zh-hans.md new file mode 100755 index 00000000000..9a1eb480e53 --- /dev/null +++ b/pages/fundamentals/accessibility-principles/index.zh-hans.md @@ -0,0 +1,722 @@ +--- +# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after "#". +# In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:" + +title: 无障碍原则 +nav_title: "无障碍原则" +lang: zh-hans +last_updated: 2023-12-06 # Put the date of this translation YYYY-MM-DD (with month in the middle) +description: 网站、web应用程序、浏览器和其他工具的基本web无障碍需求概述。 +teaser_text: 无障碍原则页面介绍了网站、web应用程序、浏览器和其他工具的一些web无障碍需求。它提供了从W3C web无障碍推进(WAI)到Web用户故事的国际标准的参考。 + +translators: +- name: "李松峰" # Replace @@ with translator name + link: "https://lisongfeng.cn/index.php/start-page.html" +- name: "冉若曦" + link: "https://www.w3.org/people/roy" + +github: + label: wai-accessibility-principles + +permalink: /fundamentals/accessibility-principles/zh-hans # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr +ref: /fundamentals/accessibility-principles/ # Do not change this + +image: /content-images/accessibility-principles/social.png +changelog: /fundamentals/accessibility-principles/changelog/ # Do not change this + +# In the footer below: +# Do not change the dates +# Do not translate CHANGELOG +# Translate the other words, including "Date:" and "Editors:" +# Translate the Working Group name. Leave the Working Group acronym in English. +footer: > +

日期： 更新于2019年5月10日。CHANGELOG

+

编者： Shadi Abou_Zahra. 致谢.

+

由教育及外展工作组(EOWG)开发. 之前该网页受 WAI-AGE 特别任务团和WAI-AGE项目的支持.

+--- + +{::nomarkdown} +{% include box.html type="start" h="2" title="Summary" class="full" %} +{:/} + +本页面介绍了网站、web应用程序、浏览器和其他工具的一些web无障碍要求。它提供了从W3C web无障碍推进(WAI)到[Web用户故事](/people-use-web/user-stories/)的国际标准的参考。 + +**Note:** 这不是所有无障碍需求的完整列表。 + +{::nomarkdown} +{% include box.html type="end" %} +{:/} + + +{::options toc_levels="2,3" /} + +{::nomarkdown} +{% include_cached toc.html type="start" title="Page Contents" class="full" %} +{:/} + +- TOC is created automatically. +{:toc} + +{::nomarkdown} +{% include_cached toc.html type="end" %} +{:/} + + +{% include excol.html type="all" %} + +## Web无障碍标准 {#standards} + +Web无障碍依赖几个相互联系的部分，包括： + +- **Web内容：**{:#webcontent} - 指网站中的任意部分，如文本、图片、表单和多媒体，以及所有标记代码、脚本、应用，等等。 +- **用户代理**{:#useragents} - 软件，用户通过它来访问Web内容，包括桌面图形界面浏览器、语音浏览器、手机浏览器、多媒体播放器、插件及一些辅助浏览技术。[辅助技术](/people-use-web/tools-techniques/#at "definition"). +- **创作工具：**{:#authoringtools} - 软件或服务，用户使用它产生Web内容，包括代码编辑器、文档转换工具、内容管理系统、博客、数据库脚本，以及其他工具。 + +{% include excol.html type="start" %} + +### 更多关于web无障碍的标准 +{:.no_toc} + +{% include excol.html type="middle" %} + +这些部分相互关联并相互支持。例如， **Web内容** 需要包含图像的文本替代。 这些信息需要 **web浏览器** 处理同时被 **辅助技术**转换, 例如读屏软件. 为了创建文本替代，作者需要**创作工具** 来做这些工作. 更多的信息可在 [[web无障碍的重要组成]](/fundamentals/components/)中找到. + +标准在为每个组件定义无障碍需求方面扮演着重要的角色。一些无障碍需求很容易满足，但是了解残疾人如何使用Web的基本知识有助于更有效地实现这些需求。无障碍的某些方面需要更多的技术技能，也需要关于人们如何使用Web的高级知识。在所有情况下，[在整个web项目中早期让用户参与](/test-evaluate/involving-user/)将使您的工作更好、更容易。 + +W3C的Web无障碍推进(WAI)提供了一组被国际公认为Web无障碍标准指南。这些包括: + +- **[Web内容无障碍指南 (WCAG)](/standards-guidelines/wcag/)** +- **[用户代理无障碍指南 (UAAG)](/standards-guidelines/uaag/)** +- **[创作工具无障碍指南 (ATAG)](/standards-guidelines/atag/)** + +还有一个用于**[无障碍富网络应用(WAI-ARIA)](/standards-guidelines/aria/)**的WAI规范，其中包括使用Ajax、JavaScript和相关web技术开发的动态内容和高级用户界面控件。 + +{% include excol.html type="end" %} + +## 可感知信息和用户界面 {#perceivable} + +### 用文本替代非文本内容 {#alternatives} + +替代文本与非文内容是等价的。比如： + +- 对图片（图标、按钮和图形）的简短描述； +- 图表、示意图和插图上数据的说明； +- 对音频和视频文件等非文本内容的简短说明； +- 表单控件、输入框等用户交互组件的标注。 + +替代文本传达图片或功能的意图，提供等价的用户体验。比如，对搜索按钮的替代文本应该是“搜索”，而不是“放大镜”。 + +替代文本的展示方式有很多种。比如，对看不见屏幕或视力不好的读者可以大声朗读出来，可以增大文本字号，也可以在盲文设备上显示。替代文本是控件和功能的标注，可以辅助键盘导航和语音识别导航（语音输入），也是识别音频、视频及其他格式文件乃至嵌入在网页中其他应用的标注。 + +{% include excol.html type="start" %} + +#### 与替代文件相关的无障碍要求（相关技术规范的链接） +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [指南 1.1 - 替代文本](https://www.w3.org/WAI/WCAG22/quickref/#text-alternatives) + +**UAAG** + +- [指南 1.1 - 替代内容](https://www.w3.org/TR/UAAG20/#gl-access-alternative-content) + +**ATAG** + +- [准则 A.1: 开发工具界面（应）遵循可应用的无障碍访问性准则](https://www.w3.org/TR/ATAG20/#principle_a1) +- [指南 A.2.1: （在开发工具界面中）应使用户可以使用替代内容](https://www.w3.org/TR/ATAG20/#gl_a21) +- [指南 A.2.2: （在开发工具界面中）应保证编辑视图之呈现是由程序决定的](https://www.w3.org/TR/ATAG20/#gl_a22) +- [指南 A.3.7: （在开发工具界面中）应保证预览应至少于市场中的用户代理的无障碍可访问性相同](https://www.w3.org/TR/ATAG20/#gl_a37) +- [B部分. 支持无障碍内容的生成](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %} + +{% include excol.html type="start" %} + +#### 替代文本相关的案例 +{:#stories-related-to-text-alternatives.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, 一个记者有重复性应激损伤](/people-use-web/user-stories/#reporter) +- [Martine, 听力障碍的在线学生](/people-use-web/user-stories/#onlinestudent) +- [Ilya, 盲人高级工作人员](/people-use-web/user-stories/#accountant) +- [Preety, 有注意缺陷多动障碍和阅读障碍的中学生](/people-use-web/user-stories/#classroomstudent) +- [Yun, 视力低下、手颤抖、轻度短期失忆的退休人员](/people-use-web/user-stories/#retiree) +- [Kaseem, 聋的盲人青年](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### 多媒体的字幕及其他替代物 {#captions} + +听不见声音或看不见视频的人需要替代物。比如： + +- 音频内容（如广播采访的录音）的文字版或字幕； +- 描述视频中重要影像细节的口述影像； +- 音频内容的手语表达，包括相应的受众体验。 + +整理规范的文字稿应该提供场所或视觉信息，为读者提供基本的无障碍阅读体验，并作为字幕或口述影像的提炼基础。 + +{% include excol.html type="start" %} + +#### 与多媒体相关的无障碍要求（相关技术规范的链接） +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [指南 1.2 - 时基媒体](https://www.w3.org/WAI/WCAG22/quickref/#time-based-media) + +**UAAG** + +- [指南 1.1 - 替代内容](https://www.w3.org/TR/UAAG20/#gl-access-alternative-content) + +**ATAG** + +- [准则 A.1: 开发工具界面（应）遵循可应用的无障碍访问性准则](https://www.w3.org/TR/ATAG20/#principle_a1) +- [指南 A.2.1:（在开发工具界面中）应使用户可以使用替代内容](https://www.w3.org/TR/ATAG20/#gl_a21) +- [指南 A.3.7:（在开发工具界面中）应保证预览应至少于市场中的用户代理的无障碍可访问性相同](https://www.w3.org/TR/ATAG20/#gl_a37) +- [B部分. 支持无障碍内容的生成](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %} +{% include excol.html type="start" %} + +#### 多媒体相关的案例 {#stories-related-to-multimedia} +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Martine, 听力障碍的在线学生](/people-use-web/user-stories/#onlinestudent) +- [Ilya, 盲人高级工作人员](/people-use-web/user-stories/#accountant) +- [Kaseem, 聋的盲人青年](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### 内容有多种呈现方式 {#adaptable} + +为针对不同用户以不同的方式呈现，内容必须： + +- 正确地标记内容的结构，标题、列表、表格、输入字段，等等； +- 信息或指令的顺序适应任何呈现方式； +- 浏览器及辅助技术为定制不同的呈现方式提供便利。 + +满足这个要求的内容可以被正确的读出、放大，或者改编以适应不同人群的需求及偏好。比如，可以自定义使用不同颜色、字号或其他样式来呈现，以方便阅读。这个要求也有助于其他形式的适配，包括自动生成内容大纲和摘要，从而让用户了解梗概并聚焦到特定部分。 + +{% include excol.html type="start" %} + +#### 与适应性相关的无障碍要求（相关技术规范的链接） +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [指南 1.3 - 适应性](https://www.w3.org/WAI/WCAG22/quickref/#adaptable) + +**UAAG** + +- [指南 1.4 - 文本配置](https://www.w3.org/TR/UAAG20/#gl-text-config) +- [指南 1.5 - 卷组态](https://www.w3.org/TR/UAAG20/#gl-volume-config) +- [指南 1.6 - 合成语言配置](https://www.w3.org/TR/UAAG20/#gl-speech-config) +- [指南 1.7 - 用户样式表配置](https://www.w3.org/TR/UAAG20/#gl-style-sheets-config) +- [指南 1.9 - 替代视图](https://www.w3.org/TR/UAAG20/#gl-alternative-views) +- [指南 1.10 - 元素信息](https://www.w3.org/TR/UAAG20/#gl-info-link) + +**ATAG** + +- [准则 A.1: 开发工具界面（应）遵循可应用的无障碍访问性准则](https://www.w3.org/TR/ATAG20/#principle_a1) +- [指南 A.2.2: （在开发工具界面中）应保证编辑视图之呈现是由程序决定的](https://www.w3.org/TR/ATAG20/#gl_a22) +- [指南 A.3.7: （在开发工具界面中）应保证预览应至少于市场中的用户代理的无障碍可访问性相同](https://www.w3.org/TR/ATAG20/#gl_a37) +- [B部分. 支持无障碍内容的生成](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### 适应性相关的案例 +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Lee, 有色盲的网上购物者](/people-use-web/user-stories/#shopper) +- [Alex, 一个记者有重复性应激损伤](/people-use-web/user-stories/#reporter) +- [Ilya, 盲人高级工作人员](/people-use-web/user-stories/#accountant) +- [Preety, 有注意缺陷多动障碍和阅读障碍的中学生](/people-use-web/user-stories/#classroomstudent) +- [Yun, 视力低下、手颤抖、轻度短期失忆的退休人员](/people-use-web/user-stories/#retiree) +- [Luis, 唐氏综合症超市助理](/people-use-web/user-stories/#supermarketassistant) +- [Kaseem, 聋的盲人青年](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### 内容的看和听更容易 {#distinguishable} + +便于区分的内容更容易看和听，比如： + +- 不只使用颜色传达信息或标识内容； +- 默认的前景和背景色有足够高的对比度； +- 用户将文本放大到400%或增大文本间距时，内容不会丢失； +- 用户放大文本或使用小屏幕时，文本可以重排； +- 文本图片可以缩放或以实际文本替代，或尽可能避免使用； +- 用户可以暂停、停止或调整音频的音量； +- 背景音乐音量小且可以关闭，避免干扰和分神。 + +满足这个要求有助于将前景和背景分离，让重要的信息更突出。这一条也涉及不使用辅助技术的人群，而对使用辅助技术的用户，音量过大或对比度过高也会导致注意力分散。比如，很多色盲用户不会使用特殊工具，直接依赖网页提供足够的色彩对比度。而对其他人来说，自动播放的音频可能干扰语音合成或 [助听设备 (ALDs)](/teach-advocate/accessible-presentations/#ald "definition"). + +{% include excol.html type="start" %} + +#### 与可分辨性相关的无障碍要求（相关技术规范的链接） +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [指南 1.4 - 可辨别性](https://www.w3.org/WAI/WCAG22/quickref/#distinguishable) + +**UAAG** + +- [指南 1.3 - 高亮](https://www.w3.org/TR/UAAG20/#gl-interaction-highlight) +- [指南 1.4 - 文本配置](https://www.w3.org/TR/UAAG20/#gl-text-config) +- [指南 1.5 - 卷组态](https://www.w3.org/TR/UAAG20/#gl-volume-config) +- [指南 1.6 - 合成语言配置](https://www.w3.org/TR/UAAG20/#gl-speech-config) +- [指南 1.7 - 用户样式表配置](https://www.w3.org/TR/UAAG20/#gl-style-sheets-config) +- [指南 1.8 - 视窗定位](https://www.w3.org/TR/UAAG20/#gl-viewport-orient) +- [指南 1.9 - 替代视图](https://www.w3.org/TR/UAAG20/#gl-alternative-views) +- [指南 1.10 - 元素信息](https://www.w3.org/TR/UAAG20/#gl-info-link) + +**ATAG** + +- [准则 A.1: 开发工具界面（应）遵循可应用的无障碍访问性准则](https://www.w3.org/TR/ATAG20/#principle_a1) +- [指南 A.3.7: （在开发工具界面中）应保证预览应至少于市场中的用户代理的无障碍可访问性相同](https://www.w3.org/TR/ATAG20/#gl_a37) +- [B部分. 支持无障碍内容的生成](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### 可分辨性的案例 +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Lee, 有色盲的网上购物者](/people-use-web/user-stories/#shopper) +- [Martine, 听力障碍的在线学生](/people-use-web/user-stories/#onlinestudent) +- [Ilya, 盲人高级工作人员](/people-use-web/user-stories/#accountant) +- [Yun, 视力低下、手颤抖、轻度短期失忆的退休人员](/people-use-web/user-stories/#retiree) +- [Kaseem, 聋的盲人青年](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +## 可操作的用户界面和导航 {#operable} + +### 可以通过键盘使用功能 {#keyboard} + +很多人不使用鼠标而依赖键盘来操作网页。这就要求使用键盘完全可以控制网页，包括表单控件、输入框及其他用户界面组件。 + +键盘的无障碍性包括： + +- 通过鼠标可以操控的功能，同样可以通过键盘实现； +- 键盘焦点不会被内容的任意部分卡住； +- 浏览器、创作工具及其他工具支持键盘操作。 + +满足这个要求能帮助键盘用户，包括使用人体工程学键盘、屏幕软键盘或开关装置的人方便上网。同样，对于使用语音识别（语音输入）来操作网页和通过键盘输入的人同样有帮助。 + +{% include excol.html type="start" %} + +#### 与键盘无障碍相关的要求（相关技术规范的链接） +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [指南 2.1 - 键盘可访问性](https://www.w3.org/WAI/WCAG22/quickref/#keyboard-accessible) + +**UAAG** + +- [指南 2.1 - 键盘访问](https://www.w3.org/TR/UAAG20/#gl-keyboard-access) +- [指南 2.2 - 顺序导航](https://www.w3.org/TR/UAAG20/#gl-sequential-navigation) +- [指南 2.3 - 直接导航和激活](https://www.w3.org/TR/UAAG20/#gl-direct-navigation-and-activation) +- [指南 2.11 - 其他输入设备](https://www.w3.org/TR/UAAG20/#gl-other-devices) + +**ATAG** + +- [准则 A.1: 开发工具界面（应）遵循可应用的无障碍访问性准则](https://www.w3.org/TR/ATAG20/#principle_a1) +- [指南 A.3.1: （在开发工具界面中）应提供对键盘访问的无障碍访问特性s](https://www.w3.org/TR/ATAG20/#gl_a31) +- [B部分. 支持无障碍内容的生成](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### 键盘无障碍的案例 +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, 一个记者有重复性应激损伤](/people-use-web/user-stories/#reporter) +- [Ilya, 盲人高级工作人员](/people-use-web/user-stories/#accountant) + +{% include excol.html type="end" %} + +### 用户有充足的时间阅读和使用内容 {#time} + +阅读理解同样的内容，有人用的时间少，有人用的时间多。比如，有些人打字慢，理解慢，操作控件不熟练，最终导致使用网站的速度慢。 + +所谓提供充足的时间，包括： + +- 必要时提供解除、扩展和调整时间限制的机制； +- 提供暂停、停止或隐藏移动、闪烁或滚动内容的机制； +- 必要时延迟或避免打断用户； +- 会话超时后重新认证确保不丢失数据。 + +{% include excol.html type="start" %} + +#### 与充足时间相关的无障碍要求（相关技术规范的链接） +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [指南 2.2 - 充足时间](https://www.w3.org/WAI/WCAG22/quickref/#enough-time) + +**UAAG** + +- [指南 2.8 - 时基交互](https://www.w3.org/TR/UAAG20/#gl-time-independent) +- [指南 2.10 - 时基媒体](https://www.w3.org/TR/UAAG20/#gl-control-inaccessible-content) + +**ATAG** + +- [准则 A.1: 开发工具界面（应）遵循可应用的无障碍访问性准则](https://www.w3.org/TR/ATAG20/#principle_a1) +- [指南 A.3.2:（在开发工具界面中）应向开发者提供足够的时间](https://www.w3.org/TR/ATAG20/#gl_a32) +- [B部分. 支持无障碍内容的生成](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### 充足时间的案例 +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, 一个记者有重复性应激损伤](/people-use-web/user-stories/#reporter) +- [Preety, 有注意缺陷多动障碍和阅读障碍的中学生](/people-use-web/user-stories/#classroomstudent) +- [Yun, 视力低下、手颤抖、轻度短期失忆的退休人员](/people-use-web/user-stories/#retiree) +- [Luis, 唐氏综合症超市助理](/people-use-web/user-stories/#supermarketassistant) +- [Kaseem, 聋的盲人青年](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### 内容不要诱发癫痫和物理反应 {#safe} + +某种频率或图案的闪烁可能诱发光敏反应，包括癫痫。理想情况下，应该完全避免内容闪烁，或者如果无法避免也要确保不会导致已知风险。同样，动画及移动的内容也可能导致不适或物理反应。 + +避免导致癫痫及物理反应的例子有： + +- 不使用某种频率或图案的闪烁； +- 内容闪烁前对用户给出提示，同时提供替代方案； +- 除非必要，要让用户可以关掉动画。 + +{% include excol.html type="start" %} + +#### 与癫痫相关的无障碍要求（相关技术规范的链接） +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [指南 2.3 - 癫痫](https://www.w3.org/WAI/WCAG22/quickref/#seizures-and-physical-reactions) + +**UAAG** + +- [指南 2.9 - 闪烁](https://www.w3.org/TR/UAAG20/#gl-prevent-flash) + +**ATAG** + +- [准则 A.1: 开发工具界面（应）遵循可应用的无障碍访问性准则](https://www.w3.org/TR/ATAG20/#principle_a1) +- [指南 A.3.3: （在开发工具界面中）应帮助开发者以避免由闪烁引起的癫痫](https://www.w3.org/TR/ATAG20/#gl_a33) +- [B部分. 支持无障碍内容的生成](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %} + +### 用户可以方便地导航、找到内容并确认自己在哪里 {#navigable} + +组织得当的内容可以让用户随时定位自己并有效导航，比如： + +- 页面标题表述适当，各部分标题也具有描述性； +- 在一组网页中有多种方式可以找到相关页面； +- 随时提醒用户在一组网页中的当前位置； +- 让用户可以跳过多个网页中都有的内容块； +- 键盘焦点可以看到，且焦点顺序有意义； +- 链接的意图明确，理想情况下即使链接本身也能让人一目了然。 + +满足这个要求可以让用户根据自己的需求和偏好在多个页面间导航。比如，有人依赖层级导航结构如菜单来查找特定网页，也有人依赖网站的搜索功能。有人可能用眼睛看，有人可能用耳朵听，而有人会同时看和听。有人可能只使用鼠标，有人可能只使用键盘，而有人则会同时都用。 + +{% include excol.html type="start" %} + +#### 与导航相关的无障碍要求（相关技术规范的链接） +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [指南 2.4 - 可导航性](https://www.w3.org/WAI/WCAG22/quickref/#navigable) + +**UAAG** + +- [指南 2.2 - 顺序导航](https://www.w3.org/TR/UAAG20/#gl-sequential-navigation) +- [指南 2.3 - 直接导航和激活](https://www.w3.org/TR/UAAG20/#gl-direct-navigation-and-activation) +- [指南 2.4 - 文本搜索](https://www.w3.org/TR/UAAG20/#gl-search-text) +- [指南 2.5 - 结构导航](https://www.w3.org/TR/UAAG20/#gl-nav-structure) +- [指南 2.7 - 图形化控制](https://www.w3.org/TR/UAAG20/#gl-configure-controls) + +**ATAG** + +- [准则 A.1: 开发工具界面（应）遵循可应用的无障碍访问性准则](https://www.w3.org/TR/ATAG20/#principle_a1) +- [指南 A.2.2: （在开发工具界面中）应保证编辑视图之呈现是由程序决定的](https://www.w3.org/TR/ATAG20/#gl_a22) +- [指南 A.3.4: （在开发工具界面中）应从内容结构出发增强导航和编辑功能](https://www.w3.org/TR/ATAG20/#gl_a34) +- [指南 A.3.5: （在开发工具界面中）应提供内容搜索功能](https://www.w3.org/TR/ATAG20/#gl_a35) +- [B部分. 支持无障碍内容的生成](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### 导航的案例 +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, 一个记者有重复性应激损伤](/people-use-web/user-stories/#reporter) +- [Ilya, 盲人高级工作人员](/people-use-web/user-stories/#accountant) +- [Preety, 有注意缺陷多动障碍和阅读障碍的中学生](/people-use-web/user-stories/#classroomstudent) +- [Yun, 视力低下、手颤抖、轻度短期失忆的退休人员](/people-use-web/user-stories/#retiree) +- [Luis, 唐氏综合症超市助理](/people-use-web/user-stories/#supermarketassistant) +- [Kaseem, 聋的盲人青年](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### 用户可以使用除键盘外的不同输入方式 {#modalities} + +除键盘之外的输入方式还有触摸激活、语音识别（语音输入）及手势，这些方式可以为很多人提供便利。但并非所有人都可以同样程度地使用所有方式。特别的设计考量可以最大化这些方式的优势，包括： + +- 要求敏捷及精确移动的手势有对应不需要高敏捷性的替代方式； +- 经特别设计避免组件被意外激活，比如提供撤销功能； +- 展示给用户的标注与代码中对象的名字对应，以支持通过语音激活； +- 通过运动激活的功能也可以通过用户界面上的组件激活； +- 按钮、链接和其他活动组件足够大，以便通过触摸来激活它们。 + +满足这个要求可以让更多有能力使用更多设备的人更方便地使用内容。这里的内容包括手机、笔记本电脑和售票机上的内容。 + +{% include excol.html type="start" id="" %} + +#### 与输入方式相关的无障碍要求（相关技术规范的链接） +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [指南 2.5 - 输入方式](https://www.w3.org/WAI/WCAG22/quickref/#input-modalities) + +{% include excol.html type="end" %}{% include excol.html type="start" id="" %} + +#### 输入方式的案例 +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, 一个记者有重复性应激损伤](/people-use-web/user-stories/#reporter) +- [Yun, 视力低下、手颤抖、轻度短期失忆的退休人员](/people-use-web/user-stories/#retiree) +- [Luis, 唐氏综合症超市助理](/people-use-web/user-stories/#supermarketassistant) + +{% include excol.html type="end" %} + +## 可理解的信息和用户界面 {#understandable} + +### 文本容易阅读和理解 {#readable} + +内容作者要确保文字具有可读性且大多数读者都比较容易理解，包括文字转语音读出来也一样。其中包括： + +- 标识网页使用的主要语言，如阿拉伯语、德语或韩语； +- 标识文本、短语或网页中其他部分的语言； +- 对不常见的词汇、短语、 习语和缩略语给出解释； +- 尽可能用最简单明了的表达，或提供简化版本。 + +满足这个要求有助于软件包括辅助技术正确地处理文本内容。比如，软件因此可以正确地读出内容、生成页面摘要，并对不常用的技术词汇提供解释。同样，这也有助于人们理解复杂的句子、短语和词汇。特别是对具有不同认知背景的用户会有帮助。 + +{% include excol.html type="start" %} + +#### 与可读性相关的无障碍要求（相关技术规范的链接） +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [指南 3.1 - 可读性](https://www.w3.org/WAI/WCAG22/quickref/#readable) + +**ATAG** + +- [准则 A.1: 开发工具界面（应）遵循可应用的无障碍访问性准则](https://www.w3.org/TR/ATAG20/#principle_a1) +- [指南 A.4.2: （在开发工具界面中）应提供开发工具界面的完整文档，包括所有无障碍访问特性](https://www.w3.org/TR/ATAG20/#gl_b42) +- [B部分. 支持无障碍内容的生成](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### 可读性的案例 +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Martine, 听力障碍的在线学生](/people-use-web/user-stories/#onlinestudent) +- [Ilya, 盲人高级工作人员](/people-use-web/user-stories/#accountant) +- [Preety, 有注意缺陷多动障碍和阅读障碍的中学生](/people-use-web/user-stories/#classroomstudent) +- [Yun, 视力低下、手颤抖、轻度短期失忆的退休人员](/people-use-web/user-stories/#retiree) +- [Luis, 唐氏综合症超市助理](/people-use-web/user-stories/#supermarketassistant) + +{% include excol.html type="end" %} + +### 内容以可预测的方式出现和操作 {#predictable} + +很多人依赖可预测的用户界面，而不一致的外观和行为则会导致迷惑，转移用户注意力。要让内容可预测，可以： + +- 在多个页面相同位置重复出现导航条； +- 给多个页面上重复出现的用户界面组件添加相同的标注信息； +- 给没有用户同意不会发生的变化应用明显的区别。 + +满足这个要求可以让人们更快熟悉网站提供的功能和导航机制，并根据自己的特殊需求及偏好来使用网站。比如，有些人会给自己频繁使用的键盘导航功能定义快捷键。而也有人会记住在网站上到达某个特定页面或完成特定流程的步骤。这些都有赖于可预测及一致的功能。 + +{% include excol.html type="start" %} + +#### 与可预测相关的无障碍要求（相关技术规范的链接） +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [指南 3.2 - 可预测性](https://www.w3.org/WAI/WCAG22/quickref/#predictable) + +**UAAG** + +- [指南 3.3 - 可预测性](https://www.w3.org/TR/UAAG20/#gl-predictable-operation) + +**ATAG** + +- [准则 A.1: 开发工具界面（应）遵循可应用的无障碍访问性准则](https://www.w3.org/TR/ATAG20/#principle_a1) +- [指南 A.2.2: （在开发工具界面中）应保证编辑视图之呈现是由程序决定的](https://www.w3.org/TR/ATAG20/#gl_a22) +- [指南 A.4.2: （在开发工具界面中）应提供开发工具界面的完整文档，包括所有无障碍访问特性](https://www.w3.org/TR/ATAG20/#gl_b42) +- [B部分. 支持无障碍内容的生成](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### 可预测的案例 +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Alex, 一个记者有重复性应激损伤](/people-use-web/user-stories/#reporter) +- [Ilya, 盲人高级工作人员](/people-use-web/user-stories/#accountant) +- [Preety, 有注意缺陷多动障碍和阅读障碍的中学生](/people-use-web/user-stories/#classroomstudent) +- [Yun, 视力低下、手颤抖、轻度短期失忆的退休人员](/people-use-web/user-stories/#retiree) +- [Luis, 唐氏综合症超市助理](/people-use-web/user-stories/#supermarketassistant) +- [Kaseem, 聋的盲人青年](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +### 用户可以得到帮忙以避免和纠正错误 {#tolerant} + +表单及其他交互可能导致用户迷惑或难于使用，最终让用户犯错。帮助用户避免和纠正错误的做法包括： + +- 为用户提供说明、错误消息及建议，帮用户提供正确的信息； +- 为复杂功能及交互提供上下文相关的帮助； +- 必要时提供结果预览，以及纠正或重置表单的功能。 + +满足这个要求可以帮助因为看不到或听不到而难以理解潜在关联、顺序和其他提示的人。对于不理解功能，因此产生困惑或迷茫、记不住，或者因种种原因在使用表单和交互时出错的人同样也有帮助。 + +{% include excol.html type="start" %} + +#### 与输入辅助相关的无障碍要求（相关技术规范的链接） +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [指南 3.3 - 辅助输入](https://www.w3.org/WAI/WCAG22/quickref/#input-assistance) + +**UAAG** + +- [指南 3.1 - 错误](https://www.w3.org/TR/UAAG20/#gl-avoid-mistakes) + +**ATAG** + +- [准则 A.1: 开发工具界面（应）遵循可应用的无障碍访问性准则](https://www.w3.org/TR/ATAG20/#principle_a1) +- [指南 A.2.2: （在开发工具界面中）应保证编辑视图之呈现是由程序决定的](https://www.w3.org/TR/ATAG20/#gl_a22) +- [指南 A.4.1: （在开发工具界面中）应帮助用户避免错误以及纠正错误](https://www.w3.org/TR/ATAG20/#gl_b41) +- [B部分. 支持无障碍内容的生成](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### 输入辅助的案例 +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Lee, 有色盲的网上购物者](/people-use-web/user-stories/#shopper) +- [Alex, 一个记者有重复性应激损伤](/people-use-web/user-stories/#reporter) +- [Preety, 有注意缺陷多动障碍和阅读障碍的中学生](/people-use-web/user-stories/#classroomstudent) +- [Yun, 视力低下、手颤抖、轻度短期失忆的退休人员](/people-use-web/user-stories/#retiree) +- [Luis, 唐氏综合症超市助理](/people-use-web/user-stories/#supermarketassistant) + +{% include excol.html type="end" %} + +## 健壮的内容和可靠的解释 {#robust} + +### 内容与现在和未来的用户工具兼容 {#compatible} + +健壮的内容兼容不同浏览器、辅助技术及其他用户代理。比如： + +- 确保标记是可以被可靠解释的，比如确保使用有效的标记； +- 对非标准用户界面组件提供名称、角色和值。 + +满足这个要求可以最大化地兼容当前及未来的用户代理，包括辅助技术。特别地，这可以让辅助技术正确处理内容，以及通过不同方式呈现或操作内容。非标准（脚本化）按钮、输入字段及其他控件也包含在内。 + +{% include excol.html type="start" %} + +#### 与兼容性相关的无障碍要求（相关技术规范的链接） +{:.no_toc} + +{% include excol.html type="middle" %} + +**WCAG** + +- [指南 4.1 - 兼容](https://www.w3.org/WAI/WCAG22/quickref/#compatible) + +**UAAG** + +- [指南 2.6 - 首选项设置](https://www.w3.org/TR/UAAG20/#gl-store-prefs) +- [指南 4.1 - 辅助技术](https://www.w3.org/TR/UAAG20/#gl-AT-access) +- [指南 5.1 - 遵循规范](https://www.w3.org/TR/UAAG20/#gl-obs-env-conventions) + +**ATAG** + +- [准则 A.1: 开发工具界面（应）遵循可应用的无障碍访问性准则](https://www.w3.org/TR/ATAG20/#principle_a1) +- [B部分. 支持无障碍内容的生成](https://www.w3.org/TR/ATAG20/#part_b) + +{% include excol.html type="end" %}{% include excol.html type="start" %} + +#### 兼容性的案例 +{:.no_toc} + +{% include excol.html type="middle" %} + +- [Lee, 有色盲的网上购物者](/people-use-web/user-stories/#shopper) +- [Alex, 一个记者有重复性应激损伤](/people-use-web/user-stories/#reporter) +- [Ilya, 盲人高级工作人员](/people-use-web/user-stories/#accountant) +- [Preety, 有注意缺陷多动障碍和阅读障碍的中学生](/people-use-web/user-stories/#classroomstudent) +- [Luis, 唐氏综合症超市助理](/people-use-web/user-stories/#supermarketassistant) +- [Kaseem, 聋的盲人青年](/people-use-web/user-stories/#teenager) + +{% include excol.html type="end" %} + +{% include excol.html type="all" %} + diff --git a/pages/wai-accessibility-principles b/pages/wai-accessibility-principles deleted file mode 120000 index 624618fcb1a..00000000000 --- a/pages/wai-accessibility-principles +++ /dev/null @@ -1 +0,0 @@ -../_external/resources/wai-accessibility-principles/content/ \ No newline at end of file