Learn how to maximize web accessibility with our in-depth guide. Explore essential HTML structures, ARIA practices, and practical tips to make your website universally user-friendly, ensuring a seamless browsing experience for all, including those using assistive technologies.

Enhancing Web Accessibility: A Comprehensive Guide to HTML Structures & ARIA for Assistive Technologies

Discover the art of creating inclusive web experiences. Dive into best practices, HTML structures, and ARIA roles to make your website truly accessible for all.

In the previous <a href="/blog/follow-accessibility-rules-for-successful-software/">blog post</a>, I discussed accessibility rules for successful software. We realized that around 20% of the population has some sort of disability and companies who continue to ignore accessibility are already losing customers and will end up losing even more in the coming years. Now, when we have knowledge of WCAG guidelines it&rsquo;s time to see how we can apply those rules to our digital product.
<h2>Clean markup</h2>
The clean HTML structure is what every developer must follow to make page complied with multiple browsers and devices. We need to make sure that we don't have duplicated IDs, HTML tags that are not closed, and so on. Our page structure has two major meanings.
<ol>
<li>Our document page in the development sense. How the page itself is structured, the frame or architecture. This is machine-readable code which is important for assistive technologies like screen readers.</li>
<li>Our document page related to the information architecture of the page. Our document must be human-readable and keep order that makes sense for end-user. We should consider that assistive technologies don't see information in human-readable form. One part of this are "landmarks". Landmarks are sectioning containers, standard ways of designating sections for your page. These are HTML5 elements like header, main, footer, etc.</li>
</ol>
<h2>Page navigation</h2>
The way you navigate through the content of a single web page and find what you're looking for sighted users is very important. Designing a clear hierarchy and visual design of the page is what does most of the work, as well as the position and layout of navigation menu. The main content is usually a large section with large text near the center top of the page.
<img src="https://pnzdemostorageaccount.blob.core.windows.net/app/bcfe579d26194718ae414b93e51f7a0b.jpg" alt="Graphical user interface representing clear visual hierarchy." />
Image: Define clear visual hierarchy
Screen readers don't see the page like sighted users. Screen readers see the page in form of accessibility tree. Navigating with a screen reader can be very frustrating even with a very simple page. Without a clear structure, you may see the main content first or navigation may be rendered as a simple link. Some elements can be almost impossible to find.
Defining landmark roles navigation for screen readers can be simplified and solved. For example:
<pre>&lt;div role="main"&gt; &nbsp;&nbsp; &lt;h1&gt;Full-Scale Digital Development Solutions&lt;/h1&gt; &nbsp; .... &lt;/div&gt;</pre>
With landmark roles on the screen reader, there is no need for manual walk through each element. We can get to the desired section by using landmarks tool: <img src="https://pnzdemostorageaccount.blob.core.windows.net/app/56291aaa72a447fd9e77905d41ed854f.jpg" alt="Landmark roles on the screen reader." />
Selecting main element reads: <img src="https://pnzdemostorageaccount.blob.core.windows.net/app/32b7cc34b45f4df6b8aad1bfcaaac4ad.jpg" alt="graphical user interface, application" />
With landmark roles, we increase user experience. They assign meaning to certain places on your page. Screen readers can use that meaning to navigate your page. They can get to the main content, navigation, articles, and so on. Primary landmark roles:
<ul>
<li>Main</li>
<li>Banner</li>
<li>Article</li>
<li>Region</li>
<li>Complementary</li>
<li>Form</li>
<li>Navigation</li>
<li>Content info</li>
<li>Search</li>
</ul>
If you want to have a clean HTML structure and avoid landmark roles you can use semantic section elements. It means that the meaning is included in the element and landmark roles are built in. Now our HTML can be simplified with the same meaning but just less code.
<pre>&lt;div&nbsp;role="main"&gt;....&lt;/div&gt;
&lt;main&gt;...&lt;/main&nbsp;&gt;
 OR

