Coding Standards & Best Practices : Accessibility


Here is a list of basic accessibility guidelines

  1. Heading order should be in order of their priority
  2. Make use of area attribute to describe state of your components

Best practices

  • Minimize use of h1 heading tag. Prefer to have only one.
  • Provide title to images and figure caption to figures for accessibility
  • Avoid br tags if same design can be achieved by CSS
  • Avoid blocking too many code in header
  • Use appropreate HTML tags to make your code more symantic.

    Ex: Make use of ul/li, dl/dt/dd, ol/li for listing elements.

  • Avoid too many tags and long nesting of HTML elements

    Too many dom elements/tags slow down your page performance. So try to minimize them as far as possible. Same ways nesting of elements create complex dom tree to be updated. So try to limit your nesting of a child element within maximum of 10 – 15 levels.

  • Try to have roles to elements that semantically different than the role they are playing. Ex.
    <a href="#" role="button" aria-label="Buy this item">Buy</a>
  • Wrap form input & labels

    It becomes helpful to arrange items visually when form inputs are wrapped inside block level elements such as div , li or p tags

  • Avoid deprecating tags