Accessibility 101

Basic guide to make pages accessible

This blog wil cover everything basic related to accessibility required for web pages. This can be considered as a quick guide to remember what to focus on when making your pages accessible. So what is web-accessibility? Web accessibility aims to provide equal access and opportunity to people with diverse abilities by removing barriers that prevent interaction with websites, including those related to vision, hearing, physical, speech, cognitive, and neurological disabilities.

A comprehansive guidelines are formulated by WCAG 2.0 which highlightes which sections and elements must be focused from accessibility point of view. The scope of guidelines are very broad and be categorised into three main levels.

WCAG Levels:

• Level A: not accessible
• Level AA: moderate level accessible
• Level AAA: highest level of accessible

Accessibility Tree

When the code is rendering elements as visual elements on the webpage, it is in parallel generating elements of accessibility tree as well. And at the heart of it is Semantics. You may use div for every html tag on the page, but it does not convey the specialized meanings. For example, main tag would indicate the main section of the page, much better than the div tag. Section tag and aside tag are much useful rather than the div tag.

Accessibility Testing

Generally, accessibility can be tested via following tools:

• Using Accessibility Tester (AT), e.g screen reader
• Contrast Checker
• Automated tools
  • Lighthouse
  • AxeDev tools
  • Wave tools
  • Accessibility inspector
• AI assistants

Assistive Technologies

Besides normal interaction devices, following assistive technologies are also used:

• Screen Readers
• Speech Recognization Software
• Screen Magnifiers
• Alternative Input devices

Color Contrast

You may have come across some text colors where they seem a little off but you can not explain what is wrong with them. Maybe size, or maybe font, but maybe something else. You may not be certain about it. The only thing you would be certain is that somehow you took an extra effort to read it. But sometimes the text stands out so well and so crisp that you enjoy what you are reading. This may be case of contrast-issue. Contrast is simply how well the foreground color is compatible with backrgound color. The synergy between these elements is indicative of contrast between them. Mostly, it is used in context of forground text with background color. In either case, it is imperative that color contrast must at desired level.

The extremes of color contrast lies between the ratio of 1:1 to 1:21. Black text against black background gives lowest possible contrast i.e. 1:1. Highest contrast is achieved in black text over white background giving contrast of 1:21. The level of contrast for text also depends on text size. For example,

• Requirement AA:
  • Text-size < 24px : contrast ratio must be minimum of 4.5:1
  • Text-size >= 24px : contrast ratio must be minimum of 3:1
• Requirement AAA:
  • Text-size < 24px : contrast ratio must be minimum of 7:1
  • Text-size >= 24px : contrast ratio must be minimum of 4.5:1

A quick check regarding contrast can be made at WebAim. This is not the only tool. Even Google-Chrome inspection tool can indicate about contrast levels of different elements on the page. But the main idea is simple: given the colors, check contrast of the combination. Select your desired level i.e. AA or AAA. And then select the suitable color and check it via contrast checker. Iterate the process until you achieve the desired contrast ratio. This may be a small change on the site but would greatly impact the major portion of the accessibility.

Alternative Text

Alternative text or alt-text are text description given in an image element of html (img). This text is for people who have little or no vision, people who have turned off images, and seo-crawlers to better understand the image context. Moreover, if for any reason image failed to load then this alt text would be displayed instead. So what are the best practices for defining the text inside alt-text?

Suggestive guidelines are:

• Clear and concise text; not length text, nor should start with a image of something.
• Background images do not need to have alt text
• Decorative images technically do not need alt text as this text would obviously not convey anything useful. But it should have an empty-string alt-text. Alt-text attribute is necessay otherwise it would read filename. Empty alt-text would indicate screen-reader to skip the image.
• Icons combined with text e.g. search icon in png used within a search bar also would require an empty alt-text attribute. This may be treated as decorative image.

Links

Links are elements on page used in navigation for taking user to some other page. But these elements also have some guidelines:

1. Should use anchor tag (<a>) tag
2. Should be recongnizable as Links
3. Should have non-ambigous text. For example, words like click here, continue, learn more are bad examples.