&lt;div&nbsp;role="navigation"&gt;....&lt;/div&gt;
&lt;nav&gt;...&lt;/nav&gt;
</pre>
In the following table you can see major semantic elements.
<table border="0">
<tbody>
<tr>
<td>Element</td>
<td>Meaning</td>
</tr>
<tr>
<td>&lt;main&gt;</td>
<td>Main content on the page.</td>
</tr>
<tr>
<td>&lt;section&gt;</td>
<td>Major sections of the page.</td>
</tr>
<tr>
<td>&lt;nav&gt;</td>
<td>Links to navigate.</td>
</tr>
<tr>
<td>&lt;aside&gt;</td>
<td>Complementary to the main content.</td>
</tr>
</tbody>
</table>
For more information, explore the W3C&nbsp;<a href="https://www.w3.org/TR/wai-aria-practices/examples/landmarks/main.html" target="_blank" rel="noopener">ARIA Landmarks Example</a>.
<h3>DIV vs Section</h3>
​Main difference between divs and sections is that divs don't convey meaning, but they are useful for generic grouping of elements. The section element is for sections, which make sense to your visitors.
<h2>Headlines</h2>
People who cannot see the visual cues of a web page rely on title and heading elements to understand how the page is structured. Headlines are used to create an outline of our page. They show relationship of subsections and model of our page. <img src="https://pnzdemostorageaccount.blob.core.windows.net/app/85d0ed026aa2481d8d52b4980c764e95.jpg" alt="Headlines are used to create an outline of our page." />
This only works if the headlines are set up properly, so follow these guidelines. Use only one h1 per page. Your h1 is usually the title of your page. You should never skip levels, if there is an h6 on your page then there should be h5, h4, h3, and h2 above it. <img src="https://pnzdemostorageaccount.blob.core.windows.net/app/a4ded1c302ab45e4a88b9d5492e5029e.jpg" alt="text" />
<h2>Accessible Rich Internet Applications &ndash; ARIA</h2>
Accessible Rich Internet Applications (ARIA) is a technical specification that can work in tandem with HTML5 to help make web pages and applications more accessible. ARIA is not part of HTML5, but its attributes can be used in conjunction with HTML5 elements in certain instances. For more information, learn more about&nbsp;<a href="https://www.w3.org/TR/html-aria/#rules-wd" target="_blank" rel="noopener">ARIA in HTML</a>.
Attributes can be added to elements to add information to the accessibility tree.
To give sections a name, we have two options:
<ol>
<li>Add aria-label. By adding an aria-label, now our sections appear on VoiceOver. 
<pre>&nbsp;&nbsp;&lt;section&nbsp;aria-label="Why Choose Penzle?"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;Why Choose Penzle?&lt;/h2&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Start-to-finish digital optimization that builds companies.
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
</pre>
The main disadvantage of this approach is when changing one of the headlines you also have to change the ARIA label to match it. <img src="https://pnzdemostorageaccount.blob.core.windows.net/app/f1e4e9fb9727431b802e7d86dac51604.jpg" alt="graphical user interface, application" />
</li>
<li>
Using aria-labelledby attribute to use the h2 as the label. For aria-labelledby to work we need to give the headlines a nuque ID and use aria-labelledby to point to that ID.
<pre>&nbsp;&nbsp;&nbsp;&lt;section&nbsp;aria-labelledby="penzle-mesh-header"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&nbsp;id="penzle-mesh-header"&gt;Why Choose Penzle?&lt;/h2&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Start-to-finish digital optimization that builds companies.
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
</pre>
</li>
</ol>
<h2>Links</h2>
Links are fundamental to the internet browsing experience. They should clearly communicate their purpose. Ensure that link names are meaningful, unique, and descriptive, whether in or out of context. Links text which seems clear for sighted visitors might be confusing for unsighted visitors.
The example most often used is a "Read more" or "Continue reading" link when displaying a truncated description of a longer chunk of text like a blog post. Navigating with a screen reader or screener like device will hit these in here &ldquo;Read more&rdquo;, "Read more" over and over for each one. They don't have context about what they would be reading more about depending on how they navigate to the link. This can be fixed on the following way:
<pre>&lt;a&nbsp;href=/blog/follow-accessibility-rules-for-successful-software/&nbsp;class="blog-item-container"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&nbsp;class="visually-hidden"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Continue&nbsp;reading:&nbsp;How&nbsp;to&nbsp;Start&nbsp;With&nbsp;Your&nbsp;Application's&nbsp;Performance&nbsp;Optimization
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/span&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&lt;/a&gt;
</pre>
<pre>.blog-item-container::before{
 content: 'Continue reading';
}
</pre>
Now screen reader will read the informative text, but we will have the visually appropriate &ldquo;Read more&rdquo; label for those who can see.
<h3>Define Link Purpose with Alt Text on Image Links</h3>
If you are using an image as a link, that image alt text will be read to describe the link. For example, it&rsquo;s common to see a company logo in the navigation bar which functions as a link to take you to the Home page. If we make the alt text simply site logo, then it doesn&rsquo;t convey what will happen.
<img src="https://pnzdemostorageaccount.blob.core.windows.net/app/5d79d0021b7b4eaca5d7eaaf2c202b66.jpg" alt="graphical user interface, application" />
<pre>&lt;a&nbsp;href="/"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;img&nbsp;src="/logo.svg"&nbsp;alt="Site&nbsp;logo."&gt;
&lt;/a&gt;
</pre>
Changing it to site home helps this image to function as a link rather than its slightly unimportant function as an image.
<h2>Text alternatives</h2>
Assistive technologies cannot read text in images, and when using images and not supplying a text alternative, users with vision impairments may miss out on the meaning or lack comprehension of your content.
Every type of media presents some sort of a problem.
<table border="0">
<tbody>
<tr>
<td>Media type</td>
<td>Causes problems for</td>
</tr>
<tr>
<td>Images</td>
<td>Unsighted visitors</td>
</tr>
<tr>
<td>Audio</td>
<td>Hard of hearing visitors</td>
</tr>
<tr>
<td>Video</td>
<td>Unsighted and hard of hearing visitors</td>
</tr>
</tbody>
</table>
The idea behind text alternatives is that we have a fallback option of plain text.
<h3>Set Alt text on All meaningful images</h3>
Alt text should be set on every image that appears on the page. If it is not set, screen reader will just read out the image name, for example img-0334 which is poor alt text.
Make sure that you provide specific, and informative alternative text.
<div>
Inaccessible image example:
<pre>&lt;img&nbsp;src="/logo.svg"&nbsp;alt="logo"&nbsp;/&gt;</pre>
 Accessible&nbsp;image&nbsp;example:
