Корректировка вёрстки для задачи из главы "Введение в браузерные события"

[eddievk]

по поводу задачки из этой главы http://learn.javascript.ru/introduction-browser-events

элементы меню вот ведь у вас свёрстаны правильно с точки зрения семантики через ul и li, но почему-то кликабельный элемнет для разворачивания/сворачивания меню решили делать совсем не по семантике))

это совсем не комильфо ведь с точки зрения вёрстки, семантики, и доступности верстать кликабельные элементы через всякие заведомо некликабельные вроде div, span, p и прочие им подобные, ведь это только приводит к ошибкам, плохой поддержке на разных моб устройствах и лишнему js коду для поддержки этих самых разных моб устройств с touch экранами и тд и тп.

Для кликабельности ведь специально не зря существуют семантически правильные элементы вроде a, button и label, например, которые изначально и созданы для того, что бы по ним можно было легко кликнуть. Они сразу корректно работают на всех устройствах без дополнительных манипуляций будь у них там touch экраны как у большинства мобильников и планшетов, обычные стационарные ПК с мышкой и тд и тп. Ну и с точки зрения доступности, конечно, люди смогут без труда попасть в такую кнопку переключаясь табом по элементам или ещё какими способами. В вашем же случае, фокус пролетит мимо этой кнопки и человек с ограниченными возможностями в неё попросту никогда не попадёт.

Так как многие ученики здесь не особо много имеют навыков вёрстки, и не знают о такого разного рода тонкостях, я думаю будет более полезно давать на 100% семантические правильные примеры в задачах и главах учебника, дабы оградить их от ошибок в будущем)