Web siteleri herkes tarafından erişilebilir olmalıdır. İşte bilmeniz gerekenler.

Bir web sayfası oluşturmak sadece bir web sayfası oluşturmak değildir. Ön uç geliştirmenin önemli bir yönü, kullanıcı arayüzlerinin görsel ve işitsel engelli kişiler de dahil olmak üzere internetteki herkes tarafından erişilebilir olmasını sağlamaktır. Kodunuzu bu kişileri göz önünde bulundurarak yazmalısınız. Görme engelli insanlara, görsel engelli olmayan kişilerle web sitenize eşit erişim hakkı nasıl verirsiniz? Öğrenmek için bu makaleyi okuyun.

Geliştiriciler Neden Web Erişilebilirliği Konusunda Endişelenmeli?

Web erişilebilirliği, herhangi bir engel veya engelden bağımsız olarak herkesin web'e eşit erişimi olması gerektiği fikri etrafında döner. Erişilebilir bir web sitesine sahip olmak, daha geniş bir kitleye ulaşmayı kolaylaştırır (dünyanın yaklaşık %16'sı bir veya diğer engelden muzdariptir).

Dijital erişilebilirlik bir seçenek olmamalı geliştiriciler için. Herhangi bir profesyonel marka için bir zorunluluktur. Bu ciddiye alınır: tarafından bildirildiği gibi

instagram viewer
Çeşitlilik, birisi erişilemeyen bir web sitesi nedeniyle 2019'da The Pokémon Company'ye dava açtı.

HTML ile Web Erişilebilirliği

HTML'de erişilebilir web sitelerinin geliştirilmesini sağlamak için kurallar vardır. Bu bölüm bu kurallardan bazılarını açıklayacaktır.

Anlamsal Öğeleri Kullan

HTML'deki anlamsal öğeler, anlamları olan öğelerdir. HTML5'te yaklaşık 100 öğe vardır. gibi bazı unsurlar Ve, anlamsal değildir, diğer HTML etiketleri anlamsaldır. Anlamsal olmayan bu öğeleri kullanmayı bırakmak imkansız olsa da, işinize olabildiğince çok anlamsal öğe dahil etmek önemlidir. İşte popüler semantik öğelerin bir listesi:

Bu örneği göz önünde bulundurun Taaskly'den:

Yukarıdaki resme bir bakış, aşağıdaki unsurları ortaya çıkaracaktır:

  • Bir başlık
  • Bir şekil
  • Bir paragraf
  • Üç düğme

Geliştiricilerin kullandıklarını varsaymak kolaydır. Ekrandaki öğeleri düzenlemek için etiketler. Kodlara daha yakından baktığınızda bunun yerine altı semantik etiket kullandıklarını göreceksiniz. Basitleştirilmiş kod şöyle görünür:

<bölüm>
<imgkaynak="/hero.png"alternatif="kahraman">
<madde>
<h1>Doğru Ürün ve Hizmetleri doğru zamanda bulun.h1>
<P>
 El yapımı ayakkabı, saç yenileme, sosyal medya yöneticisi, ayak işleri gönderme, gelir kaynağıB>— Adını siz koyun, Taaskly anladı. Kaydolduğunuzda ve Taaskly'yi kullandığınızda bugün ihtiyacınız olan her ürünü veya hizmeti bulun. 
P>
<Ahref="/ana/ev">Bir Görevi Dış Kaynak Olarak AlmakA>
<Ahref="/ana/hizmetler"> bir hizmet bulA>
<Ahref="/ana/pazar yeri" >bir dükkan bulA>
madde>
bölüm>

HTML parçacığından aşağıdakileri gözlemleyebilirsiniz:

  1. Resimler, metin ve düğmeler bir eleman.
  2. bu eleman eşit olarak böler Ve elementler.
  3. bu eleman tutar, , Ve elementler.
  4. Düğmeler şu şekilde kodlanmıştır: elementler; bu nedenle, bunlar düğme değil, bağlantıdır. Genel bir kural olarak, kullanıcıyı başka bir sayfaya veya görünüme yönlendirmek için her zaman bağlantıları kullanın ve kullanıcının yalnızca aynı görünümde bir eylem gerçekleştirmesini istediğinizde düğmeleri kullanın. Görmek Açısal Düğme sayfası Bu konuda daha fazla bilgi için.

Net Bir Sayfa Yapısı Sağlamak için Yer İşaretlerini Kullanın

Yer işaretleri, görme engelli kullanıcıların ekran okuyucularla bir web sayfasında gezinmesine yardımcı olan anlamsal etiketlerdir. Yer işaretleri ile bir web sayfasının farklı bölümlerini tanımlamak kolaydır. Apple'ın web sitesi İşaretleri kullanır.

Yukarıdaki resimde dört farklı yer işareti gösterilmektedir. kullanabilirsiniz Erişilebilirlik Bilgileri bu yer işaretlerini görselleştirmek için uzantı.

