Accessibility, why? how? (part.1)

WHY?

1.social aspect
In the modern world, the web should provide equal access and opportunity for people with or without diverse abilities.

Accessibility perspectives

1. Accessibility is obligatory in most of the countries

There is a UN Convention on the Rights of Persons with Disabilities which recognizes access to information and communications technologies, including the Web, as a basic human right.

3.Business case
There is also a strong business case for accessibility. Accessibility stands in one line with other best practices such as mobile web design, device independence, multi-modal interaction, usability, design for older users, and search engine optimization (SEO). Case studies show that accessible websites have better search results, reduced maintenance costs, and increased audience reach, among other benefits. Developing a Web Accessibility Business Case for Your Organization details the benefits of web accessibility.

There are some examples when adding accessibility brings significant business value.

HOW?

while code:

Eslint plugin:

Must have

{
  "extends": [..., "plugin:jsx-a11y/recommended"]
}

Nice to have

{
  "extends": [..., "plugin:jsx-a11y/strict"]
}

While testing code:

jest-axe

examples:

Enzyme

const React = require('react')
const App = require('./app')

const { mount } = require('enzyme')
const { axe, toHaveNoViolations } = require('jest-axe')
expect.extend(toHaveNoViolations)

it('should demonstrate this matcher`s usage with enzyme', async () => {
  const wrapper = mount(<App/>)
  const results = await axe(container.getDOMNode())

  expect(results).toHaveNoViolations()
})

React Testing Library

const React = require('react')
const App = require('./app')

const { render, cleanup } = require('@testing-library/react')
const { axe, toHaveNoViolations } = require('jest-axe')
expect.extend(toHaveNoViolations)

it('should demonstrate this matcher`s usage with react testing library', async () => {
  const { container } = render(<App/>)
  const results = await axe(container)

  expect(results).toHaveNoViolations()

  cleanup()
})

verify In Browser

chrome-extension

IMPORTANT according to research made by GDS team, all automated tools will cover only about 30% issues. Rest you need to test manually.