Posts

Fixing a broken skip nav accessibility error

by

The Ohio State navbar contains a hidden skip nav link that jumps to an anchor called “page-content”.  This skip link is hidden visually (through CSS) but available for those using screen readers to use to skip the other Ohio State navbar links and go straight to a page’s content.  A review by the WAVE tool will report if the skip nav anchor is missing from a page. To correct a broken skip nav link, add an anchor near the start of your page’s main content. Here are some examples of possible anchors:

  • <a name=”page-content” id=”page-content”> – The ‘name’ attribute works in HTML 4 and the ‘id’ attribute in HTML 5.
  • <div id=”page-content”>  – In HTML 5 the ‘id’ attribute can be placed in a lot of different elements, such as a <div> or <main>.

Some more information about using anchors in HTML is available from W3 Schools. See the info about the HTML <a> name Attribute.

The WebAIM organization has some more information about “Skip Navigation” Links in their site.

Video tutorials related to managing media with Drupal 8.6+

by

Drupal 8 Media Entity File Browser Widget 9:43 – 3/8/16 – video tutorial showing how to add an Entity Browser to a Gallery Content Type for browsing for gallery images. 

  • The presenter went to: ‘Manage Fields > Manage Form Display’ in the Gallery Content Type.
  • Then changed the Gallery Images field type to ‘File Browser’.
  • Then he chose the ‘Browse for Images’ option. The drag and drop functionally is powered by Dropzone JS.
  • Alternately, choosing ‘Browse for Files (modal)’ will have the File Browser pop up in an overlay.

Adding a node ID as class to the tag in Drupal 8

by

One thing I discovered recently in my college’s Drupal 8 site was that the node number CSS class that used to be applied to the <body> tag was missing. In Drupal 7 there was a unique node ID class and it looked sort of like this:

<body class=”html not-front not-logged-in no-sidebars page-node page-node- page-node-8471 node-type-article news-newsreleases context-news”>

Having this unique node number CSS class was useful for cases when specific pages needed custom styles applied.

By default, Drupal 8 seems to add no such class to pages. To get them back I added a snippet of code I found on a Drupal.org post. I found it was easiest to use:

 /**
* Implements hook_preprocess_html().
*/
function themename_preprocess_html(&$variables) {
if ($node = \Drupal::request()->attributes->get(‘node’)) {
$variables[‘attributes’][‘class’][] = ‘page-node-‘ . $node->id();
}
}

in my theme’s sitetheme.theme file.

This is also a Node Class module that might help accomplish the same objective, adding unique CSS classes to a page. It’s a simple module that allows users to add custom CSS classes to any node through the node/add interface.

After adding the snippet of code above to my sitetheme.theme file I was able to target a faculty profile page that needed custom styling. Previously, without a unique CSS class, there no way to target that specific page.

Ohio State Drupal Users Group Meeting – March 22, 2018

by

The Ohio State Drupal Users Group is having its March 2018 meeting in 141 Sullivant Hall (the Collaboratory) on Thursday, March 22, 2018, 3:00 pm to 5:00 pm. One of the topics of discussion with be Drupal site hosting, which will probably get into hosting on cloud platforms like Pantheon or Acquia. The university also runs a hosting service that’s available for Ohio State Colleges and Departments to use. The OCIO hosting service offers some Drupal-specific information about installing, backing up, and restoring Drupal 7 and Drupal 8 websites. In Drupal 8, drush commands can be used to create backups and migrate a site from a development account to a production account. Cloud hosting services, like Pantheon or Acquia, also offer DEv, Test, and Live (production) environments and methods to move (deploy) site data between them.

 

There is a Sullivant Hall Collaboratory and Rotunda Reservation Request form available that other groups from the university can use to reserve that space.

 

Including alt text on images with CK-Editor

by
CK-Editor is a popular WYSIWYG editor powering rich text fields in Drupal site updating and WordPress blog post writing. It’s important for site builders/blog authors to know how to add alternative text to images uploaded with this editor to meet the accessibility needs of their audiences.  Drupal 7 typically supports the 4.6.2 edition of CK-Editor.
To specify alternative text on an image in Drupal 7’s CK-Editor:
– Right click on the image you what to add text on and choose ‘Image Properties’.
– Enter your alt text under the ‘Alternative Text’ field and hit ‘OK’
Learn more about HTML and CK-Editor accessibility techniques in my other blog posts or ODEE’s resource center.
Adding alt text on an image in CK-Editor

Adding alt text on an image in CK-Editor

It can also be beneficial to include a title and alt text on hyperlinks. To add alt text to a link with CK-Editor click the ‘Advanced’ tab and add your alternative text under ‘Advisory Tile’ (becomes both a hover tool-tip and alt text for the link). It’s a good idea to include the word ‘website’ in your links to external sites to inform readers that they are going to a new site.

Better structure in MS Word documents to promote accessibility

by

