Semantic HTML

Ensure that the correct HTML elements are used for the correct purpose as much as possible. For example if you need a clickable element, it is probably more worthwhile to leverage a button as opposed to a div with a click event. 

This also gives context to screen readers.

With regards to a clickable element, a button is more suitable in that

1. Buttons have mot suitable styling by default
2. A screen reader can identify it as a button
3. It is focusable
4. It is clickable

 

Headings

Headings are elements that leverage the h1,h2,h3,h4,h5, and h6 tags

Search engines use these headings to assist in indexing the page. Thus, it shows the overall structure and the relationships between the various sections of the page.

Heading order is important in that it allows search engines and screen readers to assume what the page is about and how to appropriately identify the relevant parts of the page. For example a h1 tag gives a general idea of what the page would be about while subsequent h2, h3, h4 tags provide additional details.

 

Alternative Text

The alt attribute provides alternative text for an image. When an image cannot load, the alternative text will appear to still provide the user with some context with regards what the image is about. The image could not load due to a bad url or a slow connection, thus, it is always conducive to provide an alternative means of conveying the context of an image.

 

Labels and aria-label

Labels are used to provide a meaningful name to a form element such as a textbox or dropdown. There should only be one label for each unique element in order to alleviate any potential confusion. Screen readers will scan the page and look for the corresponding labels for form elements in order to provide the user a better context with regards to that particular control input.

 

Sometimes it is not possible to append a label to an element and so aria-label is used to further provide a name for that input. This could be on a button that only contains an icon (search button). Appending an aria-label attribute with an appropriate name will provide the user with further context as to what this button will accomplish when clicked.

 

Aria

Accessible Rich Internet Applications(ARIA) are various attributes that define ways to make web content more accessible. Aria attributes are added to HTML to further supplement context and interactions with that element commonly used in applications. These can be passed to assistive technologies. Aria works well with Javascript when it is sometimes not possible to achieve a highly accessible page using strictly semantic HTML. However, we should prioritize semantic HTML over Aria when possible