מדוע ליצור חומר נגישות

טפסים באינטרנט הם בין הרכיבים הנפוצים וההכרחיים ביותר של חוויות דיגיטליות.הם דפי כניסה כוח, זרמי צ'ק, הגשת סקר, בקשות מגע, אינספור אינטראקציות אחרות.עבור משתמשים עם מוגבלות חזותית, מוטורית או קוגניטיבית, צורה שאינה בנויה בצורה גרועה יכולה להיות מחסום בלתי ניתן למדידה. נגישות - מבטיח כי כל המשתמשים יכולים לתפוס, להבין, לנווט, אינטראקציה עם צורות - לא רק מחויבות אתית; זה דורשות משפטית בשפע מעשי ולהגדיל את היתרונות המעשיים רבים.

טכנולוגיות מסייעות, כגון קוראי מסך, תוכנת זיהוי קול ומכשירי מתג, מסתמכות על HTML סמנטטי בנוי היטב ו- RIT (בקשות אינטרנט עשירות זמינות) תכונות להעביר את השליטה, את מטרותיהם, ואת המדינות הנוכחיות.ללא רמזים אלה, משתמשים עשויים להיתקל בתוויתות חסרות או מבלבלות, לא מודעים לתחומים הנדרשים, לא להבין שגיאות אימות, או להיות לא מסוגלים להשלים הגשת.

מאמר זה חוקר כיצד JavaScript יכול לשמש כדי לשפר את הגישה צורה באמצעות היישום דינמי וניהול של תוויות RIT.We נבחן תכונות ליבה RIT עבור טפסים, ללכת דרך דפוסי JavaScript בעולם האמיתי לשיפור בהירות התווית, תקשורת שגיאה, ועדכוני אזורי חי, ולספק דוגמאות קוד פעולה ניתן להתאים באופן מיידי.

הבנת תוויות NZ ותפקידן בצורות

RIT מספקת מערך תכונות שמשלבות את HTML כדי לשפר את הנגישות של תוכן דינמי ובקרת ממשק משתמש מורכבות.עבור טפסים, התכונות הקריטיות ביותר כוללות:

  • (ב) ויקרא י"א: "בְּאֶת אֱלֹהִים אֱלֹהִים אֱלֹהִים אֱלֹהִים" (במדבר כ"ד)
  • (ב) ⁇ :0 ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇
  • (ב) ⁇ :0 ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇
  • (ב) ⁇ :5 ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇
  • (ב) [ה]ה']: [ה]ב'], [ה'], [ה']'[דרוש מקור]'], אין דבר שערך השדה אינו מספק את חוקי האימות.
  • [ה]ה' [ה']: [ה'] [ה']] [ה'] [ה']'[ה]']'[ה']'[ה]']'[ה']'[ה]']'[ה']'[ה']'[ה']'[ה']']'[ה']']'[ה']'[ה']']'[ה'[ה']']'[ה'[ה']'[ה'[ה'[ה'[ה']'[ה']']']'[ה'[ה'[ה'[ה']']']']']']']']

תכונות אלה אינן משנות את המראה החזותי של הצורה; הן משפיעות רק על האופן שבו טכנולוגיות מסייעות מפרשות ומכריזות על האלמנטים.השימוש הנכון שלהן הוא אבן הפינה של עיצוב צורות נגיש.

כאשר ה- HTML אינו מספיק: הצורך ב- JavaScript

