npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

jsonresume-theme-a11y

v2.5.0

Published

Theme for JSON Resume addressing WCAG 2.1 and ARIA accessibility (a11y) standards

Downloads

132

Readme

jsonresume-theme-a11y

Introduction

This is an accessible theme for JSON Resume.

The idea motivating the jsonresume project is that people need to adapt their résumés for different purposes, modifying length, layout, complexity, and content. The project aims to let a person write specifications for a résumé once, and then render it automatically in many different ways.

The jsonresume strategy for achieving this purpose is to define a format for a source file, where you put all the information for your résumé, and then to invite software developers to create converters that render the information in various ways. It calls those converters themes.

This theme, as published at npm, is one of over 200 themes for the jsonresume project. Thus, you have a wealth of rendering options. With that many themes to choose from, do we really need yet another one?

Yes, we do need yet another theme. This one offers two new features:

  • It makes your rendered résumé accessible. In other words, it renders your résumé with features, some visible and some invisible, that help people consume it across a wide range of abilities and disabilities. These features help users, or the assistive devices that some users with disabilities use, to understand the structure and content of your résumé and navigate within it. Standards of accessibility have been codified by the Accessibility Guidelines Working Group (WCAG 2.1) and the Accessible Rich Internet Applications (ARIA) Working Group (WAI-ARIA).
  • It gives you granular control over your rendered résumé’s content and layout. You can decide what, from the contents of your source file, the theme should include and exclude. You can decide what order the sections appear in. You can have the theme automatically translate headings into different languages or vocabularies. You can also decide what parts will be rendered as lists, tables, or running prose. And you can decide on the sizes of headings.

These two features are in some tension. Some designs interfere with accessibility. For example, some other themes render text that is subtly lighter or darker than its background, but that prevents users with limited vision from distinguishing the two. This theme prioritizes accessibility. When you want visual elegance instead, you have many other themes to use.

“Accessibility” in the sense used here is commonly abbreviated a11y. Hence the name of this theme.

Accessibility metrics

How accessible are the renderings produced by this theme? For one approximation, we can perform tests on what this theme and other themes produce from an identical source file. Here are results from such a set of tests. The source file is pool-medium-std.json, one of the samples in this theme’s repository. Tests were conducted with some publicly available tools. Relative success is indicated by a high accessibility score (+) or a low error count (–).

Theme | ADT (+) | aXe (–) | WAA (–) | WAVE (–) | SAC/AAA (–) | HCS/AAA (–) --- | ---: | ---: | ---: | ---: | ---: | ---: a11y | 100 | 0 | 0 | 0 | 15 | 0 crisp | 94 | 22 | 15 | 2 | 62 | 2 eloquent | 97 | 211 | 184 | 8 | 590 | 328 flat | 89 | 44 | 42 | 7 | 83 | 42 modern | 97 | 3 | 0 | 2 | 8 | 2 stackoverflow | 89 | 35 | 40 | 16 | 316 | 143

Such automated testing is not definitive. Some of the above-tabulated errors are not really violations of standards, but rather solutions that adopt one of several permitted methods, which a particular tool is not properly recognizing. Conversely, accessibility defects may exist that some tools do not catch.

License

Available under the MIT license.

Status

History

Version 2.0.0 made a breaking change to version 1.0.12. The schema changed with respect to section formats tableLeftHeads and tableTopHead. The prior schema made no provision for table captions. The current schema permits captions in the tables of both these formats. Captions are a recommended feature for usability in general and accessibility in particular. In order to allow captions, the schema revised the specification of tableLeftHeads. A tableLeftHeads section conforming to the schema of version 1.0.12 would fail to conform to the schema of version 2.0.0.

Version 2.1.0 added automatic page-title creation to the converter module.

Version 2.2.0 added the extraction mode to version 2.1.8.

Version 2.3.0 added 3 more extractive formats to version 2.2.4.

Version 2.4.0 added the option of making the -i and -o arguments to parse and convert absolute file paths.

