Բովանդակությունը ճիշտ թաքցնել

Բովանդակությունը թաքցնելու բոլոր մեթոդները հարմար չեն էկրան կարդացող ծրագրերի կամ այլ հասանելի տեխնոլոգիաներ օգտագործողների համար։ Այս էջում նկարագրված են հիմնական մեթոդները բովանդակությունը թաքցնելու համար՝ ինչպես բոլոր օգտատերերի, այնպես էլ էկրան կարդացող ծրագրերի օգտատերերի համար։

Բովանդակությունը դարձնել անտեսանելի (տեսողականորեն թաքցված)

Եթե էջի տարրը՝

• համարվում է ինտերակտիվ տարր, բայց պետք է անտեսանելի լինի, որպեսզի այն կարողանա թեմատիկ լինել (օրինակ՝ հղում, չեկբոքս, սվիչ կամ ֆորմայի կառավարման տարր՝ յուրահատուկ ոճերով),
• համարվում է վերնագիր կամ պիտակ ինչ-որ բանի համար, որի նպատակը պարզ է (և հետևաբար վերնագիրը/պիտակը չպետք է ցուցադրվի տեսող օգտատերերին՝ օրինակ՝ բաժնի պիտակ կամ ֆորմայի տարրի պիտակ),
• չպետք է տեսանելի լինի տեսող օգտատերերին, բայց պետք է լինի տեսանելի էկրան կարդացող ծրագրի օգտատերերի համար,

...ապա դուք պետք է այն դարձնեք անտեսանելի (տեսողականորեն թաքցված)։

Դրա համար կարող եք օգտագործել՝

տողին տալ visually-hidden դաս,
Drupal 8-ում կարգավորել դաշտերի պիտակը «- Visually Hidden -» կետով էկրանային կառավարման էջում՝ սուբտիպի համար (օրինակ՝ «Թեգեր» դաշտը Article տիպում),
օգտագործել CSS, որպեսզի տարրը գտնվի էջի տեսանելի գոտուց դուրս, կամ
օգտագործել CSS

position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
height: 1px;
width: 1px;
word-wrap: normal;

տարբերակում։

Օրինակ՝
Սխալի հաղորդագրության վերնագրի, նախազգուշացման և կարգավիճակի թաքցնում։

Բացատրություն՝
Շատ թեմաներում կարգավիճակի հաղորդագրությունները ցուցադրվում են ակնառու գույնի շրջանակներում, որպեսզի գրավեն տեսող օգտատերերի ուշադրությունը, սակայն WCAG 2.0 1.3.3 բաժնում նշվում է, որ հասկանալը և օգտվելը չպետք է հիմնված լինի միայն կոմպոնենտների զգայական հատկանիշների վրա, ինչպիսիք են ձևը, չափը, տեսողական դիրքը կամ ուղղությունը։

Առանց վերնագրի, որը նշում է կարգավիճակի հաղորդագրությունները, դրանք կարող են շփոթեցնել էկրան կարդացող ծրագրի օգտատերերին։

Համակարգչային շատ էկրան կարդացող ծրագրեր կարող են սանդղակի միջոցով անցնել էջի վերնագրերով։ Հաղորդագրությունների վերնագրի տրման միջոցով հեշտանում է դրանց որոնումը։

Բովանդակությունը անտեսանելի դարձնել մինչև որ օգտատերը չկատարվի նրան ստեղնաշարով

Եթե տարրը էջում՝

• հղում է, որը օգնում է օգտատերերին անցնել հիմնական բովանդակին կամ հիմնական նավիգացիային,
• փոխարինում է այլ տարրերի, որոնք կարելի է օգտագործել միայն մկնիկով, կամ
• չպետք է լինի տեսանելի տեսող օգտատերերին, եթե նրանք չեն օգտագործում ստեղնաշարը նավիգացման համար,

...ապա դուք պետք է այն անտեսանելի դարձնեք մինչև որ օգտատերը ստեղնաշարով չկատարվի նրան։

Դրա համար կարող եք օգտագործել՝

• տողին տալ visually-hidden և focusable դասեր, կամ
• օգտագործել CSS

css_selector_for_my_element {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
  width: 1px;
  word-wrap: normal;
}
css_selector_for_my_element:active,
css_selector_for_my_element:focus {
  position: static !important;
  clip: auto;
  overflow: visible;
  height: auto;
  width: auto;
}

որտեղ css_selector_for_my_element–ն այն սելեկտորն է, որի տարրը ցանկանում եք անտեսանելի դարձնել մինչև որ ստեղնաշարով որևէ մեկը նրա վրա չկատարվի։

Օրինակ՝
«Գնալ դեպի հիմնական բովանդակություն» հղումը յուրաքանչյուր էջի վերևում հիմնական թեմաներում։

Բացատրություն՝
Ստեղնաշարով և էկրան կարդացող ծրագրերով օգտվողները ցանկանում են արագ անցնել էջի հիմնական բովանդակությանը։

WCAG 2.0 2.4.1 բաժնի համապատասխանելու համար պետք է ապահովել միջոցներ կրկնվող բովանդակության շրջանցման համար։

Բովանդակությունը ամբողջովին թաքցնել բոլոր օգտատերերից

Եթե տարրը էջում՝

• չի պետք ցուցադրվել մինչև որ JavaScript իրադարձությունը այն ցուցադրի,
• չի վերաբերվում տեսող կամ էկրան կարդացող ծրագրերի օգտատերերին կոնտեքստում,
• հունկցիոնալ արժեքներ է պարունակում, որոնք կարդացվում/գրվում են JavaScript-ով, բայց երբեք չպետք է ցուցադրվեն ուղիղ, կամ
• հիմնականում չպետք է լինի տեսանելի տեսող կամ էկրան կարդացող ծրագրերի օգտատերերի համար,

...ապա դուք պետք է այն ամբողջությամբ թաքցնեք բոլորից։

Դրա համար կարող եք օգտագործել՝

• տողին տալ hidden դաս (Drupal 8),
• եթե դա դաշտ է սուբտիպում, սահմանել դրա ձևաչափը որպես «- Hidden -» էկրանային կառավարման էջում,
• եթե դա դաշտի պիտակ է սուբտիպում, սահմանել դրա ցուցադրման պիտակը որպես «- Hidden -» էկրանային կառավարման էջում, կամ
• օգտագործել CSS display: none;

Օրինակ՝
Գույնի մոդուլի նախադիտման տարածքի թաքցնում մինչև որ գործարկվի JavaScript:

/* color.css (Drupal 7 և 8) */
#preview {
  display: none;
}

Բացատրություն՝
Նախադիտումը չի աշխատի, եթե JavaScript-ը չի աշխատում, ուստի ոչ ոքի պետք չէ։

Բացահայտումներ

«display:none»-ի սխալ օգտագործումը հաճախ հանդիպում է, երբ ֆորմայի պիտակը կամ վերնագիրը թաքցնում են՝ փոխելու էջի տեսքը։ Սակայն դա դարձնում է այդ ֆորմայի տարրը անպիտան էկրան կարդացող ծրագրերի օգտատերերի համար։

Օրինակ՝ եթե ֆորմայի պիտակը թաքցնեք display:none-ով, էկրան կարդացող ծրագրի օգտատերը կարող է ասել՝ «Ես ունեմ պարտադիր տեքստային դաշտ, բայց չեմ հասկանում, թե ինչի համար է»։ Այս իրավիճակում ավելի ճիշտ կլինի բովանդակությունը դարձնել անտեսանելի (տեսողականորեն թաքցված)։

Բովանդակությունը թաքցնել էկրան կարդացող ծրագրերից

Եթե տարրը էջում՝

• կարող է շփոթեցնել օգտատերերին, կամ
• պետք է տեսանելի լինի միայն տեսող օգտատերերի համար,

...ապա դուք պետք է այն թաքցնեք էկրան կարդացող ծրագրերից։

Դրա համար կարող եք օգտագործել՝

• տողին տալ aria-hidden="true" հատկանիշը։

Օրինակ՝
Փնտրման ֆիլտրը մաքրելու կառավարման տարրը ցույց է տալիս «x» միայն տեսող օգտատերերին, իսկ էկրան կարդացող ծրագրի օգտատերերի համար տրամադրում է տեսանելիորեն թաքցված հասանելի ցուցումներ՝

Currently filtering by: <a href="...">Module <span class="visually-hidden">Click to remove this filter.</span> <span aria-hidden="true">x</span></a>

Բացատրություն՝
Այն արդեն ունի հասանելի այլընտրանքային տեքստ։

Ուղղակի «x»-ը լսելը, նույնիսկ այլընտրանքային տեքստից հետո, կարող է շփոթեցնել էկրան կարդացող ծրագրի օգտատերերին։

Բացահայտումներ

Բովանդակությունը, որը թաքցված է էկրան կարդացող ծրագրերից, նշանակում է, որ այն օգտագործողները, ովքեր օգտվում են այդ տեխնոլոգիաներից, չեն կարող այն ընկալել կամ փոխգործակցել դրա հետ։ WCAG 2.0-ի 1.1 բաժնի պահանջներին համապատասխանելու համար դուք պետք է տրամադրեք հասանելի այլընտրանքային բովանդակություն, հակառակ դեպքում օգտագործողները, ովքեր օգտվում են աջակցող տեխնոլոգիաներից, չեն կարող այն օգտագործել։

Լրացուցիչ տեղեկատվություն անտեսանելի բովանդակության մասին

• WebAIM-ի առաջարկություններ
• display:none և էկրան կարդացող ծրագրերը