In the above example, first anchor link is very generic and is not underlined confusing it with a simple text with blue color. Second anchor link is underlined but still conveys a very generic message. Last option is perfect as visually, it is indicating a link and that too with a proper message. This generic message is now also highlighted in Lighhouse audit report. Also, if links are part of the paragraph, they should be distinguishable from rest of the paragraph and not just on the basis of colors i.e. underlined.

Food for though: What if a whole card with different elements like heading and images and even button are nested inside the achor/link tag? What should be done and is recommended.

Alternative Text (alt-text)

Alt text are now considered as important part of image-tag as source attribute. Alt text is the fallback text for image as well as text that is read out for screen readers. Alt text is often ignored by developers by either not providing it (though I doubt that becasue any audit e.g. lighthouse would immediatly flag that) or not being descriptive enough. ALt text must describe what the picture is about. It should be consice, can be a little length but it should not be more than a sectence. Also, alt text must have full stop at the end as for screen-readers, it would mean a pause before moving onto the next element.

Labels

Forms are an integral part of any site and so are the elements on it. Regarding those elements, just placing an input field with placeholder is not sufficient. Atleast not according to people of WCAG. What they recommend is to add label that is coupled with the input. For example, if first-name label is clicked it should focus in the input field of first name. This is done via for-prop and htmlFor prop in react.

The placeholder must contain resprestative text which is expected from the user. For example, enter your name is not a suitable text for place holder. More suitable would be 'Max Payne'.

Similarly, if native button is added as a submit button, it is accessible. But lets say, a div is added with an onClick handler pretending to be a button. In that case, a role with value of button must be specified along with aria-label which is same as text of button.

For Radio buttons

<fieldset class="radio-container">
  <legend>Do you have cats?</legend>
  <label for="yes">Yes</label>
  <input class="contact-radio" id="yes" type="radio" name="cats" />
  <label for="no">No</label>
  <input class="contact-radio" id="no" type="radio" name="cats" />
</fieldset>

Semantic HTML

The page can be populated by using divs alone. The functionality would be fine and you would not find any notable difference in UI. But screen-readers and SEO crawlers would. Because they are not after UI or visual elements. They are after the story that your specific elements paint and give the resultant structure on the page. The page can be made semantically correct by using following landmarks:

• nav
• header
• main
• section
• footer

There are other HTML elements as well such as article, aside etc. These tags better communicate the purpose of the elements and content within those elements in comparison to simple div tags. These tags also allow for predictibility of page and content.

Another items with respect to nav and footer is li tags. Normally items in navbar and footer are links to other pages or sections. And these appear in groups. The items in groups are normally treated as list items and group parent is either ordered or unordered list. Again the concept here is same: the list and list items convey clear information in comparison to bunch of divs.

Headings

Headings are crucial from seo purpose as well as from semantic purpose. Headings provides information about the structure of the page along with above mentioned tags. They help user navigate through the page. The concept for heading is that it signals beginning of a new section. But there are three main rules to follow when it comes to headings:

• There should be only one h1 per page.
• Heading numbers should be consective. E.g, after specifying h1, any next heading must be h2, not h4 or h3.
• Headings are applied for sturctural reason, not for styles. Styles can be modified via CSS.

For second rule, this must be kept in mind that when it comes to consective headings, it means any nested headings must be less in level than its parent heading. But if there are three sections with opening headings, first can be h1, and last two can be h2.

ARIA-rules

The ARIA stands for Accessible Rich Internet Applications: it provides a way through appropriate labels to make web elements more accessible and readable for assistive technologies like screen readers and recognization softwares. They purpose is to complement html tags so that they are accessible. They are, therefore, normally used when creating a component that does not exist in html native tags. Where html provides elements, they must be used. Native elements like button for example, has its own functionality of hover, click and even are accessbile. But if you want to achieve same effects with, lets say a div, you need to make them accessible. Aria lables here would provide additional information or context. A simple example for a toggle button is given below:

  <div 
    id="toggleTheme" 
    onclick="toggleTheme()" 
    role="switch" 
    aria-checked="false" 
    tabindex="0"
    >
      Light Mode
  </div>

Here role, aria-checked and tabindex are provided for making this element accessbile.

Therefore, if native html elements exist, avoid using aria lables.

Final Remarks

There are many aspects of accessibility that needs to be looked into to make web app fully accessbile. As a rough guide, there are some major points which are listed below: