Doesn't include aria-label as an option

[judygab]

I'm using this plugin on a page and running through SiteImprove(one of the tools to check Web Accessibility issues is showing an error that 'Link Text is Too Generic in Its Current Context'. This is because Generic Text like 'Read More' is used. The way to solve this problem by adding aria-label to the link to provide more specific details, but I don't see that in the list of options in your documentation. Is this something that can be worked on?

[kswedberg]

There isn't a way within the plugin do this, but it's easy enough to do with jQuery. Here's a quick and dirty example of making this a little more accessible (you'll need to change selectors, etc to match the elements on your page, of course):

var setAriaCollapsed = function() {
  $(this).attr('aria-expanded', 'false')
  .find('.more-link').attr('aria-label', 'this is the label for the "read more" link');
};

var setAriaExpanded = function() {
  $(this).attr('aria-expanded', 'true')
  .find('.more-link').attr('aria-label', 'this is the label for the "read less" link');
};

$('.expander')
.expander({
  afterExpand: setAriaExpanded,
  afterCollapse: setAriaCollapsed
  // your other options
})
.each(setAriaCollapsed);

[judygab]

There isn't a way within the plugin do this, but it's easy enough to do with jQuery. Here's a quick and dirty example of making this a little more accessible (you'll need to change selectors, etc to match the elements on your page, of course):

var setAriaCollapsed = function() {
  $(this).attr('aria-expanded', 'false')
  .find('.more-link').attr('aria-label', 'this is the label for the "read more" link');
};

var setAriaExpanded = function() {
  $(this).attr('aria-expanded', 'true')
  .find('.more-link').attr('aria-label', 'this is the label for the "read less" link');
};

$('.expander')
.expander({
  afterExpand: setAriaExpanded,
  afterCollapse: setAriaCollapsed
  // your other options
})
.each(setAriaCollapsed);

This was helpful, thank you! Closing this issue