Digital content is consumed by devices from many sources, the most consumed types being through Webpages, PDFs, audio, video, and other multimedia. We take a look at the definition of these digital spaces, and how they are interpreted by assistive devices.
Webpages and websites
A web page is a document that displays content in a browser. This content is written in XML and HTML (a markup language we will review in the HTML element's class). Content can be in the form of text, links, images, scripted content (eg javascript snippets), embedded multimedia, and style information (such as CSS scripts), and downloadable content such as PDFs.Each webpage is accessed through its Unique Resource Locator (URL), which is typed into a browser's address bar.
A website is a set of linked web pages and their resources (images, links, etc) that share a unique domain name. A domain name is a registered name for a website, in which all other pages are annexed under. For example for this website allysyllabus.site is the domain name, and allysyllbus.site/glossary is an annexed page for the website's glossary. Most websites have a "menu" that serves as a guide to the important sections of the website. Websites can be visited by typing their domain name into a browser's address bar.
Web pages are accessed through an application program interface (API) known as the Document Object Model, or DOM (more of this in a later class). The semantic markup (see the chapter on semantic markup) of the HTML elements in the DOM is what is parsed and interpreted by assistive devices.
Portable Document Format (PDF)
PDF is a file format created by Adobe and is used to share documentation without the need for software implementation, a hardware platform, or an operating system. According to Adobe, "Adobe co-founder Dr. John Warnock launched the paper-to-digital revolution with an idea he called, The Camelot Project. The goal was to enable anyone to capture documents from any application, send electronic versions of these documents anywhere, and view and print them on any machine. By 1992, Camelot had developed into PDF."
PDFs also contain information such as links, images, buttons, form fields, audio, video, and business logic. Adobe has also created an accessibility tool based on section 508 standards for PDF accessibility. Section 508, which we cover in a later class is a US-based government standard for documents, including PDFs.
PDFs are marked up similarly to XML and HTML in the DOM. A PDF document is interpreted by the use of tags, which reveal its tagged document structure. This includes headers, content sections, images, multimedia, bookmark tags, and more. The structure tree of these tags presents the logical, organizational structure of the document. The tags mark the reading order of each PDF document, which leads to clear navigation by assistive devices. A document that has not been tagged and lacks this structural information leaves PDF readers to determine a structure, which may lead to page items not being read or interpreted in the wrong order.
Multimedia
As you create digital content you may want to combine text with audio, video, images, and other types of media. Multimedia refers to the combination of these elements on a webpage. Here is a brief description of the most used media on webpages.
Text
Text refers to the words, numbers, and punctuation on a page, that is represented by headings, paragraphs, forms, links, lists, and more. Assistive devices look at the document tree to interpret how text is represented on a page and in which order it is to be read. For example, a header would have the <h1>,<h2> and so on a tag, and it would be read as a header, indicating the heading of a section.
Images and Graphics
Photographs, logos, maps, icons are also read in a specific way by assistive devices. Once again, it all depends on how these elements are marked up and defined in HTML. An image tag would therefore have to have the <img> HTML element but also have a description of what the consumer should be receiving about its meaning on that page. We would then add the alternative text element for this description, making the tag.
<img src="example.jpg" alt="this example image's visual description">EXAMPLE Image</img>
Our upcoming class about semantic markup will cover this in detail.
Video
Audio