Accessibility tip for old HTML pages
Tags: vscode, html, codenewbie
Published: 2024-03-11 20:00:58

## Introduction

Decades past many web developers did not consider adding accessibility features to their web sites and there are cases where these sites are still up and running.

Not having proper accessibility features, a site can lose visitors as visitors with assisted technologies like screen readers will not be able to read web pages.

The following table structure has two issues. 

```html
<table>
    <tr>
        <td>
            First name
        </td>
        <td>
            <input type="text" id="first_name">
        </td>
    <tr>
        <td>
            Last name
        </td>
        <td>
        <td>
            <input type="text" id="last_name">
        </td>
    </tr>
</table>
```

## Revolve inputs with no labels

The task, take text like first name and last name, place the text into labels which are associated with inputs (this works with select elements too).

**The goal**

```html
<table>
    <tr>
        <td>
            <label for="first_name">First name</label>
        </td>
        <td>
            <input type="text" id="first_name">
        </td>
    <tr>
        <td>
            <label for="last_name">Last name</label>
        </td>
        <td>
        <td>
            <input type="text" id="last_name">
        </td>
    </tr>
</table>
```

**Solution**

No matter the IDE or developer editor used originally, the solution uses Microsoft [Visual Studio Code](https://code.visualstudio.com/download) which is a free developer editor. 

Configuring VS Code to perform a surround with operation. By Surround with, highlight code, press a key shortcut, enter label for instance and the highlighted code is encased in a label.

By using surround with reduces needed keystrokes that would otherwise be needed e.g. cut the original text, add a label, paste back text. 

An added bonus of the following a for attribute is added to the label with the cursor position in the quotes.

Note that the shortcut will be <kbd>Shift</kbd> + <kbd>Alt</kbd>, <kbd>W</kbd> but can be whatever you like.

Lets get going.

Open Visual Studio code, bottom left corner of the editor, click the gear.


![VS Code gear](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/be0qui0vagtq1o8ash6r.png)

Click **Keyboard Shortcuts**.


![Keyboard shortcuts menu item](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jxo6tq86tadxrnrc0q7l.png)

Click the **button** shown below with the arrow


![Shows button to open json file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/93rsr6l0cra68156gxlt.png)

This opens another window with a caption of _keyboardbindings.json_.

```json
// Place your key bindings in this file to override the defaults 
[
    {
        "key": "ctrl+f11",
        "command": "editor.emmet.action.matchTag"
    },
    {
        "key": "ctrl+y",
        "command": "editor.action.deleteLines",
        "when": "textInputFocus && !editorReadonly"
    },
    {
        "key": "ctrl+shift+k",
        "command": "-editor.action.deleteLines",
        "when": "textInputFocus && !editorReadonly"
    },
    {
        "key": "ctrl+;",
        "command": "editor.emmet.action.wrapWithAbbreviation"
    },
    {
        "key": "ctrl+e ctrl+e",
        "command": "mssql.runQuery",
        "when": "editorTextFocus && editorLangId == 'sql'"
    },
    {
        "key": "ctrl+shift+e",
        "command": "-mssql.runQuery",
        "when": "editorTextFocus && editorLangId == 'sql'"
    },
    {
        "key": "ctrl+shift+alt+t",
        "command": "workbench.action.tasks.terminate"
    },
    {
        "key": "ctrl+alt+n",
        "command": "python.execInTerminal"
    }
]
```

Add the following

```json
,
{
    "key": "shift+alt+w",
    "command": "editor.emmet.action.wrapWithAbbreviation"
}
```

Finally results.

```json
// Place your key bindings in this file to override the defaults 
[
    {
        "key": "ctrl+f11",
        "command": "editor.emmet.action.matchTag"
    },
    {
        "key": "ctrl+y",
        "command": "editor.action.deleteLines",
        "when": "textInputFocus && !editorReadonly"
    },
    {
        "key": "ctrl+shift+k",
        "command": "-editor.action.deleteLines",
        "when": "textInputFocus && !editorReadonly"
    },
    {
        "key": "ctrl+;",
        "command": "editor.emmet.action.wrapWithAbbreviation"
    },
    {
        "key": "ctrl+e ctrl+e",
        "command": "mssql.runQuery",
        "when": "editorTextFocus && editorLangId == 'sql'"
    },
    {
        "key": "ctrl+shift+e",
        "command": "-mssql.runQuery",
        "when": "editorTextFocus && editorLangId == 'sql'"
    },
    {
        "key": "ctrl+shift+alt+t",
        "command": "workbench.action.tasks.terminate"
    },
    {
        "key": "ctrl+alt+n",
        "command": "python.execInTerminal"
    },
    {
        "key": "shift+alt+w",
        "command": "editor.emmet.action.wrapWithAbbreviation"
    }
]
```

## Usage sample

Old HTML code with an input with no label.

```html
<table>
    <tr>
        <td>
            First name
        </td>
        <td>
            <input type="text" id="first_name">
        </td>
</table>
```

Highlight **first name**, press <kbd>Shift</kbd> + <kbd>Alt</kbd> + <kbd>W</kbd>and the following dialog opens at the top of the editor.


![prompt for Abbreviation ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sjsxk8q4aaj4j7pofide.png)

Type **label** and press <kbd>enter</kbd>

This results with the following and note red squiggles which means no label associated with this input.


![results](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n8ad295sul2w764p03zi.png)

Last step, add the id of the input into the for attribute.


![finished](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jittibhal4q45arh4br2.png)

## Summary

Adding accessibility features to an old web page does not have to be time consuming, what has been presented is one technique to shorten time required to meet [WCAG AA](https://www.w3.org/WAI/WCAG2AA-Conformance) requirements.

## Resource

VS Code [Advanced customization](https://code.visualstudio.com/docs/getstarted/keybindings#_advanced-customization)