Content and functionality must be machine readable.

By Makoto Ueki — An important keyword for making digital content more accessible is “machine readability.” In this context, “machine” means the user agents such as browsers, assistive technologies like screen readers, search robots, and so on.

Take a website, as an example. A web page has several headings: a main heading that represents the subject of the web page, headings for the sections that make up the page, and subheadings within the sections. Headings are often larger in font size than the main body text and are bolded. In the case of a web page, headings can be machine readable as headings by marking them up with the HTML <h1> to <h6> elements. This allows screen reader users to browse only the headings on the page using the heading navigation function. It helps the screen readers to get an outline of the page and get to where the desired content is more quickly without having to read the page content from beginning to end.

This is a good example of accessibility that is not possible with print media such as newspapers and magazines, and can be enhanced only with digital content. Of course, the appearance of digital content is also important. And because it is digital content, it can respond to a wider range of user needs and usage environments by combining human readability with machine readability.

Let me give you another example: web pages can use images. If an image conveys some information, that information needs to be machine readable, and HTML allows the authors to set the alt attribute on the <img> element to provide alternative text that conveys the equivalent information to the user as the image. This allows users who cannot see the image on the browser screen to perceive that information by converting the alternative text described in the HTML code into audio using a screen reader or braille using a braille display.

Next, let’s look at an example from a slightly different perspective. Most web pages have links and buttons; in HTML, there is a <button> element for a button. If the <button> element is used, the browser allows keyboard operation, the screen reader reads “button,” and so on, to cover a variety of user environments.

However, in recent years, there have been scattered cases where buttons have been implemented in a unique way without using the standard <button> element, using JavaScript or other methods on the <div> element, for example. In many cases, these buttons are implemented so that they can be operated with a mouse, but they do not support keyboard operation or reading out loud as a button by a screen reader. A higher level of accessibility can be ensured by simply using standard HTML elements properly.

From Horton, S., & Sloan, D. (2024). What Every Engineer Should Know About Digital Accessibility. CRC Press, Boca Raton, Florida.