HTML-ARIA:role=combobox

by trustix


Eklenme Tarihi : 26 Aralık 2020 13:34 Views:     608



HTML'de role='combobox' Nedir?

role='combobox' yapısı kullanıcının bir seçenek girmesini sağlayan metin kutusu yapısıdır. Bu metin kutusu belli değerlerin girilebileceği şekilde sınırlandırılmış olabilir. Ya da önceden sınırlandırılmış listeye yeni bir eleman ekleyebilecekleri yapıda olabilir. Örneğin kullanıcı bilgilerinin alındığı bir formda kullanıcının yaşadığı şehir bilgisi ya da yaşadığı bölge bilgisi bu şekilde alınabilir.

Kullanıcı formda tek satırlık bir metin kutusu görmelidir. Ayrıca dinamik olarak girebileceği değerleri ya da değer aralığını gösteren bir liste yapısı ile bilgilendirilmesi gerekir. Kullanıcı bu değerlerden herhangi birini yazmaya başladığında liste yapısındaki elemanlar ile eşleştirerek otomatik tamamlama yapmasını sağlayan bir yapının kurulması da önemlidir.

Combobox metin kuutularının davranış türleri ve kullanıcı ile etkileşim şekillder çok farklılıklar gösterebilir. Bu belli standartlara uymak koşulu ile tamamen web tasarımcısına ya da web programcısına bağlıdır.

Örneğin:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML'de role=combobox</title>

</head>

<body>
    <!-- 
        Kullanıcının yaşadığı coğrafya
        bilgisini bir metin kutusu aracılı
        ile almak istediğimizi varsayalım.
        Bu durumda şehir yerine kıta tercih edebiliriz.
        Ancak biliyoruz ki dünya üzerindeki kıtalar
        bellidir. Kullanıcı bunlar dışında bir metin
        girmemelidir. 
        Ayrıca kullanıcıya fikir vermesi açısından
        bu bölgelerin gösterildiği
        bir liste yapısı da aynı şekilde 
        metin kutusunun yanında ya da hemen altında 
        yer alabilir.
    -->

    <input type="text" aria-activedescendant="opt6" aria-readonly="true"
    aria-owns="list" aria-autocomplete="list" role="combobox">
    <ul aria-expanded="true" role="listbox" id="list">
        <li role="option" id="opt1">Asya</li>
        <li role="option" id="opt2">Avrupa</li>
        <li role="option" id="opt3">Amerika</li>
        <li role="option" id="opt4">Afrika</li>
        <li role="option" id="opt5">Antartika</li>
        <li role="option" id="opt6">Avusturalya</li>
    </ul>
</html>

 





0

Yorum Formu

vikikod.com    © 2019