{"id":127,"date":"2022-01-07T12:49:07","date_gmt":"2022-01-07T10:49:07","guid":{"rendered":"https:\/\/www.accessi.org\/blog\/?p=127"},"modified":"2022-12-28T13:08:01","modified_gmt":"2022-12-28T11:08:01","slug":"must-haves-for-web-accessible-html-in-your-site","status":"publish","type":"post","link":"https:\/\/www.accessi.org\/blog\/must-haves-for-web-accessible-html-in-your-site\/","title":{"rendered":"Must-Haves for Web Accessible HTML in Your Site\u00a0"},"content":{"rendered":"

Technical writing is fast becoming a side hustle for web developers the world over. As developers<\/a>, you should lead by example. So I\u2019ve curated a list of accessibility practices that are essential for any HTML website. But first, what is web accessibility?<\/span><\/p>\n

Web accessibility<\/span><\/a> (a11y) is the practice of building digital products in a way that is accessible to people with disabilities \u2014 such products usually conform to the Web Content Accessibility Guidelines (WCAG).<\/span><\/p>\n

Semantic HTML<\/span><\/h2>\n

Semantics in web design describes writing meaningful HTML code using self-expressive tags that make sense to both the developer and the browser engine which renders the a11y tree. When an element is semantically accurate, screen readers are able to announce its role name state, and value.<\/span><\/p>\n

There\u2019s a simple concept that I\u2019d like to mention in relation to semantics and that\u2019s affordance. The implicit design of things can give users a clue on how to use them. For example, a doorknob suggests to anyone approaching a door that it may be opened by turning the knob. In web apps, affordances are important to help to make the UX hitch-free. A good example is a hamburger menu icon (the 3 horizontal dashes usually at the top corner of a web page) which suggests to the user that there is a hidden menu that can be accessed by clicking.\u00a0<\/span><\/p>\n

Good semantics involves intuitive design experience and affordances are the way to achieve that.<\/span><\/p>\n

ARIA<\/span><\/h2>\n

ARIA<\/span><\/a> is an acronym for accessible rich internet applications. These applications are attributes that communicate with the accessibility tree of a subset of the DOM. This simplified rendering of a website is the accessibility tree. This is sometimes called the “shadow DOM”. This version can be read by screen readers and is focusable by keyboards.<\/span><\/p>\n

ARIA enables developers to express a broad range of HTML semantic concepts via the use of HTML attributes. It extends the use case of HTML elements beyond that which current semantic HTML tags allow. By assigning the correct role property to an HTML tag, ARIA is able to perform its intended function. However, we should not define roles with abstract terms. The DOM and accessibility tree are structured with a few different types of roles. Here are a few examples:<\/span><\/p>\n