DEV Community: Rahul Raveendran

Accessibility (a11y) Rules - 5

Rahul Raveendran — Sat, 16 Nov 2024 14:31:27 +0000

Video and audio

Four main types of alternative media types: captions, transcripts, audio descriptions, and sign language interpretation should be included with audio and media files. These alternatives should be based on:
- The type of media supporting—audio-only, video-only, or video with audio (multimedia) formats
- Whether the media is live or prerecorded
- The version and level of WCAG compliance targeting
- Any additional media-related user needs

Forms

Fields

Use standard HTML elements and patterns whenever possible, rather than creating custom components with ARIA.

Not Recommended — Custom HTML with ARIA

<div role="form" id="sundae-order-form">
  //form content
</div>

Recommended — Standard HTML

<form id="sundae-order-form">
  //form content
</form>

Should add HTML autocomplete attributes to the fields.
Form fields should not produce contextual changes when they receive focus or user input unless the user has been warned about the behaviour before using the component (e.g. a form should not be automatically submitted when a field receives focus or once a user adds content to the field.)

Labels

Ensure every form field has a clear, accurate, and programmatically associated label.

Descriptions

Field descriptions are not required for accessibility if the labels or form instructions are descriptive enough.
Add field descriptions when more information is necessary to prevent user errors. For example, include input requirements like password length or specific date formats (e.g., MM-DD-YYYY).
Use the aria-describedby attribute to link field descriptions to form elements. This ensures screen readers read both the label and the description, improving clarity for users.

Errors

When a form error occurs, make the error immediately known. Clearly identify the field where the error happened and provide a concise, descriptive text explaining the error to the user.
There are different methods for displaying error messages, such as:
- A modal, inline near where the error occurred
- A collection of errors grouped in one larger message at the top of the page
Be sure to pay attention to the keyboard focus and ARIA live region options when announcing errors.
Whenever possible, offer the user a detailed suggestion on how to fix the error. There are two attributes available to notify users of errors.
- You can use the HTML requiredattribute. The browser will supply a generic error message based on the filed validation parameters.
- Or you can use the aria-required attribute to share a customized error message to ATs. Only ATs will receive the message unless you add additional code to make the message visible to all users.

Additional success criteria

Target Size (Minimum)

Consistent Help

Accessible Authentication

Redundant Entry

Accessibility (a11y) Rules - 4

Rahul Raveendran — Sat, 16 Nov 2024 14:30:35 +0000

Color and contrast

Regular-sized text, including images of text, must have a color contrast ratio of 4.5:1.
Large-sized text (18pt / 24px or 14pt / 18.5px bolded) and essential icons must have a color contrast ratio of 3:1.
To find out color contrast ratio use google Chrome's DevTools color picker.
Include an additional identifier, such as a pattern, text, or icon, alongside color in graphs, charts, and tables to enhance content understanding for all users.
Create a dark theme with @prefers-color-scheme.
Create a high contrast theme @prefers-contrast.

Animation and motion

Flashing and moving content

Do not contain anything that flashesmore than three times in any one second period.
Flashes below the general flash and red flash threshold.

Pause, stop, or hide movement

Add a pause, stop, or hide mechanism in the page to allow users to turn off potentially problematic motion animation.
Can do this on the screen level or element level.

Use media queries

With the help of @prefers-reduced-motion media query checks the user's OS settings related to animation and design site that respects these preferences.

Typography

The quickest way to create an accessible design is to choose a common typeface (such as Arial, Times New Roman, Calibri, Verdana, and many others).
Avoid ornate or handwritten typefaces, as well as ones with only one character case available (for example, only uppercase characters).
When you are looking for the typeface, pay particular attention to the following:
- Use common fonts whenever possible.
- Avoid using elaborate or handwritten fonts and those with only one character case.
- Pick a typeface with unique characteristics—paying special attention to the uppercase I, lowercase l, and 1.
- Review certain letter combinations to be sure they are not an exact mirror image of one another.
- Check the kerning, especially between the r and n letter pair.

Font size and typographic styling

Base font sizes should be defined with a relative value (%, rem, or em) to allow for resizing.
Limit the number of typeface variations like color, bold, ALL CAPS, and italics to increase readability. Instead, use methods to emphasize words in your copy, such as asterisks, dashes, or highlighting an individual word.
Use markup instead of text on images whenever possible. Screen readers cannot read embedded text on images (without extra code added), and embedded text can also become pixelated when magnified by low-vision users.

Structure and layout

Critical elements should be distinct from one another, and similar elements should be grouped together.

Spacing

Text blocks should be kept narrow to improve readability and help readers with disabilities follow the content more easily.

Content alignment

Avoid justified text, as uneven spacing hinders readability, especially for people with disabilities. It can also distort word spacing, making word boundaries difficult to identify.
Spacing and tools such as Good Line-Height and the Golden Ratio Calculator to help make the copy more accessible.

Best practices for structure and layout

Use elements like headings, subheadings, lists, numbers, quote blocks, and other visual groupings to break the page into sections.
Use clearly defined paragraphs, sentences, and word spacing.
Build columns of copy that are smaller than 80 characters in width (40 characters for logograms).
Avoid justified paragraph alignment, which creates "rivers of space" within the copy.

Accessibility (a11y) Rules - 3

Rahul Raveendran — Sat, 16 Nov 2024 14:28:00 +0000

Images

It's not just about adding alt text to an image; it's much more than that.

Decorative images

If an image doesn't add additional context or information (decorative image) that allows the user to better understand the context then it should be hidden from assistive technology (AT), such as a screen reader.
Use any of these methods to hide images from AT:
- An empty or null text alternative (alt)
- Applying ARIA
- Add the image as a CSS background

<!-- All of these choices lead to the same result. -->
<img src=".../Ladybug.jpg" role="presentation">
<img src=".../Ladybug.jpg" role="none">
<img src=".../Ladybug.jpg" aria-hidden="true">

When in doubt, add descriptions to images.

Empty or null `alt`

Do not set the image alt attribute to "" unless the image is purely decorative.

Attribute	Example	Screen Reader Behavior	Use Case
alt="" (Empty)	<img src="logo.png" alt="">	Ignores the image completely	Decorative or non-informative images
Missing alt	<img src="photo.png">	May read the filename/URL	Not recommended; implies negligence

Informative images

If an image conveys a concept, idea, or emotion you should include programmatic alternative text describing the purpose of the image.
Add a highly detailed description of the image wherever possible.

e.g.

<img src=".../Ladybug_Swarm.jpg" alt="A swarm of red ladybugs is resting 
on the leaves of my prize rose bush.">

If the image is an (inline), add role="img".
Since elements do not support the alt attribute, use alternative coding methods to provide a description.

Method	Use Case	Pros	Cons
<title>	Short, brief descriptions	Simple, widely supported	Limited in length
aria-label	Brief descriptions	Quick, inline	Best for short text
aria-labelledby	Complex descriptions using <title> and <desc>	Comprehensive, flexible	More verbose
<figcaption>	Visible description in a figure context	Visible and accessible	Not ideal for all SVGs

Functional images

Any image with a functional purpose (e.g., a logo that links to the home page, a magnifying glass icon used as a search button) should include appropriate alt text.
Alt text should describe the image’s action, not its visual aspects.
If the image is both informative and actionable you can add alternative descriptions to each element—but it is not a requirement. e.g.

<div title="Navigate to the homepage">
   <a href="/">
      <img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"/>
   </a>
</div>

Complex images

If an image requires more explanation than a decorative, informational, or functional image include infographics, maps, graphs/charts, and complex illustrations use any of these methods to add alternative descriptions
Link out to a resource or provide a jump link to a longer explanation later on the page. e.g.

<img src=".../Ladybug_Anatomy.svg" alt="Diagram of the anatomy of a ladybug.">
<a href="ladybug-science.html">Learn more about the anatomy of a ladybug</a>

Append the aria-describedby attribute to the <img> element then link the image to an ID containing a longer description. e.g.

 <img src=".../Ladybug_Anatomy.svg" alt="Diagram of the anatomy of a ladybug." 
 aria-describedby="description">
 <p id="description">In this course, you will learn more about the 
    anatomy of a ladybug, including the head, 
    antenna, eye, pronotum, elytra, leg, abdomen, and wing.
 </p>

