Unleash the Full Potential of Your Website with Superior Accessibility

In the previous blog post, 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’s time to see how we can apply those rules to our digital product.

Clean markup

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.

1. 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.
2. 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.

Page navigation

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.

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:

<div role="main">
    <h1>Full-Scale Digital Development Solutions</h1>
   ....
 </div>

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:

Selecting main element reads:

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:

• Main
• Banner
• Article
• Region
• Complementary
• Form
• Navigation
• Content info
• Search

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.

<div role="main">....</div>
<main>...</main >

OR

<div role="navigation">....</div>
<nav>...</nav>

In the following table you can see major semantic elements.

For more information, explore the W3C ARIA Landmarks Example.

DIV vs Section

​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.

Headlines

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.

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.

Accessible Rich Internet Applications – ARIA

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 ARIA in HTML.

Attributes can be added to elements to add information to the accessibility tree.

To give sections a name, we have two options:

1. Add aria-label. By adding an aria-label, now our sections appear on VoiceOver.
   
   

     <section aria-label="Why Choose Penzle?">
           <h2>Why Choose Penzle?</h2>
           <p>
               Start-to-finish digital optimization that builds companies.
           </p>
       </section>
   

   The main disadvantage of this approach is when changing one of the headlines you also have to change the ARIA label to match it.
   
   

2. 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.

      <section aria-labelledby="penzle-mesh-header">
           <h2 id="penzle-mesh-header">Why Choose Penzle?</h2>
           <p>
               Start-to-finish digital optimization that builds companies.
           </p>
       </section>
   

Links

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 “Read more”, "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:

<a href=/blog/follow-accessibility-rules-for-successful-software/ class="blog-item-container">
            <span class="visually-hidden">
                Continue reading: How to Start With Your Application's Performance Optimization
            </span>
        </div>
    </div>
</a>

.blog-item-container::before{
    content: 'Continue reading';
}

Now screen reader will read the informative text, but we will have the visually appropriate “Read more” label for those who can see.

Define Link Purpose with Alt Text on Image Links

If you are using an image as a link, that image alt text will be read to describe the link. For example, it’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’t convey what will happen.

<a href="/">
    <img src="/logo.svg" alt="Site logo.">
</a>

Changing it to site home helps this image to function as a link rather than its slightly unimportant function as an image.

Text alternatives

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.

The idea behind text alternatives is that we have a fallback option of plain text.

Set Alt text on All meaningful images

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.

<img src="/logo.svg" alt="logo" />

<img src="/logo.svg" alt="Penzle logo." />

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.

Audio and Video

Alternatives text for audio and video should be provided.
Audio – Text transcript
Video – Subtitle track or text transcript

SVG

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.

<svg role="img" aria-labelledby="facebook-title" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.298 28.299">
    <title id="facebook-title">Follow on Facebook</title>
    <path id="Path_52" data-name="Path 52" 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" transform="translate(-202.126 -128.505)" fill="#1976d2"></path>
    <g id="Group_37" data-name="Group 37" transform="translate(6.391 6.391)">
        <path id="Path_54" data-name="Path 54" 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" transform="translate(-212.024 -138.403)" fill="#fff"></path>
        <path id="Path_55" data-name="Path 55" d="M227.336,141.645a.931.931,0,1,1-.931-.931.931.931,0,0,1,.931.931" transform="translate(-214.506 -138.028)" fill="#fff"></path>
    </g>
</svg>

Color Blindness

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’re of the same darkness. These could be further broken down into two categories.

Red deficiencies

Reds and greens look similar to one another and appear more as a beige.

Green Deficiencies

These are very similar to red efficiencies, but the reds don't look as dark.

Other

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 “I want to see like the color blind".

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 Color Contrast Analyzer in Accessibility Insights in Windows to ensure accessible contrast ratios.

Conclusion

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’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.