- Introduction
- Installation
- Configuration
- FAQ
- Maintainers
- Changelog
This module handles custom functionality for bluecadet_accessibility. Current Functionality:
- Add a option in Views when using AJAX for enhanced accessibility.
- Install as you would normally install a contributed Drupal module. Visit https://www.drupal.org/node/1897420 for further information.
Configuration can be found on a view under the Display formatter.
- Maintain “views” class names, but can add pre-defined or custom class names.
- Assume basic top level template (views-view.html.twig) structure.
- Results should be in an unordered list (the list part is the important part) . Unordered lists help screen reader users navigate from the first item in a list to the end of the list or jump to the next list. It can also help them bypass groups of links if they choose to. (W3C, H48: Using ol, ul and dl for lists or groups of links
- There should be a title (can be screen reader only)
<h2 class="u-sr-only view-content__header" tabIndex="0">Results</h2>
default is before ul and a child of “view-content” - Need a header, which is usually an h2, before filters and before results ideally
<h2 class="u-sr-only view-filters__header">Filter Results</h2>
and<h2 class="u-sr-only view-content__header">Results</h2>
is visually hidden. - Buttons and pagers can set a
data-announce-text
attr which will be announced rather than a generic string.
<button type="submit" data-announce-text="Searching the site" class="c-search-header__search-submit"{{ attributes }}>
Search
</button>
OR
<button type="submit" data-announce-text="Filter the results" class="c-search-header__search-submit"{{ attributes }}>
Filter
</button>
...
{% for key, item in items.pages %}
<li class="c-pagination__item{{ current == key ? ' is-active' : '' }}">
<a href="{{ item.href }}" data-announce-text="Navigating to Page {{ key }}" {{ item.attributes|without('href', 'title') }} {{current == key ? 'aria-current="page"' : null}}>
<span class="u-sr-only">Page </span>
{{- key -}}
</a>
</li>
{% endfor %}
...
html {
scroll-behavior: smooth;
}
Current maintainers:
- Pete Inge (pingevt) - https://www.drupal.org/user/411339
- Amy Frear - https://www.frear-projects.com/
This project has been sponsored by:
- Bluecadet - https://www.bluecadet.com/
- Adds Drupal Views Display Extender for enhanced accessibility.