Is maxlength attribute accessible?

[Fu22yWu22y]

Hey
i was looking up if max length attribute was accessible and came across http://stackoverflow.com/questions/24036568/how-to-make-maxlength-attribute-accessible is there a solution in Wet for this ? or is there one foreseen in the near future?

[LaurentGoderre]

This is more likely something that should be fixed by JAWS

[robwloch]

I tested with the NVDA screen reader and it just keeps announcing characters that I type even after I've reached the limit so no audible indication that what I'm typing isn't being stored in the field.

So, as a best practice, should all text input field labels have hidden text to indicate the max length in order to make it accessible? ie.

<label for="lastname">Last name <span class="wb-inv">(maximum 20 characters)</span></label>
<input type="text" name="lastname" id="lastname" size="20" maxlength="20" class="form-control">

[robwloch]

Thank you @andre-gh . I was thinking that since visual users would be able to see as they're typing that their input was no longer being entered that they don't need it as much. Otherwise, having every single text input field label on the page showing a max length might look awkward and cluttered. For textareas and certain text fields, I think visible makes sense but just not all. Would you agree?

[robwloch]

I agree with you for certain fields but would be overkill for all fields in my opinion:

[robwloch]

Agreed, this is just from the WET4 examples form validation page. I just used firebug to add the character maximum to the labels to show how cluttered it might look.

http://wet-boew.github.io/wet-boew/demos/formvalid/formvalid-en.html

[hsrudnicki]

Can be this issue closed as resolved and fixed or if otherwise? Either way, please update this issue's status, whether this issue can be closed or otherwise, thank you

[robwloch]

In researching how to make textarea input types more accessible, I came across aria-live and I'm thinking that it might be useful good practice on text fields too since screen readers do not notify users that they've reached the maxlength limit. The aria-live assertive mode can interrupt the user as they type to notify them that they've reached the limit.

Wondering what others think about this?

[hsrudnicki]

Does this remain an issue for further discussion/thoughts or otherwise?

[ghost]

Problem also stems with jQuery Validation which don't validate their is a issue with what is being type until the user changes input (leaves focus). Then tells the user what was type was too long which has the user returning to the input and determine how much of the string to remove is needed to be removed. This is where I believe it can become a issue cause the user has to visualize how of the current text is too long.

[RobJohnston]

@cybersubtype : Take a look at issue #6534, where the jQuery Word and Character Counter was discussed. Aria support was added to it in https://github.com/qwertypants/jQuery-Word-and-Character-Counter-Plugin/pull/20.

[ghost]

@RobJohnston The jQuery Word and Character Counter is a nice plugin, but it looks like they removed the aria support. If WET was too add this plugin they could reinstate the aria support.

[RobJohnston]

@cybersubtype Just thought it might be useful for what you're doing, with a lot less code to write. I've used it on an intranet site successfully. But I think that it's overkill for every form field (my 2 cents).

[ghost]

It could be overkill for all inputs, but I like the fact that the plugin stops the use from typing past the limited amount of characters so they no longer have to guess when the string became to long. I could set it up so on certain inputs the character counter doesn't display.

[RobJohnston]

There was also a discussion about the accessibility of a character counter in https://github.com/wet-boew/GCWeb/issues/968 that might be of interest.

[ghost]

Thanks for the information. I'm going to use the jQuery Word and Character Counter. Here's my approach:

HTML:

<div class="form-group">
    <label for="text" class="required"><span class="field-name">Text Example</span></label> 
    <input id="text" class="form-control counter-inv" type="text" name="text" required="required" data-rule-minlength="1" data-rule-maxlength="15"/>
</div>
<div class="form-group">
    <label for="title" class="required"><span class="field-name">Textarea Example</span></label> 
    <textarea  id="title" class="form-control" rows="4" cols="40" name="title" required="required" data-rule-minlength="1" data-rule-maxlength="200" ></textarea>
</div>

JavaScript:

$('form input[type="text"]').each(function(){
    var max = $(this).attr('data-rule-maxlength');
    if(max) {
        var hidden = $(this).hasClass('counter-inv');
        characterCounter(this, max, hidden);
    }
});
$('form textarea').each(function(){
    var max = $(this).attr('data-rule-maxlength');
    if(max) {
        var hidden = $(this).hasClass('counter-inv');
        characterCounter(this, max, hidden);
    }
});
function characterCounter(element, max, hidden) {
    var lang = document.documentElement.lang;
    var translation = (lang && lang === 'fr') ? 'caractère mots restants maximum' : '';
    var containerClass = (hidden) ? 'wb-inv' : '';
    $(element).counter({
        goal: max,
        count: 'down',
        translation : translation,
        containerClass: containerClass     
    });
};

Also had to manually add in the aria support back in.

[RobJohnston]

@cybersubtype : Those translations are not French... try 'caractère mots restants maximum'.

[ghost]

@RobJohnston Nevermind just a charset issue. All working thanks! :)

[LaurentGoderre]

@SBleeks @dfarough has this ever affected you?

[SBleeks]

It hasn’t effected me in the sense that max length isn’t usually a problem. We have developed a solution here for electronic questionnaires. While most edit fields work well by default, occasionally an edit field will require a form of Max character” indication.

An example is a “comment” field. We tried using ARIA Live but even using the “polite” attribute, the UI and user experience varied depending on browser/ User agent combination. Usually the overall experience with ARIA Live was not great. So the solution we use is 2 fold:

1. Indicate in text the number of characters available prior to the edit field, and also state that the number of characters remaining is offered directly beneath the edit field. This way if a blind screen reader user wants to know how many characters remain, they need only arrow down and review the number of characters which are vvisually displayed.

This approach has worked well and across all user agent/ browser conbinations.

I agree that for common edit fields such as “telephone number” and email address”, the format example is key and avoids user error.

[LaurentGoderre]

@SBleeks so would it be accurate to say that maximum number of characters are only really a problem for longer form element such as text area? Couldn't we use a character counter that have live off but user could still go back to it for information

[SBleeks]

Yes. Sounds reasonable to me. I’d need to test it first but sounds good.

I’ll give some thought to any possible relevant WCAG success criteria.