HTML-ARIA:role=columnheader

by trustix


Eklenme Tarihi : 26 Aralık 2020 13:14 Views:     284



HTML'de role='columnheader' Nedir?

columnheader öznitelik değeri HTML ARIA'da sütun başlıklarını belirtmek için kullanılmaktadır. Bu sütun başlıkları bir tablodaki sütunlar için olabileceği gibi başka HTML elementleri ile oluşturulan tablo yapılarında da kullanılabilir.  Buradan şunu anlayabiliriz eğer tek bir hücre varsa bunu columnheader kullanarak sütun başlığı gibi belirtmemeliyiz. Çünkü sütun birden çok satırdan oluşan bir yapıdır. Tek bir satır kendi başına sütun ve sütun başlığını aynı anda kapsayamaz.

Sütun başlıkları belirtilen sütun ile bir ilişki içerisindedir. Semantik web açısından bu ilişki columnheader ile kurulur. Bu bir ekran okuyucunun ya da diğer erişileblir yardımcı web teknolojilerinin internet sayfasını daha iyi anlamasını ve değerlendirmesini sağlar.

Ö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=columnheader</title>

</head>

<body>
    <!-- 
        Ülke bilgilerinin içeren bir
        tablo oluşturarak columnheader
        değerinin nasıl kullanıldığını
        açıklayabiliriz.
        Tablo bir sütun başlıkları
        ve üç tane de bilgi
        içeren toplamda dört satırdan oluşmaktadır.
        Web tarayıcıları bunu bir tablo olarak
        algılar. Ancak anlamsal bir yapı kazanması
        için satırdaki değerlerin sütun başlıkları
        ile ilişkilendirilmesi gerekir.
        Bu ilişkiyi de columnheader
        ile sağlamış oluruz.
    -->
    <table summary="Ülke bilgileri" border="2">
         <tbody>
             <tr>
                <td role="columnheader">Ülke</td>
                <td role="columnheader">Başkent</td>
                <td role="columnheader">Resmi Dil</td>
                <td role="columnheader">Nüfus</td>
            </tr>
            <tr>
                <td role="rowheader">Türkiye</td>
                <td>Ankara</td>
                <td>Türkçe</td>
                <td>80m</td>
            </tr>
            <tr>
                <td role="rowheader">Singapur</td>
                <td>Singapur</td>
                <td>İngilizce</td>
                <td>5m</td>
            </tr>
            <tr>
                <td role="rowheader">Tayland</td>
                <td>Bangkok</td>
                <td>Tayca</td>
                <td>70m</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

 





0

Yorum Formu

vikikod.com    © 2019