Pirate Praveen 81ade28521 New upstream version 13.8.5+ds1

2021-03-08 18:12:59 +05:30

2.1 KiB

Raw Blame History

stage	group	info
none	unassigned	To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/engineering/ux/technical-writing/#assignments

Accessibility

Using semantic HTML plays a key role when it comes to accessibility.

Accessible Rich Internet Applications - ARIA

WAI-ARIA (the Accessible Rich Internet Applications specification) defines a way to make Web content and Web applications more accessible to people with disabilities.

The W3C recommends using semantic elements as the primary method to achieve accessibility rather than adding aria attributes. Adding aria attributes should be seen as a secondary method for creating accessible elements.

Role

The role attribute describes the role the element plays in the context of the document.

Review the list of WAI-ARIA roles.

Icons

When using icons or images that aren't absolutely needed to understand the context, we should use aria-hidden="true".

On the other hand, if an icon is crucial to understand the context we should do one of the following:

Use aria-label in the element with a meaningful description
Use aria-labelledby to point to an element that contains the explanation for that icon

Form inputs

In forms we should use the for attribute in the label statement:

<div>
  <label for="name">Fill in your name:</label>
  <input type="text" id="name" name="name">
</div>

Testing

On MacOS you can use VoiceOver by pressing cmd+F5.
On Windows you can use Narrator by pressing Windows logo key + Control + Enter.

Online resources

Chrome Accessibility Developer Tools for testing accessibility
Audit Rules Page for best practices
Lighthouse Accessibility Score for accessibility audits

2.1 KiB Raw Blame History