Accessibility

Accessibility at NTT is the practice of making your websites usable by as many people as possible. We traditionally think of this as being about people with disabilities, but the practice of making sites accessible also benefits other groups such as those using mobile devices, or those with slow network connections.

Read this guide to help make sure your code follows the rules for accessibility...

Installation

Please install screen reader on your device. We recommend NVDA (Windows), VoiceOver (MacOS and iOS) and TalkBack (Android).

Once it is installed, start the NVDA application and you are ready to go with your screen reader.

Introduction

An example of accessibility would be any content or functionality that is fully available to and usable by people with disabilities.

Slack channel for Accessibility: a11y-community

WCAG (Web Content Accessibility Guidelines) 2.0 guidelines are categorized into three levels of conformance in order to meet the needs of different groups and different situations: A (lowest), AA (mid-range), and AAA (highest).

We at least follow WCAG AA throughout our application and WCAG AAA whenever asked for.

Our app should follow at least the below mentioned criteria's:

  1. Every form control has an associate label: https://www.w3.org/WAI/tips/developing/#associate-a-label-with-every-form-control

  2. Alt Attributes are present for all images, regardless of being empty of not:

Approach: Ensure that alternative text for images is added to all informational and functional images. Use empty alternative text, alt="" for decorative images, or include them in the CSS instead. Text alternatives are usually provided by those responsible for written content.

https://www.w3.org/WAI/tips/developing/#include-alternative-text-for-images

  1. Language of page and language of parts are identified: https://www.w3.org/WAI/tips/developing/#identify-page-language-and-language-changes

  2. Semantic markup is used to convey meaning and structure: https://www.w3.org/WAI/tips/developing/#use-mark-up-to-convey-meaning-and-structure

  3. There are enough mechanisms in place to help users avoid and correct mistakes: https://www.w3.org/WAI/tips/developing/#help-users-avoid-and-correct-mistakes

  4. Ensure that the order of elements in the code matches the logical order of the information presented: https://www.w3.org/WAI/tips/developing/#reflect-the-reading-order-in-the-code-order

  5. Code is device independent:

Approach: When font size is increased by at least 200%, avoid horizontal scrolling and prevent any clipping of content. Use responsive design to adapt the display to different zoom states and viewport sizes, such as on mobile devices and tablets.

https://www.w3.org/WAI/tips/developing/#write-code-that-adapts-to-the-users-technology

  1. Non-standard interactive elements are meaningful:

Approach: Use WAI-ARIA to provide information on function and state for custom widgets, such as accordions and custom-made buttons.

https://www.w3.org/WAI/tips/developing/#provide-meaning-for-non-standard-interactive-elements

  1. All Interactive elements are accessible and there is a visible focus outline present:

Approach: Manual keyboard testing. Avoid tabindex , unless you want to add an element that does not normally receive focus. In such case se tabindex="0".

https://www.w3.org/WAI/tips/developing/#ensure-that-all-interactive-elements-are-keyboard-accessible

  1. Captcha has been avoided where possible:

    Approach: If possible, look for other means of verifying that user input was generated by a human that are easier to use, such as automatic detection or interface interactions.

https://www.w3.org/WAI/tips/developing/#avoid-captcha-where-possible

Edit this page