A Quick Intro to HTML and Web Accessibility
You have probably heard that HTML sets up the structure of your websites. What you might not know is that it also, with the dom, creates an accessibility tree. The accessibility tree includes accessible objects for every DOM element that assistive technology should be exposed to. You can view the accessibility tree in chrome by opening the DOM, selecting the Elements Tab, and then the Accessibility tab. This is a quick introduction of HTML that can affect how this tree is displayed and how your HTML can alter the experience of your users.
Alt Attribute
The alt attribute is used within an <img> tag. It includes text describing the image. It will only be visible if your image does not load, or if your user is using a screen-reader. The text should be succinct and descriptive. If an image is purely decorative, such as an image used as a border, the alt attribute should still be included but be left blank.
<img src=”tree.jpg” alt=”a field of grass with a large evergreen tree in the middle”><h1> tag
The <h1> to <h6> tags mark headings, communicate the organization of a page, and for users of assistive technology can help with page navigation. Skipping headings should be avoided.
<h1>Trees of Colorado</h1><h2>Types of Trees</h2><h3>The Colorado Blue Spruce Tree</h3>
Lang Attribute
The lang attribute specifies the language of the page or element. Screen readers and your browser will then know what language the page is in and how text should be read aloud. Spell and grammar checkers also work best when the language is set correctly.
<html lang=”en-US”>…</html>
<a> tag
The <a> tag defines a link. The text of the link should provide a context of where the link goes. Users who navigate your page by tabbing instead of using a mouse will not know where a link goes if it just says “click here”.
<a href=”/trees.html”>View All Trees</a><label>
Used within a form and should be associated with a form control. Allows for a larger clickable area and makes sure assistive technology can refer to the correct input. The “for” attribute in the < label> tag should match the “id” in the <input> tag which it corresponds to.
<label for=”trees”> What are your favorite trees? </label><input type=”text” name=”trees” id=”trees”>
ARIA Attributes
Accessible Rich Internet Applications (ARIA) are attributes that can be added to HTML elements. They should only be used when semantic HTML does not meet what you are needing. Landmark elements such as <main>, <nav>, and <header> have built-in ARIA roles. There is a lot more on this topic! However, your main takeaway should be to use semantic HTML whenever possible. Refer to my links below to read more.
Check out the following for further information about digital accessibility:
