ვებ წვდომის ჩამონათვალი

ხელმისაწვდომობა არის ვებსაიტების უზრუნველყოფის პრაქტიკა იმის უზრუნველსაყოფად, რომ შეზღუდული შესაძლებლობების მქონე პირები ვებსაიტი ერთნაირად ხელმისაწვდომია, ამიტომ მათ აქვთ თანაბარი ხელმისაწვდომობა იმ საიტებზე და მომსახურებებზე. ეს პროფესიონალური ვებ დიზაინის და განვითარების განუყოფელი ნაწილია.


Contents

რატომ უნდა ვიზრუნოთ ხელმისაწვდომობა?

არსებობს მრავალი მიზეზი, რის გამოც დეველოპერებმა, დიზაინერებმა და მათმა დამსაქმებლებმა / კლიენტებმა უნდა უზრუნველყონ, რომ წვდომა ვებ-განვითარების პროცესის ადრეული და განუყოფელი ნაწილია..

  • ბევრ ქვეყანაში, მაგალითად, აშშ, ევროკავშირი, დიდი ბრიტანეთი, ისრაელი და იაპონია, კანონიერი მოთხოვნაა, არ მოხდეს დისკრიმინაცია ადამიანების ინვალიდობის გამო. შარშან აშშ – ში, შეტანილი იქნა 2,235 ADA ვებსაიტის ახალი ვებ – გვერდი ფედერალურ სასამართლოში. ეს არის ერთი საათში.
  • ხელმისაწვდომი საიტები უფრო საძიებო სისტემებში უკეთ კოდირებულ, უფრო მძლავრ და რეიტინგულ მაჩვენებლებს უკეთებენ.
  • ხელმისაწვდომი საიტები უფრო გამოსადეგია შეზღუდული შესაძლებლობის მქონე ვიზიტორებისთვის, რაც უფრო მეტ კმაყოფილებას და გადაქცევას იწვევს.
  • მიუწვდომელი საიტები ცუდია ბიზნესისთვის. 2019 წელს, ა დიდი ბრიტანეთის გამოკითხვა დაადგინა, რომ 4 მილიონზე მეტმა ადამიანმა მიატოვა საცალო ვებსაიტის განთავსება, მათი პოვნის ხელმისაწვდომობის ბარიერების გამო. ამ დაკარგულმა ბიზნესმა, “Click-Away Pound”, 17.1 მილიარდი £ შეადგინა. ეს არის მილიარდი. მარტო ბრიტანეთში.
  • პოტენციური მომხმარებლების ნებაყოფლობით მიტოვება ცუდი საქმეა.

საერთო სტანდარტები და პრობლემები

საბედნიეროდ, W3C (სხეული, რომელიც აწარმოებს ბევრ სტანდარტს, რომელსაც ვებ ეყრდნობა) აქვს სტანდარტი იმის შესახებ, თუ როგორ გახადოს ვებსაიტები. ე.წ. ვებ შინაარსის წვდომის სახელმძღვანელო მითითებები (WCAG). შესაბამისობის სამი დონეა (A, AA, AAA), სადაც “A” არის წვდომის ყველაზე დაბალი დონე. გირჩევთ, რომ მიზნად ისახოთ AA დონე.

სამწუხაროდ, WCAG არის გრძელი, მშრალი და ძალიან ტექნიკური წაკითხული, ამიტომ გადავხედოთ რა შეგიძლიათ გააკეთოთ შედარებით მარტივად და მიიღოთ ყველაზე დიდი ზეთი თქვენი მამაკაცი. ეს არ არის ყველაფერი, რაც თქვენ გჭირდებათ იცოდეთ ჩამონათვალი; ეს არის ყველაზე გავრცელებული შეცდომების ჩამონათვალი, და შეცდომები, რომლებსაც შეზღუდული შესაძლებლობის მქონე პირები აცხადებენ, რომ მათი მთავარი ბლოკატორები არიან, პრაქტიკული შემოთავაზებებით პრობლემების გადასაჭრელად. ყველა გარე ბმულები იხსნება ახალ ჩანართში.

Click-Away Pound- ის გამოკითხვისას, შეზღუდული შესაძლებლობის მქონე რესპონდენტებს ჰკითხეს, თუ რა იყო მთავარი ბლოკები მათთვის, რომლებმაც შესყიდვები დაასრულეს. აქ არის ყველაზე მაღალი ბარიერები (დაიშვება მრავალჯერადი პასუხი):

  1. ხალხმრავალი გვერდები ძალიან დიდი შინაარსით – 66%
  2. reCAPTCHA ტესტები – 59%
  3. ცუდი lexibility (კონტრასტი, ტექსტის განლაგება) 56%
  4. მოძრავი სურათებისა და გრაფიკის განადგურება – 53%
  5. ინფორმაცია ცუდი კავშირის შესახებ – 59% (ეკრანის მკითხველებისთვის 77%)
  6. ფორმა შევსება 56%

როგორ გავაუმჯობესოთ ვებ – გვერდის ხელმისაწვდომობა

პირველ რიგში, გაითვალისწინეთ, რომ ტოპ 5-დან არცერთი არ არის ტექნიკური საკითხი – ისინი წარმოადგენენ დიზაინის ან საავტორო გადაწერის შეცდომებს.

1) ძალიან შინაარსი

მოკლედ: გაანაწილეთ ტექსტი განყოფილებებად სათაურებითა და ტყვიით მოცული სიებით. გამოიყენეთ მარტივი ენა.

ცნობილია, რომ როგორც არჩევანის რაოდენობა იზრდება, ასევე იზრდება ინფორმაციის შეგროვებისათვის საჭირო ძალისხმევა და მიიღოს კარგი გადაწყვეტილებები. ეს იგივეა ზედმეტი შინაარსით – ის მალე ხდება უზომო. შინაარსის აუცილებლობაზე გადასვლა შრომატევადი ხელოვნებაა; როგორც მარკ ტვინმა (სავარაუდოდ) დაწერა: ”მე არ მქონდა დრო, რომ დავწერო მოკლე წერილი, ამის ნაცვლად გრძელი წერილი დავწერე.”

