{"id":1022,"date":"2023-08-10T13:00:02","date_gmt":"2023-08-10T17:00:02","guid":{"rendered":"https:\/\/opentextbooks.concordia.ca\/pressbooksuserguide\/?post_type=chapter&p=1022"},"modified":"2025-08-13T11:17:51","modified_gmt":"2025-08-13T15:17:51","slug":"accessible-html","status":"publish","type":"chapter","link":"https:\/\/opentextbooks.concordia.ca\/pressbooksuserguide\/chapter\/accessible-html\/","title":{"raw":"Accessible HTML","rendered":"Accessible HTML"},"content":{"raw":"
\r\n

Best HTML Accessibility Practices in<\/h2>\r\n
\r\n

Pressbooks<\/h2>\r\n<\/div>\r\n<\/div>\r\nHypertext Markup Language (HTML) is the backbone of any web page; it structures your text, images, and other informative elements to be displayed. Pressbooks inherently generates semantic HTML designed for assistive technologies, which is visible by examining the markup in the text editor or by using the inspect tool available in most web browsers. To understand what is happening in the text editor and whether improvements are needed, let us take a moment to go over practices that make HTML well-structured and readable.\r\n

Use Specific Tags Instead of Generic Tags<\/h3>\r\nSpecificity enables users and assistive technologies to recognize the different elements within the page, thereby defining their purpose. Using tags <h1><\/span> to <h6><\/span> indicates that six headings are structuring the content. Using the paragraph <p><\/span> tag confines the body text in its paragraph. Hyperlink tags, such as <a>,\u00a0enable links to be embedded as clickable text.\r\n\r\nSpecific rather than generic tags clearly define elements on a page. Examples of generic tags include <div><\/span> to mark a division and <span><\/span> to mark up a part of text. Although a <div><\/span> can be styled to resemble a paragraph or a header, the paragraph and header tags will be more effectively interpreted by assistive technologies.\r\n\r\nFor example:\r\n
\r\n
  HTML:\r\n<\/pre>\r\n
<h1> Welcome to Accessible Design <\/span><\/h1>\r\n<p> Best practices for creating accessible content using semantic HTML. <\/span><\/p>\r\n<a href<\/span>=\"https:\/\/example.com\/learn-more\"<\/span>> Learn more about accessibility. <\/span><\/a>\r\n<\/pre>\r\n<\/div>\r\n
Use Proper Headings<\/h3>\r\nHeadings provide structure to a page and its body text. When you title your chapters through the organizational structure of your site, Pressbooks automatically marks up your chapter title with the <h1 class<\/span>=\"entry-title\"<\/span>><\/span> tag. The text editor enables the use of header tags <h2><\/span>, <h3><\/span> \u2026 <h6><\/span> that convey the hierarchy of information on your page.\u00a0 Skipping levels, such as jumping from <h2> to <h5>, can disrupt the reading flow for users of\u00a0assistive technologies. Ensure that the headers are in order.\r\n\r\nFor example:\r\n
\r\n
  HTML:\r\n<\/pre>\r\n
<h1> Introduction to Accessible Design <\/span><\/h1>\r\n<h2> What are some best accessibility practices in your Pressbook? <\/span><\/h2>\r\n<h3> Use Proper Headings <\/span><\/h3>\r\n<\/pre>\r\n<\/div>\r\n
Provide Meaningful Text when Hyperlinking<\/h3>\r\nWhen required to hyperlink to navigate to an external link, the hyperlinked text should meaningfully describe the link's purpose. Hyperlinking to other sources using text like \u201cclick here\u201d can cause ambiguity for both screen readers and people. The text with the underlying link should be able to convey information regarding the link without users having to rely on the surrounding text.\r\n\r\nFor example:\r\n
\r\n
  HTML:\r\n<\/pre>\r\n
<a href<\/span>=\"https:\/\/pressbooks.com\/accessibility\"<\/span>> Accessibility guide. <\/span><\/a>\r\n<\/pre>\r\n<\/div>\r\n
Add Alternative Text for Images<\/h3>\r\nAlt text (alternative text, or alt attributes) for images is an attribute denoted by alt<\/span>=\"\"<\/span> in the <img><\/span> image tag. It allows a text alternative to display if the image fails to load and enables accessible technologies to obtain a description of the image through the alt<\/span> attribute. The alternative text should be concise yet descriptive of the image. A concise description is crucial for visually impaired users to comprehend the key elements conveyed by the images on the page through screen readers.\r\n\r\nFor example:\r\n
\r\n
  HTML:\r\n<\/pre>\r\n
<img src<\/span>=\"images\/photo-one.jpeg\"<\/span> alt<\/span>=\"A dog playing in the park.\"<\/span>>\r\n<\/pre>\r\n<\/div>\r\n
Ensure Table Accessibility<\/h3>\r\nTables are used to organize data in rows and columns and are understood in relation to each other. The header cells are created using the <th><\/span> tag. A scope<\/span> attribute in the <th><\/span> tag specifies whether the header is a column header (<th scope<\/span>=\"col\"<\/span>><\/span>) or a row header (<th scope<\/span>=\"row\"<\/span>><\/span>). Keeping the table simple and clean by using one piece of data per cell (atomic) facilitates accessibility. An accessible table avoids merged cells, which disrupt the logical flow of information. Rather than merging cells, include the caption beneath the table to concisely describe the idea of what the data represents. Using tables for anything else, such as fixing page layouts, should be avoided.\r\n\r\nFor example:\r\n
\r\n
  HTML:\r\n<\/pre>\r\n
<table>\r\n  <tr>\r\n    <th scope<\/span>=\"col\"<\/span>> Genre <\/span><\/th>\r\n    <th scope<\/span>=\"col\"<\/span>> Author <\/span><\/th>\r\n  <\/tr>\r\n  <tr>\r\n    <td> Design <\/span><\/td>\r\n    <td> William <\/span><\/td>\r\n  <\/tr>\r\n<\/table>\r\n<\/pre>\r\n<\/div>\r\n
Text Formatting Conventions<\/h3>\r\nFormatting with appropriate HTML tags enhances readability.\u00a0 We have listed the function of four of the most used tags:\r\n