`, into the navigation order when it is being used for interaction. Use scripting to capture and respond to keyboard events.
519 |
520 | {::nomarkdown}
521 | {% include_cached box.html type="start" title="Example: Keyboard accessible menu button" class="example" %}
522 |
523 |
524 |
525 | {% include_cached icon.html name="desktop" %} Rendered
526 |
527 |
528 |
536 |
537 |
560 |
561 |
562 | {% include_cached icon.html name="code" %} Code Snippet
563 | {:/}
564 |
565 | ~~~javascript
566 | var buttonExample = document.getElementById('example-button');
567 |
568 | buttonExample.addEventListener('keydown', function(e) {
569 | // Toggle the menu when RETURN is pressed
570 | if(e.keyCode && e.keyCode == 13) {
571 | toggleMenu(document.getElementById('example-button-menu'));
572 | }
573 | });
574 |
575 | buttonExample.addEventListener('click', function(e) {
576 | // Toggle the menu on mouse click
577 | toggleMenu(document.getElementById('example-button-menu'));
578 | });
579 | ~~~
580 |
581 | {::nomarkdown}
582 |
583 |
584 | {% include_cached box.html type="end" %}
585 | {:/}
586 |
587 | {::nomarkdown}
588 | {% include_cached box.html type="start" title="More Information" class="simple" %}
589 | {:/}
590 |
591 | * **WCAG**
592 | * [Keyboard 2.1.1](/WAI/WCAG21/quickref/#keyboard) ([Understanding 2.1.1](/WAI/WCAG21/Understanding/keyboard))
593 | * **User Story**
594 | * [Describes how a user with RSI needs keyboard support](/people-use-web/user-stories/#reporter)
595 |
596 | {::nomarkdown}
597 | {% include_cached box.html type="end" %}
598 | {:/}
599 |
600 | ## Avoid CAPTCHA where possible
601 |
602 | CAPTCHAs create problems for many people. There are other means of verifying that user input was generated by a human that are easier to use, such as automatic detection or interface interactions. If CAPTCHA really needs to be included, ensure that it is simple to understand and includes alternatives for users with disabilities, such as:
603 |
604 | * Providing more than two ways to solve the CAPTCHAs
605 | * Providing access to a human representative who can bypass CAPTCHA
606 | * Not requiring CAPTCHAs for authorized users.
607 |
608 | {::nomarkdown}
609 | {% include_cached box.html type="start" title="More Information" class="simple" %}
610 | {:/}
611 |
612 | * **WCAG**
613 | * [Non-text Content 1.1.1](/WAI/WCAG21/quickref/#non-text-content) ([Understanding 1.1.1](/WAI/WCAG21/Understanding/non-text-content))
614 | * **Background**
615 | * [Inaccessibility of CAPTCHA](/TR/turingtest/)
616 |
617 | {::nomarkdown}
618 | {% include_cached box.html type="end" %}
619 | {:/}
620 |
621 | {::nomarkdown}
622 | {% include box.html type="start" title="Learn More About Accessibility" class="large" icon="readmore" %}
623 | {:/}
624 |
625 | These tips are a few of the things you need to consider for web accessibility. The following resources help you learn why accessibility is important, and about guidelines for making the web more accessible to people with disabilities.
626 |
627 | * [Introduction to Web Accessibility](/fundamentals/accessibility-intro/) — Introduces accessibility and provides links to many helpful resources
628 | * [Accessibility Principles](/fundamentals/accessibility-principles/) — An introduction to the WCAG requirements
629 | * [How people with disabilities use the web](/people-use-web/) — Real-life examples of the benefits of accessibility for people with disabilities
630 | * [Web Accessibility Tutorials](/tutorials/) — Shows you how to develop web content that is accessible to people with disabilities
631 | * [Before and After Demonstration](/WAI/demos/bad/) — Example accessible and inaccessible websites that share the same visual design, with annotations that highlight key accessibility barriers and repairs, and evaluation reports for WCAG
632 | * [How to Meet WCAG (Quick Reference)](/WAI/WCAG21/quickref/) — customizable reference of all WCAG requirements and techniques
633 | * [Web Accessibility Evaluation Tools List](/WAI/ER/tools/) — Provides a range of tools to help explore the accessibility of code
634 | * [WAI-ARIA Overview](/standards-guidelines/aria/) — Introduction to WAI-ARIA with links to all the specifications
635 |
636 | {::nomarkdown}
637 | {% include box.html type="end" %}
638 | {:/}
639 |
--------------------------------------------------------------------------------
/_tips/img/arrow-down.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/w3c/wai-quick-start/018fa38e558c2bbde8b7fe0bb04e3173fbb599a8/_tips/img/arrow-down.png
--------------------------------------------------------------------------------
/_tips/img/arrow-right.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/w3c/wai-quick-start/018fa38e558c2bbde8b7fe0bb04e3173fbb599a8/_tips/img/arrow-right.png
--------------------------------------------------------------------------------
/_tips/img/audio-description.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/_tips/img/browser.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/w3c/wai-quick-start/018fa38e558c2bbde8b7fe0bb04e3173fbb599a8/_tips/img/browser.png
--------------------------------------------------------------------------------
/_tips/img/carousel_controls.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/w3c/wai-quick-start/018fa38e558c2bbde8b7fe0bb04e3173fbb599a8/_tips/img/carousel_controls.png
--------------------------------------------------------------------------------
/_tips/img/clear_text_diagram.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/w3c/wai-quick-start/018fa38e558c2bbde8b7fe0bb04e3173fbb599a8/_tips/img/clear_text_diagram.png
--------------------------------------------------------------------------------
/_tips/img/content_in_browser.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/w3c/wai-quick-start/018fa38e558c2bbde8b7fe0bb04e3173fbb599a8/_tips/img/content_in_browser.png
--------------------------------------------------------------------------------
/_tips/img/content_in_phone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/w3c/wai-quick-start/018fa38e558c2bbde8b7fe0bb04e3173fbb599a8/_tips/img/content_in_phone.png
--------------------------------------------------------------------------------
/_tips/img/example_media_player.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/w3c/wai-quick-start/018fa38e558c2bbde8b7fe0bb04e3173fbb599a8/_tips/img/example_media_player.png
--------------------------------------------------------------------------------
/_tips/img/headings-good.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/w3c/wai-quick-start/018fa38e558c2bbde8b7fe0bb04e3173fbb599a8/_tips/img/headings-good.png
--------------------------------------------------------------------------------
/_tips/img/headings-poor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/w3c/wai-quick-start/018fa38e558c2bbde8b7fe0bb04e3173fbb599a8/_tips/img/headings-poor.png
--------------------------------------------------------------------------------
/_tips/img/icons.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Designing
5 |
6 |
7 |
8 |
9 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | Designing
21 |
22 |
23 |
24 |
25 | Writing
26 |
27 |
28 |
29 |
30 | Developing
31 |
32 |
33 |
34 |
35 | Evaluating
36 |
37 |
38 |
39 |
40 | Managing
41 |
42 |
43 |
44 |
45 | Advocating
46 |
47 |
48 |
49 |
50 | Add to cart
51 |
52 |
53 |
54 |
55 | Menu
56 |
57 |
58 |
59 |
60 | Good
61 |
62 |
63 |
64 |
65 |
66 | Bad
67 |
68 |
69 |
70 |
71 |
72 | Mark-up
73 |
74 |
75 |
76 |
77 |
78 | Screen
79 |
80 |
81 |
82 |
83 |
84 | Error
85 |
86 |
87 |
88 |
--------------------------------------------------------------------------------
/_tips/img/padlock.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/w3c/wai-quick-start/018fa38e558c2bbde8b7fe0bb04e3173fbb599a8/_tips/img/padlock.png
--------------------------------------------------------------------------------
/_tips/img/phone_charging.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/w3c/wai-quick-start/018fa38e558c2bbde8b7fe0bb04e3173fbb599a8/_tips/img/phone_charging.png
--------------------------------------------------------------------------------
/_tips/img/pointer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/w3c/wai-quick-start/018fa38e558c2bbde8b7fe0bb04e3173fbb599a8/_tips/img/pointer.png
--------------------------------------------------------------------------------
/_tips/img/trainer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/w3c/wai-quick-start/018fa38e558c2bbde8b7fe0bb04e3173fbb599a8/_tips/img/trainer.png
--------------------------------------------------------------------------------
/_tips/index.fr.md:
--------------------------------------------------------------------------------
1 | ---
2 | # 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 "#".
3 | # In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:".
4 | title: Conseils pour démarrer
5 | nav_title: Vue d'ensemble
6 | lang: fr # Change "en" to the translated-language shortcode
7 | last_updated: 2023-10-10 # Put the date of this translation YYYY-MM-DD (with month in the middle)
8 |
9 | resource:
10 | title: "Conseils pour démarrer"
11 | ref: /tips/ # Do not change this
12 |
13 | navigation:
14 | next: /tips/writing/ # Do not change this
15 |
16 | translators:
17 | - name: "Sofia Ahmed"
18 | contributors:
19 | - name: "Sandra Velarde Gonzalez (ETNIC)"
20 | - name: "Rémi Bétin"
21 |
22 | github:
23 | repository: w3c/wai-quick-start
24 | path: '_tips/index.fr.md' # Add the language shortcode to the middle of the filename, for example: content/index.fr.md
25 |
26 | permalink: /tips/fr # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr
27 | ref: /tips/ # Do not change this
28 |
29 | acknowledgements: /tips/acknowledgements/
30 |
31 | # In the footer below:
32 | # Do not change the dates
33 | # Translate the other words, including "Status:" and "Editors:"
34 | # Translate the Working Group name. Leave the Working Group acronym in English.
35 | footer: >
36 |
37 | Statut :
38 | Mise à jour :
39 | 7 juillet 2016
40 | (première publication en septembre 2015)
41 |
42 | Rédaction :
43 | Kevin White ,
44 | Shadi Abou-Zahra , et
45 | Shawn Lawton Henry .
46 | ACKNOWLEDGEMENTS.
47 | Développé par le Groupe de travail Éducation et Promotion (EOWG) .
48 | Développé avec le soutien du projet WAI-DEV , co-financé par le programme IST de la Commission européenne.
49 |
50 | ---
51 |
52 | Démarrez dans l'accessibilité. Ces conseils présentent quelques considérations de base pour rendre votre site Web plus accessible aux personnes en situation de handicap, et fournissent des liens vers des conseils additionnels. Les conseils sont regroupés par domaine d'activité ; vous pourriez trouver des informations pertinentes pour votre travail sur plusieurs pages.
53 |
54 | * [[Concevoir pour l'accessibilité Web]](/tips/designing/) : Conseils pour l'interface utilisateur et le design visuel.
55 | * [[Écrire pour l'accessibilité Web]](/tips/writing/) : Conseils pour la rédaction de texte et la présentation de contenu.
56 | * [[Développer pour l'accessibilité Web]](/tips/developing/) : Conseils pour le balisage et le code.
57 |
--------------------------------------------------------------------------------
/_tips/index.id.md:
--------------------------------------------------------------------------------
1 | ---
2 | # 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 "#".
3 | # In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:".
4 |
5 | title: Kiat Memulai
6 | nav_title: Gambaran Umum
7 | lang: id # Change "en" to the translated-language shortcode
8 | last_updated: 2023-11-24 # Put the date of this translation YYYY-MM-DD (with month in the middle)
9 |
10 | resource:
11 | title: "Kiat Memulai"
12 | ref: /tips/ # Do not change this
13 |
14 | navigation:
15 | next: /tips/writing/ # Do not change this
16 |
17 | translators: # remove from the beginning of this line and the lines below: "# " (the hash sign and the space)
18 | - name: "Fri Rasyidi" # Replace Jan Doe with translator name
19 | # - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple translators
20 | # contributors:
21 | # - name: "Jan Doe" # Replace Jan Doe with contributor name, or delete this line if none
22 | # - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple contributors
23 |
24 | github:
25 | repository: w3c/wai-quick-start
26 | path: '_tips/index.id.md' # Add the language shortcode to the middle of the filename, for example: content/index.fr.md
27 |
28 | permalink: /tips/id # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr
29 | ref: /tips/ # Do not change this
30 |
31 | acknowledgements: /tips/acknowledgements/
32 |
33 | # In the footer below:
34 | # Do not change the dates
35 | # Translate the other words, including "Status:" and "Editors:"
36 | # Translate the Working Group name. Leave the Working Group acronym in English.
37 | footer: >
38 |
39 | Status:
40 | Diperbarui
41 | 07 Juli 2016
42 | (first published September 2015)
43 |
44 | Editor:
45 | Kevin White ,
46 | Shadi Abou-Zahra , and
47 | Shawn Lawton Henry .
48 | ACKNOWLEDGEMENTS.
49 | Dikembangkan oleh Kelompok Kerja Edukasi dan Pendampingan (EOWG) .
50 | Dikembangkan dengan dukungan dari proyek WAI-DEV , didanai bersama oleh Program IST Komisi Eropa.
51 |
52 | ---
53 |
54 | Memulai dengan aksesibilitas. Kiat-kiat ini memperkenalkan beberapa pertimbangan mendasar untuk membuat situs web Anda lebih mudah diakses oleh penyandang disabilitas, dan memberikan tautan ke panduan tambahan. Kiat-kiat dikelompokkan berdasarkan aktivitas; informasi yang relevan dengan pekerjaan Anda mungkin ada di lebih dari satu halaman.
55 |
56 | * [[Mendesain untuk Aksesibilitas Web]](/tips/designing/): Kiat dalam mendesain antarmuka pengguna dan desain visual.
57 | * [[Menulis untuk Aksesibilitas Web]](/tips/writing/): Kiat dalam menulis dan menyajikan konten.
58 | * [[Mengembangkan untuk Aksesibilitas Web]](/tips/developing/): Kiat dalam membuat markah dan kode.
59 |
--------------------------------------------------------------------------------
/_tips/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | # 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 "#".
3 | # In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:".
4 |
5 | title: Tips for Getting Started
6 | nav_title: Overview
7 | lang: en # Change "en" to the translated-language shortcode
8 | last_updated: 2016-07-07 # Put the date of this translation YYYY-MM-DD (with month in the middle)
9 |
10 | resource:
11 | title: "Tips for Getting Started"
12 | ref: /tips/ # Do not change this
13 |
14 | navigation:
15 | next: /tips/writing/ # Do not change this
16 |
17 | # translators: # remove from the beginning of this line and the lines below: "# " (the hash sign and the space)
18 | # - name: "Jan Doe" # Replace Jan Doe with translator name
19 | # - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple translators
20 | # contributors:
21 | # - name: "Jan Doe" # Replace Jan Doe with contributor name, or delete this line if none
22 | # - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple contributors
23 |
24 | github:
25 | repository: w3c/wai-quick-start
26 | path: '_tips/index.md' # Add the language shortcode to the middle of the filename, for example: content/index.fr.md
27 |
28 | permalink: /tips/ # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr
29 | ref: /tips/ # Do not change this
30 |
31 | acknowledgements: /tips/acknowledgements/
32 |
33 | # In the footer below:
34 | # Do not change the dates
35 | # Translate the other words, including "Status:" and "Editors:"
36 | # Translate the Working Group name. Leave the Working Group acronym in English.
37 | footer: >
38 |
39 | Status:
40 | Updated
41 | 07 July 2016
42 | (first published September 2015)
43 |
44 | Editors:
45 | Kevin White ,
46 | Shadi Abou-Zahra , and
47 | Shawn Lawton Henry .
48 | ACKNOWLEDGEMENTS.
49 | Developed by the Education and Outreach Working Group (EOWG) .
50 | Developed with support from the WAI-DEV project , co-funded by the European Commission IST Programme.
51 |
52 | ---
53 |
54 | Get started with accessibility. These tips introduce some basic considerations for making your website more accessible to people with disabilities, and provide links to additional guidance. Tips are grouped by activity; information relevant to your work might be in more than one page.
55 |
56 | * [[Designing for Web Accessibility]](/tips/designing/): Tips for user interface and visual design.
57 | * [[Writing for Web Accessibility]](/tips/writing/): Tips for writing and presenting content.
58 | * [[Developing for Web Accessibility]](/tips/developing/): Tips for markup and coding.
59 |
--------------------------------------------------------------------------------
/_tips/writing.fr.md:
--------------------------------------------------------------------------------
1 | ---
2 | # 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 "#".
3 | # In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:".
4 |
5 | title: "Écrire pour l’accessibilité Web – Conseils pour démarrer"
6 | title_html: "Écrire pour l’accessibilité Web"
7 | nav_title: Conseils pour l’écriture
8 | lang: fr # Change "en" to the translated-language shortcode
9 | last_updated: 2023-10-10 # Put the date of this translation YYYY-MM-DD (with month in the middle)
10 |
11 | resource:
12 | ref: /tips/ # Do not change this
13 |
14 | navigation:
15 | previous: /tips/ # Do not change this
16 | next: /tips/designing/ # Do not change this
17 |
18 | translators:
19 | - name: "Sofia Ahmed"
20 | contributors:
21 | - name: "Sandra Velarde Gonzalez (ETNIC)"
22 | - name: "Rémi Bétin"
23 |
24 | github:
25 | repository: w3c/wai-quick-start
26 | path: '_tips/writing.fr.md' # Add the language shortcode to the middle of the filename, for example: content/index.fr.md
27 |
28 | permalink: /tips/writing/fr # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr
29 | ref: /tips/writing/ # Do not change this
30 |
31 | ext_css: tips.css
32 | title_icon: /tips/img/icons.svg#writing
33 |
34 | acknowledgements: /tips/acknowledgements/
35 |
36 | # In the footer below:
37 | # Do not change the dates
38 | # Translate the other words, including "Date:" and "Editors:"
39 | # Translate the Working Group name. Leave the Working Group acronym in English.
40 | footer: >
41 | Date : Mise à jour : 5 août 2022. Première publication en septembre 2015.
42 | Rédacteurs : Kevin White , Shadi Abou-Zahra , et Shawn Lawton Henry . ACKNOWLEDGEMENTS.
43 | Développé par le Groupe de travail Éducation et Promotion (EOWG) .
44 | Développé avec le soutien du projet WAI-DEV , co-financé par le programme IST de la Commission européenne.
45 |
46 | ---
47 |
48 | {::nomarkdown}
49 | {% include box.html type="start" h="2" title="Résumé" class="full" %}
50 | {:/}
51 |
52 | Cette page présente quelques considérations de base pour vous aider dans la rédaction de contenus Web plus accessibles aux personnes en situation de handicap. Ces conseils sont des bonnes pratiques qui vous aident à satisfaire aux exigences des Règles pour l’accessibilité des contenus Web (WCAG). Suivez les liens vers les recommandations WCAG correspondantes, du contexte détaillée dans les documents « Comprendre », des instructions dans les tutoriels, des témoignages d’utilisateurs, et plus encore.
53 |
54 | {::nomarkdown}
55 | {% include box.html type="end" %}
56 | {:/}
57 |
58 | {::options toc_levels="2" /}
59 |
60 | {::nomarkdown}
61 | {% include_cached toc.html type="start" title="Table des matières" class="full" %}
62 | {:/}
63 |
64 | - TOC is created automatically.
65 | {:toc}
66 |
67 | {::nomarkdown}
68 | {% include_cached toc.html type="end" %}
69 | {:/}
70 |
71 | ## Fournissez des titres de page informatifs et uniques
72 |
73 | Pour chaque page Web, fournissez un titre court qui décrit le contenu de la page et qui la distingue des autres pages. Le titre de la page est souvent le même que le titre principal de la page. Mettez en premier les informations les plus pertinentes propres à la page ; par exemple, mettez le nom de la page avant le nom de l’organisation. Pour les pages qui font partie d’un processus en plusieurs étapes, incluez l’étape actuelle dans le titre de la page.
74 |
75 | {::nomarkdown}
76 | {% include_cached box.html type="start" title="Exemple : Titres de page" class="example" %}
77 | {:/}
78 |
79 |
80 |
81 | {% include_cached icon.html name="check-circle" label="OK" %} Titre de la page d’accueil
82 |
83 |
84 |
85 |
86 | Space Teddy Inc.
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 | {% include_cached icon.html name="check-circle" label="OK" %} Nom de la page suivi du nom de l’organisation
98 |
99 |
100 |
101 |
102 | Actualités • Space Teddy Inc.
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 | {% include_cached icon.html name="check-circle" label="OK" %} Nom de la page incluant l’étape dans le processus
114 |
115 |
116 |
117 |
118 | Acheter votre ours (Étape 1 sur 3) • Space Teddy Inc.
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 | {::nomarkdown}
131 | {% include_cached box.html type="end" %}
132 | {:/}
133 |
134 | {::nomarkdown}
135 | {% include_cached box.html type="start" title="Plus d’informations" class="simple" %}
136 | {:/}
137 |
138 | * **WCAG**
139 | * [Titre de page 2.4.2](/WAI/WCAG21/quickref/#page-titled) ([Comprendre 2.4.2](/WAI/WCAG21/Understanding/page-titled))
140 |
141 | {::nomarkdown}
142 | {% include_cached box.html type="end" %}
143 | {:/}
144 |
145 | ## Utilisez des en-têtes pour donner du sens et de la structure
146 |
147 | Utilisez des en-têtes courts pour regrouper les paragraphes apparentés et décrire clairement les sections. Les bons en-têtes donnent les grandes lignes du contenu.
148 |
149 | {::nomarkdown}
150 | {% include_cached box.html type="start" title="Exemple : Utiliser des en-têtes pour organiser le contenu" class="example" %}
151 | {:/}
152 |
153 |
154 |
155 | {% include_cached icon.html name="ex-circle" label="Mauvaise pratique" %} Manque d’en-têtes
156 |
157 | {% include_cached img.html src="headings-poor.png" alt="Illustration de page sans en-têtes, retrouvez un exemple détaillé ci-dessous" %}
158 |
159 | {% include_cached excol.html type="start" id="no-headings" %}
160 | Voir l’exemple sous forme de texte
161 | {% include_cached excol.html type="middle" %}
162 | Exemple : Titres et sous-titres
163 |
164 | Les éléments HTML fournissent des informations sur la hiérarchie structurelle d’un document. Utiliser correctement les élements permet de transmettre plus de sens aux technologies d’assistance. Dans de nombreux cas, cela va également rendre l’édition de votre document plus facile.
165 |
166 | Pour les documents plus longs que trois ou quatre paragraphes, les titres et les sous-titres sont importants pour faciliter l’utilisabilité et l’accessibilité. Ils aident les utilisateurs à comprendre les grandes lignes d’un document et à orienter leur navigation vers les informations spécifiques qui les intéressent.
167 |
168 | Les en-têtes sont classées en niveaux de 1 à 6. Le niveau le plus élevé est le "Niveau 1" et correspond souvent au titre de la page ou de la section principale du document.
169 |
170 | Les lecteurs qui utilisent leur vue identifient les en-têtes en balayant les pages à la recherche d’un texte de taille plus grande ou de style différent. Les utilisateurs de technologies d’assistance ne peuvent pas voir ces changements visuels ; changer le style n’est donc pas un indice suffisant.
171 |
172 | À la place, les en-têtes doivent être « étiquetées » sémantiquement pour que les technologies d’assistance puissent identifier les en-têtes. Les en-têtes peuvent alors aussi être utilisées pour naviguer.
173 |
174 | C’est ce qui fait des en-têtes l’un des outils les plus importants pour les utilisateurs de lecteur d’écran, pour qu’ils puissent connaîtrez ce qui se trouve sur la page. Notez que l’étiquetage produit généralement un changement de mise en forme visuelle qui peut être ajusté dans de nombreux documents.
175 |
176 | Adapté de Titres et sous-titres sur Penn State
177 | {% include_cached excol.html type="end" %}
178 |
179 |
180 | {% include_cached icon.html name="check-circle" label="Bonne pratique" %} Avec des titres et des sous-titres
181 |
182 | {% include_cached img.html src="headings-good.png" alt="Illustration d’une structure de titres optimale, plus d’exemples détaillés ci-dessous"%}
183 |
184 | {% include_cached excol.html type="start" id="headings-good" %}
185 | Voir l’exemple sous forme de texte
186 | {% include_cached excol.html type="middle" %}
187 | Exemple : Titres et sous-titres
188 |
189 | Les éléments HTML fournissent des informations sur la hiérarchie structurelle d’un document. Utiliser correctement les élements permet de transmettre plus de sens aux technologies d’assistance. Dans de nombreux cas, cela va également rendre l’édition de votre document plus facile.
190 |
191 | Exemple: Fonction des en-têtes
192 |
193 | Pour les documents plus longs que trois ou quatre paragraphes, les titres et les sous-titres sont importants pour faciliter l’utilisabilité et l’accessibilité. Ils aident les utilisateurs à comprendre les grandes lignes d’un document et à orienter leur navigation vers les informations spécifiques qui les intéressent.
194 |
195 | Exemple : Niveaux des en-têtes
196 |
197 | Les en-têtes sont classées en niveaux de 1 à 6. Le niveau le plus élevé est le "Niveau 1" et correspond souvent au titre de la page ou de la section principale du document.
198 |
199 | Exemple: Signification contre mise en forme
200 |
201 | Les lecteurs qui utilisent leur vue identifient les en-têtes en balayant les pages à la recherche d’un texte de taille plus grande ou de style différent. Les utilisateurs de technologies d’assistance ne peuvent pas voir ces changements visuels ; changer le style n’est donc pas un indice suffisant.
202 |
203 | À la place, les en-têtes doivent être « étiquetées » sémantiquement pour que les technologies d’assistance puissent identifier les en-têtes. Les en-têtes peuvent alors aussi être utilisées pour naviguer.
204 |
205 | C’est ce qui fait des en-têtes l’un des outils les plus importants pour les utilisateurs de lecteur d’écran, pour qu’ils puissent connaîtrez ce qui se trouve sur la page. Notez que l’étiquetage produit généralement un changement de mise en forme visuelle qui peut être ajusté dans de nombreux documents.
206 |
207 | Adapté de Titres et sous-titres sur Penn State
208 | {% include_cached excol.html type="end" %}
209 |
210 |
211 |
212 | {::nomarkdown}
213 | {% include_cached box.html type="end" %}
214 | {:/}
215 |
216 | {::nomarkdown}
217 | {% include_cached box.html type="start" title="Plus d’informations" class="simple" %}
218 | {:/}
219 |
220 | * **WCAG**
221 | * [En-têtes et étiquettes 2.4.6](/WAI/WCAG21/quickref/#headings-and-labels) ([Comprendre 2.4.6](/WAI/WCAG21/Understanding/headings-and-labels))
222 | * [En-têtes de section 2.4.10](/WAI/WCAG21/quickref/#section-headings) ([Comprendre 2.4.10](/WAI/WCAG21/Understanding/section-headings))
223 | * [Information et relations 1.3.1](/WAI/WCAG21/quickref/#info-and-relationships) ([Comprendre 1.3.1](/WAI/WCAG21/Understanding/info-and-relationships))
224 | * **Témoignage d’utilisateur**
225 | * [Comment un utilisateur de lecteur d’écran utilise les en-têtes pour naviguer](/people-use-web/user-stories/#accountant)
226 |
227 | {::nomarkdown}
228 | {% include_cached box.html type="end" %}
229 | {:/}
230 |
231 | ## Donnez du sens au texte d’un lien
232 |
233 | Écrivez le texte d’un lien de manière à décrire le contenu vers lequel pointe ce lien. Évitez un texte de lien ambigu, tel que « cliquez ici » ou « en savoir plus ». Indiquez les informations pertinentes sur la cible du lien, comme le type et la taille du document ; par exemple, « Documents de présentation (RTF, 20 Mo) ».
234 |
235 | {::nomarkdown}
236 | {% include_cached box.html type="start" title="Exemple : utiliser le texte du lien pour décrire la page cible" class="example" %}
237 | {:/}
238 |
239 |
240 |
241 | {% include_cached icon.html name="ex-circle" label="Mauvaise pratique" %} Pas d’information
242 |
243 |
Pour plus d’informations sur l’indépendance des terminaux, cliquez ici .
244 |
245 |
246 |
247 | {% include_cached icon.html name="check-circle" label="Bonne pratique" %} Informations pertinentes
248 |
251 |
252 |
253 |
254 | {::nomarkdown}
255 | {% include_cached box.html type="end" %}
256 | {:/}
257 |
258 | {::nomarkdown}
259 | {% include_cached box.html type="start" title="Plus d’informations" class="simple" %}
260 | {:/}
261 |
262 | * **WCAG**
263 | * [Fonction du lien (selon le contexte) 2.4.4](/WAI/WCAG21/quickref/#link-purpose-in-context) ([Comprendre 2.4.4](/WAI/WCAG21/Understanding/link-purpose-in-context))
264 | * [Fonction du lien (lien uniquement) 2.4.9](/WAI/WCAG21/quickref/#link-purpose-link-only) ([Comprendre 2.4.9](/WAI/WCAG21/Understanding/link-purpose-link-only))
265 |
266 | {::nomarkdown}
267 | {% include_cached box.html type="end" %}
268 | {:/}
269 |
270 | ## Rédigez des équivalents textuels pertinents pour les images
271 |
272 | Pour chaque image, rédigez un équivalent textuel qui fournit des informations sur l’image, ou sur son utilité. Pour les images purement décoratives, un équivalent textuel n’est pas nécessaire.
273 |
274 | {::nomarkdown}
275 | {% include_cached box.html type="start" title="Exemple : utiliser un équivalent textuel pour communiquer des informations importantes" class="example" %}
276 | {:/}
277 |
278 |
279 |
280 | {% include_cached icon.html name="ex-circle" label="Mauvaise pratique" %} Non informatif
281 |
282 | {% include_cached img.html src="phone_charging.png" alt="Charger un téléphone" float="left" %}
283 |
284 |
Charger le téléphone : connectez le téléphone à une prise électrique en utilisant le câble et l’adaptateur fournis.
285 |
Équivalent textuel pour l’image : "Charger un téléphone"
286 |
287 |
288 |
289 |
290 | {% include_cached icon.html name="check-circle" label="Bonne pratique" %} Informatif
291 |
292 | {% include_cached img.html src="phone_charging.png" alt="Branchez le câble sur le bord inférieur du téléphone." float="left" %}
293 |
294 |
Charger le téléphone : connectez le téléphone à une prise électrique en utilisant le câble et l’adaptateur fournis.
295 |
Équivalent textuel pour l’image : "Branchez le câble sur le bord inférieur du téléphone"
296 |
297 |
298 |
299 |
300 | Un équivalent textuel n’est généralement pas visible ; il est inclus dans cet exemple pour vous permettre de voir à quoi il ressemble.
301 |
302 | {::nomarkdown}
303 | {% include_cached box.html type="end" %}
304 | {:/}
305 |
306 | {::nomarkdown}
307 | {% include_cached box.html type="start" title="Plus d’informations" class="simple" %}
308 | {:/}
309 |
310 | * **WCAG**
311 | * [Contenu non textuel 1.1.1](/WAI/WCAG21/quickref/#non-text-content) ([Comprendre 1.1.1](/WAI/WCAG21/Understanding/non-text-content))
312 | * **Tutoriel**
313 | * [Images](/tutorials/images/)
314 | * **Témoignage d’utilisateur**
315 | * [Importance des équivalents textuels pour un utilisateur aveugle](/people-use-web/user-stories/#accountant)
316 |
317 | {::nomarkdown}
318 | {% include_cached box.html type="end" %}
319 | {:/}
320 |
321 | ## Créez des transcriptions et des sous-titres pour les contenus multimédias
322 |
323 | Pour du contenu seulement audio, comme un podcast, fournissez une transcription. Pour du contenu audio et visuel, tel que les vidéos de formation, fournissez également des sous-titres. Incluez dans les transcriptions et les sous-titres les informations parlées et les sons importants à la compréhension du contenu ; par exemple : « la porte grince ». Pour les transcriptions de vidéo, incluez également une description du contenu visuel important ; par exemple : « Athan quitte la pièce ».
324 |
325 | {::nomarkdown}
326 | {% include_cached box.html type="start" title="Plus d’informations" class="simple" %}
327 | {:/}
328 |
329 | * **WCAG**
330 | * [Sous-titres (pré-enregistrés) 1.2.2](/WAI/WCAG21/quickref/#captions-prerecorded) ([Comprendre 1.2.2](/WAI/WCAG21/Understanding/captions-prerecorded))
331 | * [Audiodescription ou version de remplacement pour un média temporel (pré-enregistré) 1.2.3](/WAI/WCAG21/quickref/#audio-description-or-media-alternative-prerecorded) ([Comprendre 1.2.3](/WAI/WCAG21/Understanding/audio-description-or-media-alternative-prerecorded))
332 | * **Témoignage d’utilisateur**
333 | * [Comment les sous-titres aident un étudiant sourd](/people-use-web/user-stories/#onlinestudent)
334 |
335 | {::nomarkdown}
336 | {% include_cached box.html type="end" %}
337 | {:/}
338 |
339 | ## Fournissez des instructions claires
340 |
341 | Assurez-vous que les instructions, l’aide, et les messages d’erreur sont clairs, faciles à comprendre, et évitent un langage inutilement technique. Décrivez les données à saisir, telles que les formats de date.
342 |
343 | {::nomarkdown}
344 | {% include_cached box.html type="start" title="Exemple : les instructions communiquent quelles informations doit fournir l’utilisateur" class="example" %}
345 | {:/}
346 |
347 |
360 |
361 | {::nomarkdown}
362 | {% include box.html type="end" %}
363 | {:/}
364 |
365 | {::nomarkdown}
366 | {% include box.html type="start" title="Exemple : le message d’erreur indique quel est le problème et, éventuellement, comment le régler" class="example" %}
367 | {:/}
368 |
369 |
379 |
380 | {::nomarkdown}
381 | {% include_cached box.html type="end" %}
382 | {:/}
383 |
384 | {::nomarkdown}
385 | {% include_cached box.html type="start" title="Plus d’informations" class="simple" %}
386 | {:/}
387 |
388 | * **WCAG**
389 | * [Étiquettes ou instructions 3.3.2](/WAI/WCAG21/quickref/#labels-or-instructions) ([Comprendre 3.3.2](/WAI/WCAG21/Understanding/labels-or-instructions))
390 | * **Témoignage d’utilisateur**
391 | * [Comment des instructions simples aident les personnes avec des troubles d’apprentissage](/people-use-web/user-stories/#supermarketassistant)
392 |
393 | {::nomarkdown}
394 | {% include_cached box.html type="end" %}
395 | {:/}
396 |
397 | ## Maintenez le contenu clair et concis
398 |
399 | Utilisez un langage et une mise en forme simples, adaptés au contexte.
400 |
401 | * Rédigez des phrases et des paragraphes à la fois courts et clairs ;
402 | * Évitez l’utilisation de mots et de phrases inutilement compliqués ;
403 | * Décrivez les acronymes lors de leur première utilisation. Par exemple, Les Règles pour l’accessibilité des contenus Web (WCAG) ;
404 | * Envisagez de fournir un glossaire pour les termes que les lecteurs pourraient ne pas connaître ;
405 | * Utilisez une présentation sous forme de liste si besoin ;
406 | * Envisagez d’utiliser des images, illustrations, vidéos, audio et symboles pour aider à clarifier le sens.
407 |
408 | {::nomarkdown}
409 | {% include_cached box.html type="start" title="Exemple : rendre le contenu lisible et compréhensible" class="example" %}
410 | {:/}
411 |
412 |
413 |
414 | {% include_cached icon.html name="ex-circle" label="Mauvaise pratique" %} Inutilement complexe
415 |
416 |
PTD : En cas de collision de véhicules, un représentant désigné par l’entreprise cherchera à déterminer l’étendue et la cause des dommages aux biens appartenant à toutes les parties concernées. Une fois que notre représentant a obtenu des informations qui nous permettent de comprendre la causalité, nous pouvons ou non attribuer une compensation monétaire appropriée. La décision qui en résulte peut donner lieu à l’une des options suivantes : la demande n’est pas approuvée et se voit attribuer un statut de rejet ; le statut de la demande est ambigu et nécessitera des informations supplémentaires avant de pouvoir être traitée ; la demande est partiellement approuvée et un paiement réduit est attribué et émis ; ou la demande est entièrement approuvée et le paiement total de la demande est attribué et émis.
417 |
418 |
419 |
420 | {% include_cached icon.html name="check-circle" label="Bonne pratique" %} Plus facile à comprendre
421 |
422 |
Procédure de traitement des demandes (PTD) : Si vous avez un accident de voiture, notre agent mènera une enquête. Les résultats de l’enquête détermineront le paiement de la demande d’indemnisation. Cela pourrait entraîner :
423 |
424 | Une demande d’indemnisation approuvée : paiement complet ;
425 | Une demande partiellement approuvée : paiement réduit ;
426 | Une demande au statut indéterminé : complément d’informations nécessaire ;
427 | Une demande rejetée : aucun paiement.
428 |
429 |
{% include_cached img.html src="clear_text_diagram.png" alt="" style="max-width:100%" %}
430 |
431 |
432 |
433 |
434 | {::nomarkdown}
435 | {% include_cached box.html type="end" %}
436 | {:/}
437 |
438 | {::nomarkdown}
439 | {% include_cached box.html type="start" title="Plus d’informations" class="simple" %}
440 | {:/}
441 |
442 | * **WCAG**
443 | * [Niveau de lecture 3.1.5](/WAI/WCAG21/quickref/#reading-level) ([Comprendre 3.1.5](/WAI/WCAG21/Understanding/reading-level))
444 | * [Mots rares 3.1.3](/WAI/WCAG21/quickref/#unusual-words) ([Comprendre 3.1.3](/WAI/WCAG21/Understanding/unusual-words))
445 | * [Abréviations 3.1.4](/WAI/WCAG21/quickref/#abbreviations) ([Comprendre 3.1.4](/WAI/WCAG21/Understanding/abbreviations))
446 | * **Témoignage d’utilisateur**
447 | * [Un texte facile à lire profite à un utilisateur avec des troubles de lecture](/people-use-web/user-stories/#classroomstudent)
448 |
449 | {::nomarkdown}
450 | {% include_cached box.html type="end" %}
451 | {:/}
452 |
453 | {::nomarkdown}
454 | {% include box.html type="start" title="En savoir plus sur l’accessibilité" class="large" icon="readmore" %}
455 | {:/}
456 |
457 | Ces conseils sont quelques-uns des éléments à prendre en compte pour l’accessibilité Web. Des conseils d’écriture supplémentaires pour répondre aux besoins des personnes avec des troubles cognitifs et d’apprentissage sont présentés dans **[Utilisez du contenu clair et compréhensible](https://www.w3.org/WAI/WCAG2/supplemental/objectives/o3-clear-content/)**.
458 |
459 | Les ressources suivantes vous aident à en savoir plus sur l’importance de l’accessibilité, et sur les recommandations pour rendre le Web plus accessible aux personnes en situation de handicap.
460 |
461 | * [Introduction à l’accessibilité](/fundamentals/accessibility-intro/) — Introduit l’accessibilité et fournit des liens vers de nombreuses ressources utiles
462 | * [Principes d’accessibilité](/fundamentals/accessibility-principles/) — Une introduction aux exigences des WCAG
463 | * [Comment les personnes en situation de handicap utilisent le Web](/people-use-web/) — Exemples concrets soulignant l'importance de l'accessibilité pour les personnes en situation de handicap
464 | * [Comment répondre aux exigences des WCAG (Référence rapide)](/WAI/WCAG21/quickref/) — liste personnalisable de toutes les recommandations et techniques des WCAG
465 |
466 | {::nomarkdown}
467 | {% include box.html type="end" %}
468 | {:/}
469 |
--------------------------------------------------------------------------------
/_tips/writing.id.md:
--------------------------------------------------------------------------------
1 | ---
2 | # 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 "#".
3 | # In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:".
4 |
5 | title: "Menulis untuk Aksesibilitas Web – Kiat Memulai"
6 | title_html: "Menulis untuk Aksesibilitas Web"
7 | nav_title: Kiat Menulis
8 | lang: id # Change "en" to the translated-language shortcode
9 | last_updated: 2024-03-13 # Put the date of this translation YYYY-MM-DD (with month in the middle)
10 |
11 | resource:
12 | ref: /tips/ # Do not change this
13 |
14 | navigation:
15 | previous: /tips/ # Do not change this
16 | next: /tips/designing/ # Do not change this
17 |
18 | translators: # remove from the beginning of this line and the lines below: "# " (the hash sign and the space)
19 | - name: "Fri Rasyidi" # Replace Jan Doe with translator name
20 | # - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple translators
21 | # contributors:
22 | # - name: "Jan Doe" # Replace Jan Doe with contributor name, or delete this line if none
23 | # - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple contributors
24 |
25 | github:
26 | repository: w3c/wai-quick-start
27 | path: '_tips/writing.id.md' # Add the language shortcode to the middle of the filename, for example: content/index.fr.md
28 |
29 | permalink: /tips/writing/id # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr
30 | ref: /tips/writing/ # Do not change this
31 |
32 | ext_css: tips.css
33 | title_icon: /tips/img/icons.svg#writing
34 |
35 | acknowledgements: /tips/acknowledgements/
36 |
37 | # In the footer below:
38 | # Do not change the dates
39 | # Translate the other words, including "Date:" and "Editors:"
40 | # Translate the Working Group name. Leave the Working Group acronym in English.
41 | footer: >
42 | Date: Diperbarui 5 Agustus 2022. Pertama kali dipublikasikan September 2015.
43 | Editor: Kevin White , Shadi Abou-Zahra , dan Shawn Lawton Henry . ACKNOWLEDGEMENTS.
44 | Dikembangkan oleh Kelompok Kerja Edukasi dan Pendampingan (EOWG) . Developed with support from the proyek WAI-DEV , didanai bersama oleh Program IST Komisi Eropa.
45 | ---
46 |
47 | {::nomarkdown}
48 | {% include box.html type="start" h="2" title="Ringkasan" class="full" %}
49 | {:/}
50 |
51 | Halaman ini memperkenalkan beberapa pertimbangan mendasar untuk membantu Anda mulai menulis konten web yang lebih aksesibel bagi penyandang disabilitas. Kiat-kiat ini merupakan praktik yang baik dalam membantu Anda memenuhi persyaratan Pedoman Aksesibilitas Konten Web (WCAG). Ikuti tautan ke persyaratan WCAG terkait, latar belakang terperinci dalam dokumen "Memahami", panduan dari Tutorial, kisah pengguna, dan banyak lagi.
52 |
53 | {::nomarkdown}
54 | {% include box.html type="end" %}
55 | {:/}
56 |
57 | {::options toc_levels="2" /}
58 |
59 | {::nomarkdown}
60 | {% include_cached toc.html type="start" title="Daftar Isi" class="full" %}
61 | {:/}
62 |
63 | - TOC is created automatically.
64 | {:toc}
65 |
66 | {::nomarkdown}
67 | {% include_cached toc.html type="end" %}
68 | {:/}
69 |
70 | ## Sediakan titel halaman yang informatif dan unik
71 |
72 | Untuk setiap halaman web, berikan judul singkat yang menggambarkan isi halaman dan membedakannya dari halaman lainnya. Titel halaman sering kali sama dengan judul utama halaman. Letakkan informasi yang unik dan paling relevan di awal; misalnya mencantumkan nama halaman sebelum nama organisasi. Untuk halaman yang merupakan bagian dari proses multilangkah, sertakan langkah yang sedang dilakukan di judul halaman.
73 |
74 | {::nomarkdown}
75 | {% include_cached box.html type="start" title="Contoh: Titel Halaman" class="example" %}
76 | {:/}
77 |
78 |
79 |
80 | {% include_cached icon.html name="check-circle" label="Oke" %} Titel halmaan beranda
81 |
82 |
83 |
84 |
85 | Space Teddy Inc.
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 | {% include_cached icon.html name="check-circle" label="Oke" %} Nama halaman diikuti nama organisasi
97 |
98 |
99 |
100 |
101 | Berita terbaru • Space Teddy Inc.
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 | {% include_cached icon.html name="check-circle" label="Oke" %} Nama halaman termasuk langkah pada suatu proses
113 |
114 |
115 |
116 |
117 | Beli Beruangmu (Langkah 1 dari 3) • Space Teddy Inc.
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 | {::nomarkdown}
130 | {% include_cached box.html type="end" %}
131 | {:/}
132 |
133 | {::nomarkdown}
134 | {% include_cached box.html type="start" title="Informasi Lebih Lanjut" class="simple" %}
135 | {:/}
136 |
137 | * **WCAG**
138 | * [Halaman diberi Titel 2.4.2](/WAI/WCAG21/quickref/#page-titled) ([Memahami 2.4.2](/WAI/WCAG21/Understanding/page-titled))
139 |
140 | {::nomarkdown}
141 | {% include_cached box.html type="end" %}
142 | {:/}
143 |
144 | ## Gunakan judul untuk menyampaikan makna dan struktur
145 |
146 | Gunakan judul pendek untuk mengelompokkan paragraf terkait dan menerangkan bagian-bagiannya dengan jelas. Judul yang baik menggambarkan garis besar isinya.
147 |
148 | {::nomarkdown}
149 | {% include_cached box.html type="start" title="Contoh: Gunakan judul untuk mengelompokkan konten" class="example" %}
150 | {:/}
151 |
152 |
153 |
154 | {% include_cached icon.html name="ex-circle" label="Salah" %} Kekurangan judul
155 |
156 | {% include_cached img.html src="headings-poor.png" alt="Contoh tidak ada judul, lihat di bawah untuk contoh mendetail" %}
157 |
158 | {% include_cached excol.html type="start" id="no-headings" %}
159 | Lihat contoh inline
160 | {% include_cached excol.html type="middle" %}
161 | Contoh: Judul dan Subjudul
162 |
163 | Elemen HTML menyediakan informasi hierarki struktural suatu dokumen. Penggunaan elemen yang benar akan membantu menyampaikan makna tambahan pada teknologi pendukung. Dalam banyak kasus, hal ini juga akan membuat dokumen Anda lebih mudah diedit.
164 |
165 | Untuk dokumen yang panjangnya lebih dari tiga atau empat paragraf, judul dan subjudul penting untuk ketergunaan dan aksesibilitas. Mereka membantu pembaca dalam menentukan garis besar isi dokumen dan menavigasi ke informasi spesifik yang dicari.
166 |
167 | Judul diklasifikasikan ke dalam tingkatan dari satu hingga enam. Tingkat tertinggi adalah "Level 1" dan sering kali berhubungan dengan judul halaman atau bagian utama dari dokumen.
168 |
169 | Pembaca visual mengidentifikasi judul dengan memindai halaman untuk mencari teks dengan ukuran yang lebih besar atau gaya yang berbeda. Pengguna teknologi pendukung tidak dapat melihat perubahan visual tersebut, sehingga mengubah gaya saja tidak cukup untuk menjadi petunjuk.
170 |
171 | Alhasil, judul harus "ditandai" secara semantik agar teknologi pendukung dapat mengidentifikasi judul. Kemudian judul juga akan bisa digunakan untuk menavigasi.
172 |
173 | Hal ini menjadikan penambahan judul salah satu sarana terpenting bagi pengguna pembaca layar, sehingga mereka dapat mempelajari apa yang ada pada halaman. Perhatikan bahwa pemberian tanda biasanya memicu perubahan format secara visual yang bisa disesuaikan pada banyak dokumen.
174 |
175 | Diadopsi dari "Judul dan Subjudul" di Penn State
176 | {% include_cached excol.html type="end" %}
177 |
178 |
179 | {% include_cached icon.html name="check-circle" label="Oke" %} Menggunakan judul dan subjudul
180 |
181 | {% include_cached img.html src="headings-good.png" alt="Ilustrasi struktur judul yang bagi, lihat di bawah untuk contoh mendetail"%}
182 |
183 | {% include_cached excol.html type="start" id="headings-good" %}
184 | Lihat comtoh inline
185 | {% include_cached excol.html type="middle" %}
186 | Contoh: Judul dan Subjudul
187 |
188 | Elemen HTML menyediakan informasi hierarki struktural suatu dokumen. Penggunaan elemen yang benar akan membantu menyampaikan makna tambahan pada teknologi pendukung. Dalam banyak kasus, hal ini juga akan membuat dokumen Anda lebih mudah diedit.
189 |
190 | Contoh: Tujuan dari Judul
191 |
192 | Untuk dokumen yang panjangnya lebih dari tiga atau empat paragraf, judul dan subjudul penting untuk ketergunaan dan aksesibilitas. Mereka membantu pembaca dalam menentukan garis besar isi dokumen dan menavigasi ke informasi spesifik yang dicari.
193 |
194 | Contoh: Level judul
195 |
196 | Judul diklasifikasikan ke dalam tingkatan dari satu hingga enam. Tingkat tertinggi adalah "Level 1" dan sering kali berhubungan dengan judul halaman atau bagian utama dari dokumen.
197 |
198 | Contoh: Makna vs. Format
199 |
200 | Pembaca visual mengidentifikasi judul dengan memindai halaman untuk mencari teks dengan ukuran yang lebih besar atau gaya yang berbeda. Pengguna teknologi pendukung tidak dapat melihat perubahan visual tersebut, sehingga mengubah gaya saja tidak cukup untuk menjadi petunjuk.
201 |
202 | Alhasil, judul harus "ditandai" secara semantik agar teknologi pendukung dapat mengidentifikasi judul. Kemudian judul juga akan bisa digunakan untuk menavigasi.
203 |
204 | Hal ini menjadikan penambahan judul salah satu sarana terpenting bagi pengguna pembaca layar, sehingga mereka dapat mempelajari apa yang ada pada halaman. Perhatikan bahwa pemberian tanda biasanya memicu perubahan format secara visual yang bisa disesuaikan pada banyak dokumen.
205 |
206 | Diadopsi dari "Judul dan Subjudul" di Penn State
207 | {% include_cached excol.html type="end" %}
208 |
209 |
210 |
211 | {::nomarkdown}
212 | {% include_cached box.html type="end" %}
213 | {:/}
214 |
215 | {::nomarkdown}
216 | {% include_cached box.html type="start" title="Informasi Lebih Lanjut" class="simple" %}
217 | {:/}
218 |
219 | * **WCAG**
220 | * [Judul dan Label 2.4.6](/WAI/WCAG21/quickref/#headings-and-labels) ([Memahami 2.4.6](/WAI/WCAG21/Understanding/headings-and-labels))
221 | * [Judul Bagian 2.4.10](/WAI/WCAG21/quickref/#section-headings) ([Memahami 2.4.10](/WAI/WCAG21/Understanding/section-headings))
222 | * [Info dan Hubungan 1.3.1](/WAI/WCAG21/quickref/#info-and-relationships) ([Memahami 1.3.1](/WAI/WCAG21/Understanding/info-and-relationships))
223 | * **Kisah Pengguna**
224 | * [Bagaimana pengguna pembaca layar menggunakan judul untuk menavigasi](/people-use-web/user-stories/#accountant)
225 |
226 | {::nomarkdown}
227 | {% include_cached box.html type="end" %}
228 | {:/}
229 |
230 | ## Buat teks tautan yang bermakna
231 |
232 | Tulis teks tautan yang menggambarkan isi dari tujuan tautan tersebut. Hindari penggunaan teks tautan yang ambigu, seperti 'klik di sini' atau 'baca selengkapnya'. Tunjukkan informasi yang relevan tentang target tautan, seperti jenis dan ukuran dokumen, misalnya, 'Dokumen Proposal (RTF, 20MB)'.
233 |
234 | {::nomarkdown}
235 | {% include_cached box.html type="start" title="Contoh: Menggunakan teks tautan untuk mendeskripsikan halaman tujuan" class="example" %}
236 | {:/}
237 |
238 |
239 |
240 | {% include_cached icon.html name="ex-circle" label="Salah" %} Tidak ada informasi
241 |
242 |
Untuk informasi lebih lanjut terkait kemerdekaan dari perangkat, klik di sini .
243 |
244 |
245 |
246 | {% include_cached icon.html name="check-circle" label="Oke" %} Informasi yang bermakna
247 |
250 |
251 |
252 |
253 | {::nomarkdown}
254 | {% include_cached box.html type="end" %}
255 | {:/}
256 |
257 | {::nomarkdown}
258 | {% include_cached box.html type="start" title="Informasi Lebih Lanjut" class="simple" %}
259 | {:/}
260 |
261 | * **WCAG**
262 | * [Guna Tautan (Dalam Konteks) 2.4.4](/WAI/WCAG21/quickref/#link-purpose-in-context) ([Memahami 2.4.4](/WAI/WCAG21/Understanding/link-purpose-in-context))
263 | * [Guna Tautan (Hanya Tautan) 2.4.9](/WAI/WCAG21/quickref/#link-purpose-link-only) ([Memahami 2.4.9](/WAI/WCAG21/Understanding/link-purpose-link-only))
264 |
265 | {::nomarkdown}
266 | {% include_cached box.html type="end" %}
267 | {:/}
268 |
269 | ## Tulis alternatif teks yang bermakna untuk gambar
270 |
271 | Untuk setiap gambar, tulislah alternatif teks yang menjelaskan informasi atau fungsi dari gambar tersebut. Untuk gambar yang sifatnya hanya dekoratif, tidak perlu menuliskan teks alternatif.
272 |
273 | {::nomarkdown}
274 | {% include_cached box.html type="start" title="Contoh: Gunakan alternatif teks untuk mengkomunikasikan informasi yang penting" class="example" %}
275 | {:/}
276 |
277 |
278 |
279 | {% include_cached icon.html name="ex-circle" label="Salah" %} Tidak informatif
280 |
281 | {% include_cached img.html src="phone_charging.png" alt="Mengisi daya ponsel" float="left" %}
282 |
283 |
Mengisi daya ponsel: Hubungkan ponsel ke stopkontak menggunakan kabel dan adaptor daya yang disediakan.
284 |
Alternatif teks untuk gambar : "Mengisi daya ponsel"
285 |
286 |
287 |
288 |
289 | {% include_cached icon.html name="check-circle" label="Oke" %} Informatif
290 |
291 | {% include_cached img.html src="phone_charging.png" alt="Colokkan kabel pada bagian bawah ponsel." float="left" %}
292 |
293 |
Mengisi daya ponsel: Hubungkan ponsel ke stopkontak menggunakan kabel dan adaptor daya yang disediakan.
294 |
Alternatif teks untuk gambar : "Colokkan kabel pada bagian bawah ponsel"
295 |
296 |
297 |
298 |
299 | Alternatif teks biasanya tidak terlihat; teks disertakan pada contoh ini agar Anda dapat melihatnya.
300 |
301 |
302 | {::nomarkdown}
303 | {% include_cached box.html type="end" %}
304 | {:/}
305 |
306 | {::nomarkdown}
307 | {% include_cached box.html type="start" title="Informasi Lebih Lanjut" class="simple" %}
308 | {:/}
309 |
310 | * **WCAG**
311 | * [Konten Nonteks 1.1.1](/WAI/WCAG21/quickref/#non-text-content) ([Memahami 1.1.1](/WAI/WCAG21/Understanding/non-text-content))
312 | * **Tutorial**
313 | * [Gambar](/tutorials/images/)
314 | * **User Story**
315 | * [Menjelaskan nilai dari alternatif teks bagi pengguna penyandang disabilitas netra](/people-use-web/user-stories/#accountant)
316 |
317 | {::nomarkdown}
318 | {% include_cached box.html type="end" %}
319 | {:/}
320 |
321 | ## Buat transkripsi dan takarir untuk multimedia
322 |
323 | Untuk konten hanya audio, seperti podcast, berikan transkripsinya. Untuk konten audiovisual, seperti video pelatihan, sediakan pula takarirnya. Cantumkan pada transkripsi dan takarir informasi terkait ucapan lisan dan suara yang penting diketahui untuk memahami konten, misalnya, 'pintu berderit'. Untuk transkripsi video, sertakan juga deskripsi konten visual yang penting, misalnya 'Athan meninggalkan ruangan'.
324 |
325 | {::nomarkdown}
326 | {% include_cached box.html type="start" title="Informasi Lebih Lanjut" class="simple" %}
327 | {:/}
328 |
329 | * **[[Membuat Media Audio dan Video yang Aksesibel]](/media/av/)**
330 |
331 | * **WCAG**
332 | * [Takarir (Prarekaman) 1.2.2](/WAI/WCAG21/quickref/#captions-prerecorded) ([Memahami 1.2.2](/WAI/WCAG21/Understanding/captions-prerecorded))
333 | * [Deskripsi Audio atau Media Alternatif (Prarekaman) 1.2.3](/WAI/WCAG21/quickref/#audio-description-or-media-alternative-prerecorded) ([Memahami 1.2.3](/WAI/WCAG21/Understanding/audio-description-or-media-alternative-prerecorded))
334 | * **Kisah Pengguna**
335 | * [Menjelaskan bagaimana takarir membantu siswa penyandang disabilitas rungu](/people-use-web/user-stories/#onlinestudent)
336 |
337 | {::nomarkdown}
338 | {% include_cached box.html type="end" %}
339 | {:/}
340 |
341 | ## Sediakan instruksi yang jelas
342 |
343 | Pastikan instruksi, panduan, dan pesan eror jelas, mudah dimengerti, dan hindari bahasa teknis yang tidak perlu. Jabarkan persyaratan dari input, seperti format tanggal.
344 |
345 | {::nomarkdown}
346 | {% include_cached box.html type="start" title="Contoh: Instruksi mengkomunikasikan informasi apa yang harus disediakan oleh pengguna" class="example" %}
347 | {:/}
348 |
349 |
362 |
363 | {::nomarkdown}
364 | {% include box.html type="end" %}
365 | {:/}
366 |
367 | {::nomarkdown}
368 | {% include box.html type="start" title="Contoh: Pesan eror menunjukkan apa masalahnya dan, sebisa mungkin, bagaimana cara memperbaikinya" class="example" %}
369 | {:/}
370 |
371 |
381 |
382 | {::nomarkdown}
383 | {% include_cached box.html type="end" %}
384 | {:/}
385 |
386 | {::nomarkdown}
387 | {% include_cached box.html type="start" title="Informasi Lebih Lanjut" class="simple" %}
388 | {:/}
389 |
390 | * **WCAG**
391 | * [Label atau Instruksi 3.3.2](/WAI/WCAG21/quickref/#labels-or-instructions) ([Memahami 3.3.2](/WAI/WCAG21/Understanding/labels-or-instructions))
392 | * **Kisah Pengguna**
393 | * [Menjelaskan bagaimana instruksi sederhana membantu orang dengan kesulitan belajar](/people-use-web/user-stories/#supermarketassistant)
394 |
395 | {::nomarkdown}
396 | {% include_cached box.html type="end" %}
397 | {:/}
398 |
399 | ## Jaga agar konten tetap jelas dan ringkas
400 |
401 | Gunakan bahasa dan format yang sederhana, sesuai dengan konteksnya.
402 |
403 | * Tulislah dalam kalimat dan paragraf yang singkat dan jelas.
404 | * Hindari penggunaan kata dan frasa dengan kerumitan yang tidak perlu.
405 | * Berikan kepanjangan singkatan saat digunakan pertama kali. Misalnya, Pedoman Aksesibilitas Konten Web (WCAG).
406 | * Pertimbangkan untuk menyediakan glosarium untuk istilah-istilah yang mungkin tidak diketahui oleh pembaca.
407 | * Gunakan format daftar bila sesuai dengan isinya.
408 | * Pertimbangkan untuk menggunakan gambar, ilustrasi, video, audio, dan simbol untuk membantu memperjelas makna konten.
409 |
410 | {::nomarkdown}
411 | {% include_cached box.html type="start" title="Contoh: Membuat konten bisa dibaca dan dimengerti" class="example" %}
412 | {:/}
413 |
414 |
415 |
416 | {% include_cached icon.html name="ex-circle" label="Wrong" %} Kerumitan yang tidak perlu
417 |
418 |
CPP: Jika terjadi tabrakan kendaraan, perwakilan yang ditunjuk oleh perusahaan akan berupaya memastikan tingkat dan penyebab kerusakan pada properti milik semua pihak yang terlibat. Setelah perwakilan kami memperoleh informasi yang memungkinkan kami memahami hubungan sebab akibat, kami dapat atau tidak memberikan kompensasi uang yang sesuai. Keputusan yang dihasilkan dapat menimbulkan salah satu opsi berikut: klaim tidak disetujui dan diberi status ditolak, status klaim bersifat ambigu dan akan memerlukan informasi tambahan sebelum pemrosesan lebih lanjut bisa dilakukan, klaim disetujui sebagian dan pembayaran dikurangi ditugaskan dan diterbitkan, atau klaim disetujui sepenuhnya dan total pembayaran klaim ditugaskan dan diterbitkan.
419 |
420 |
421 |
422 | {% include_cached icon.html name="check-circle" label="OK" %} Lebih mudah dimengerti
423 |
424 |
Proses Pengajuan Klaim (CPP): Jika Anda mengalami kecelakaan mobil, agen kami akan melakukan penyelidikan. Hasil temuan akan menentukan pembayaran klaim. Hal ini dapat mengakibatkan:
425 |
426 | Klaim diterima - pembayaran penuh
427 | Klaim diterima sebagian - pengurangan pembayaran
428 | Klaim tidak bisa ditentukan - butuh informasi lebih lanjut
429 | Klaim ditolak - tidak ada pembayaran
430 |
431 |
{% include_cached img.html src="clear_text_diagram.png" alt="" style="max-width:100%" %}
432 |
433 |
434 |
435 |
436 | {::nomarkdown}
437 | {% include_cached box.html type="end" %}
438 | {:/}
439 |
440 | {::nomarkdown}
441 | {% include_cached box.html type="start" title="Informasi Lebih Lanjut" class="simple" %}
442 | {:/}
443 |
444 | * **WCAG**
445 | * [Kemampuan Membaca 3.1.5](/WAI/WCAG21/quickref/#reading-level) ([Memahami 3.1.5](/WAI/WCAG21/Understanding/reading-level))
446 | * [Kata-kata yang Tidak Umum 3.1.3](/WAI/WCAG21/quickref/#unusual-words) ([Memahami 3.1.3](/WAI/WCAG21/Understanding/unusual-words))
447 | * [Singkatan 3.1.4](/WAI/WCAG21/quickref/#abbreviations) ([Memahami 3.1.4](/WAI/WCAG21/Understanding/abbreviations))
448 | * **Kisah Pengguna**
449 | * [Pengguna dengan kesulitan membaca mendapat manfaat dari teks yang mudah dibaca](/people-use-web/user-stories/#classroomstudent)
450 |
451 | {::nomarkdown}
452 | {% include_cached box.html type="end" %}
453 | {:/}
454 |
455 | {::nomarkdown}
456 | {% include box.html type="start" title="Pelajari Lebih Lanjut Terkait Aksesibilitas" class="large" icon="readmore" %}
457 | {:/}
458 |
459 | Berikut adalah beberapa kiat yang perlu Anda pertimbangkan terkait aksesibilitas web. Panduan tambahan untuk menulis dalam memenuhi kebutuhan aksesibilitas bagi penyangang disabilitas kognitid dan kesulitan belajar ada pada **[Menggunakan Konten yang Jelas dan Bisa Dimengerti](https://www.w3.org/WAI/WCAG2/supplemental/objectives/o3-clear-content/)**.
460 |
461 | Sumber informasi berikut membantu Anda mempelajari mengapa aksesibilitas itu penting, dan terkait pedoman untuk menjadikan web lebih mudah diakses oleh penyandang disabilitas.
462 |
463 | * [Pengenalan ke Aksesibilitas](/fundamentals/accessibility-intro/) — Memperkenalkan aksesibilitas dan menyediakan tautan ke berbagai sumber informasi yang membantu
464 | * [Prinsip Aksesibilitas](/fundamentals/accessibility-principles/) — Pengenalan ke persyaratan WCAG
465 | * [Bagaimana Penyandang Disabilitas Menggunakan Web](/people-use-web/) — Contoh nyata dari manfaat aksesibilitas bagi pada penyandang disabilitas
466 | * [Cara Memenuhi Target WCAG (Referensi Cepat)](/WAI/WCAG21/quickref/) — referensi yang bisa disesuaikan untuk semua persyaratan dan teknik WCAG
467 |
468 | {::nomarkdown}
469 | {% include box.html type="end" %}
470 | {:/}
471 |
--------------------------------------------------------------------------------
/_tips/writing.ja.md:
--------------------------------------------------------------------------------
1 | ---
2 | # 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 "#".
3 | # In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:".
4 |
5 | title: "ウェブ・アクセシビリティを考慮した記述法 – 始めるにあたってのヒント"
6 | title_html: "ウェブ・アクセシビリティを考慮した記述法"
7 | nav_title: 始めるためのヒント
8 | lang: ja # Change "en" to the translated-language shortcode
9 | last_updated: 2024-04-16 # Put the date of this translation YYYY-MM-DD (with month in the middle)
10 |
11 | resource:
12 | ref: /tips/ # Do not change this
13 |
14 | navigation:
15 | previous: /tips/ # Do not change this
16 | next: /tips/designing/ # Do not change this
17 |
18 | translators: # remove from the beginning of this line and the lines below: "# " (the hash sign and the space)
19 | - name: "Jay Kishigami" # Replace Jan Doe with translator name
20 | # - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple translators
21 | # contributors:
22 | # - name: "Jan Doe" # Replace Jan Doe with contributor name, or delete this line if none
23 | # - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple contributors
24 |
25 | github:
26 | repository: w3c/wai-quick-start
27 | path: '_tips/writing.ja.md' # Add the language shortcode to the middle of the filename, for example: content/index.fr.md
28 |
29 | permalink: /tips/writing/ja # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr
30 | ref: /tips/writing/ # Do not change this
31 |
32 | ext_css: tips.css
33 | title_icon: /tips/img/icons.svg#writing
34 |
35 | acknowledgements: /tips/acknowledgements/
36 |
37 | # In the footer below:
38 | # Do not change the dates
39 | # Translate the other words, including "Date:" and "Editors:"
40 | # Translate the Working Group name. Leave the Working Group acronym in English.
41 | footer: >
42 | ~~月日: 2022年8月5日アップデート、初版は2015年9月
43 | 編集者: Kevin White , Shadi Abou-Zahra , and Shawn Lawton Henry ACKNOWLEDGEMENTS
44 | 教育と援助のためのWG (EOWG) によって開発され. WAI-DEV プロジェクト からのサポートを受けるとともに, ヨーロッパ委員会の IST プログラムの援助を受けた.
45 |
46 | ---
47 |
48 | {::nomarkdown}
49 | {% include box.html type="start" h="2" title="概要" class="full" %}
50 | {:/}
51 |
52 | このページでは、障害者にとってアクセシブルなWebコンテンツを書き始めるための考慮すべき基本的な事項を紹介します。これらのヒントは、Webコンテンツ・アクセシビリティ・ガイドライン(WCAG)の要件を満たすためのグッドプラクティスです。関連するWCAG要件、「理解するための」ドキュメントでの詳細な背景、チュートリアルからのガイダンス、ユーザーストーリーなどへのリンクをたどってください。
53 |
54 | {::nomarkdown}
55 | {% include box.html type="end" %}
56 | {:/}
57 |
58 | {::options toc_levels="2" /}
59 |
60 | {::nomarkdown}
61 | {% include_cached toc.html type="start" title="目次" class="full" %}
62 | {:/}
63 |
64 | - TOC is created automatically.
65 | {:toc}
66 |
67 | {::nomarkdown}
68 | {% include_cached toc.html type="end" %}
69 | {:/}
70 |
71 | ## 情報量が多くてユニークなページタイトルを
72 |
73 | 各ウェブページには、ページの内容を説明し、他のページと区別できる短いタイトルを付けます。ページタイトルは、そのページの大見出しと同じであることが多い。ユニークで最も関連性の高い情報を最初に持ってくる例えば、組織名の前にページ名を書くなどです。複数ステップのプロセスの一部であるページでは、現在のステップをページタイトルに含める。
74 |
75 | {::nomarkdown}
76 | {% include_cached box.html type="start" title="例: ページのタイトル" class="example" %}
77 | {:/}
78 |
79 |
80 |
81 | {% include_cached icon.html name="check-circle" label="良い場合" %} ホームページのタイトル
82 |
83 |
84 |
85 |
86 | Space Teddy Inc.
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 | {% include_cached icon.html name="check-circle" label="良い場合" %} ページ名の後に組織名
98 |
99 |
100 |
101 |
102 | 最新のニュース • Space Teddy Inc.
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 | {% include_cached icon.html name="check-circle" label="良い場合" %} プロセスのステップを含むページ名
114 |
115 |
116 |
117 |
118 | あなたがテディベアを買う方法 (ステップ 1 / 3) • Space Teddy Inc.
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 | {::nomarkdown}
131 | {% include_cached box.html type="end" %}
132 | {:/}
133 |
134 | {::nomarkdown}
135 | {% include_cached box.html type="start" title="詳細情報" class="simple" %}
136 | {:/}
137 |
138 | * **WCAG**
139 | * [ページタイトル 2.4.2](/WAI/WCAG21/quickref/#page-titled) ([理解のため 2.4.2](/WAI/WCAG21/Understanding/page-titled))
140 |
141 | {::nomarkdown}
142 | {% include_cached box.html type="end" %}
143 | {:/}
144 |
145 | ## 意味と構造を伝えるために見出しを使う
146 |
147 | 短い見出しを使って関連する段落をグループ化し、セクションを明確に説明する。良い見出しは、内容のアウトラインを提供します。.
148 |
149 | {::nomarkdown}
150 | {% include_cached box.html type="start" title="例: 見出しを使ってコンテンツを整理する" class="example" %}
151 | {:/}
152 |
153 |
154 |
155 | {% include_cached icon.html name="ex-circle" label="良くない場合" %}見出しが欠如している場合
156 |
157 | {% include_cached img.html src="headings-poor.png" alt="見出しがない例、詳細は下記を参照" %}
158 |
159 | {% include_cached excol.html type="start" id="no-headings" %}
160 | インラインでの例を表示
161 | {% include_cached excol.html type="middle" %}
162 | Example: 見出しと小見出し
163 |
164 | HTML要素は、文書の構造階層に関する情報を提供する。要素を正しく使うことで、支援技術にさらなる意味を伝えることができる。多くの場合、そうすることで文書の編集も容易になる。
165 |
166 | 3、4段落より長い文書では、見出しと小見出しはユーザビリティとアクセシビリティのために重要である。これらの見出しは、読者が文書全体のアウトラインを判断し、関心のある特定の情報にナビゲートするのに役立つ。
167 |
168 | 見出しは1から6までのレベルに分類される。最も高いレベルは「レベル1」で、ページのタイトルや文書の主要なセクションに対応することが多い。
169 |
170 | 読者は、より大きなサイズのテキストや異なるスタイルのテキストを探すためにページをスキャンすることで、ヘッダーを識別する。支援技術ユーザーはこのような視覚的な変化を見ることができないので、スタイルを変えても十分な手がかりにはならない。
171 |
172 | その代わりに、支援技術が見出しを識別できるように、見出しは意味的に「タグ付け」されなければならない。そうすれば、見出しをナビゲーションに使うこともできる。
173 |
174 | このため、見出しを追加することは、スクリーン・リーダー・ユーザーにとって最も重要なツールの1つである。タグ付けは通常、視覚的にフォーマットの変更を引き起こすので、多くの文書で調整できることに注意しよう。.
175 |
176 | 参照 Penn Stateにおける見出しと小見出し
177 | {% include_cached excol.html type="end" %}
178 |
179 |
180 | {% include_cached icon.html name="check-circle" label="良い場合" %}見出しと小見出しを使用した場合
181 |
182 | {% include_cached img.html src="headings-good.png" alt="よい見出しの使い方、詳細は下記を参照"%}
183 |
184 | {% include_cached excol.html type="start" id="headings-good" %}
185 | インラインでの例を表示
186 | {% include_cached excol.html type="middle" %}
187 | 例: 見出しと小見出し
188 |
189 | HTML 要素は、文書の構造的階層に関する情報を提供する。要素を正しく使用することで、支援技術にさらなる意味を伝えることができる。多くの場合、そうすることで文書の編集も容易になる
190 |
191 | Example: 見出しの目的
192 |
193 | 3、4段落より長い文書では、見出しと小見出しはユーザビリティとアクセシビリティのために重要である。これらの見出しは、読者が文書全体のアウトラインを判断し、関心のある特定の情報にナビゲートするのに役立つ。
194 |
195 | 例: 見出しのレベル
196 |
197 | 見出しは1から6までのレベルに分類される。最も高いレベルは「レベル1」で、ページのタイトルや文書の主要なセクションに対応することが多い。
198 |
199 | 例: 意味とフォーマット
200 |
201 | 視覚読者は、より大きなサイズのテキストや異なるスタイルのテキストを探すためにページをスキャンすることで、ヘッダーを識別する。支援技術ユーザーはこのような視覚的な変化を見ることができないので、スタイルを変えても十分な手がかりにはならない。
202 |
203 | その代わりに、支援技術が見出しを識別できるように、見出しは意味的に「タグ付け」されなければならない。そうすれば、見出しをナビゲーションに使うこともできる。
204 |
205 | このため、見出しを追加することは、スクリーン・リーダー・ユーザーにとって最も重要なツールの1つである。タグ付けは通常、視覚的にフォーマットの変更を引き起こすので、多くの文書で調整できることに注意しよう。
206 |
207 | 参照 Penn Stateにおける見出しと小見出し
208 | {% include_cached excol.html type="end" %}
209 |
210 |
211 |
212 | {::nomarkdown}
213 | {% include_cached box.html type="end" %}
214 | {:/}
215 |
216 | {::nomarkdown}
217 | {% include_cached box.html type="start" title="詳細情報" class="simple" %}
218 | {:/}
219 |
220 | * **WCAG**
221 | * [見出しとラベル 2.4.6](/WAI/WCAG21/quickref/#headings-and-labels) ([理解のため 2.4.6](/WAI/WCAG21/Understanding/headings-and-labels))
222 | * [章見出し 2.4.10](/WAI/WCAG21/quickref/#section-headings) ([理解のため 2.4.10](/WAI/WCAG21/Understanding/section-headings))
223 | * [情報と関係性 1.3.1](/WAI/WCAG21/quickref/#info-and-relationships) ([理解のため 1.3.1](/WAI/WCAG21/Understanding/info-and-relationships))
224 | * **ユーザーストーリー**
225 | * [ スクリーン・リーダー・ユーザーが見出しを使ってナビゲートする方法](/people-use-web/user-stories/#accountant)
226 |
227 | {::nomarkdown}
228 | {% include_cached box.html type="end" %}
229 | {:/}
230 |
231 | ## リンクテキストに意味を持たせる
232 |
233 | リンクテキストは、リンク先の内容を説明するように書きましょう。「ここをクリック」や「続きを読む」など、あいまいなリンクテキストは使用しないように。文書の種類やサイズなど、リンク先に関する関連情報を示すこと(例:「提案書類(RTF、20MB)」)。
234 |
235 |
236 | {::nomarkdown}
237 | {% include_cached box.html type="start" title="例: リンクテキストを使ってターゲットページを説明する" class="example" %}
238 | {:/}
239 |
240 |
241 |
242 | {% include_cached icon.html name="ex-circle" label="良くない場合" %} 情報なし
243 |
244 |
デバイスの独立性についての詳細は, ここをクリック .
245 |
246 |
247 |
248 | {% include_cached icon.html name="check-circle" label="良い場合" %} 意味のある情報
249 |
252 |
253 |
254 |
255 | {::nomarkdown}
256 | {% include_cached box.html type="end" %}
257 | {:/}
258 |
259 | {::nomarkdown}
260 | {% include_cached box.html type="start" title="詳細情報" class="simple" %}
261 | {:/}
262 |
263 | * **WCAG**
264 | * [リンクの目的 (文脈の中で) 2.4.4](/WAI/WCAG21/quickref/#link-purpose-in-context) ([理解のため 2.4.4](/WAI/WCAG21/Understanding/link-purpose-in-context))
265 | * [リンクの目的 (リンクのみの場合) 2.4.9](/WAI/WCAG21/quickref/#link-purpose-link-only) ([理解のため 2.4.9](/WAI/WCAG21/Understanding/link-purpose-link-only))
266 |
267 | {::nomarkdown}
268 | {% include_cached box.html type="end" %}
269 | {:/}
270 |
271 | ## 画像の代わりになる説明文を記述
272 |
273 | すべての画像について、その画像の情報や機能を提供する代替テキストを書きましょう。純粋に装飾的な画像については、代替テキストを書く必要はありません。
274 |
275 |
276 | {::nomarkdown}
277 | {% include_cached box.html type="start" title="例: 重要な情報を伝えるための代替テキストの使用" class="example" %}
278 | {:/}
279 |
280 |
281 |
282 | {% include_cached icon.html name="ex-circle" label="良くない場合" %} 情報不足の場合
283 |
284 | {% include_cached img.html src="phone_charging.png" alt="電話への充電" float="left" %}
285 |
286 |
携帯電話の充電:付属のケーブルと電源アダプターを使用して、携帯電話を電源コンセントに接続します。
287 |
画像の代替テキスト : "電話への充電"
288 |
289 |
290 |
291 |
292 | {% include_cached icon.html name="check-circle" label="良い場合" %}情報に意味のある場合
293 |
294 | {% include_cached img.html src="phone_charging.png" alt="携帯電話の下端にケーブルを差し込みます." float="left" %}
295 |
296 |
携帯電話をの充電: 付属のケーブルと電源アダプターを使用して、携帯電話を電源コンセントに接続します。
297 |
298 |
画像の代替テキスト : "携帯電話の下端にケーブルを差し込みます."
299 |
300 |
301 |
302 |
303 | 代替テキストは通常表示されない; この例ではそれが見えるようにしています
304 |
305 | {::nomarkdown}
306 | {% include_cached box.html type="end" %}
307 | {:/}
308 |
309 | {::nomarkdown}
310 | {% include_cached box.html type="start" title="詳細情報" class="simple" %}
311 | {:/}
312 |
313 | * **WCAG**
314 | * [文字ではない情報 1.1.1](/WAI/WCAG21/quickref/#non-text-content) ([理解のため 1.1.1](/WAI/WCAG21/Understanding/non-text-content))
315 | * **チュートリアル**
316 | * [画像](/tutorials/images/)
317 | * **ユーザーストーリー**
318 | * [視覚障害者にとっての代替テキストの価値を説明](/people-use-web/user-stories/#accountant)
319 |
320 | {::nomarkdown}
321 | {% include_cached box.html type="end" %}
322 | {:/}
323 |
324 | ## マルチメディア用のトランスクリプトとキャプションの作成
325 |
326 | ポッドキャストなど音声のみのコンテンツには、トランスクリプトを提供しましょう。トレーニングビデオのような音声と映像のコンテンツでは、キャプションも提供しましょう。トランスクリプトとキャプションには、例えば「ドアのきしみ音」のように、コンテンツを理解する上で重要な音声情報と音声を含めるようにしましょう。ビデオの書き起こしの場合は、重要なビジュアルコンテンツの説明も含めてください(例:「Athanが部屋から出た」)。
327 |
328 | {::nomarkdown}
329 | {% include_cached box.html type="start" title="詳細情報" class="simple" %}
330 | {:/}
331 |
332 | * **[[ 音声・映像メディアをアクセシブルに]](/media/av/)**
333 |
334 | * **WCAG**
335 | * [字幕 (あらかじめ録音されたもの) 1.2.2](/WAI/WCAG21/quickref/#captions-prerecorded) ([理解のため 1.2.2](/WAI/WCAG21/Understanding/captions-prerecorded))
336 | * [音声説明または代替メディア (あらかじめ録音されたもの) 1.2.3](/WAI/WCAG21/quickref/#audio-description-or-media-alternative-prerecorded) ([理解のため 1.2.3](/WAI/WCAG21/Understanding/audio-description-or-media-alternative-prerecorded))
337 | * **ユーザーストーリー**
338 | * [耳の不自由な生徒のために、キャプションがどのように役立つかを説明](/people-use-web/user-stories/#onlinestudent)
339 |
340 | {::nomarkdown}
341 | {% include_cached box.html type="end" %}
342 | {:/}
343 |
344 | ## 明確な指示
345 | 指示、ガイダンス、エラーメッセージが明確で理解しやすく、不必要に専門的な表現を避けるようにしましょう。日付の書式など、入力二必要なことを記述しましょう。
346 |
347 | {::nomarkdown}
348 | {% include_cached box.html type="start" title="例: 指示は、ユーザーがどのような情報を提供すべきかを伝える" class="example" %}
349 | {:/}
350 |
351 |
365 |
366 | {::nomarkdown}
367 | {% include box.html type="end" %}
368 | {:/}
369 |
370 | {::nomarkdown}
371 | {% include box.html type="start" title="例: エラーは何が問題で、場合によってその解決方法も示す" class="example" %}
372 | {:/}
373 |
374 |
384 |
385 | {::nomarkdown}
386 | {% include_cached box.html type="end" %}
387 | {:/}
388 |
389 | {::nomarkdown}
390 | {% include_cached box.html type="start" title="詳細情報" class="simple" %}
391 | {:/}
392 |
393 | * **WCAG**
394 | * [ラベルと指示 3.3.2](/WAI/WCAG21/quickref/#labels-or-instructions) ([理解のため 3.3.2](/WAI/WCAG21/Understanding/labels-or-instructions))
395 | * **ユーザーストーリー**
396 | * [学習困難な人を助ける簡単な指示について説明](/people-use-web/user-stories/#supermarketassistant)
397 |
398 | {::nomarkdown}
399 | {% include_cached box.html type="end" %}
400 | {:/}
401 |
402 | ## 内容は明確かつ簡潔に
403 |
404 | 文脈に応じて、シンプルな表現と書式を用いる。
405 |
406 | * 短く明確な文章と段落で書くこと。
407 | * 不必要に複雑な単語や言い回しを使わないようにすること。
408 | * 略語は初回使用時に拡大すること。例えば、ウェブ・コンテンツ・アクセシビリティ・ガイドライン(WCAG)。
409 | * 読者が知らない用語については、用語集を提供することを検討すること。
410 | * 適宜、リストの書式を使用すること。
411 | * 意味を明確にするために、画像、イラスト、ビデオ、音声、記号の使用を検討すること。
412 |
413 | {::nomarkdown}
414 | {% include_cached box.html type="start" title="例: 読みやすく理解しやすいコンテンツ" class="example" %}
415 | {:/}
416 |
417 |
418 |
419 | {% include_cached icon.html name="ex-circle" label="良くない場合" %} 不必要に複雑な例
420 |
421 |
CPP:車両衝突事故が発生した場合、当社の担当者が関係者全員の所有物に対する損害の程度と原因を確認します。当社の担当者が因果関係を理解するための情報を得た後、適切な金銭補償を行う場合もあれば、行わない場合もある。その結果、請求は承認されず却下のステータスとなる、請求のステータスが曖昧で今後の処理に追加情報が必要となる、請求が部分的に承認され、減額された支払いが割り当てられ発行される、請求が完全に承認され、請求の支払い総額が割り当てられ発行される、などのオプションのいずれかが決定される可能性があります。
422 |
423 |
424 |
425 |
426 | {% include_cached icon.html name="check-circle" label="良い場合" %}より理解しやすい例
427 |
428 |
保険金請求手続き(CPP):交通事故に遭われた場合、代理店が調査を行います。調査結果は保険金の支払いを決定します。その結果は下記のとおりです
429 | :
430 |
431 | 承認された請求には - 全額払い
432 | 部分的に承認されたクレームには-減額された支払
433 | 未確定クレームには-より詳細な情報が必要
434 | 請求却下の場合は-支払いなし
435 |
436 |
{% include_cached img.html src="clear_text_diagram.png" alt="" style="max-width:100%" %}
437 |
438 |
439 |
440 |
441 | {::nomarkdown}
442 | {% include_cached box.html type="end" %}
443 | {:/}
444 |
445 | {::nomarkdown}
446 | {% include_cached box.html type="start" title="詳細情報" class="simple" %}
447 | {:/}
448 |
449 | * **WCAG**
450 | * [読解レベル 3.1.5](/WAI/WCAG21/quickref/#reading-level) ([理解のため 3.1.5](/WAI/WCAG21/Understanding/reading-level))
451 | * [普段使わない言葉 3.1.3](/WAI/WCAG21/quickref/#unusual-words) ([理解のため 3.1.3](/WAI/WCAG21/Understanding/unusual-words))
452 | * [略語 3.1.4](/WAI/WCAG21/quickref/#abbreviations) ([理解のため 3.1.4](/WAI/WCAG21/Understanding/abbreviations))
453 | * **ユーザーストーリー**
454 | * [読書障害のあるユーザーにとって、読みやすいテキストは有益である。](/people-use-web/user-stories/#classroomstudent)
455 |
456 | {::nomarkdown}
457 | {% include_cached box.html type="end" %}
458 | {:/}
459 |
460 | {::nomarkdown}
461 | {% include box.html type="start" title="アクセシビリティについて" class="large" icon="readmore" %}
462 | {:/}
463 |
464 | これらのヒントは、ウェブ・アクセシビリティのために考慮すべきことのほんの一部です。認知障害や学習障害のある人のアクセシビリティのニーズを満たす文章を書くための追加ガイダンスは、 **[明確で理解しやすいコンテンツを使用](https://www.w3.org/WAI/WCAG2/supplemental/objectives/o3-clear-content/)**.
465 |
466 | 以下のリソースは、アクセシビリティが重要である理由、および障害者にとってWebをより利用しやすくするためのガイドラインを学ぶのに役立ちます。
467 |
468 |
469 | * [アクセシビリティ入門](/fundamentals/accessibility-intro/) — アクセシビリティを紹介し、多くの有用なリソースへのリンクを提供
470 |
471 | * [アクセシビリティ原則](/fundamentals/accessibility-principles/) — WCAG 要求事項の紹介
472 | * [障害者はどのようにウェブを利用しているか](/people-use-web/) — 障害者にとってのアクセシビリティの重要性を示す実例
473 | * [WCAGを満たす方法 (クイックリファレンス)](/WAI/WCAG21/quickref/) — すべてのWCAG要件とテクニックのカスタマイズ可能なリファレンス
474 |
475 |
476 | {::nomarkdown}
477 | {% include box.html type="end" %}
478 | {:/}
479 |
--------------------------------------------------------------------------------
/_tips/writing.md:
--------------------------------------------------------------------------------
1 | ---
2 | # 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 "#".
3 | # In this first section, do not translate the words before a colon. For example, do not translate "title:". Do translate the text after "title:".
4 |
5 | title: "Writing for Web Accessibility – Tips for Getting Started"
6 | title_html: "Writing for Web Accessibility"
7 | nav_title: Tips for Writing
8 | lang: en # Change "en" to the translated-language shortcode
9 | last_updated: 2022-08-05 # Put the date of this translation YYYY-MM-DD (with month in the middle)
10 |
11 | resource:
12 | ref: /tips/ # Do not change this
13 |
14 | navigation:
15 | previous: /tips/ # Do not change this
16 | next: /tips/designing/ # Do not change this
17 |
18 | # translators: # remove from the beginning of this line and the lines below: "# " (the hash sign and the space)
19 | # - name: "Jan Doe" # Replace Jan Doe with translator name
20 | # - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple translators
21 | # contributors:
22 | # - name: "Jan Doe" # Replace Jan Doe with contributor name, or delete this line if none
23 | # - name: "Jan Doe" # Replace Jan Doe with name, or delete this line if not multiple contributors
24 |
25 | github:
26 | repository: w3c/wai-quick-start
27 | path: '_tips/writing.md' # Add the language shortcode to the middle of the filename, for example: content/index.fr.md
28 |
29 | permalink: /tips/writing/ # Add the language shortcode to the end, with no slash at the end. For example /path/to/file/fr
30 | ref: /tips/writing/ # Do not change this
31 |
32 | ext_css: tips.css
33 | title_icon: /tips/img/icons.svg#writing
34 |
35 | acknowledgements: /tips/acknowledgements/
36 |
37 | # In the footer below:
38 | # Do not change the dates
39 | # Translate the other words, including "Date:" and "Editors:"
40 | # Translate the Working Group name. Leave the Working Group acronym in English.
41 | footer: >
42 | Date: Updated 5 August 2022. First published September 2015.
43 | Editors: Kevin White , Shadi Abou-Zahra , and Shawn Lawton Henry . ACKNOWLEDGEMENTS.
44 | Developed by the Education and Outreach Working Group (EOWG) . Developed with support from the WAI-DEV project , co-funded by the European Commission IST Programme.
45 | ---
46 |
47 | {::nomarkdown}
48 | {% include box.html type="start" h="2" title="Summary" class="full" %}
49 | {:/}
50 |
51 | This page introduces some basic considerations to help you get started writing web content that is more accessible to people with disabilities. These tips are good practice to help you meet Web Content Accessibility Guidelines (WCAG) requirements. Follow the links to the related WCAG requirements, detailed background in the "Understanding" document, guidance from Tutorials, user stories, and more.
52 |
53 | {::nomarkdown}
54 | {% include box.html type="end" %}
55 | {:/}
56 |
57 | {::options toc_levels="2" /}
58 |
59 | {::nomarkdown}
60 | {% include_cached toc.html type="start" title="Page Contents" class="full" %}
61 | {:/}
62 |
63 | - TOC is created automatically.
64 | {:toc}
65 |
66 | {::nomarkdown}
67 | {% include_cached toc.html type="end" %}
68 | {:/}
69 |
70 | ## Provide informative, unique page titles
71 |
72 | For each web page, provide a short title that describes the page content and distinguishes it from other pages. The page title is often the same as the main heading of the page. Put the unique and most relevant information first; for example, put the name of the page before the name of the organization. For pages that are part of a multi-step process, include the current step in the page title.
73 |
74 | {::nomarkdown}
75 | {% include_cached box.html type="start" title="Example: Page Titles" class="example" %}
76 | {:/}
77 |
78 |
79 |
80 | {% include_cached icon.html name="check-circle" label="OK" %} Home page title
81 |
82 |
83 |
84 |
85 | Space Teddy Inc.
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 | {% include_cached icon.html name="check-circle" label="OK" %} Page name followed by organization name
97 |
98 |
99 |
100 |
101 | Latest News • Space Teddy Inc.
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 | {% include_cached icon.html name="check-circle" label="OK" %} Page name including step in a process
113 |
114 |
115 |
116 |
117 | Buy Your Bear (Step 1 of 3) • Space Teddy Inc.
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 | {::nomarkdown}
130 | {% include_cached box.html type="end" %}
131 | {:/}
132 |
133 | {::nomarkdown}
134 | {% include_cached box.html type="start" title="More Information" class="simple" %}
135 | {:/}
136 |
137 | * **WCAG**
138 | * [Page Titled 2.4.2](/WAI/WCAG21/quickref/#page-titled) ([Understanding 2.4.2](/WAI/WCAG21/Understanding/page-titled))
139 |
140 | {::nomarkdown}
141 | {% include_cached box.html type="end" %}
142 | {:/}
143 |
144 | ## Use headings to convey meaning and structure
145 |
146 | Use short headings to group related paragraphs and clearly describe the sections. Good headings provide an outline of the content.
147 |
148 | {::nomarkdown}
149 | {% include_cached box.html type="start" title="Example: Using headings to organize content" class="example" %}
150 | {:/}
151 |
152 |
153 |
154 | {% include_cached icon.html name="ex-circle" label="Wrong" %} Lack of headings
155 |
156 | {% include_cached img.html src="headings-poor.png" alt="Illustration of no headings, see below for detailed example" %}
157 |
158 | {% include_cached excol.html type="start" id="no-headings" %}
159 | View inline example
160 | {% include_cached excol.html type="middle" %}
161 | Example: Headings and Subheadings
162 |
163 | HTML elements provide information on structural hierarchy of a document. Using elements correctly will help convey additional meaning to assistive technology. In many cases, doing so will also make your document easier to edit.
164 |
165 | For documents longer than three or four paragraphs, headings and subheadings are important for usability and accessibility. They help readers to determine the overall outline of a document and to navigate to specific information of interest.
166 |
167 | Headings are classified into levels from one to six. The highest level is "Level 1" and often corresponds to the title of the page or major document section.
168 |
169 | Visual readers identify headers by scanning pages for text of a larger size or a different style. Assistive technology users are not able to see these visual changes, so changing the style is not a sufficient cue.
170 |
171 | Instead, the headings must be semantically "tagged" so that assistive technology can identify headings. Then headings can also be used for navigation.
172 |
173 | This makes adding headings one of the most important tools for screen reader users, so that they can learn what is on the page. Note that tagging usually triggers a formatting change visually which can be adjusted in many documents.
174 |
175 | Adapted from Headings and Subheadings at Penn State
176 | {% include_cached excol.html type="end" %}
177 |
178 |
179 | {% include_cached icon.html name="check-circle" label="OK" %} Using headings and subheadings
180 |
181 | {% include_cached img.html src="headings-good.png" alt="Illustration of good heading structure, see below for detailed example"%}
182 |
183 | {% include_cached excol.html type="start" id="headings-good" %}
184 | View inline example
185 | {% include_cached excol.html type="middle" %}
186 | Example: Headings and Subheadings
187 |
188 | HTML elements provide information on structural hierarchy of a document. Using elements correctly will help convey additional meaning to assistive technology. In many cases, doing so will also make your document easier to edit.
189 |
190 | Example: Purpose of Headings
191 |
192 | For documents longer than three or four paragraphs, headings and subheadings are important for usability and accessibility. They help readers to determine the overall outline of a document and to navigate to specific information of interest.
193 |
194 | Example: Heading Levels
195 |
196 | Headings are classified into levels from one to six. The highest level is "Level 1" and often corresponds to the title of the page or major document section.
197 |
198 | Example: Meaning vs. Formatting
199 |
200 | Visual readers identify headers by scanning pages for text of a larger size or a different style. Assistive technology users are not able to see these visual changes, so changing the style is not a sufficient cue.
201 |
202 | Instead, the headings must be semantically "tagged" so that assistive technology can identify headings. Then headings can also be used for navigation.
203 |
204 | This makes adding headings one of the most important tools for screen reader users, so that they can learn what is on the page. Note that tagging usually triggers a formatting change visually which can be adjusted in many documents.
205 |
206 | Adapted from Headings and Subheadings at Penn State
207 | {% include_cached excol.html type="end" %}
208 |
209 |
210 |
211 | {::nomarkdown}
212 | {% include_cached box.html type="end" %}
213 | {:/}
214 |
215 | {::nomarkdown}
216 | {% include_cached box.html type="start" title="More Information" class="simple" %}
217 | {:/}
218 |
219 | * **WCAG**
220 | * [Headings and Labels 2.4.6](/WAI/WCAG21/quickref/#headings-and-labels) ([Understanding 2.4.6](/WAI/WCAG21/Understanding/headings-and-labels))
221 | * [Section Headings 2.4.10](/WAI/WCAG21/quickref/#section-headings) ([Understanding 2.4.10](/WAI/WCAG21/Understanding/section-headings))
222 | * [Info and Relationships 1.3.1](/WAI/WCAG21/quickref/#info-and-relationships) ([Understanding 1.3.1](/WAI/WCAG21/Understanding/info-and-relationships))
223 | * **User Story**
224 | * [How a screen reader user uses headings to navigate](/people-use-web/user-stories/#accountant)
225 |
226 | {::nomarkdown}
227 | {% include_cached box.html type="end" %}
228 | {:/}
229 |
230 | ## Make link text meaningful
231 |
232 | Write link text so that it describes the content of the link target. Avoid using ambiguous link text, such as 'click here' or 'read more'. Indicate relevant information about the link target, such as document type and size, for example, 'Proposal Documents (RTF, 20MB)'.
233 |
234 | {::nomarkdown}
235 | {% include_cached box.html type="start" title="Example: Using link text to describe target page" class="example" %}
236 | {:/}
237 |
238 |
239 |
240 | {% include_cached icon.html name="ex-circle" label="Wrong" %} No information
241 |
242 |
For more information on device independence, click here .
243 |
244 |
245 |
246 | {% include_cached icon.html name="check-circle" label="OK" %} Meaningful information
247 |
250 |
251 |
252 |
253 | {::nomarkdown}
254 | {% include_cached box.html type="end" %}
255 | {:/}
256 |
257 | {::nomarkdown}
258 | {% include_cached box.html type="start" title="More Information" class="simple" %}
259 | {:/}
260 |
261 | * **WCAG**
262 | * [Link Purpose (In Context) 2.4.4](/WAI/WCAG21/quickref/#link-purpose-in-context) ([Understanding 2.4.4](/WAI/WCAG21/Understanding/link-purpose-in-context))
263 | * [Link Purpose (Link Only) 2.4.9](/WAI/WCAG21/quickref/#link-purpose-link-only) ([Understanding 2.4.9](/WAI/WCAG21/Understanding/link-purpose-link-only))
264 |
265 | {::nomarkdown}
266 | {% include_cached box.html type="end" %}
267 | {:/}
268 |
269 | ## Write meaningful text alternatives for images
270 |
271 | For every image, write alternative text that provides the information or function of the image. For purely decorative images, there is no need to write alternative text.
272 |
273 | {::nomarkdown}
274 | {% include_cached box.html type="start" title="Example: Using alternative text to communicate important information" class="example" %}
275 | {:/}
276 |
277 |
278 |
279 | {% include_cached icon.html name="ex-circle" label="Wrong" %} Uninformative
280 |
281 | {% include_cached img.html src="phone_charging.png" alt="Charging phone" float="left" %}
282 |
283 |
Charging the phone: Connect the phone to a power outlet using the cable and power adaptor provided.
284 |
Alternative text for image : "Charging phone"
285 |
286 |
287 |
288 |
289 | {% include_cached icon.html name="check-circle" label="OK" %} Informative
290 |
291 | {% include_cached img.html src="phone_charging.png" alt="Plug cable into the bottom edge of the phone." float="left" %}
292 |
293 |
Charging the phone: Connect the phone to a power outlet using the cable and power adaptor provided.
294 |
Alternative text for image : "Plug cable into the bottom edge of the phone."
295 |
296 |
297 |
298 |
299 | Alternative text is usually not visible; it is included in this example just so you can see what it is.
300 |
301 | {::nomarkdown}
302 | {% include_cached box.html type="end" %}
303 | {:/}
304 |
305 | {::nomarkdown}
306 | {% include_cached box.html type="start" title="More Information" class="simple" %}
307 | {:/}
308 |
309 | * **WCAG**
310 | * [Non-text Content 1.1.1](/WAI/WCAG21/quickref/#non-text-content) ([Understanding 1.1.1](/WAI/WCAG21/Understanding/non-text-content))
311 | * **Tutorial**
312 | * [Images](/tutorials/images/)
313 | * **User Story**
314 | * [Describes the value of text alternatives to a blind user](/people-use-web/user-stories/#accountant)
315 |
316 | {::nomarkdown}
317 | {% include_cached box.html type="end" %}
318 | {:/}
319 |
320 | ## Create transcripts and captions for multimedia
321 |
322 | For audio-only content, such as a podcast, provide a transcript. For audio and visual content, such as training videos, also provide captions. Include in the transcripts and captions the spoken information and sounds that are important for understanding the content, for example, 'door creaks'. For video transcripts, also include a description of the important visual content, for example 'Athan leaves the room'.
323 |
324 | {::nomarkdown}
325 | {% include_cached box.html type="start" title="More Information" class="simple" %}
326 | {:/}
327 |
328 | * **[[Making Audio and Video Media Accessible]](/media/av/)**
329 |
330 | * **WCAG**
331 | * [Captions (Prerecorded) 1.2.2](/WAI/WCAG21/quickref/#captions-prerecorded) ([Understanding 1.2.2](/WAI/WCAG21/Understanding/captions-prerecorded))
332 | * [Audio Description or Media Alternative (Prerecorded) 1.2.3](/WAI/WCAG21/quickref/#audio-description-or-media-alternative-prerecorded) ([Understanding 1.2.3](/WAI/WCAG21/Understanding/audio-description-or-media-alternative-prerecorded))
333 | * **User Story**
334 | * [Describes how captions help a deaf student](/people-use-web/user-stories/#onlinestudent)
335 |
336 | {::nomarkdown}
337 | {% include_cached box.html type="end" %}
338 | {:/}
339 |
340 | ## Provide clear instructions
341 |
342 | Ensure that instructions, guidance, and error messages are clear, easy to understand, and avoid unnecessarily technical language. Describe input requirements, such as date formats.
343 |
344 | {::nomarkdown}
345 | {% include_cached box.html type="start" title="Example: Instructions communicate what information the user should provide" class="example" %}
346 | {:/}
347 |
348 |
361 |
362 | {::nomarkdown}
363 | {% include box.html type="end" %}
364 | {:/}
365 |
366 | {::nomarkdown}
367 | {% include box.html type="start" title="Example: Error indicates what the problem is and, possibly, how to fix it" class="example" %}
368 | {:/}
369 |
370 |
380 |
381 | {::nomarkdown}
382 | {% include_cached box.html type="end" %}
383 | {:/}
384 |
385 | {::nomarkdown}
386 | {% include_cached box.html type="start" title="More Information" class="simple" %}
387 | {:/}
388 |
389 | * **WCAG**
390 | * [Labels or Instructions 3.3.2](/WAI/WCAG21/quickref/#labels-or-instructions) ([Understanding 3.3.2](/WAI/WCAG21/Understanding/labels-or-instructions))
391 | * **User Story**
392 | * [Describes simple instructions help someone with learning difficulties](/people-use-web/user-stories/#supermarketassistant)
393 |
394 | {::nomarkdown}
395 | {% include_cached box.html type="end" %}
396 | {:/}
397 |
398 | ## Keep content clear and concise
399 |
400 | Use simple language and formatting, as appropriate for the context.
401 |
402 | * Write in short, clear sentences and paragraphs.
403 | * Avoid using unnecessarily complex words and phrases.
404 | * Expand acronyms on first use. For example, Web Content Accessibility Guidelines (WCAG).
405 | * Consider providing a glossary for terms readers may not know.
406 | * Use list formatting as appropriate.
407 | * Consider using images, illustrations, video, audio, and symbols to help clarify meaning.
408 |
409 | {::nomarkdown}
410 | {% include_cached box.html type="start" title="Example: Making content readable and understandable" class="example" %}
411 | {:/}
412 |
413 |
414 |
415 | {% include_cached icon.html name="ex-circle" label="Wrong" %} Unnecessarily complex
416 |
417 |
CPP: In the event of a vehicular collision, a company assigned representative will seek to ascertain the extent and cause of damages to property belonging to all parties involved. Once our representative obtains information that allows us to understand the causality, we may or may not assign appropriate monetary compensation. The resulting decision may occasion one of the following options: the claim is not approved and is assigned a rejected status, the status of the claim is ambiguous and will require additional information before further processing can occur, the claim is partially approved and reduced payment is assigned and issued, or claim is fully approved and total claim payment is assigned and issued.
418 |
419 |
420 |
421 | {% include_cached icon.html name="check-circle" label="OK" %} Easier to understand
422 |
423 |
Claims Processing Procedure (CPP): If you have a car accident, our agent will investigate. Findings will determine any claim payment. This could result in:
424 |
425 | Approved claim - full payment
426 | Partially approved claim - reduced payment
427 | Undetermined claim - more information needed
428 | Rejected claim - no payment
429 |
430 |
{% include_cached img.html src="clear_text_diagram.png" alt="" style="max-width:100%" %}
431 |
432 |
433 |
434 |
435 | {::nomarkdown}
436 | {% include_cached box.html type="end" %}
437 | {:/}
438 |
439 | {::nomarkdown}
440 | {% include_cached box.html type="start" title="More Information" class="simple" %}
441 | {:/}
442 |
443 | * **WCAG**
444 | * [Reading Level 3.1.5](/WAI/WCAG21/quickref/#reading-level) ([Understanding 3.1.5](/WAI/WCAG21/Understanding/reading-level))
445 | * [Unusual Words 3.1.3](/WAI/WCAG21/quickref/#unusual-words) ([Understanding 3.1.3](/WAI/WCAG21/Understanding/unusual-words))
446 | * [Abbreviations 3.1.4](/WAI/WCAG21/quickref/#abbreviations) ([Understanding 3.1.4](/WAI/WCAG21/Understanding/abbreviations))
447 | * **User Story**
448 | * [User with reading disabilities benefits from easy to read text](/people-use-web/user-stories/#classroomstudent)
449 |
450 | {::nomarkdown}
451 | {% include_cached box.html type="end" %}
452 | {:/}
453 |
454 | {::nomarkdown}
455 | {% include box.html type="start" title="Learn More About Accessibility" class="large" icon="readmore" %}
456 | {:/}
457 |
458 | These tips are a few of the things you need to consider for web accessibility. Additional guidance on writing that meets the accessibility needs of people with cognitive and learning disabilities is in **[Use Clear and Understandable Content](https://www.w3.org/WAI/WCAG2/supplemental/objectives/o3-clear-content/)**.
459 |
460 | The following resources help you learn why accessibility is important, and about guidelines for making the web more accessible to people with disabilities.
461 |
462 | * [Accessibility Introduction](/fundamentals/accessibility-intro/) — Introduces accessibility and provides links to many helpful resources
463 | * [Accessibility Principles](/fundamentals/accessibility-principles/) — An introduction to the WCAG requirements
464 | * [How people with disabilities use the web](/people-use-web/) — Real-life examples showing the importance of accessibility for people with disabilities
465 | * [How to Meet WCAG (Quick Reference)](/WAI/WCAG21/quickref/) — customizable reference of all WCAG requirements and techniques
466 |
467 | {::nomarkdown}
468 | {% include box.html type="end" %}
469 | {:/}
470 |
--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 | command = "git submodule update --init --remote && bundle exec jekyll build --config '_config.yml,_config_staging.yml'"
3 | publish = "_site"
4 |
5 | [build.environment]
6 | RUBY_VERSION = "3.3.3"
7 |
8 | [[redirects]]
9 | from = "/"
10 | to = "/tips"
11 |
12 | [dev]
13 | publish = "_site"
14 | framework = "#static"
15 |
16 |
--------------------------------------------------------------------------------
/w3c.json:
--------------------------------------------------------------------------------
1 | {
2 | "group": 35532,
3 | "contacts": [
4 | "slhenry",
5 | "yatil"
6 | ],
7 | "shortName": "wai-quick-start",
8 | "repo-type": "article",
9 | "policy": "open"
10 | }
--------------------------------------------------------------------------------