Accessibility fixes
This week at Springy HQ we are pleased to bring you the following accessibility fixes. Our first pass of fixes in the last few months focused on “errors” on all public pages; this pass hits the E-Reserves module as well as many things classified as “alerts”—things that could technically adhere to guidelines but needed examining. See something else we need to consider? Let us know! Click the Support tab on any admin-side LibGuides page to send us a ticket.
Please include:
- Name of the accessibility tool you’re using
- Description of the issue, including any code snippets that trigger the alert
- Screenshot of the accessibility tool’s overlay highlighting the issue, if possible
- URL of the page (included automatically if you use the Support form)
To ensure that content that you add keeps your guides accessible, please see our help guide on LibGuides and Accessibility accessible as well as the upcoming training session on the topic.
E-Reserves fixes
- We rebuilt the E-Reserves request form using plain HTML & Bootstrap select menus, eliminating several issues with keyboard and screenreader navigation.
- We eliminated a few errors and alerts on the main E-Reserves listing page and on course pages.
- We changed the H4 element used to mark up the number of courses shown to an H2 to maintain proper page outline.
Public Pages fixes
- We’ve replaced the select menus on the Subject and Profiles by Subject pages with simpler HTML that eliminates several alerts and errors.
- We changed an H4 tag on the Subjects page to H2 in order to maintain proper outline order.
- We added a missing ARIA label on the system homepage and changed the Sort control to a <div> rather than a <form> tag.
- We removed a hidden field that was triggering a “redundant ALT text” alert.
- We wrapped the profile image and name together in a single link tag to eliminate the “redundant link” alerts.
Gallery boxes
- We incorporated an updated version of the component used in Gallery boxes as it contained several accessibility updates.
- We changed the slide title field to H3 since the box title is H2, to maintain proper outline order.
A few changes might require the updating of your system’s CSS and custom templates, but only if you make extensive use of CSS and custom templates. Most folks won’t have to worry about these! Here are the gritty details, should you need them:
CSS Changes:
| System & Group Home Pages | |
| WAS: The element around the “Display” area, which allows you to control the order in which guide lists are displayed should not have been a <form> element. |
NOW: It is now a <div> element, so any customizations targeting the form element should be updated to use <div> instead. |
| Gallery Boxes | |
| WAS: Slide titles were <h4> elements. |
NOW: This is now an <h3>, following proper sequential numbering of heading tags on the page. |
| E-Reserves – er.php | |
| WAS: “Search for Courses” label next to the search box was a <span> element. |
NOW: This is now correctly in a <label>. Heading above the list of courses, subjects, etc., was an <h4> element. This is now an <h2>, following proper sequential numbering of heading tags on the page. |
| E-Reserves Request Form – er_request.php | |
| WAS: We had been using a component for some of the select options on the page that we determined was not accessible to screen readers / keyboard navigation. It had its own set of classes, which all started with “select2”. |
NOW: We’re using simple HTML styled by Bootstrap’s default classes. All classes starting with “select2” are removed. These include: select2-drop, select2-display-none, select2-with-searchbox, select2-drop-active, select2-offscreen, select2-input, etc. |
| Password-Protected Pages – Groups, Guides, Courses | |
| WAS: The message prompting users to enter the password (above the text box) was not in a <label>. |
NOW: That text correctly has a <label>, as it is associated with the password input below. Any CSS changes should target the <label> element. |
| Profile Landing Page – prf.php | |
| WAS: “By Subject” dropdown was using a component that we found was not accessible to screen readers / keyboard navigation. It had its own set of classes, which all started with “chosen”. |
NOW: We’re using simple HTML styled by Bootstrap’s default classes. All classes starting with “chosen” are removed. These include: chosen-select, chosen-container chosen-container-single, chosen-default, chosen-single, etc. Profile names are not linked, so style changes could be made using: div.s-lib-profile-nameProfile names are now linked to their profile (in addition to the picture being linked), so any style changes to the profile name must be adjusted to include the anchor tag: div.s-lib-profile-name a Subjects Pages: sb.php and individual subject pages |
| WAS: Subject dropdown selection was using a component that we found was not accessible to screen readers / keyboard navigation. It had its own set of classes, which all started with “chosen”. |
NOW: We’re using simple HTML styled by Bootstrap’s default classes. All classes starting with “chosen” are removed. These include: chosen-select, chosen-container chosen-container-single, chosen-default, chosen-single, etc. Headings above the list of guides, databases, etc., (“Showing x guides”, etc.) were <h4> elements. This is now an <h2>, following proper sequential numbering of heading tags on the page. |
Template Changes:
Both the Profile and Subject pages now have ARIA labels for the <section> tags. If you are using the default templates, you do not need to make any changes to implement this update. Default templates automatically update.
If you have customized these templates, however, you will need to update your template to include the accessibility update, as outlined below.
Right now, each of these is coded as simply <section>. Now they are coded as follows. You can update customized templates to reflect these changes at any time.
| Profiles Templates:
Main Landing Page – prf.php: <section aria-label=”List of Profiles”> Individual Profile Page – prf.php?account_id=x |
Subjects Templates:
Search Bar: |
Manage Your Domains!
New in LibApps is the ability to view and manage your systems’ domains, including the ability to add and change custom domains and upload a custom HTTPS certificate for LibGuides. Need a certificate installed for your LibCal or LibAnswers system? No sweat! Please email us at support@springshare.com or open a ticket by clicking the Support tab from the admin side of your product. We’ll get you set up right away, and the ability to manage these certificates on your own will be coming soon.
So what can you do on the new Manage Domains page? Go to LibApps > Admin > Manage Domains to:
- View the domains for all your Springy apps
- Add or change a Custom Domain Mapping for your LibAnswers, LibCal, or LibGuides site(s)
- Create a Certificate Signing Request in order to request a custom HTTPS certificate for your LibGuides site with a custom domain
- Manage the current HTTPS certificate for your LibGuides site with a custom domain
Also see our help guide on the topic.
Databases Page Stats
We’re pleased to add a long-awaited addition to your statistics interface: A-Z Databases Page hits. These stats show how many hits are made daily or monthly to your AZ list. From August 16, they also show the referring URLs, when that data exists.
Other Fixes and Features
This release also included:
- LibAuth:
-
- The ability to specify a custom port for SIP2 and LDAP LibAuth configurations.
- Automatic updating of LibAuth certification fingerprints and IdP configurations.
- Now when you view an E-Reserves Course’s settings, you’ll see the name of the default LibAuth configuration, if one exists.
- Resumption of the ability for customers to enter translation files for us. Interested? Please get in touch!
- Ability to limit AZ Holdings Analysis to library type and location.