? ??? ???? ??? ? ????. 1) ???? ?? ??? ??? ??? ??? ???? ??? ???? ????? ????? ????? ??????. 2) ??? ?? ??? ?? ARIA ??? ??? ?????? ??? ??? ??????. 3) ???? ????? ? ???? ??? ????? ? ?? ??? ?? ??? ??????.

? ??? ???? CSS ID? ??? ??? ???? ? ???? ??? ????? ??? ????? ? ??? ? ? ????. ???? ???? ? ????? ?? ??? ???? ????? ? ?? ???? ???? ?? ??? ? ???? ???? ? ? ?????? ????. ??? ? ???? ?? ? ?? ?? ?? ? ???? ??? ???? ???????.

? ??? ????, ?? ?? ID? ??? ?? ??? ??? ????? ??? ???? ?? ?? ??????. ???? ?? ?? ????. ?? ???? ?, ?? ???? ?? ? ??? ??? ?? ?? ?? ID? ??????. ??? ? ???? ???? ?? ? ?? ?? ??? ?, ???? ??? ??? ? ???? ????? ?? ? ??? ??? ????? ?? ??????.

??? ???? ? ?? ????? ??? ?? ??????. ???? ?? ??? ??? ? ???? ??? ???? ??? ???? ??? ?? ?? ? ? ????. ??? ???? ????? ?????? ?????? ??? ? ????? ? ?????? ????? ?????? ?????. ?? ??, ARIA (??? ??? ?? ??? ?? ????) ??? ???? ?? ???? ?????? ?? ??? ?? ???? ?? ??? ??? ???? ? ????.

??? ??? ?????? ??? ?????.

 / * ??? ??????? ??? ?? */
.Button {
    ??? : #4CAF50;
    ?? : ??;
    ?? : 10px 20px;
    ?? : ??;
    ?? : ???;
}

/ * ???? ARIA ?? ?? */
.Button [aria-disabled = "true"] {
    ???? : 0.6;
    ?? : ?? ????.
}

? ??? .button ???? ?? ??? ???? ?? ? ??? ??? ?? ? ? ??? ARIA ??? ??? ???? ???? ???? ???? ??????.

??? ID? ?? ??? ????? ???? ???? ? ???? ?? ? ? ????. ????? ID? ???? ?? ????? ???? ?? ??? ?? ???? ??? ???? ???? ????? ? ??? ? ? ????. ??? ???? ? ?, ?? ?? ?? ?? ?? ?? ??? ???? ????? ??? ??? ? ????.

?? ?? ?? ??? ??? ??? ?? ??????. ???? ?? ? ??? ??????? ID? ????? ????. ?? ?? ?? ??? ID? ???? ?????? ???? ?? ?? ???? ??????. ???? ?????? ? ?, ??? ??? ?? ??? ??? ???? ?? ?? ID? ????????. ???? ????? ??? ???? ???? ?? ? ??? ? ??????.

???? ? ? ?? ??? JavaScript? ??? ?????. ?? ??? ???? ?? ??? ?? ??? ? ???? ????? ???? ???? ? ?????. ?? ??? ????? ?? ?? ??? ?? ??? ??? ????? ? ?? ?????. ??? JavaScript? ???? ???? ???? ????? ?????.

 // ???? ?? ??? ??
document.queryselectorall ( '. Focustable'). foreach (element => {
    element.addeventListener ( 'Focus', () => {
        ?? .setAttribute ( 'aria-selected', 'true');
    });
    element.addeventListener ( 'blur', () => {
        ?? .removeattribute ( 'aria-selected');
    });
});

? ?? ? ??? ???? ???? ??? ? ARIA ??? ???? ??? ?????. ?? ???? ???? ???? ????? ?????.

?? ??? ???? ?? ???? ? ??? ????? ???? ???? ?? ????. ??? ID? ??? ????? ?? ?? ?? ?? ???? ?? ?? ? ??? ???? ??? ??? ???? ????. ?? ??? ID? ???? ??? ??? ????.

 <nav id = "main-nav"aria-label = "main Navigation">
    <ul>
        <li> <a href = "#home"> home </a> </li>
        <li> <a href = "#about"> ?? </a> </li>
        <li> <a href = "#contact"> contact </a> </li>
    </ul>
</nav>

? ?? ID main-nav ?????? ?? ??? ?????? ???? ?? ??? ?? ??? ???? ?? ?? ? ? ????.

??? ???? ???? ???? ? ???? ?????? ???? ?????? ???? ?????? ???? ?????? ???? ???? ???? ???? ? ???? CS ? JavaScript? ??? ? ????. ?? ???? ?? ????? ??? ?? ? ??? ? ?? ?? ??? ???? ?? ??? ???? ??? ?? ??? ??? ??? ?? ???? ? ????.

?????, ID? ??? ??? ??? ??? ? ???? ???? ? ????? ???? ? ????. ??? ???? ??? ??? ? ??? ??? ? ??? ???? ???? ?????. ? ????? ????, ?? ??? ???? ?? ? ??? ??? ??? ??? ? ???? ? ????? ?? ? ? ??? ????? ?? ???. ??? ??? ID? ???? ??? ? ???? ?? ???? ??? ???? ???? ??????.

? ??? CSS IDS vs ??? : ???? ? ?? ?? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!