About country-specific date formatting and accessibility issues-CodePudding

tl;dr

Is there a WAI-ARIA-compliant way to format dates according to language/country?

I first thought how do I format a date according to one or another convention (e.g. british vs american) using CSS? and I found this question where one of the answers suggests a way to use CSS to format dates, and one could build on that to provide classes specific to regions, and then some inputs from the use (choose the country/language) plus some JavaScript could encode the logic to show dates in one format or another.

But that answer assumes that the parts of the date made different HTML elements, like in the following snippets:

<div class="date-wrapper">
  <div class="date-year" val="1994"></div>
  <div class="date-month" val="03"></div>
  <div class="date-day" val="09"></div>
</div>

The above can be styled with a fairly articulated, long, and repetitive set of CSS rules. If it was just this, I would be ok with it. I'd put the CSS in a file, and forget about it.

But the point is, I think the above HTML snippet really is just a random blob of stuff to a screen reader, which would not present it as a date, but just as "a div with 3 divs each of which has a number as its val attribute". Just blob.

So my next thought was before I even think of applying a style to a date, how do I even encode that a string like 1/12/2021 written somewhere in my HTML is a date? And so I found that there is a <time> HTML element, and I found that it can't help me in this respect.

CodePudding user response：

There is no ARIA markup that makes dates more readable by assistive technology.

The JavaScript date constructor is the best tool available for creating dates that can be manipulated to different formats, time-zones, regions, languages, etc.

<script>
    const date = new Date();
    // Fri Oct 22 2021 12:48:56 GMT-0500 (Central Daylight Time) {}
</script>

Once you have the date as an object, you can use Date.toLocaleString() to convert the date to other formats. For example:

<script>

    date.toLocaleString();
    // '10/22/2021, 12:48:56 PM'
    // (uses default settings of visitor)

    date.toLocaleString('en-GB', { timeZone: 'UTC' });
    // '22/10/2021, 17:48:56'

    date.toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai' })
    // '2021/10/23 上午1:48:56'
</script>

For good measure, ensure that your page is always using a language attribute.

You'll also get better and more consistent results from assistive technology by using non-abbreviated full-text dates.

Examples:

Friday, October 22, 2021 
// easily read by all screen-readers

1/5/21 
// could be read as May 1st by en-GB visitors, if language attribute not set

Sun Oct 24 2021
// some screen readers may read exactly as written "sun oct 2 4 2 0 2 1"

CodePudding user response：

In general, when CSS change the order in which elements appear on screen to make it different from the order in which it appears in the code / DOM tree, it should make you tilt immediately. Unless you have really good reasons, you should never do that.

The first problem of doing that is of course that screen reader users will read the content in the wrong order. Screen readers always read content in the order it is in the DOM. You can't change it in any way.

You are also going to create troubles for partially sighted users who use a screen magnifier, and those who don't use a mouse or a touch screen, because the natural keyboard focus order will appear illogical. When going through focusable objects using tab, users will have the impression that it "jumps" somewhat randomly, and/or will lose sight of where the focus go. Natural keyboard focus order always follows DOM order. You can change it, but it's a terrible idea.

Third, you are also going to create troubles for those who navigate without CSS. There are probably not that many human people going on the web with a text only browser nowadays, but in this category also goes search engines and many other useful robots.

For all these reasons, and as you have correctly understood, using CSS to fix that kind of thing is very bad. It's even more bad for a date, since you may not figure out at all that something appear wrong.

As the other answer already says, use date formatting functions of your programming languages whether server or client side, so that they appear correctly in the page in any circunstance.