(א) ניתן ליצור טפסים נגישים: באמצעות רכיבי FLT:9 עם תכונות (FLT:10), ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇

  • טפסים שנבנו או משתנים בצד הלקוח (למשל, יישומי דף יחיד).
  • שדות מצבים המופיעים או נעלמים על בסיס בחירת משתמשים.
  • מרכיבים בצורת אישית (למשל, תיבות צ'קוקס מותאם אישית, תיבות בחירה) אשר מאבדים נגישות מולדת.
  • משוב אימות בזמן אמת המעדכן הודעות שגיאה ללא עומס דף.
  • צורות מרובות-שלב או מכשף שבו יש לנהל את המיקוד ואת השינויים בהקשר.

JavaScript מגויס את הפערים הללו באמצעות הקצאה מעשית, עדכון, והסרת תכונות RIT כמשתמש אינטראקציה עם הממשק.זה מבטיח שמשתמשים בטכנולוגיה מסייעת יקבלו את אותו מידע וסימנים כמו משתמשים מצופים.

תבניות הליבה: שימוש ב- JavaScript כדי להוסיף ולעדכן תוויות NZ

פרק 1: התפטרות (FLT:15) לפריטים ללא תווית בלתי אפשרית

לפעמים מגבלות עיצוב חזותיות אומרות כי קלט עם טקסט גלוי הוא לא מעשי.במקרים אלה, אספקת שם נגיש.הגישה הפשוטה ביותר היא להוסיף אותו ישירות ב- HTML, אבל כאשר צורה נוצרת באופן דינמי על ידי רכיבי JavaScript או מובא מ- API, אתה יכול להזריק אותו לאחר שהרכיב נוצר.

// After a dynamic input is created or added to the DOM
const searchInput = document.querySelector('.search-field');
if (searchInput) {
 searchInput.setAttribute('aria-label', 'Search website');
}

(ה) להימנע מחיוב: אם קיימת תווית גלויה, אך לא קשורה באמצעות ההרחבה (FLT:18 או קינון), מומלץ להשתמש בהנחיות כאשר כל תכונה מתאימה.

קטגוריה 2: Enhancing Label Association with FLT:20

אם קבוצה של אלמנטים (כמו כפתורי רדיו) מתוארת על ידי כותרת גלויה, ניתן להפנות את הכותרת מכל שליטה. JavaScript ניתן להשתמש כדי לאסוף את מזהה הכותרת וליישם את התכונה לכל קלטות רלוונטיות.

const groupHeading = document.getElementById('shipping-options-heading');
if (groupHeading) {
 const radioButtons = document.querySelectorAll('input[name="shipping"]');
 radioButtons.forEach(radio => {
 radio.setAttribute('aria-labelledby', groupHeading.id);
 });
}

זה יותר חזק מאשר שימוש ב-FLT:22 כי הוא משתמש מחדש תוכן גלוי קיים, לטובת משתמשים אשר מסתמכים על הגדרות טקסט מותאם אישית או הגדרות פועל מסך.

תבנית 3: Live Zone הודעות על שינויים דינמיים

כאשר התוכן של טופס משתנה ללא עומס דף מלא - כגון הצגת שדה קוד הנחה לאחר תיבת צ'ק הוא קרק - משתמשי מסך לא יכולים להיות מודעים לתוכן החדש.

const toggle = document.getElementById('promo-toggle');
const promoContainer = document.getElementById('promo-code-container');
promoContainer.setAttribute('aria-live', 'polite');

toggle.addEventListener('change', function () {
 if (this.checked) {
 promoContainer.classList.remove('hidden');
 promoContainer.innerHTML = `
 <label for="promo-code">Enter promo code</label>
 <input type="text" id="promo-code">
 `;
 document.getElementById('promo-code').setAttribute('aria-label', 'Promotion code');
 } else {
 promoContainer.classList.add('hidden');
 promoContainer.innerHTML = '';
 }
});

שימו לב כי אזורים פועלים בצורה הטובה ביותר עבור הודעות פשוטות; לקבלת שליטה נוספת, לשקול שימוש בגורם אזורי חיים ייעודי שאתה מעדכן באופן ידני.

דינמיזציה ותקשורת שגיאה

אחת מהשימושים המשפיעים ביותר ב- JavaScript בצורות נגישות היא טיפול בשגיאות אימות (ה-FLT:0WCAG Success קריטריון 3.3.1 (Error Identification)FLT:1 דורש שכל טעות קלט תתואר בטקסט למשתמש. 940 תכונות כמו FLT:26 ו-FLT:27 הם המפתח לפגישת דרישה זו דינמית.

« « « § § § § § § § § § ;

כאשר שדה צורה נכשל אימות (או מקומי או מותאם אישית), להגדיר את זה (או להגדיר ל-FLT:30) כאשר השגיאה תוקן.

const emailInput = document.getElementById('email');

function validateEmail(value) {
 const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
 emailInput.setAttribute('aria-invalid', !isValid);
 return isValid;
}

emailInput.addEventListener('blur', function () {
 validateEmail(this.value);
});

קישור להודעות שגיאה (FLT:32)

(הטקסט השגוי חייב להיות קשור באופן מתודולוגי לתחום השימוש (FLT:34 ), כדי להצביע על מיכל הודעה, או FLT:35 עבור החדש, יותר מדויק תכונה.

const emailInput = document.getElementById('email');
const errorContainer = document.getElementById('email-error');

emailInput.addEventListener('invalid', function (event) {
 event.preventDefault(); // prevent native popup
 this.setAttribute('aria-invalid', 'true');
 this.setAttribute('aria-describedby', 'email-error');
 errorContainer.textContent = 'Please enter a valid email address.';
 errorContainer.style.display = 'block';
});

emailInput.addEventListener('input', function () {
 if (this.validity.valid) {
 this.setAttribute('aria-invalid', 'false');
 this.removeAttribute('aria-describedby');
 errorContainer.textContent = '';
 errorContainer.style.display = 'none';
 }
});

(הופנה מהדף ה-FLT:37) הוא תומך בקוראים חדשים יותר, אך הוא מוסיף כי הוא תואם יותר ויותר.

ניהול זרימה כוללת

בצורות מרובות שלבים או כאשר שגיאות מופיעות, ניהול מיקוד הוא קריטי. JavaScript יכול לנוע באופן יזום להתמקד בשדה הראשון לא חוקי או סיכום של שגיאות.תמיד להודיע על הסיבה למהלך באמצעות אזור LT:39 או כותרת.

function focusFirstError() {
 const firstError = document.querySelector('[aria-invalid="true"]');
 if (firstError) {
 firstError.focus();
 // Optionally announce
 const announcer = document.getElementById('form-feedback');
 announcer.textContent = 'The form contains errors. The first invalid field has been focused.';
 announcer.setAttribute('aria-live', 'assertive');
 }
}

document.getElementById('submit-btn').addEventListener('click', function (e) {
 if (!validateForm()) {
 e.preventDefault();
 focusFirstError();
 }
});

היזהרו מ-FLT:41; השתמשו ב-FLT:42 עבור עדכונים לא קריטיים.ניהול פוקוס ללא הודעה יכול לבלבל משתמשים, כפי שהם עשויים לא להבין מדוע הם עברו.

בקרת טופסי מכס

פרויקטים רבים משתמשים בתיבת צ'קפסים בסגנון מותאם אישית, כפתורי רדיו, תפריטים נבחרים, או מתגי קליטינגלג.אלה מאבדים סמנטיה Native ודורשים תפקידים, מדינות ונכסים המיושמים באמצעות JavaScript.לדוגמה, תיבת בדיקה אישית צריכה (FLT:43,FLT:44, FLT:44), ומאזינים באירוע מקלדת.

const customCheckbox = document.getElementById('custom-checkbox');

customCheckbox.setAttribute('role', 'checkbox');
customCheckbox.setAttribute('aria-checked', 'false');
customCheckbox.setAttribute('tabindex', '0');
customCheckbox.setAttribute('aria-label', 'Accept terms and conditions');

customCheckbox.addEventListener('click', function () {
 const isChecked = this.getAttribute('aria-checked') === 'true' ? false : true;
 this.setAttribute('aria-checked', isChecked);
 this.classList.toggle('checked', isChecked);
});

customCheckbox.addEventListener('keydown', function (e) {
 if (e.key === ' ' || e.key === 'Enter') {
 e.preventDefault();
 this.click();
 }
});

בעוד דפוסים כאלה אפשריים, מעדיפים רכיבי HTML מקומיים כאשר הם אפשריים: הם באים עם נגישות מובנה, טיפול מקלדת, ו- JavaScript מינימלי מעל הראש.

Best Practices for Using JavaScript with 634

  • (ב) [15] החל ב-HTMLS.FreaLT:1, תמיד מתחיל עם אגודות אגודות נאותות (FLT:46 , מהדורות של RIT) וקלטי הילידים לפני השכבות NZ צריך לתקן את מה ש-HTML לא יכול.
  • (ב) [13] ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇
  • (ב) לא תגבר על התנהגותם של בני אדם (ב"ג:א) למשל, אל תשכפל את העבודה (FLT:49) עם אותו אלמנט אלא אם כן אתה צריך לתמוך בסוכני משתמשים מבוגרים; במקום זאת, לתת לתכונה Native לעשות את העבודה ורק להוסיף 634 היכן צריך.
  • (FLT:0)Test עם טכנולוגיות מסייעות אמיתיות.FIRLT:1) תקפים אוטומטיים לתפוס רק 30% מבעיות נגישות.תמיד לבדוק עם קוראי מסך (NVDA, VoiceOver, JAWS) וניווט מקלדת בלבד.
  • (ב) משתמשים בעלי מוגבלויות קוגניטיביות נהנים מתוויות גלויות (שימוש ב-FLT:51 או FLT:52) יש להשתמש רק כאשר העיצוב באמת לא יכול להכיל טקסט גלוי.
  • (ב) ,0) אזורי מגורים אלה, באופן גלוי, ⁇ 1 (השתמשו ב-FLT:53) יכולים להציף את משתמשי המסך.PreferFLT:54 עבור עדכונים שגרתיים ו-FLT:55 רק עבור הודעות רגישות לזמן (למשל, יצירת הצלחה / תיקון).

דוגמה מלאה לעבודה: גישה ל- Dynamicרישום

להלן דוגמה בולטת לכך שקשר בין מספר דפוסים: שדות מותניים, תוויות דינמיות 940, טיפול בשגיאה אימות וניהול מיקוד.קוד זה הוא ייצור יקר אך פשוט לבהירות.

<form id="registration-form" novalidate>
 <label for="username">Username (required)</label>
 <input type="text" id="username" required>

 <label for="newsletter">Subscribe to newsletter</label>
 <input type="checkbox" id="newsletter">
 <div id="email-group" hidden>
 <label for="email">Email</label>
 <input type="email" id="email">
 </div>

 <button type="submit">Register</button>
 <div id="form-errors" aria-live="polite"></div>
</form>

<script>
 const newsletter = document.getElementById('newsletter');
 const emailGroup = document.getElementById('email-group');
 const emailInput = document.getElementById('email');
 const form = document.getElementById('registration-form');
 const errorDisplay = document.getElementById('form-errors');

 // Show email field only if newsletter is checked
 newsletter.addEventListener('change', function () {
 if (this.checked) {
 emailGroup.hidden = false;
 emailInput.setAttribute('aria-label', 'Email address for newsletter');
 emailInput.setAttribute('aria-required', 'true');
 emailInput.required = true;
 } else {
 emailGroup.hidden = true;
 emailInput.removeAttribute('aria-label');
 emailInput.removeAttribute('aria-required');
 emailInput.required = false;
 emailInput.value = '';
 }
 });

 // Client-side validation and error display
 form.addEventListener('submit', function (event) {
 event.preventDefault();
 let errors = [];
 const username = document.getElementById('username');
 if (!username.value.trim()) {
 username.setAttribute('aria-invalid', 'true');
 username.setAttribute('aria-describedby', 'form-errors');
 errors.push('Username is required.');
 } else {
 username.setAttribute('aria-invalid', 'false');
 username.removeAttribute('aria-describedby');
 }

 if (!emailGroup.hidden && !emailInput.value.trim()) {
 emailInput.setAttribute('aria-invalid', 'true');
 emailInput.setAttribute('aria-describedby', 'form-errors');
 errors.push('Email is required for newsletter subscription.');
 } else if (!emailGroup.hidden) {
 emailInput.setAttribute('aria-invalid', 'false');
 emailInput.removeAttribute('aria-describedby');
 }

 errorDisplay.textContent = errors.join(' ');

 if (errors.length > 0) {
 // Focus first error field
 const firstErrorField = document.querySelector('[aria-invalid="true"]');
 if (firstErrorField) firstErrorField.focus();
 } else {
 // Successful submission (would send data)
 errorDisplay.textContent = 'Registration successful!';
 errorDisplay.setAttribute('aria-live', 'assertive');
 }
 });
</script>

דוגמה זו מראה כיצד JavaScript יכול להוסיף באופן דינמי את ה-FLT:57 כאשר שדה הדואר האלקטרוני מופיע, להגדיר את אזור ה-FLT:58 באופן תנאי, לנהל את FLT:59 ו-FLT:60 במהלך אימות, ולהשתמש ב-FLT:61 אזור עבור מסכמי שגיאה.

מסקנה

טפסים נגישים אינם מותרות - הם דרישה בסיסית לגישה דיגיטלית שוויונית.על ידי שילוב תכונות RIT עם JavaScript, מפתחים יכולים ליצור ממשקים להגיב פעולות המשתמש תוך שמירה על תקשורת ברורה ועקבית עם טכנולוגיות מסייעות.התבניות המכוסות במאמר זה - דינמיות, הודעות אזוריות, קישור, מיקוד, ניהול ובקרה אישית - לספק ערכת כלים מעשית עבור כל מפתח עבודה עם צורות אינטראקטיביות.

תמיד תזכור ש- RIT הוא תוספת, לא תחליף.התחל עם HTML סמנטאלי נקי, לבדוק עם טכנולוגיות מסייעות אמיתיות, ו-Iterate מבוסס על משוב המשתמש.כאשר נעשה שימוש בחשיבה, JavaScript ו- RIT יחד יכול להפוך צורה ממקור של תסכול לחוויה חלקה, כוללת.