Introducing the Document Object Model (DOM)

‍Source: Birger Eriksson, CC BY-SA 3.0, via Wikimedia Commons

The Document Object Model (DOM) is a hierarchical tree-like structure that represents a web page and its content. Each element in a web page, such as headings, paragraphs, images, etc., is represented as a node in the DOM tree. These nodes can be manipulated using JavaScript and can have properties, such as styles, attributes, and inner content.

Within the context of digital accessibility and assistive technology, the DOM plays a crucial role. A well-structured DOM can help assistive technologies, such as screen readers, understand the content and structure of a web page, and present it in a way that makes it accessible to users with visual, auditory, or motor impairments.

For example, using proper heading structures (H1, H2, H3, etc.) in the DOM helps screen readers announce the page's structure, providing users with a way to quickly navigate the content. Additionally, using appropriate ARIA (Accessible Rich Internet Applications) attributes on elements can help screen readers convey important information, such as the role of a button or the state of a form control.

The DOM is essential to creating accessible and user-friendly web pages. Its tree-like structure provides a clear and organized representation of a web page's content and structure, and its APIs allow for the manipulation of this structure. This makes it possible for assistive technologies, such as screen readers, to access and interpret the content and structure of a web page, making it more accessible to users with disabilities.

Assistive Devices and the DOM

Screen Readers

Screen readers use the information in the Document Object Model (DOM) to provide users with an audible representation of a web page's content and structure. Here's how they do it:

The screen reader software sends a request to the browser to access the DOM tree.

The browser returns the DOM tree to the screen reader.

The screen reader software then processes the DOM tree and creates an internal representation of the page's content and structure, typically in the form of a linear list of elements.

The screen reader software maps each element in the DOM tree to an equivalent speech or braille output, using the element's type, attributes, and content. For example, a heading element might be mapped to "Heading level 1: [text content of heading]", while a link element might be mapped to "[text content of link], link".

The screen reader software provides this audible or braille representation of the page to the user, either through synthesized speech or a braille display.

The screen reader software also provides navigation and interaction controls, such as keyboard commands, that allow the user to navigate through the elements in the DOM tree and interact with the page.

By processing the information in the DOM, screen readers are able to provide users with a meaningful and usable representation of the content and structure of a web page. This is crucial for users with visual, auditory, or motor impairments, as it allows them to access and understand the content of the web in a way that is comparable to sighted users.

Magnifiers

Another assistive device that can access and interpret the information in the Document Object Model (DOM) is a magnifier. Magnifiers work by rendering a portion of a web page at a higher magnification, making it easier for users with visual impairments to see the content.

Here's how a magnifier typically accesses the DOM:

The magnifier software sends a request to the browser to access the DOM tree.

The browser returns the DOM tree to the magnifier.

The magnifier software processes the DOM tree and creates a graphical representation of the page's content and structure.

The magnifier software determines the portion of the page that should be magnified, based on the user's preference or the position of the mouse cursor.

The magnifier software scales up the portion of the page that has been selected for magnification, either by increasing the size of the text or by overlaying a magnified view of the page over the original.

The magnifier software provides the magnified view of the page to the user, either by rendering it on the screen or by projecting it onto a separate display.

In this way, magnifiers are able to provide users with a clear and usable representation of the content and structure of a web page, making it easier for them to see and understand the content. This is particularly useful for users with visual impairments, such as low vision or color blindness, as it allows them to access the web in a way that is comparable to sighted users.

 

Keyboard Accessibility

Creating a web page that is accessible to keyboard users is an important aspect of digital accessibility. Here are some steps to help ensure your web page is keyboard-friendly:

1. Semantic HTML: Utilize semantic HTML elements, such as headings, paragraphs, lists, etc., to structure the content of the page. This makes it easier for assistive technologies to understand the content and structure of the page.

2. Focus Visibility: Ensure that focused elements, such as links and buttons, are clearly visible when they receive focus through keyboard navigation. This can be accomplished through visual indicators like changes in color or outline, or through the use of ARIA attributes.

3. Keyboard-Friendly Interactive Elements: Make sure all interactive elements on the page, such as links, buttons, and form controls, can be accessed and used through keyboard navigation alone. This means users should be able to interact with these elements by tabbing them and using the Enter or Space key.

4. Avoid Keyboard Traps: Ensure that users can navigate through all interactive elements on the page using only the keyboard, without getting stuck. For example, if a user navigates to a modal dialog, they should be able to close it and return to the main content through keyboard navigation.

5. Test with Keyboard-Only Users: Test your web page with keyboard-only users to identify any issues and ensure it is fully accessible and usable with only the keyboard. This helps you create a more inclusive web experience for users who prefer keyboard navigation or are unable to use a mouse.

Validation

 

Validating the DOM is an important step in ensuring that a web page is accessible to users with disabilities. Here are some steps you can follow to validate the DOM:

1. Use accessibility testing tools: There are several tools available that can help you validate the accessibility of a web page, such as the WAVE Accessibility Tool, the Accessibility Checker for Microsoft Edge, and the Accessibility Audits in Chrome DevTools.