უახლესი წიგნი წერა არის დიზაინი ვარაუდობს

ადამიანებს სურთ შეძლონ ტექსტის გრძელი ბლოკების გადახდა, განურჩევლად მხედველობიდან ან აუდიოდან, ამიტომ ძალზე მნიშვნელოვანია თქვენი გრძივი ნაწერის სტრუქტურის შექმნა თავებით, მოკლე აბზაციებით და სხვა შინაარსის დიზაინის საუკეთესო პრაქტიკებით..

Ისე:

  • მხოლოდ ერთი

    გვერდზე.

  • გამოიყენეთ ქვეთავები თავისუფლად; ეს შლის ხედვის მომხმარებლებისთვის ტექსტის „ფილის“ გაშლას, ხოლო დამხმარე ტექნოლოგიების მომხმარებლებს, როგორიცაა ეკრანის მკითხველი, შეგიძლიათ გამოიყენოთ მოკლედ დაჭრილი კლავიატურა, სათაურთა შორის გადახტომისათვის ან სათაური სტრუქტურისგან მიიღონ შინაარსის გონებრივი რუკა..
  • არ გამოტოვოთ სათაურების დონე. მაგალითად, თუ იყენებთ ან

    , დარწმუნდით, რომ მას წინ უძღვის ან

    .

  • გამოიყენეთ ბიულეტენი სიები (ასეც!), რომლებიც სწორად არის გამოქვეყნებული HTML– ში
      ,
    • . ეკრანის მკითხველები გამოაცხადებენ “10 ნივთის ჩამონათვალს” (და საშუალებას მისცემს მომხმარებელმა გადახტომა მათზე).

    გამოიყენეთ ჩვეულებრივი ინგლისური

    მონცო ბანკი სახელმძღვანელო “ჩვენი ხმის ტონი” განმარტავს უბრალო ენის მნიშვნელობას:

    2010 წელს ამერიკელმა ადვოკატმა შონ ფლამერმა ჩაატარა ექსპერიმენტი. მან სთხოვა 800 საოლქო სასამართლოს მოსამართლეს, დაეყვნენ ან ტრადიციულ “ლეგალური” არგუმენტს, ან იმას, რასაც მან “უბრალო ინგლისური” უწოდა..

    მოსამართლეებმა აბსოლუტურად უპირატესობას ანიჭებდნენ ინგლისურ ენაზე დაბალ ვერსიას (66% დან 34%), და უპირატესობა მათ ასაკსა თუ ფონს ჰქონდა..

    Flammer ნოტები (PDF) ჩვეულებრივი ინგლისური ვერსია:

    ის მოკლეა თითქმის გვერდზე, ასე რომ აშკარად გამორიცხავს არასაჭირო წინადადებას და სიტყვებს. მისი წინადადებები საშუალოდ 17,8 სიტყვაა, 25,2 სიტყვისგან განსხვავებით.

    იგი ასკვნის:

    ჩვენ ახლა გვაქვს 25 წლიანი ემპირიული გამოკვლევა, რაც იწვევს გაუგებარ დასკვნას: თუ გსურთ გსიამოვნოთ და დაარწმუნოთ თქვენი მკითხველი, წერთ უბრალო ინგლისურ ენაზე.

    2) რეკაპჩკა

    მოკლედ: ნუ გააკეთებთ თქვენს მომხმარებლებს გადახტომა პოტენციურად შეუძლებელი ჰოოპების საშუალებით, რათა დაზოგოთ დეველოპერის დრო.

    რესპონდენტები ხშირად საუბრობდნენ მოხუცზე ReCAPTCHA ვერსია:

    reCAPTCHA ვერსიები wobbly ტექსტით, რომელიც ხელახლა უნდა აკრიფოთ

    მე ვებრძვი სურათებს და ციფრების ან ასოების აკრეფა. ისეთი ტიპის, სადაც უნდა დააწკაპუნო, რომელ სურათებს აქვს მაღაზია ან ყველაფერი, ყოველთვის მენატრება გარკვეული ან დაბნეული და ენერგიას ვხმარობ, რაც არ მაქვს…

    ReCAPTCHA- ს wobbly ასოების სტილი ახლა გაუარესდა. გაცილებით ხშირია ახალი ინკარნაციის დანახვა, სახელწოდებით “No CAPTCHA reCAPTCHA” (ასევე ცნობილია როგორც “მე რობოტი არ ვარ ”) რომელიც მომხმარებელს სთხოვს შეამოწმოს ყუთი, რომელიც დაადასტურებს, რომ ისინი არ არიან რობოტი და რომელიც იყენებენ საიდუმლო ვუდუს მომხმარებელს. თუ ისინი გაივლიან, აღარ არის საჭირო ურთიერთქმედება. თუმცა, თუ ისინი ვერ შეძლებენ, გამოჩნდება შემდეგი გამოწვევა:

    Captcha- ს ნაწილობრივი ეკრანული სურათი, რომელიც მომხმარებლისგან მოითხოვს, დააჭირეთ ყველა სკვერს, რომელიც ფორთოხალებს აჩვენებს

    გაითვალისწინეთ, რომ CAPTCHA– ს ტიპი, რომელიც მომხმარებლისგან მოითხოვს, რომ დააჭირეთ ყველა სკვერს (ვთქვათ) ქუჩის ნიშნით, არ არის აუცილებელი საერთაშორისო. როგორც ტერენს ედენი წერს, CAPTCHA არ დაამტკიცებთ, რომ ადამიანი ხართ – ისინი ამტკიცებენ, რომ ამერიკელი ხართ.

    ReCAPTCHA ყველაზე ხელმისაწვდომი ფორმაა reCAPTCHA v3 რომელიც არ მოითხოვს მომხმარებლის ინტერაქციას, მაგრამ საჭიროა მეტი შრომა მოაგროვოთ ვიზიტებთან დაკავშირებით, რომლებიც არ ასრულებენ ტესტს:

    ეს არის JavaScript სუფთა API, რომელიც დაუბრუნებს ქულას, გაძლევთ შესაძლებლობას მიიღოთ ზომები თქვენი საიტის კონტექსტში: მაგალითად, მოითხოვს ავთენტიფიკაციის დამატებით ფაქტორებს, გაგზავნით ზომიერებას ან ისვრის ისეთ წერტილებს, რომლებიც შეიძლება შინაარსის გაფანტვას წარმოადგენს..

    3) ცუდი კანონზომიერება

    მოკლედ: დარწმუნდით, რომ ტექსტს აქვს სათანადო კონტრასტი, იკითხება და არ არის გამართლებული.

    • ადეკვატური კონტრასტის უზრუნველყოფა. ინტერნეტში ერთ – ერთი ყველაზე გავრცელებული წვდომის ბლოკატორი არის ცუდი კონტრასტი ტექსტსა და ფონს შორის. W3C სახელმძღვანელო მოითხოვს კონტრასტის თანაფარდობას მინიმუმ 4.5: 1, გარდა ფართომასშტაბიანი ტექსტისა და მასშტაბური ტექსტის სურათებისა, რომლებსაც უნდა ჰქონდეთ კონტრასტის თანაფარდობა მინიმუმ 3: 1 (ლოგოები და “შემთხვევითი” ტექსტი გამოირიცხება). არსებობს უამრავი კომუნალური პროგრამა, რომელსაც შეუძლია შეაფასოს კონტრასტული კოეფიციენტები თქვენთვის; ჩემი პირადი ფავორიტი არის ადა როუზ კანონის შესანიშნავი კონტრასტის ვიჯეტი, რაც ბრაუზერის სასარგებლო სანიშნეა, რომელიც ხაზს უსვამს თქვენს გვერდზე არასაკმარისი კონტრასტის სფეროებს.
    • არ გქონდეთ მთელი კაპიტალური სათაურები. არსებობს მტკიცებულება, რომ მათი წაკითხვა უფრო რთულია, რადგან დიდი ასოები ყველა ერთი და იგივე სიმაღლეა, ასე რომ, ჩვენ ვერ ვიცნობთ საერთო სიტყვების ფორმას. გარდა ამისა, ეკრანის ზოგი მკითხველი გამოთქვამს მთავარ ასოების ჯგუფებს, თითქოსდა მათ შემოკლებით (მაგალითად, BBC, DOJ და ა.შ.). თუ თქვენ უნდა გქონდეთ ყველა კაპიტალური სათაური, ჩაწერეთ ისინი ნორმალურ შემთხვევაში თქვენს HTML- ში და გადააკეთეთ CSS- ით ტექსტი-ტრანსფორმაცია: დიდი.
    • მარცხენა ტექსტის ტექსტი. (მარჯვენა და მარცხენა ენების გვერდებზე, როგორიცაა არაბული ან ებრაული, მსგავსი ტექსტი.) არ გაამართლოთ ეს, რადგან ეს გაუადვილებს დისლექსიის მქონე ადამიანების კითხვას. ბრიტანული დისლექსიის ასოციაციის სტილის სახელმძღვანელო ასევე გვთავაზობს

      გამოიყენეთ sans serif შრიფტები, მაგალითად Arial და კომიკური Sans, რადგან ასოები შეიძლება ნაკლებად ხალხმრავალი ჩანდეს. ალტერნატივა მოიცავს Verdana, Tahoma, Century Gothic, Trebuchet, Calibri, Open Sans.

    4) სურათების და გრაფიკის დამახინჯება

    მოკლედ: შეეცადეთ მომხმარებლებს შეაჩერონ ნებისმიერი მოძრაობა; პატივი სცეს მათ ოპერაციული სისტემის პარამეტრებს; არ გააკეთოთ ავტომატური თამაში ვიდეო.

    Click-Away Pound- ის გამოკითხვის ერთმა რესპონდენტმა დაწერა,

    საიტები, რომელსაც მე პატარა თემასთან ერთად ვიყენებდი, ახლა უკვე პრობლემად იქცევა, რადგან ისინი ახლავე იწყებენ რეკლამების გადაადგილებას და მუდმივად იტვირთებენ მეტ რეკლამას, როდესაც ყიდულობთ.

    WCAG– ის ყველაზე საბაზო საფეხურს მოითხოვს: ნებისმიერი მოძრავი, მოციმციმე ან გადახვევის შესახებ ინფორმაციის მისაღებად, რომელიც (1) ავტომატურად იწყება, (2) ხუთ წამზე მეტხანს გრძელდება და (3) სხვა შინაარსთან ერთად არის წარმოდგენილი, არსებობს მექანიზმი მომხმარებელი შეაჩეროს პაუზა, შეჩერება ან დამალვა, თუ მოძრაობა, მოციმციმე ან გადახვევა არ არის იმ საქმიანობის ნაწილი, სადაც აუცილებელია ”..

    განადგურება აღშფოთებაა – განსაკუთრებით ADHD ან კოგნიტური სხვა დაავადებების მქონე ადამიანებისთვის. მაგრამ მოძრაობა და მოციმციმე ასევე შეიძლება გამოიწვიოს კრუნჩხვები, ამიტომ WCAG სახელმძღვანელო მითითებით მოითხოვს, რომ შინაარსი არ უნდა ანებდეს 3-ჯერ მეტს, ნებისმიერ 1 წამში.

    პატივს სცემს მომხმარებლის არჩევანს ანიმაციისთვის

    ყველა ძირითადი ოპერაციული სისტემა მომხმარებელს საშუალებას აძლევს გამოხატოს უპირატესობა ეკრანზე შემცირებული მოძრაობის გამო, შესაძლოა იმიტომ, რომ მათ აქვთ ვესტიბულური სპექტრის აშლილობის მოძრაობა. თქვენს ვებსაიტს შეუძლია დაადგინოს, გამოიყენა თუ არა მომხმარებელმა ეს CSS- ით ურჩევნია შემცირებული მოძრაობა მედია მოთხოვნა.

    აქ მხოლოდ სანახავად ვაძლევთ ღილაკს, თუ მომხმარებელს არ გამოუცხადა უპირატესობა:

    @media (უპირატესობას ანიჭებს შემცირებულ მოძრაობას: არჩევის უპირატესობა) {
    ღილაკი {
    / * `ვიბრატის` საკვანძო ჩარჩოები განისაზღვრება სხვაგან * /
    ანიმაცია: ვიბრაცია 0.3s ხაზოვანი უსასრულო ორივე;
    }
    }

    თუ თქვენ ეძებთ საიტის გადაკეთებას, რომელსაც აქვს მრავალი ანიმაციის წესი, შემდეგი შეიძლება შეჩერდით ადრე გამოცხადებულ CSS ანიმაციებზე:

    @media (ამჯობინებს შემცირებულ მოძრაობას: ამცირებს) {
    *,
    * :: ადრე,
    * :: შემდეგ {
    ანიმაციის ხანგრძლივობა: 0.001 წ. მნიშვნელოვანი;
    გადასვლის ხანგრძლივობა: 0.001 წ. მნიშვნელოვანი;
    }
    }

    მომხმარებლის ოპერაციული სისტემის პრეფერენციების პატივისცემის შესახებ, თქვენ შეიძლება გაითვალისწინოთ თქვენი ვებ – გვერდის შექმნა მუქი რეჟიმში.

    5) ცუდი კავშირის ინფორმაცია

    მოკლედ: გააკეთეთ ბმულები იდენტიფიცირებადი, უნიკალური ბმული ტექსტით. გაფრთხილებთ მომხმარებლებს, თუ ბმული გახსნის ახალ ჩანართს ან ფაილს.

    ცუდი კავშირების ერთ-ერთი მთავარი მიზეზი ხშირად ცუდი საავტორო უფლებებია. ეკრანის მკითხველების უმეტესობა მომხმარებელს საშუალებას აძლევს სწრაფად ნახოს გვერდზე ბმულების სია (ყველაზე ხშირად გამოყენებული კომერციული ეკრანის მკითხველში, JAWS, კლავიშთა მალსახმობია Ins + F7; უფასო NVDA ეკრანის მკითხველი, იმავე კლავიშთა კომბინაციით მოცემულია ელემენტების სია, რომელშიც ჩამოთვლილია გვერდების ბმულები, სათაურები და ღირშესანიშნაობები).

    ამასთან, თუ ყველა ბმულს აქვს ტექსტი, რომელიც ნათქვამია “დააჭირეთ აქ” ან “დაწვრილებით”, სხვა არაფერია მათი გასასხვავებლად, ეს აზრი არა აქვს. ამის მოგვარების მარტივი გზა უბრალოდ ჩაწერის უნიკალური ლინკის ტექსტია, მაგრამ თუ ეს ასე არ არის შესაძლებელი, შეგიძლიათ ბმული ტექსტის გადაგზავნა დამხმარე ტექნოლოგიისთვის, თითოეულ ბმულზე უნიკალური aria-label ატრიბუტის გამოყენებით.

    ამის კარგი მაგალითია Joomla ნახვა:

    ჯომლას ვებსაიტზე, სადაც ნაჩვენებია ორი სხვადასხვა ამბავი, თითოეული იდენტურია

    ხილული ბმული ტექსტი უბრალოდ “დაწვრილებით”, მაგრამ ჯომლა იყენებს aria-label ატრიბუტები, რათა თითოეული უნიკალური დამხმარე ტექნოლოგიისთვის:

    Წაიკითხე მეტი
    
    Წაიკითხე მეტი

    იმის გამო aria-label ლინკი ტექსტის ნაცვლად გამოყენებული იქნება დამხმარე ტექნოლოგიებით, W3C გირჩევთ გამოიყენოთ aria- ეტიკეტში გამოყენებული ტექსტი ბმულზე გამოყენებულ ტექსტთან, რადგან ”ეს საშუალებას მისცემს თანმიმდევრული კომუნიკაცია მომხმარებლებს შორის”..

    Შენიშვნა: ზოგიერთი ცუდი რჩევა, რასაც მე ისევ ძველ საიტებზე ვხედავ, არის განმარტებითი ტექსტის დამატება ბმულების გამოყენებით სათაური ატრიბუტი:

    დაწვრილებით>

    ნუ გააკეთებ ამას. სათაური ექვემდებარება ეკრანის მკითხველთა უმეტესობას (დეველოპერები იყენებდნენ მას საკვანძო სიტყვებით “SEO” მიზნებისათვის, ამიტომ ეკრანზე მკითხველების მოვაჭრენი ეს გამორთულია) და ბრაუზერები წარადგენენ სათაურის ატრიბუტებს, როგორც “ინსტრუმენტების რჩევებს”, რომლებიც მხოლოდ თაგვის მომხმარებლებისთვის არის შესაძლებელი..

    ბმულები უნდა გამოიყურებოდეს ბმულები

    სტანდარტულად, ბრაუზერები ხაზს უსვამენ ბმულებს. ეს არ არის უკეთესი, რომ შეცვალოთ ეს, მაგრამ თუ თქვენ დაკარგავთ ჩხუბს ავტოსადგომზე ამის შესახებ დიზაინერთან დაკავშირებით, ბმულის ტექსტს უნდა ჰქონდეს 3: 1 კონტრასტის შეფარდება მიმდებარე არა-ლინკვის ტექსტიდან და უნდა მისცეს რამდენიმე ’არა ფერების შემქმნელის ”რომ ისინი არის ბმული, როდესაც დაფარულია ან ფოკუსირება, მაგალითად:

    a: hover, a: ფოკუსირება {ტექსტის გაფორმება: ხაზს უსვამს;}

    ფოკუსის სტილი ხაზს უსვამს ხაზს, როდესაც არასამთავრობო თაგვის მომხმარებელი მასზე ფოკუსირდება კლავიატურაზე, სტილზე ან ხმოვან შეყვანაზე. საერთოდ, როდესაც გვერდზე რომელიმე გვერდზე აქვს hover სტილი, მას ასევე უნდა მიეცეს ფოკუსის სტილი.

    “ფერების შემქმნელი” (ჩვენს შემთხვევაში, ხაზს უსვამს ხაზს) უზრუნველყოფს, რომ დაბალი ხედვის ან ფერის სიბრმავე მნახველები დაინახავენ ცვლილებებს გადასაფარებელზე ან ფოკუსში. (ეკრანის მკითხველი ავტომატურად აცხადებს “ბმულს” ბმულის ტექსტამდე.)

    უთხარით ხალხს, თუ ბმული გახსნის ახალ ჩანართს / გვერდს

    ეს შეიძლება დამაბნეველი იყოს სტუმრისთვის, თუ ბმულის გააქტიურება ხსნის ახალ ჩანართს ან ახალ ფანჯარას, განსაკუთრებით თუ ამას აკეთებს მხოლოდ რამდენიმე ბმული გვერდზე (მაგალითად, მხოლოდ გარე ბმულები გახსენით ახალ ჩანართს). თუ ეს უნდა გააკეთოთ, უნდა აცნობოთ მომხმარებელს ბმულის ტექსტში, ან aria-label მეთოდის გამოყენებით ზემოთ.

    უთხარით ხალხს, თუკი ფაილი უკავშირდება

    თუ ბმული მოცემულია ფაილზე (მაგალითად, PDF ან ვიდეო), შეატყობინეთ მომხმარებელს ბმულის ტექსტში. არ დაიმალოთ aria-label, რადგან ეს შეიძლება სასარგებლო იყოს მრავალი მხედრული მომხმარებლისთვის (მაგალითად, ზოგიერთ მობილურს არ შეუძლია გახსნას .docx ფაილი). თუ ეს დიდი ფაილია, გაითვალისწინეთ მომხმარებლის გაფრთხილება სავარაუდო ზომაზე; მათ შეიძლება არ სურთ დიდი ვიდეო ფაილის ჩამოტვირთვა 3G– ზე.

    თქვენ ასევე შეგიძლიათ გამოიყენოთ ჩამოტვირთვა ატრიბუტი, რაც იწვევს ბრაუზერს გახსნას ოპერაციული სისტემის მშობლიური ფაილების ჩამოტვირთვის დიალოგი. ამ ყველაფრის ერთად განთავსებით, კოდი ასე გამოიყურება:

    წლიური ანგარიში (PDF, 240 MB)

    6) კიდევ ერთი დიზაინის შეცდომა: ფოკუსის ბეჭდის მოხსნა

    მოკლედ: დარწმუნდით, რომ კლავიატურა მომხმარებელს ყოველთვის შეუძლია დაინახოს, თუ სად არიან ამჟამად ორიენტირებული.

    ჩვენ აღვნიშნეთ : ფოკუსირება ადრე სტილები. ისინი ფასდაუდებელი ვიზუალური მაჩვენებელია იმ ადამიანებისთვის, რომელთაც არ შეუძლიათ თაგვის გამოყენება ნებისმიერი მიზეზის გამო: შესაძლოა მათ აქვთ RSI, ან პარკინსონის ან გაფანტული სკლეროზი. სტანდარტულად, ბრაუზერები აჩვენებენ ფოკუსის რგოლს ამჟამად ორიენტირებულ ელემენტზე. აქ არის ჩემი პირადი საიტის ბმული, რომელიც ორიენტირებულია Chromium ბრაუზერში:

    Chromium- ის ძირითადი ფოკუსის ბეჭედი ეკრანის ბმული გარშემო (რომელიც ასევე გამოსახულია)

    ამასთან, ზოგი თვლის, რომ ესთეტიურად უკმაყოფილებაა, როდესაც მაუსის გამოყენებით იყენებენ და გამორთულნი არიან CSS- ით, რითაც საიტი მიუწვდომელია კლავიატურის მომხმარებლებისთვის.

    შეიყვანეთ ახალი სტანდარტი, რომელსაც დაუძახებს Firefox, ე.წ. : ფოკუსირება. ეს გამოიყენებს ფოკუსის რგოლს იმ ელემენტზე, თუ მას კლავიატურაზე ან მაუსის თაგვის საშუალებით მითითებული მოწყობილობა მიუწვდომელია, მაგრამ თაგვის მომხმარებლებს არაფერი აჩვენებთ. რადგან ის მხოლოდ Firefox- ში არის მხარდაჭერილი (წერის დროს), პატრიკ ლუკა გვთავაზობს შემდეგი CSS, რომ ლამაზად ეთამაშოთ ყველა ბრაუზერს:

    ღილაკი: ფოკუსირება {/ * რამდენიმე საინტერესო ღილაკის ფოკუსის სტილი * /}
    ღილაკი: ფოკუსირება: არა (: ფოკუსირება ხილული) {
    / * გაუქმება ღილაკზე ყველა ორიენტირებული სტილი
    თუ ღილაკს აქვს ფოკუსირება, მაგრამ ბრაუზერი ნორმალურად არ გამოდგება
    აჩვენეთ ფოკუსების ძირითადი პარამეტრები * /
    }
    ღილაკი: ფოკუსირება ხილული {/ * ზოგიერთი კი * უფრო მეტი * საინტერესო ღილაკის ფოკუსირება

    7) ფორმის შევსება

    მოკლედ: დიზაინის ფორმის ველები, რომლებიც ჰგავს ფორმის ველებს, თითოეულს უკავშირდება ეტიკეტი. არ გამორთოთ ავტომატური შევსება.

    ელექტრონული კომერციის საიტებზე ფორმების მნიშვნელობის გათვალისწინებით, გასაოცარია, რამდენი მიუწვდომელი ფორმა ვხედავ. ხშირად ეს იმიტომ ხდება, რომ ძველ ბრაუზერებს ბევრი რამ არ აძლევდა სტილის ელემენტების სტილის თვალსაზრისით, ამიტომ დეველოპერები აყალბებდნენ მათ სხვა HTML ელემენტებს. თანამედროვე ბრაუზერები საშუალებას იძლევა მიმზიდველი ყუთები, რადიო ღილაკები, შეარჩიეთ კომპონენტები და კომბინიზმები, ხელმისაწვდომი ავტომატური სრული კონტროლი და მეტი.

    ავტომატიზაცია არის თქვენი მეგობარი

    ბრაუზერების ავტომატური შევსების ფორმების დაშვება მოითხოვს, რომ ვიზიტორებმა ნაკლები გააკეთონ, ასე რომ, ისინი უფრო სავარაუდოა, რომ შეავსონ ფორმა და დარეგისტრირდნენ / იყიდონ თქვენი პროდუქტი. ავტომატური შევსება ბრაუზერებზე: Deep Dive eBay– ს შესანიშნავი სტატია ამის შესახებ (და მათ უნდა იცოდნენ).

    ასევე, ავტომატურა არის ერთადერთი საკმარისი ტექნიკა, რომელიც ამჟამად AA– ს შესაბამისობის მისაღწევად გამოიყენება წარმატების კრიტერიუმი 1.3.5: მიუთითეთ შეყვანის მიზანი.

    ფორმის ველები გახადეთ ფორმის ველები

    სტანდარტულად, ბრაუზერები აჩვენებენ შეყვანის ველებს, როგორც ყუთებს. ყველანაირი სტილი, განათავსეთ ეს მინდვრებით, ბალიშებითა და საზღვრებით, მაგრამ შეინახეთ ისინი ყუთებად. ბევრი დიზაინერი მიჰყვებოდა Google– ს 2017 წლის მატერიალური დიზაინის შექმნის ნიმუშს, რომლითაც მომხმარებელი შედის ტექსტს:

    ძველი მასალის დიზაინის შეყვანა, ჰორიზონტალური ხაზით ვიდრე მართკუთხა ყუთი

    ამასთან, Google- მა დაადგინა, რომ ძველი ტექსტური ველების ქვეშ არსებული ხაზის გარკვევა ზოგიერთ მომხმარებელზე გაუგებარი იყო, ხშირად გამხდარიყო გამყოფთან და შეცვალა დიზაინი. Ში გამოყენებადობის ტესტი 600 მონაწილესთან ერთად, მათ აღმოაჩინეს ეს

    თანდართული ტექსტის ველები მართკუთხა (გრაფის) ფორმის უკეთესად შესრულებული, ვიდრე ხაზის შესაბამისი შესაძლებლობების მქონე… დღეს, ეს ახალი ტექსტური ველები ჩნდება Google პროდუქტებში, ანგარიშის შესვლის გვერდებიდან Google– ის ფორმებამდე..

    თუ აპირებთ Google– ის სრული მასალის დიზაინის UI ბიბლიოთეკის მიღებას, წაიკითხეთ შეაჩერე Material Design ტექსტური ველების გამოყენება! მიერ მაცუკო ფრიდლენდი, თუ რამდენად აკმაყოფილებს თქვენს მოთხოვნებს.

    იარლიყის ყველა ფორმის ველი

    ყველა ფორმის ველი (ტექსტური შეყვანა, ყუთები, რადიო ღილაკები, სლაიდერები და ა.შ.) უნდა იყოს ეტიკეტირებული. ამის საუკეთესო საშუალებაა HTML– ის გამოყენება ; როგორც WCAG ამბობს, “სტანდარტული HTML კონტროლი უკვე აკმაყოფილებს ამ წარმატების კრიტერიუმს, როდესაც გამოყენებულია სპეციფიკაციის შესაბამისად”.

    აქ არის დემო ნამუშევარი წარწერილი ფორმის ველი ეტიკეტიანი ფორმის ველის წინააღმდეგ. ისინი ერთნაირად გამოიყურებიან, მაგრამ პირველს არ აქვს შესაბამისი ეტიკეტი, ხოლო მეორე კი. დააჭირეთ ქვედა ტექსტის ეტიკეტს და ნახავთ, რომ ის ფოკუსირდება ასოცირებულ შეყვანაზე.

    ყალბი vs რეალური ეტიკეტის შედარება

    ეს ხერხდება შეყვანის ფოკუსირება გაცილებით ადვილია ძრავის კონტროლის სირთულეებისთვის – ან იქნებ თქვენთვისაც ცდილობთ პატარა ეკრანზე პატარა ზომის ეკრანზე შეამოწმოთ მომაბეზრებელ მატარებელზე. ეს ასევე სასიცოცხლოდ მნიშვნელოვანია ეკრანის მკითხველებისთვის, რომლებიც ფორმაში შეხვდებიან ველებს (სტანდარტულად, მხოლოდ ბმულები და ფორმის ველები ფოკუსირებულია ჩანართების საშუალებით); როდესაც ისინი შეიყვანენ შეყვანის ველს, ეკრანზე მკითხველი გამოაცხადებს ასოცირებულ ეტიკეტის შინაარსს.

    ამის კოდი მარტივია. შეყვანის ველს ეძლევა უნიკალური პირადობის მოწმობა, და მას ეტიკეტთან ასოცირდება ამისთვის ატრიბუტი:

    
    

    იარლიყების დამალვა

    ზოგჯერ შეიძლება არ დაგჭირდეთ თვალსაჩინო ეტიკეტი. ან დიზაინერი არ გჭირდება და შენ აღარ გინდა სხვა ბრძოლა ავტოსადგომზე. ყოველ შემთხვევაში, ეს არის მაგალითი, როდესაც ეტიკეტი, რომელიც ამბობს “ძებნა”, შეყვანის წინ იგრძნობა overkill.

    შეყვანის ველი, რომელზეც ღილაკი ეტიკეტირდება

    ჩვენ შეგვიძლია დავუკავშიროთ შეყვანის ველს ტექსტს “ძებნა”, რომელიც წარმოადგენს ღილაკის წარდგენის შინაარსს aria-labelelledby:

    
    

    ჩვენ შეგვეძლო გამოეყენებინა aria-label (რომელსაც ადრე შევხვდით ბმულებზე საუბრისას):


    მაგრამ ყოველთვის უკეთესია ამჯობინოთ ხილული ტექსტი გვერდზე, რადგან ეს ითარგმნება იმ შემთხვევაში, თუ ეს გვერდი შესრულებულია მთარგმნელობითი ინსტრუმენტის საშუალებით, ხოლო HTML ატრიბუტებში “დამალული” ტექსტი არ იქნება. (ქუდი-წვერი ადრიან როსელისთვის ამ წვერით, მისი შესანიშნავი სტატიიდან) კონტროლის მარკირების მეთოდების ჩემი პრიორიტეტი.)

    ყველაზე გავრცელებული შეცდომები მილიონობით ყველაზე მთავარ გვერდზე

    ჩვენ გადავხედეთ ელექტრონული კომერციის საიტების მთავარ ბარიერებს, როგორც მომხმარებლებმა განაცხადეს გაუფასურების გარკვეული ფორმა. ახლა მოდით გადავხედოთ საიტების უფრო ფართო არჩევანს: საწყისი გვერდები 1,000,000 – მდე საუკეთესო საიტისათვის, ავტომატურად ანალიზდება WebAIM მიერ 2019 წლის აგვისტოში. გაანალიზებული გვერდების 98% -ს ჰქონდა ერთი შეცდომა. ყველაზე გავრცელებული შეცდომებია

    1. დაბალი კონტრასტული ტექსტი (86.1%)
    2. სურათების ალტერნატიული ტექსტი (67.9%)
    3. ცარიელი ბმულები (58.9%)
    4. შეტანის ეტიკეტები აკლია (53.2%)
    5. დოკუმენტის ენა აკლია (30.5%)

    ჩვენ განვიხილეთ დაბალი კონტრასტით, ბმულებითა და ფორმებით. ახლა მოდით შევხედოთ, თუ როგორ შეიძლება თავიდან ავიცილოთ სხვა ძალიან გავრცელებული შეცდომები.

    8) ტექსტური ალტერნატივა მიაწოდეთ ყველა სურათს, ვიდეოს და აუდიოს

    მოკლედ: გამოსახულების ან ვიდეოს საშუალებით კომუნიკაციას ნებისმიერ ინფორმაციას უნდა ჰქონდეს ტექსტური ექვივალენტი.

    ყველა უნდა ჰქონდეს ალტერნატიული ტექსტი (“alt ტექსტი”), რომელსაც შეუძლია დაუკავშირდეს ვიზიტორებს მხედველობითი უკმარისობა ან დაბალი სიჩქარესთან დაკავშირებული მონაცემები / ძვირადღირებული მონაცემთა გეგმები, რომლებმაც გამორთეს სურათები ბრაუზერებში. ეს მოიცავს ტექსტის სურათებს.

    აქ მოცემულია ძირითადი წესები:

    • თუ სურათი არის მხოლოდ დეკორატიული, მას უნდა ჰქონდეს ცარიელი alt ტექსტი: alt = "". (მაგრამ წმინდა დეკორატიული სურათები ალბათ CSS- ში უნდა იყოს.)
    • თუ გამოსახულება აღწერილია სხეულის ტექსტში, მას უნდა ჰქონდეს ცარიელი alt ტექსტი (alt = ""), განმეორების თავიდან ასაცილებლად. ფრთხილად იყავით, თუ ეს ასეა ში
      – ნახე როგორ გაერკვნენ? მეტი.
    • თუ სურათი არის ბმული ერთადერთი შინაარსი (მაგალითად, თქვენი ორგანიზაციის ლოგო შეგიძლიათ დააჭიროთ საწყის გვერდზე გადასასვლელად) ალტერნატიულ ტექსტში უნდა იყოს აღწერილი ბმულის დანიშნულება. Მაგალითად, alt = "საწყისი გვერდი".
    • არ გამოიყენოთ ხატების შრიფტები; ისინი შეიძლება მართლაც ცუდი აღმოჩნდნენ დისлекული ადამიანებისთვის. თუ იყენებთ მათ, გადააკეთეთ ისინი SVG- ში.

    ვიდეო და აუდიო ალტერნატიული ტექსტი

    არ უნდა დაგვავიწყდეს, რომ აუდიო შინაარსს სჭირდება ალტერნატიული ტექსტი სმენის დაქვეითების მქონე პირთათვის. ეს ნიშნავს, რომ პოდკასტების ჩანაწერები და ვიდეოების სუბტიტრები. და კიდევ: ნუ გააკეთებთ ავტოპლეი მედიას.

    9) დაამატეთ სათანადო დოკუმენტური ენა

    მოკლედ: დაეხმარეთ ტექნოლოგიურ ენას თქვენი ტექსტის შესასრულებლად.

    საწყისი გვერდების 30% არ აცხადებს მათ მიერ დაწერილი ენას, რამაც შეიძლება მათ დამაბრკოლებელი გახადოს ეკრანის მკითხველი მომხმარებლებისთვის. ეს მნიშვნელოვანია, რადგან სიტყვა “ექვსი” ძალიან განსხვავებულად გამოითქმის, თუ მაგალითად ეს სიტყვა ინგლისურ ან ფრანგულ ენაზეა.

    ამის მოგვარება მარტივია თქვენი HTML ელემენტის ენაზე ატრიბუტის დამატებით:

    “En” ეუბნება ეკრანის მკითხველს (ან მთარგმნელობითი პროგრამის), რომ ეს გვერდი ინგლისურ ენაზეა. ”Es” არის ესპანური, ”fr” არის ფრანგული და ა.შ. უმეტეს ენებზე, ენის ტეგის დადგენა საკმაოდ მარტივია. W3C აქვს სახელმძღვანელო ენის ტეგის არჩევა.

    თუ გვერდი შეიცავს შინაარსს სხვა ენაზე, მისი ძირითადი დეკლარაციის გარდა, დაამატეთ ენის ატრიბუტი ამ შინაარსის გარშემო არსებულ ელემენტს. მაგალითად, ინგლისურად გამოცხადებულ გვერდზე:

    თუ გსურთ ისაუბროთ მატადორი, რამდენიმე მაგარი კაბანა
    და შეხვდება სენორიტები ანგარიშით, Espana por სასარგებლოდ

    10) დაეხმარეთ ვიზიტორს თქვენი შინაარსის გარშემო

    მოკლედ: გამოიყენეთ HTML საეტაპო ელემენტები, რათა დაეხმაროთ დამხმარე ტექნოლოგიის მომხმარებლებს თქვენი შინაარსის გაგებაში და ნავიგაციაზე.

    როდესაც სანახავი სტუმარი მოვა თქვენს გვერდზე, მათ შეუძლიათ ვიზუალურად შეამოწმონ იგი იმის გასაგებად, თუ სად არის ნავიგაცია და სად იწყება ძირითადი შინაარსი. ეკრანის მკითხველს არ შეუძლია ამის გაკეთება. ამასთან, HTML5 გვაძლევს რამდენიმე ახალ ჩანართს ამ ტერიტორიების აღსანიშნავად, ხოლო დამხმარე ტექნოლოგიებს აქვთ მალსახმობები, რომლებიც შეიძლება გამოტოვონ (ან გამოტოვოთ) ნიშანთვისებებად. თავსართი, ქვევით, ნავიგაცია და ა.შ..

    ეს არის ექვსწუთიანი ვიდეო, რომელიც მე გადავიღე ვებ დეველოპერისა და ეკრანის მკითხველ მომხმარებელ ლეონი უოტსონთან, თუ როგორ იყენებს მისი ეკრანის მკითხველი, ამ სემანტიკის შესამოწმებლად, ჩემს პირად საიტზე ნავიგაციისთვის:

    • გადაიტანეთ თქვენი ძირითადი შინაარსი, ანუ ისეთი საგნები, რომლებიც არ არის სათაური, პირველადი ნავიგაცია ან ქვედა ფაზა, ა
      ელემენტი. თითქმის ყველა შემთხვევაში, მხოლოდ ერთი უნდა იყოს
      გვერდზე. ყველა ბრაუზერი (IE9 +) საშუალებას გაძლევთ შექმნათ ეს სტილი, ხოლო დამხმარე ტექნოლოგიებმა იციან რა უნდა გააკეთონ მასთან.
    • გადააფარეთ თქვენი სათაური (ბრენდის ლოგო, სტრიქონი, გვერდის სათაური) ა
      ელემენტი.
    • გადაიტანეთ თქვენი ქვედანაყოფი (იურიდიული პერსონალი, საკონტაქტო ინფორმაცია, საავტორო უფლებების შესახებ განცხადება და ა.შ.) ა
    • მონიშნეთ თქვენი ძირითადი ნავიგაცია გამოყენებით
        გახვეული ელემენტი. ეს შეიძლება განთავსდეს შიგნით
        თუ ეს შეესაბამება გვერდის ვიზუალურ დიზაინს.
      • რეკლამა და არასასურველი შინაარსი უნდა იყოს შეფუთული ანონაში
      • თუ გვერდზე ერთზე მეტი პროდუქტი / ვიდეო / სიახლე / ბლოგი გაქვთ, გადაიტანეთ თითოეული მათგანი
        ელემენტი.

      Თავის ეკრანის მკითხველთა მომხმარებელთა გამოკითხვა, WebAIM- მა დაადგინა, რომ ეკრანის მკითხველთა 26% მომხმარებლებს ხშირად ან ყოველთვის იყენებენ ამ საეტაპო გვერდებზე გვერდის სანახავად.

      გარდა ამისა, დისკრეტული შინაარსის ნაწილები ხდება

      ეხმარება Apple WatchOS– ს ოპტიმალურ გამოსახულებას. იხილეთ ჩემი სტატია სემანტიკური HTML- ის პრაქტიკული მნიშვნელობა მეტი ამაზე.

      11) გამოიყენეთ HTML სწორად

      მოკლედ: გაიგეთ HTML ელემენტების სემანტიკა და ნაგულისხმევი ქცევა; გამოიყენეთ სწორი ელემენტი თქვენი შინაარსისთვის.

      ამ სტატიაში გავრცელებული თემა გამოიყენა სწორი HTML ელემენტები. გამოყენებით ა იარლიყი აქვს ჩამონტაჟებული ბრაუზერის ქცევა, რომელიც ფოკუსირდება მის ასოცირებულ შეყვანის ველზე; გამოყენება

      სასურველია

      რადგან ის ეკრანის მკითხველს საშუალებას აძლევს პირდაპირ გადახვიდეთ მნიშვნელოვან შინაარსზე, მაშინ როდესაც ისინი აბსოლუტურად თვალშისაცემი არიან მათთვის, ვინც არ იყენებს ეკრანის მკითხველს.

      კიდევ ერთი მაგალითია ა

      Like this post? Please share to your friends:
Adblock
detector
map