<pre>&lt;img src="/logo.svg" alt="Penzle logo." /&gt;</pre>
</div>
While the inaccessible example describes the image as a logo, it does not specify the type of logo, so it is not helpful to someone who relies on alt text. With the addition of the qualifier in the accessible example, a user will know exactly what the logo is.
<h3>Audio and Video</h3>
Alternatives text for audio and video should be provided. Audio &ndash; Text transcript Video &ndash; Subtitle track or text transcript
<h3>SVG</h3>
SVG is not recognized as an image by the assistive technologies. You can achieve it by adding role of image directly on the SVG. SVGs have a title tag that we can use to label this image. Adding aria-labelled by on the SVG will reference the title.
<pre>&lt;svg&nbsp;role="img"&nbsp;aria-labelledby="facebook-title"&nbsp;xmlns="http://www.w3.org/2000/svg"&nbsp;viewBox="0&nbsp;0&nbsp;28.298&nbsp;28.299"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;title id="facebook-title"&gt;Follow&nbsp;on&nbsp;Facebook&lt;/title&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;path&nbsp;id="Path_52"&nbsp;data-name="Path&nbsp;52"&nbsp;d="M216.275,156.8h0a14.149,14.149,0,0,1-14.149-14.149h0a14.149,14.149,0,0,1,14.149-14.15h0a14.149,14.149,0,0,1,14.15,14.15h0A14.149,14.149,0,0,1,216.275,156.8Z"&nbsp;transform="translate(-202.126&nbsp;-128.505)"&nbsp;fill="#1976d2"&gt;&lt;/path&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;g&nbsp;id="Group_37"&nbsp;data-name="Group&nbsp;37"&nbsp;transform="translate(6.391&nbsp;6.391)"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;path&nbsp;id="Path_54"&nbsp;data-name="Path&nbsp;54"&nbsp;d="M219.782,142.178a3.984,3.984,0,1,0,3.984,3.984,3.984,3.984,0,0,0-3.984-3.984m0,6.57a2.586,2.586,0,1,1,2.586-2.586,2.586,2.586,0,0,1-2.586,2.586"&nbsp;transform="translate(-212.024&nbsp;-138.403)"&nbsp;fill="#fff"&gt;&lt;/path&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;path&nbsp;id="Path_55"&nbsp;data-name="Path&nbsp;55"&nbsp;d="M227.336,141.645a.931.931,0,1,1-.931-.931.931.931,0,0,1,.931.931"&nbsp;transform="translate(-214.506&nbsp;-138.028)"&nbsp;fill="#fff"&gt;&lt;/path&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/g&gt;
&lt;/svg&gt;
</pre>
<h2>Color Blindness</h2>
Colors on our website can have a significant impact on accessibility and essential consideration when creating any digital product. About 8% of men and half a percent of women have some sort of color blindness. People that are color blind cannot see differences in certain color combinations. Most common forms are red-green deficiencies which make it difficult to distinguish between red and green values when they&rsquo;re of the same darkness. These could be further broken down into two categories.
<h3>Red deficiencies</h3>
Reds and greens look similar to one another and appear more as a beige.
<img src="https://pnzdemostorageaccount.blob.core.windows.net/app/bbd04e61ea7a4994acb0277436b1b3b0.jpg" alt="chart, bar chart" />
<h3>Green Deficiencies</h3>
These are very similar to red efficiencies, but the reds don't look as dark.
<img src="https://pnzdemostorageaccount.blob.core.windows.net/app/36dcac3962b2411d91af91badeae4991.jpg" alt="chart, bar chart" />
<h3>Other</h3>
There are those that can see no color at all. This very rare.
There are a few other design considerations regarding color. Different displays display color differently for many of us, developers and designers are likely to have a nice high-resolution display. Also, environmental lighting can influence how colors are perceived. For example, bright light sunlight will make it much more difficult to distinguish between color values.
How our site appears for those with color blindness can be checked with many different tools, but one that works pretty well is Chrome browser extension &ldquo;I want to see like the color blind".
<img src="https://pnzdemostorageaccount.blob.core.windows.net/app/b706fd509e414c2bb88f4cc63aa48827.jpg" alt="graphical user interface, application, Word" />
Ensure that text and images of text provide a color contrast ratio of at least 4.5 to 1. There are several free color contrast analyzers available online. For example, you can use the&nbsp;<a href="https://accessibilityinsights.io/docs/en/windows/getstarted/colorcontrast" target="_blank" rel="noopener">Color Contrast Analyzer in Accessibility Insights in Windows</a>&nbsp;to ensure accessible contrast ratios.
<h2>Conclusion</h2>
We have seen many factors which make web experience difficult for people to understand and how to fix them. There are many technics benefits for those using assistive technologies like screen readers and switch devices. You&rsquo;ve learned about some of the essential requirements for building accessible websites and apps.
In the next article, I will cover keyboard accessibility and how to make web form accessible.

Unleash the Full Potential of Your Website with Superior Accessibility

Digital Assets Management

Content Hub

Resources

Company