Web Accessibility Tips

Muhammad Lahin — Mon, 09 Nov 2020 10:46:31 +0000

Web accessibility ensures that people with disabilities can use websites effectively. Here are some basic tips to make your website accessible,

Semantic

Semantic elements provide information about the content between opening and closing tags so that the screen reader will able to read them better. It makes code easier to read. Some of the semantic elements are,

header
section
nav
main
article
figure
aside

Using these semantic elements a html structure can be,

<header>
  <nav></nav>
</header>
<main>
  <article>
    <figure></figure>
  </article>
</main>

Headings

Headings give users an idea of page’s organization and structure. Heading elements are - h1, h2, h3, h4, h5 & h6.

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>

Native HTML Elements

Use native html elements, you will get the default semantic information. For example,

<button>Add to cart</button>
----------------------------
name: Add to cart
role: button
Invalid user entry: false
Focusable: true

In case if you don't want to use native html elements, you have to specify it using role, aria attribute.

Aria

Aria attribute is generally used to add semantics to an element so that the screen reader read the semantic information. It doesn't change element's behavior. Example can be,

aria-label: aria-label is used to add an additional name for an element so that the screen reader can tell it.

<div aria-label="Login button" class="btn">Login</div>

aria-labelledby, aria-expanded, aria-describedby, aria-checked are common examples of aria. You can find more in their official docs, w3.org

Label tag

Use html label tag, this will help the user to understand the purpose of a control(ex, input).

<label>
  Name:
  <input type="text" />
</label>

alternatively you can use for attribute,

<label for="name">Name</label>
<input type="text" id="name" />

Alt attribute

Use alt attribute inside img tag, the screen reader will read the text from the inside of alt attribute.

<img alt="Image of a cat" src="./cat.jpg" />

Tabindex

The tabindex attribute allows elements to be focused when using the keyboard. You can use this in three way, tabindex: 0, tabindex: greater than 0 & tabindex: -1.

tabindex: 0, means the element is focusable in sequential keyboard navigation.

tabindex: greater than 0, defines manual tab order. example,

<div tabindex="2">This is number 1 text</div>
<div tabindex="1">This is number 2 text</div>
<div tabindex="3">This is number 3 text</div>

You will see tabindex="1" focused first, tabindex="2" focused second & tabindex="3" focused last.

tabindex: -1, this will remove the element's focusability in tab order.

Lang attribute

Use lang attribute, when you are using blocks of text in different languages if you add lang attribute then the screen reader will know how to pronounce them.

<ul>
  <li lang="de">Deutsch</li>
  <li lang="en">English</li>
  <li lang="jp">Japan</li>
</ul>

Skip Link

Skip link allows users to skip contents which may not necessary for them.

<body>
  <header>
    <nav>
      <a class='skip-link' href='#main-content'>
        Skip to Content
      </a>
    </nav>
  </header>

  <main id='main-content'>
    Lorem ipsum...
  </main>
</body>

.skip-link {
  position: absolute;
  left: -999px;
  width: 1px;
  height: 1px;
  top: auto;
}

.skip-link:focus {
  color: black;
  display: inline-block;
  height: auto;
  width: auto;
  position: static;
  margin: auto;
}

Color

Use of color should not interfere with the ability to view content on a page for a user. For that you can use online contrast checker like webaim.org

Avoid using outline: none

Avoid using outline: none, if you have to use it, it is better to provide an alternative styling.

What is JSON Web Token?

Muhammad Lahin — Fri, 16 Oct 2020 09:08:25 +0000

JSON Web Token or JWT is an authorization technique. It is for creating secure web applications.

JWT generally creates a secure way to transfer information between two parties as a JSON object, here the two parties can be a server and a client.

The token contains the user information along with some more additional information. The key difference between Session based authentication and Token based authentication(JWT) is in Token based authentication the user information is not store in the server, the user information stored in the token. Then the token stored in the browser, this is why JWT is considered more scalable than session.

In this picture, client makes a post request with { email: email, password: password } to login. The server takes the request then check the email & password then returns a token called JSON Web Token only if email & password both are correct. Then client will store the JWT(token) inside Local Storage or Session Storage.

Next time client sends a request with JWT(token) attached to get the response. The server verify the token if the token is correct then the server send the response back to the client.

To identify an authenticated person, you just need to put JSON Web Token in the API end point.

https://www.something.com/users/?token=eyJhbGciOiJIUzI1NiIs.eyJzdWIiOiIxMj.SflKxwRJSMeKKF2Q

Here, eyJhbGciOiJIUzI1NiIs is called header, eyJzdWIiOiIxMj is called payload & SflKxwRJSMeKKF2Q is called signature/crypto.

JWT Structure

A Header is generally consists two parts, type of the token and the hashing algorithm used. For example,

{
  "algo": "HS256",
  "type": "JWT"
}

HS256 signing algorithm being used in the token and type is JWT. Then the header is Base64Url encoded to make first part of the JWT.

The second part of JWT called Payload, the amount of data you want to include into JWT.

{
  "sub": "1234567890",
  "name": "John Doe",
  "iat": 1516239022
}

Then the payload is Base64Url encoded to make second part of the JWT.

The last part of JWT is a signature generated based on the Header and Payload. The signature used to verify the JWT is valid or not and the message wasn't changed along the way.

For example, if you want to use HMAC SHA256 algorithm, the signature will be created in the following order,

HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  your-256-bit-secret)

You can encode and decode if you put all together. Go to https://jwt.io/

Forem: Muhammad Lahin