Future

Contemplated future work includes:

  • Investigating additional opportunities for accessibility improvements in the theme.
  • Performing human accessibility tests.
  • Extending the theme’s functionality to cover compatibility with commonly used résumé parsers.
  • Implementing additional formats.
  • Developing a graphical user interface for source-file creation.
  • Integrated source-file validation.

Contributions of, or suggestions for, enhancements and repairs, and comments on priorities, are welcome. Feel free to make pull requests or open issues at this theme’s repository.

Usage

Source files

The jsonresume system depends on your source file adhering strictly to a particular format, so that a theme can automatically render it.

This theme, as stated above, gives you more control than other themes do. To enable that control, this theme defines a more flexible format for your source file. We can call that the a11y format.

So, there are two possible formats you can create a source file in:

  • jsonresume format
  • a11y format

Both formats are special cases of a general standard named JSON. If you are not familiar with it, you can think of it as a kind of outlining system. Some commentators say it is “easy for humans” to write. Other experts say it is “difficult to read” and “unforgiving to edit”.

An example of a fragment of a JSON file is:

{
  "employer": {
    "name": "Apex Technologies",
    "city": "Lubbock",
    "state": "Texas"
  },
  "years worked": 4,
  "title": "Risk Management Specialist",
  "W-2": true,
  "duties": [
    "insurance procurement",
    "risk management"
  ]
}

As shown, the JSON format lets you outline information, with items of various kinds:

  • Objects: Collections of properties, each of which has a name (e.g., “state”) and a value (e.g., “Texas”), and which, when you retrieve them, can appear in any arbitrary order.
  • Arrays: Collections of elements, each of which has an index (i.e. its position in its array) and a value (e.g., “risk management”), but no name.
  • Primitives: text strings, numbers, Booleans (true and false), etc.

Objects (such as the value of employer above) are represented as comma-separated lists of colon-separated name-value pairs, enclosed in a pair of braces.

Arrays (such as the value of duties above) are represented as comma-separated values, enclosed in a pair of brackets.

Strings (such as the value of title above) are represented as sequences of characters of text, enclosed in a pair of double quotes.

Other primitives (such as the values of years worked and W-2 above) are represented as sequences of characters of text, not enclosed in anything.

Strings can include almost all possible characters, including spaces, in any language, within the double quotes, but there are exceptions. The double quote itself, the backslash, and control characters (such as a horizontal tab, carriage return, or newline) are illegal there unless you substitute 2-character codes for them (such as \n for newline).

You can nest items as deeply as you want and still be JSON-compliant. Any value can be a primitive, an object, or an array. If it’s an object or array, then it can have its own subsidiary items, whose values can be primitives, objects, or arrays, etc.

Two relatively convenient methods for writing a source file in either format are:

  • Using a text editor that supports JSON. By color-coding syntax errors, it helps you notice and correct any violations.
  • Opening an existing source file of somebody’s résumé and then editing it, to replace the information in it with your own. This theme contains sample source files in both formats, so you can create yours that way if you prefer.

Workflows

But which format should you create your source file in?

That depends on your situation and your intent. There are three plausible workflows for using this theme: A, B, and C.

  • Workflow A is good if you want to render a résumé with various themes and do not want to use this theme’s extra features.
  • Workflow B is good if you want to render a résumé with only this theme, and to use its extra features.
  • Workflow C is good if you want to render a résumé with various themes and, when rendering it with this theme, to use its extra features.
  • If you are a jsonresume user and already have a source file in the jsonresume format, workflows A and C allow you to leverage that file with this theme.

Here is a diagram of the three workflows:

A: write jsonresume JSON, convert+render to HTML; B: write a11y JSON, render to HTML; C: write jsonresume JSON, convert to a11y JSON, render to HTML

As shown above, in workflows A and C you create a source file in the jsonresume format, and in workflow B you create one in the a11y format.

If you are ready to start, you can now switch to the instructions for the workflow you prefer: