Web Development

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.

Recommended tables settings for CK-editor

by

The CK-editor WYSIWYG editor, used in content management systems like WordPress 4 or Drupal 8, has all the tools you need to create an accessible data table. Some key things it remember are to keep your tables simple. Don’t create a more complex design with cells crossing into other columns. Also be sure to specify a header row. This is most commonly the first row. Below are some good settings to use with CK-editor in Drupal 8.

Suggested CK-editor settings for good accessibility

  • Width: 100% —> yields: style=”width: 100%;”
  • Cell Spacing: 0
  • Cell Padding: 0
  • Border size: 0
  • Headers: First Row – it does wrap the < th > row with < thead >
  • Alignment: not set
  • Caption: include descriptive text, could be same as the title of the table.
  • Summary: include descriptive text, could be same as the title of the table.

General accessible data table tips/guidelines:

  • be sure to specify the First Row as the Header row (CK-editor will add the < th > and < thead > wrapper behind the scenes).
  • To further enhance markup of the columns, add scope=”col” to the . For example: <th scope=”col”>. If the table was turned on it’s side it would be scope=”row”.
  • keep table design basic, don’t span a cell into another row
  • don’t embed tables inside tables
  • include a descriptive Caption if the table doesn’t have a title/heading. The
    can be visually hidden with CSS, but made available to screen-reader users.

Adding a node ID as class to the body 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.

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

The value of including PDF and other types of download indicators on hyperlinks

by

When it comes to link text the W3C recommendations say: “clearly identify the target of each link” to aid users in deciding weather they want to follow a link or not. A well written article about Links and accessibility goes into more detail about giving all users the context to decide by including description text and download indicators.

Usability testing has shown that site visitors hate unexpected downloads. When there’s no text indication on whether a hyperlink goes to another webpage or downloads a file, visitors can end up downloading a huge file eating up their mobile data allowance and taking focus away from what they were doing.  That Links and Accessibility article recommends that the type of download and size be indicated in parentheses after the hyperlink text to aid people on whether or not to follow the link. For example a descriptive link could look like:
Another technique is to add a PDF or Word icon instead of the text of a download link, but it’s important to make sure the icon has descriptive ALT text. Icons added via CSS or other automated techniques can be missed by people user screen readers.
That Links and Accessibility article I reference in this post probably has the best description about why it’s important to let site visitors know what content a link goes to. It also describes why empty links are a bad practice, a link with no text at all gives no context to non-visual users on what the link is for or where it goes.
At Ohio State, a former Arts & Science web CMS contributor trainer (Drupal trainer) from ACS Communications recommended adding PDF indicators on hyperlinks in her adding links accessibility training video on YouTube. Unfortunately the importance of adding ‘(PDF)’ on hyperlinks it’s well known and many significant web projects have over looked it. By researching and writing about this topic I’m attempting to educate others and perhaps make the web a little more usable.
Here are some other accessibility resources from  ACS Communications:
References:
Wild, Gian. Links and Accessibility. AccessibilityOz, 2014. Available at: https://www.accessibilityoz.com/2014/02/links-and-accessibility/

Fixing empty links that find their way into websites

by
It’s easy to correct missing alt tags on images but some accessibility errors, like empty links,  are more mysterious and ease to overlook. Sometime copying and pasting new code, such as code for social icons or links from a 3rd party, can unwittingly bring in empty links into a website.

I thought my website was mostly free from errors but I looked again (using the WAVE tool from WebAIM) and found that some new social icons that had been added actually were empty links. To fix these I added descriptive link text between the opening and close <a> tags and visually hid the text with a CSS class. That way my social icons still looked the visually the same but included actual text aiding non-visual users context to know what the links are about. 

This Links & Accessibility article also says “do not have broken or empty links” because having an empty links give no context to allow a screen reader user to know what the link is about. Sometimes designers make an empty link visually to look like a button by adding a background image via CSS styles.
I recently noticed that the website of a computing center at a major university had several empty links in their website header and footer. The university’s logo was an empty link because instead of the logo being an inline image, it was actually a background image, added through CSS, on a empty <a> tag. To fix this empty link error they could add “ACME University” link text and visually hide it for sighted users, if desired. Then a screen reader user could still have context to know what the link is for and the page could have the visual look desired by marketers.

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.

 

Understanding Responsive Breakpoints

by
In responsive design it’s possible to set up breakpoints in the CSS (cascading style sheets) to different sized screens such as mobile, tablets and desktop. These are added in special CSS rules called ‘media queries’. A media query is a CSS technique first introduced in CSS3. Below are some examples of media queries, the first applying to screens below a width of 990px (about tablet sized) and the second applying to screens  below a width of 600px (about mobile sized).  Style rules would be added between the trailing brackets as shown.
/* apply style rules to screens below 960px wide, about tablet width */
@media only screen and (max-width: 990px) { /* add CSS rules for this screen size here */ }
/*  apply style rules to screens below 600px wide, about mobile width */
@media only screen and (max-width: 600px) {  /* add CSS rules for this screen size here */ }
Ideally web designers should strive for a flexible design that adapts to just about any screen size, but it can be conceptually beneficial to define mobile, tablets and desktop. These are points where elements of the layout can change, like columns stacking instead of being next to each other.
To learn more about responsive design and media queries see these articles:
Media Queries for Standard Devices – from CSS Tricks – 10/9/17

Discovering text-to-speech apps

by
I was looking for an Android OS text-to-speech application to read aloud blog posts about web design and I came across the @ Voice Aloud Reader app. It’s powered by the Google TTS engine that’s installed for accessibility purposes on most newer Android phones. I was easily able to select ‘Share’ in my Chrome browser and have it speak a webpage. It can also speak aloud text from many other files such as PDF and Word. It’s a free app that has apps at the bottom but that doesn’t bother me. Find out more about this great app in the Google Play Store.

Using HTML tables in the correct way

by

Using HTML tables in the correct way will help make your sites more accessible to all viewers and user agents. Using tables for layout of webpages was a popular technique starting in the late 90s that had fell out of favor by 2006-2007 with the rise of web standards movement. Tables primary purpose is to display tabular data. If you are using tables of layout with empty cells, missing table headers <th>, or fixed widths you are using them in an incorrect way that introduces accessibility problems into your web site.

The preferred method late 2000s method for laying out pages was to wrap content in <divs> and use CSS (cascading style sheets) to place the <div> areas in columns or grids. HTML 5 introduced additional structural elements in HTML such as <article>, <nav>, and <aside> that could also be used with CSS layout techniques. A big problem with layout tables used in the late 90s was that they mixed presentational data in with content. CSS was created so the presentational markup could be separated from the ‘semantic’ HTML content. That way the same content could be more easily styled in a variety of ways by switching out style-sheets. It would be much more difficult to change the appearance of layout tables with inline fixed widths and other deprecated presentational markup that shouldn’t be in HTML.

Some key features of accessible tabular data tables as I understand them, are:

– They have a <caption> tag included at the top of the table. These can be hidden visually but be seen by screen readers or other tools that read text.
– They have header cells, <th>, which help to label table columns or rows (depending on how the table is laid out). Site visitors using screen readers can jump between these headings.
– They have a <thead> tag that’s used to wrap the header cells, <th>.
– They have the have the same number of columns in every row and same number of rows in every column. Fancier layouts with cells spanning multiple columns can yield accessibility errors in validators and navigational problems in screen readers.
– They are basic and straightforward in their layout. Nested tables within tables or cells spanning multiple rows will confuse  accessibility validators and screen readers.

I’ll update this post as I learn more about best practices for using data tables in HTML. I’ll also share more insights in theming HTML 5 content as I discover new techniques.