Better structure in MS Word and PDF documents helps readers with visual disabilities and also has SEO benefits. HTML document structural concepts are now pervasive across many formats like Word & PDF so it’s important for content authors/contributors to be familiar with methods of doc structuring. It’s important for documents posted online to be as accessible as possible. Adjusting styles for headings and specifying heading tags can aid in better structuring MS Word documents to promote document accessibility. Headings are especially important for structuring and organizing pages with lengthy content.

Documents should be structured in a hierarchical manner, generally with one H1 (heading level 1) as the page title. Bolded text sections below that are H2s (heading level 2s) and those nested beneath are H3s (heading level 3s). Document authors should be careful not to skip heading levels, you can’t have an H4 without it being nested inside an H3. Organizing content in heading sections allows sighted users to scan lengthy pages and jump to sections they’re interested in. It’s like chunking information to be more understandable. Similarly, users with assistive technologies, such as screen-readers, can jump between headings in a lengthy page to more quickly get to the information they’re interested in. See WebAIM’s article, Using Headings for Content Structure, for more information about properly structuring a document.

To specify headings in MS Word:

In Microsoft Word normal text may be changed to headings via the Heading styles in the ‘Home’ ribbon. To create a heading: select your text and click on one of the Heading styles (H1 – H4). See WebAIM’s article for more information about using headings in MS Word.
To create a heading: select your text and click on one of the Heading styles (H1 – H4).
See WebAIM’s article for more information about using headings in MS Word.

Including alternative text on images in documents:

It’s important for all photos in a document to have alternative text descriptions to pass an accessibility check. This post highlights some resources and techniques to add alt text to images in MS Word documents.

Adding Alt Text to Images in MS Word

To specify alternative text on an image in Word:
– Right-click on the image and choose ‘Format Picture’.
– Click on the ‘Layout & Properties’ icon and expand ‘Alt Text’.
– Enter your alternative text and a long description, if desired.

Adding alt text to an image in Microsoft Word

Adding alt text to an image in Microsoft Word

Steps to better structure an InDesign document to promote accessibility

by
Better structure in PDF documents helps readers with visual disabilities and also has SEO benefits. HTML document structural concepts are now pervasive across many formats like Word & PDF so it’s important for content authors/contributors to be familiar with methods of doc structuring. Adding paragraph styles for heading and specifying heading tags can aid in better structuring an InDesign document to promote document accessibility. Adding alternative text descriptions to all photos in a document is another important practice to enhance accessibility.

Create Paragraph Styles:

Go to the ‘Window > Styles > Paragraph Styles’ panel to start setting up paragraph styles for your normal paragraphs and heading levels (such as H1, H2, and H3). There is typically just one heading level 1, H1, in a page as the page title. A normal paragraph is typically nested within one or more headings.
To create a new paragraph style for a heading:
– Add a text frame with the size and font style you want for that level of heading. Heading 1s typical have the largest font size.
– In the ‘Paragraph Style’ panel choose ‘New Paragraph Style’ from the arrow menu.
– Give it a name like ‘Heading 4 Style’. It takes on the font style characteristics of the text frame you had select.
To give a normal paragraph text frame a heading style select that frame and click on one of the heading styles you created.

Setup Structural Tags:

To setup structural tags in your InDesign document:
– Go to ‘View > Utilities > Tags’ to open the Tags panel.
– Choose ‘New Tag’ from the arrow menu.
– Give the tag a name like ‘H4’.
To tag a heading frame (frame with a heading paragraph style applied):
– Select the heading text frame.
– Click the heading tag (such as H4) you want it to be in the tags panel from the heading tags you created. You will be able to see which text frame have tags applied in the ‘View Structure’ panel.
Other tag-related tips:
– Go to ‘View > Structure > View Structure’ to view the document hierarchy structure branching off from the ‘Root’.
– Go to ‘View > Structure > Show Tagged Frames’ to visually color-code your tagged frames. In my example document, H1s were red, H2s were green, and H3s were blue. Normal paragraphs, P, were just light gray.

Adding Alt Text to Images in InDesign:

It’s important for all photos in a document to have alternative text descriptions. You can add alternative text to images, graphics, or photos by using the ‘Object Export Options’ panel.
To add alternative text to an image in InDesign:
– Select the object/photo that you want to add alternative text to.
– Go to:’Object > Object Export Options’
– Enter alternative text for the object/photo you selected in the ‘Alt Text’ tab. It’s possible to set custom alt text for an image or choose text from a structural tag previously applied.
– Choose ‘Custom’ from the menu to enter custom alternative text for the photo.
Document accessibility related panels in InDesign

Document accessibility related panels in InDesign

Underlining and the Web

by

It’s generally not a good typographic practice to use the default underline function in most applications including the <u> tag in HTML. Many designers believe that underling is not an appropriate method for adding emphasis to text. It’s a holdover from the days of typewriters when other forms of emphasis, like bold text or different colors, were not available. On the web there is a convention that underling denotes a hyperlink so many web designers feel that underling should only be used to represent hyperlinks. Website users may get confused if they click on underlined text that is not a link. Bold ( <strong> in html) or italics (<em> in html) are more valid ways of emphasizing text. In HTML the <u> element, used for underlining,  was deprecated in HTML 4.01. It returned in HTML 5 but has a different semantic meaning.