Group short alternative descriptions with a longer one is to use the <figure> and <figcaption> elements. e.g.

 <figure role="group">
      <img src=".../Ladybug_Anatomy.svg" alt="Diagram of the anatomy of a
      ladybug.">
      <br><br>
      <figcaption>
        <a href="ladybug-science.html">Learn more about the anatomy of a 
        ladybug</a>
      </figcaption>
  </figure>

Alternative text best practices

Advised to cap alternative text to 150 characters or less to avoid reader fatigue.
Avoid using words like "image of" or "photo of" in the description, as the screen reader will identify these file types.
When naming images, be as consistent and accurate as possible. Image names are a fallback when the alternative text is missing or ignored.
Avoid using non-alpha characters (for example, #, 9, &)
Use dashes between words rather than underscores in image names or alternative text.
Use proper punctuation whenever possible. Without it, the image descriptions will sound like one long, never-ending, run-on sentence.
Write alternative text like a human and not a robot. Keyword stuffing does not benefit anyone—people using screen readers will be annoyed, and search engine algorithms will penalize them.

Accessibility (a11y) Rules - 2

Rahul Raveendran — Sat, 16 Nov 2024 14:13:12 +0000

iFrames

<iframe> should include a title element inside the parent tag.
As a best practice, it is good to set the scrolling to "auto" or "yes" in the <iframe> tag settings. This allows people with low vision to be able to scroll into content within the <iframe> that they might not otherwise be able to see.

Focus order

The default focus order must be logical, intuitive, and match the visual order of a page.

Tabindex

An element that is normally focusable but is in an inactive state (e.g., a disabled input box or button) should be given a negative tabindex (tabindex="-1").
Should add the focus back to the element when active or needed (can use JS or TS).
Should avoid positive tabindex. Giving focus to non-interactive elements and disrupting the normal focus order may confuse and frustrate the users. Rarely do circumstances warrant adding a positive tabindex, such as tabindex=1 to a non-focusable element.

Skip links

A skip link must be included to help users bypass the navigation menu.
Skip link should includes context about the link's purpose (e.g. "Skip to main content" ) and can use additional ARIA properties like aria-labelledby, aria-label.
Skip link can be visible or visually hidden (based on design) until a user tabs to it.

Focus indicator

Make sure that focus indicator is not hidden beneath other components.

Browser default styling

Should not override the default browser focus styling (e.g. "outline: 0" or "outline: none").
Custom focus styles are allowed.

JavaScript

Trigger events

If a click event (e.g. onClick()) is applied to non-semantic elements (e.g. <div>) a keydown/keyup event must be added to detect the enter or space key press.

Page titles

Each page should have a title. It is acceptable to use the document.title property or a third-party package for this purpose

Dynamic content

Possible misuse	Correct use
Render large chunks of non-semantic HTML	Render smaller pieces of semantic HTML
Not allowing time for dynamic content to be recognized by assistive technology	Using a `setTimeout()` time delay to allow users to hear the full message
Applying style attributes for `onFocus()` dynamically	Use `:focus` for the related elements in your CSS stylesheet
Applying inline styles may cause user stylesheets to not be read properly	Keep your styles in CSS files to keep the consistency of the theme
Creating very large JavaScript files that slow down overall site performance	Use less JavaScript; prefer CSS for animations or sticky navigation for better performance

Component level focus management

When the user opens a modal, they should be able to navigate between the actionable elements within it (e.g., cancel and submit buttons) using the Tab key. However, the focus must remain confined to the modal, preventing the user from accessing elements outside of it unless they explicitly close the modal. This ensures that the focus is trapped within the modal.

Page level focus management

Focus must also be maintained when a user navigates from page-to-page.
Anytime a user clicks on a link to go to another page within the application, the focus is either kept in the same place or potentially placed somewhere else entirely.
Here are the suggested focus placements when the user navigates from one page to another.
Place focus on the main container with an aria-live announcement.
Put the focus back on a link to skip to the main content.
Move the focus to the top-level heading of the new page.

Component level state management

Component state should be managed using ARIA attributes (e.g. use an aria-expanded attribute to tell the user whether a drop-down menu or list is expanded or collapsed.).
It's important to be selective when applying ARIA attributes. Think through the user flow to understand what critical information should be conveyed to the user.

Page level state management

If content is added or updated dynamically on the page (e.g., an alert message or text change), it should be announced to the user.
Better to use
- React: react-aria-live or react-a11y-announcer
- Angular: LiveAnnouncer
- Vue: vue-a11y-utils

(continue...)

Accessibility (a11y) Rules - 1

Rahul Raveendran — Sat, 16 Nov 2024 08:21:03 +0000

Accessibility is about making sure everyone can use your website or app, no matter their abilities. Did you know that 1 in 6 people worldwide—that's over 1.3 billion—have some kind of disability? This could be anything from vision or hearing issues to motor or cognitive challenges. By building with accessibility in mind, you’re helping real people navigate the web more easily, whether they rely on a screen reader, voice commands, or just prefer keyboard shortcuts. It’s about creating a better, fairer experience for everyone—and it’s the right thing to do!
(The above part is brought to you by ChatGPT 🤷‍♂️)

If you want to dive deeper into a11y, check out these articles from MDN and WCAG. For a quick start, read this article on web.dev or watch this a11y podcast on YouTube.

These rules were created using the resources mentioned above. Feel free to comment if you find anything missing or incorrect.

ARIA (Accessible Rich Internet Applications) rules

The three main features of ARIA—roles, properties, and states/values—should be present in the HTML element. ARIA and HTML article
If the browser already supports an HTML tag with a built-in ARIA role, don't need to add ARIA manually e.g. <main>, <header>, <footer>, <aside>, <nav> etc.

Rule 1

Try to use semantic HTML elements.
ARIA is required only when an HTML element doesn't have a11y support.

Don't	Do
`<a role="button">Submit</a>`	`<button>Submit</button>`

Explanation: You don’t have to convert a hyperlink (<a>) to a button because we already have a semantically accurate element.

Rule 2

Do not add unnecessary ARIA to HTML

Don't	Do
`<h2 role="tab">Heading tab</h2>`	`<div role="tab"><h2>Heading tab</h2></div>`

Explanation: The <h2> element has an implicit ARIA role of heading. Additionally, it has an ARIA attribute called aria-level, which corresponds to the heading level (e.g.,<h1> is level 1, <h2> is level 2, and so on). So no need to add an extra role to the <h2> element.

Rule 3

All ARIA controls that users can interact with (not disabled) must work with the keyboard navigation.
If an element can’t be focused with the keyboard by default, you can add tabindex="0" to make it focusable.
Try to avoid using positive tabindex values (e.g., tabindex="1") because it can mess up the order in which users navigate with the keyboard.

Don't	Do
`<span role="button" tabindex="1">Submit</span>`	`<span role="button" tabindex="0">Submit</span>`

Rule 4

Don’t use role="presentation" or aria-hidden="true" on elements that need to be focusable (like those with tabindex="0").

Don't	Do
`<div aria-hidden="true"><button>Submit</button></div>`	`<div><button>Submit</button></div>`

Rule 5

Make sure users know what an interactive element does before they try to use it.
- Accessible names can be:
- The text inside the element (like for links)
- Alternative text (e.g., for images)
- A label (e.g., for form elements)

Example	Code
A plain link with text between the link tags	`<a href="shoes.html">Red leather boots</a>`
A linked image, where the image has alt text	`<a href="shoes.html"><img src="shoes.png" alt="Red leather boots"></a>`
A checkbox input with a label	`<input type="checkbox" id="shoes"><label for="shoes">Red leather boots</label>`

Landmarks

At least one landmark per page should be present to ensure content is navigable
Whenever possible, use semantic HTML elements like <header>, <nav>, <main>, and <footer>. If these aren't suitable, apply ARIA landmark roles (e.g., role="banner", role="navigation", role="main")

Headings

<h1> should be used for the page's highest and most important information
<h6> for the lowest and least important information
sequence of the heading levels is important so do not skip heading levels e.g. starting a section with an <h1> and immediately following it with an <h5> is a bad practice. Instead, you should progress to the <h5> in order. (If the design does not align with the default style of the heading, change it using CSS)

Tip: Why headings and landmarks are so important

Lists

<li> should only contain content or <dt> and <dd>
If a <div> is used to wrap the content inside an <li>, and the content within the <div> serves a specific role or meaning, ensure you add appropriate ARIA attributes to improve accessibility. However, avoid using redundant aria-label attributes unless necessary.

Page title

Page title should be small (55–60 characters) and the important information should be first.

Page language

The language attribute (lang) in the <html> tag should be set to the default language, English (en)
multi-language text, make sure to add a lang attribute to the corresponding element (such as a section or paragraph) with the correct two letter ISO 639 language code.

How to change angular material MatSnackBar color

Rahul Raveendran — Sat, 22 Apr 2023 10:24:16 +0000

Angular Material Snackbar is helpful for displaying information to users about API success or failure, among other things.

The general syntax for using the Snackbar is:

import { MatSnackBar } from '@angular/material/snack-bar';

constructor(private _snackBar: MatSnackBar) {}

this._snackBar.open(message, action, configuration)

If we want to change the color of the text, for example, to display an API failure message in red, we can pass a custom class through the configuration object using the panelClass property:

this._snackBar.open('Something went wrong!!!', '', { panelClass: "error-api", duration: 5000 })

An important point to note is that the panel class should be defined in the global stylesheet, such as Style.css, Style.scss or Style.sass.

Here's an example of defining the .error-api class in Style.css:

.error-api { --mdc-snackbar-supporting-text-color: #f44336; }

Real-world usage of Map and Set data types of JavaScript

Rahul Raveendran — Fri, 07 Apr 2023 14:09:47 +0000

If you are a JavaScript developer, you may have come across the Map and Set data types. When I first learned about these concepts, I had no idea how they would help me with real-world projects. But don't worry, I will share some examples of how I have used the concepts of Map and Set in my own projects.

If you don't know about the concept read here

1. Removing duplicates from an array

Set data type won't allow duplicate values, so creating a new set from the array will give us an array with unique values.

const array = [1, 1, 2, 3, 4, 5, 5];
const uniqueValuesArray = new Set(array);
console.log([...uniqueValuesArray ]); // [1, 2, 3, 4, 5]

2. Storing and retrieving key-value pairs

Maps are useful for storing and retrieving key-value pairs in JavaScript. This makes them ideal for building data structures and managing data in applications.

const userMap = new Map();
userMap.set('John', { age: 25, location: 'New York' });
userMap.set('Jane', { age: 30, location: 'Los Angeles' });
console.log(userMap.get('John')); // { age: 25, location: 'New York' }

3. Efficient lookup

Sets and Maps can be used for efficient lookups. For example, if you have a large dataset and you need to check if a value exists in it or not, a Set would be more efficient than looping through the entire dataset to find the value.

const values = new Set([1, 2, 3, 4, 5]);
console.log(values.has(3)); // true
console.log(values.has(6)); // false

4. Counting occurrences

Sets can be used for counting the occurrences of values in an array.

const fruitArray = ['apple', 'banana', 'orange', 'apple', 'orange', 'orange'];
const fruitCount = new Map();
fruitArray.forEach((fruit) => {
  if (fruitCount.has(fruit)) {
    fruitCount.set(fruit, fruitCount.get(fruit) + 1);
  } else {
    fruitCount.set(fruit, 1);
  }
});
console.log(fruitCount); // Map(3) { 'apple' => 2, 'banana' => 1, 'orange' => 3 }

These are some examples you can use in your projects.

Angular Mouse Events

Rahul Raveendran — Wed, 25 Dec 2019 22:35:40 +0000

Angular has a total of 9 mouse events.

1. Click

The click event occurs when the user clicks on the element to which it is applied. This event triggers the function that is attached to the click.

2. dblclick

The dblclick event is triggered when the user double-clicks on the element to which it is applied.

3. Mouseover

The mouseover event is triggered when the cursor is over the element to which it is applied, similar to the hover effect.

4. Mouseenter

The mouseenter event is triggered when the mouse pointer is moved onto the element to which it is applied..

5. Mouseleave

The mouseleave event is triggered when the mouse pointer leaves the element to which it is applied.

6. Mousedown

The mousedown event is triggered when the user presses the mouse button over the element to which it is applied..

7. Mouseup

The mouseup event is triggered when the user releases the mouse button over the element to which it is applied..

8. Drag

The drag event is triggered when the user starts dragging the element to which it is applied..

8. Dragover

Triggers every time an item is dragged over dragover applied element.