DEV Community

Cover image for Accessibility tip for old HTML pages
Karen Payne
Karen Payne

Posted on

Accessibility tip for old HTML pages

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.

<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>
Enter fullscreen mode Exit fullscreen mode

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

<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>
Enter fullscreen mode Exit fullscreen mode

Solution

No matter the IDE or developer editor used originally, the solution uses Microsoft Visual Studio Code 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 Shift + Alt, W 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

Click Keyboard Shortcuts.

Keyboard shortcuts menu item

Click the button shown below with the arrow

Shows button to open json file

This opens another window with a caption of keyboardbindings.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"
    }
]
Enter fullscreen mode Exit fullscreen mode

Add the following

,
{
    "key": "shift+alt+w",
    "command": "editor.emmet.action.wrapWithAbbreviation"
}
Enter fullscreen mode Exit fullscreen mode

Finally results.

// 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"
    }
]
Enter fullscreen mode Exit fullscreen mode

Usage sample

Old HTML code with an input with no label.

<table>
    <tr>
        <td>
            First name
        </td>
        <td>
            <input type="text" id="first_name">
        </td>
</table>
Enter fullscreen mode Exit fullscreen mode

Highlight first name, press Shift + Alt + Wand the following dialog opens at the top of the editor.

prompt for Abbreviation

Type label and press enter

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

results

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

finished

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 requirements.

Resource

VS Code Advanced customization

Top comments (0)