Skip to content

bluecadet/bluecadet_accessibility

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

CONTENTS OF THIS FILE

  • Introduction
  • Installation
  • Configuration
  • FAQ
  • Maintainers
  • Changelog

INTRODUCTION

This module handles custom functionality for bluecadet_accessibility. Current Functionality:

  • Add a option in Views when using AJAX for enhanced accessibility.

INSTALLATION

CONFIGURATION

Configuration can be found on a view under the Display formatter.

Assumptions about our view templates:

  • 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.

How to add custom announce text to templates (exposed forms, pager templates).

Form elements

<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>

Pager elements

...

{% 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&nbsp;</span>
      {{- key -}}
    </a>
  </li>
{% endfor %}

...

Optional CSS for smooth scrolling

html {
  scroll-behavior: smooth;
}

MAINTAINERS

Current maintainers:

This project has been sponsored by:

CHANGELOG

Unreleased

1.x

  • Adds Drupal Views Display Extender for enhanced accessibility.



Proudly developed @ Bluecadet

Bluecadet