Resimden anlayabiliriz üstte, bir içeren bir ve bir eleman. Dikkat çekici bir şekilde, görüntü gösteriyor "navigasyon", "bölge", Ve “içerik bilgisi”. Bunlar, daha sonra inceleyeceğimiz roller olarak bilinir.

Bir sayfa için birden çok yer işareti kullanmanız gerektiğinde, bunları her zaman bir etiketle ayırt edin. Örneğin, birden fazla kullanırsanız öğeleri, Apple'ın sahip olduğu gibi, onları etiketlemeniz gerekir. Onları şu şekilde etiketlemelisiniz: arya etiketi bağlanmak. Böylece bunlardan herhangi biri gibi bir şey yazabilirsiniz:

<gezinmearya etiketi = "küresel">
<gezinmearya etiketi = "yerel navigasyon">
<gezinmearya etiketi = "elma dizini">

Etiketleri kullanmak, ekran okuyucuların herhangi bir gezinmeye atlamasına yardımcı olabilir.

Rol, Ad ve Değer Niteliklerini Kullanın

Bazen yerleşik erişilebilirlik özelliklerine sahip HTML öğelerini kullanmak imkansız olabilir. Bu tür durumlar şu ikisinden biri olabilir:

  1. Elde etmek istediğiniz şey için yerel bir HTML öğesi yoktur. Örneğin, bir çünkü başka hiçbir unsur role uymuyor gibi görünüyor.
  2. Teknik sorunlar nedeniyle semantik öğeleri kullanamazsınız. kullanan bir çerçeve kullanıyorsanız ne zaman kullanmak daha iyi olurdu, özel bir kontrol tanımlamak sizin göreviniz olacaktır.

Özel bir denetim tanımlamak için öğeniz için bir role, bir ada ve (bazen) bir değere ihtiyacınız vardır.

rol

Varsayılan olarak bir öğe gezinme rolüne sahipken, bir öğesinin banner rolü vardır. Yardımcı teknolojilerin bir web sayfasının yapısını anlamasına yardımcı olmak için bu öğeleri yalnızca amaçlarına uygun olarak kullanmalısınız. Birini diğerinin yerine kullanmanız gerekiyorsa, rolü şu şekilde belirtmelisiniz:

<başlıkrol = "navigasyon">
<gezinmerol = "afiş">
<divrol = "navigasyon">

İsim

Ad, bir HTML öğesiyle ilişkili açıklayıcı bir metin veya etikettir. Bir adın en kolay biçimi, bir öğenin metnidir. İşte bir örnek:

<divrol = "düğme">Beni tıkla!div>

Yukarıdaki parçada, "Beni tıkla!"ın adı eleman. Erişilebilir isim olarak da bilinir.

Gezinme, açılır menüler vb. öğeler için bir ad atamak önceki örneğe göre daha karmaşıktır. Farklıdır çünkü bu öğelerin içinde çocuk öğeler vardır. Yukarıdaki gezintiye bir ad atamak için, arya etiketi bağlanmak. Şu örneğe bakın:

<gezinmerol = "navigasyon"arya etiketi = "küresel navigasyon">...gezinme>

Şuna dikkat etmelisiniz ki bir isim öznitelik, erişilebilir bir addan farklıdır. Bu kod parçacığı daha iyi bir anlayış sağlar:

 isim özelliği 
<gezinmerol = "navigasyon"isim = "küresel navigasyon">...gezinme>
 erişilebilir ad 
<gezinmerol = "navigasyon"arya etiketi = "küresel navigasyon">...gezinme>

Görmek TGPi'nin erişilebilir adlarla ilgili makalesi Bunu daha derinden anlamak için.

Değer

HTML'de, değer niteliği, bir öğe hakkında ek bilgi sağlayabilir. Değerler, akordeonlar gibi özel bileşenler için bileşenin durumu hakkında bilgi sağlar. Örneğin, bir akordeon açılabilir veya kapatılabilir.

Öğelerinize çeşitli şekillerde değer katabilirsiniz. Bu pasaj, bunu yapabileceğiniz yollardan bazılarını gösterir:

 aria-valuenow 
değer
<giriştip="onay kutusu"isim="ürün[]"değer="1">

Kapsamlı Bir Çevrimiçi Deneyim için Web Erişilebilirliğine Öncelik Verme

Web erişilebilirliği aşağıdaki kuralların ötesindedir; aynı zamanda herkesin web sitenize eşit erişime sahip olmasını sağlamakla da ilgilidir. Anlamsal öğeleri, yer işaretlerini ve rol, ad ve değer gibi nitelikleri HTML'nize dahil etmek, web sitenizi engelli kişiler için daha erişilebilir hale getirebilir. Web erişilebilirliğini bir seçenek olarak düşünmeyin; bunu bir gereklilik olarak gör.