Intro to HTML and accessibility

HyperText Markup Language (HTML) is the markup language (code) used to structure a web page and its content. Since it is a language that helps define a website, it significantly contributes to whether the website is accessible or not. HTML provides expected patterns for reading or navigating content, which the accessibility of a user experience is dependent upon. The content structure of HTML includes headings, paragraphs, bulleted lists, images, and data tables. HTML allows you to use tags to markup your elements.

There are different subsets of tags in HTML, one of them being semantic HTML. Semantic HTML can significantly contribute to accessibility. In HTML, the term “semantics” refers to the meaning of the code. Semantic HTML includes tags whose purpose is defined by the element. For example, an <h1> tag represents the top-level heading on your page (heading one) and an <li> tag identifies an item in a list. In contrast, the <div> tag does not have any semantic meaning and therefore does not provide meaningful information from an accessibility perspective. For example, it’s more effective to style a <button> to look a certain way than to create a button with a <div> tag with qualifiers and scripts. Buttons have inherent traits and expected behaviours for mouse clicks, keyboard and tap interactions. Therefore, use semantic HTML wherever possible to contribute to good accessibility. It’s always better to use semantic HTML code rather than building something new.

Overall, developing a basic understanding of HTML can go a long way towards building accessible products. Wherever possible, follow HTML best practices. Additionally, you can style HTML with Cascading Style Sheets (CSS) or add JavaScript (JS) for functionality. In general, standard semantic HTML elements are compliant with current accessibility standards such as WCAG, provided you do not extend or change their functionality too much.