2. Check for common accessibility issues: Use the testing tools to check for common accessibility issues, such as missing alt text for images, improper use of semantic HTML elements, and missing form labels.

3. Review the accessibility tree: The accessibility tree is a representation of the web page's structure that is used by assistive technologies. You can view the accessibility tree in Chrome DevTools or using other accessibility testing tools. Review the accessibility tree to make sure that all elements are properly labeled and that all necessary accessibility attributes are present.

4. Test with a screen reader: A screen reader is an assistive technology that can read the content of a web page out loud to a user who is blind or visually impaired. Testing a web page with a screen reader can help you validate that the DOM is properly structured and that all elements are properly labeled and accessible.

5. Review the HTML source code: Finally, review the HTML source code of the web page to make sure that all elements are properly labeled and that all necessary accessibility attributes are present.

Validation is an ongoing process that should be performed regularly to keep the DOM up-to-date and accessible.

Considerations

When coding for digital accessibility, it's important for coders to keep the following considerations in mind:

Semantic HTML: Use semantic HTML elements, such as headings, paragraphs, lists, etc., to structure the content of the page. This makes it easier for assistive technologies to understand the content and structure of the page, and provide users with an accessible representation of the content.

Alt text for images: Ensure that images have appropriate alternate text (alt text) to describe their content. This is important for users who are blind or have low vision, as screen readers can read the alt text and provide users with an audible description of the image.

Keyboard accessibility: Ensure that all interactive elements on the page, such as links, buttons, and form controls, can be accessed and used using only the keyboard. This is important for users who are unable to use a mouse, or who prefer to use the keyboard.

Color contrast: Ensure that there is sufficient color contrast between the foreground and background colors on the page. This makes it easier for users with low vision to see the content, and is particularly important for users who are colorblind.

ARIA (Accessible Rich Internet Applications) attributes: Use ARIA attributes to provide additional information about elements on the page to assistive technologies. For example, you can use ARIA to specify the role of an element, such as a button or a form control, or to indicate the state of an element, such as a toggle switch.

Screen reader compatibility: Test the page using screen reader software to ensure that it is compatible with assistive technologies and that users can access and understand the content.

Document structure: Ensure that the document structure is correct and consistent, with headings and sections logically nested to provide a clear and organized representation of the content.

Practice 1

Drawing a DOM (Document Object Model) for digital accessibility can be a helpful exercise for practitioners to gain a deeper understanding of how the structure of a web page affects its accessibility. Here are some steps you can follow to practice drawing a DOM:

1. Choose a web page: Start by selecting a web page that you want to analyze and draw the DOM for.

2. Study the HTML source code: Open the HTML source code of the web page and study its structure. Pay attention to the different HTML elements and how they are nested within each other.

3. Draw a basic diagram: On a piece of paper or a whiteboard, draw a basic diagram of the DOM. Represent each HTML element as a box and use arrows to show the parent-child relationships between elements.

4. Label each element: Label each box with the name of the HTML element that it represents, such as <header>, <nav>, <main>, <section>, etc.

5. Consider accessibility attributes: As you draw the DOM, consider which accessibility attributes each element might need to ensure that it is accessible to users with disabilities. For example, an element that represents a button should have an aria-label attribute to describe its purpose.

6. Validate your DOM: Once you've finished drawing your DOM, validate it against the HTML source code and any accessibility guidelines that you're following. Make sure that all elements are properly labeled and that all necessary accessibility attributes are present.

7. Repeat the process: Repeat this process for different web pages to gain more experience and build your understanding of the DOM and digital accessibility.

By practicing drawing a DOM for digital accessibility, you can gain a deeper understanding of how the structure of a web page affects its accessibility, and develop the skills you need to create accessible web pages.

Practice 2

Here are some exercises to practice how the Document Object Model (DOM) receives information from assistive devices:

1. Keyboard accessibility: Practice creating a web page that can be navigated using only the keyboard. This will help you understand how assistive technologies, such as screen readers, interact with the DOM to provide keyboard accessibility.

2. Screen reader compatibility: Use a screen reader to navigate a web page and observe how it interacts with the DOM. This will help you understand the accessibility features of screen readers and how they use the DOM to provide an accessible representation of the content.

3. Color contrast: Experiment with different color combinations on a web page to understand the importance of color contrast for accessibility. This will help you understand how users with low vision perceive the content and how assistive technologies use the DOM to provide an accessible representation of the content.

4. Document structure: Experiment with different document structures to understand the importance of a clear and organized document structure for accessibility. This will help you understand how assistive technologies use the DOM to provide a structured representation of the content to users.

Validation Tools

WAVE Accessibility Tool

Accessibility Checker for Microsoft Edge

Mozilla: Document Object Model.

Links

• The official specification for the Document Object Model provides a comprehensive overview of how it works. W3C DOM introduction.
• MDN Web Docs provides detailed information and tutorials on web development, including the DOM. MDN Web Docs

Books

Here are some books about the DOM (Document Object Model) and digital accessibility that you may find helpful:

• "DOM Scripting: Web Design with JavaScript and the Document Object Model" by Jeremy Keith
• "Pro HTML5 Accessibility: Building an Inclusive Web" by Joshue O Connor