Hacker News new | ask | show | jobs
by shripadk 3061 days ago
Semantic tags are required from an accessibility point of view. If not, there wouldn't even be a need for a <table> tag. Might as well just use <div> with display:table. Actually you could just about use <div> for everything! But by doing so, you are alienating those who use screen readers to browse your site.
1 comments
rhencke 3061 days ago
That's not true, though. Semantic tags may make it easier to be accessible, but they are absolutely _not_ required.

WAI-ARIA defines the mechanisms to make existing webpages accessible, and they do not require using tags for their semantic meaning - quite the opposite. You use role attributes for this.

For example:

    <div role="button">Click me.</div>
is perfectly accessible, and will be interpreted as a button, though semantically it's a div.
link
gnud 3061 days ago
And if you have a set of well-defined roles, why not create tags for them, and replace all the divs? Seems a lot simpler.
link
shripadk 3060 days ago
WAI-ARIA has its limitations. When it comes to tables (which is the example I provided) there are no roles for demarcating headers (<thead>), body (<tbody>) and footers (<tfoot>). Instead there is a generic "rowgroup" role which doesn't indicate to the person using a screen reader if the row belongs to a header or body or footer. Also, without a header demarcation, it becomes the responsibility of the disabled user to keep a count of the table cells to be able to associate content with headers (which the blind user will have to assume is the first rowgroup). Complex tables (which have multiple header rows with some cells merged) are simply inaccessible to the user.

WAI-ARIA complements semantic tags. It doesn't contain replacement for all semantic tags. It doesn't stop at the table tags. How would you represent <main>, <aside>, <header>, <footer> using WAI-ARIA such that the screen reader picks up the intent? Also imagine trying to replace the <input> or <textarea> elements with <div> tags. You would have to use _contenteditable_ and then implement all the semantic features yourself. It's just not worth the effort and the end result will be buggy.

link