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

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

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.
For more information about creating good accessibility in InDesign documents see Adobe’s documentation or watch the video, Preparing InDesign Files for Accessibility.
Document accessibility related panels in InDesign

Document accessibility related panels in InDesign

Thoughts on addressing image resolution needs for high pixel density displays

by
I recently asked a colleague for advice about what resolution to use to support the needs of today’s high pixel density displays. They said to always make vector assets 2 times the dimensions that they will display on screen. So if a vector image display size was 100px, the natural size of the svg asset should be 200px. For jpegs used in an email, it’s also best to make them 2x larger than the display size to look good on ‘Retina’ displays.  To aid content contributors, it’s best to suggest a minimum size for images uploaded to a CMS so photos will still look crisp on high-density displays & devices.
Also, when embedding svgs in webpages it’s good to include a fallback .png for old browsers or those that don’t yet support svgs like in this example:
<img src=”your-fallback.png” srcset=”your-svg.svg” alt=”Your alt text here” />
Thanks to University Marketing for providing this advice.
Here are some articles related to addressing image resolution needs for high pixel density displays:
Formatting your images for display on the web – From 7/20/17 – Squarespace suggests that images uploaded to their website service be between 1500 and 2500 pixels wide. Their service creates seven variations of each uploaded image, to ensure ‘perfect display’ on any screen size.
Here are some articles about image display in Emails for high pixel density devices:

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.

The many benefits of inclusive design and good accessibility

by


Digital accessibility is not just about meeting the needs of the disabled or catering to edge cases. Good accessibility impacts everyone5. The benefits of good web accessibility go beyond ADA compliance and risk management. Using effective headings and document structuring can help improve your SEO and search engine placement which benefits your organization and all site visitors. Inclusive design seeks to use digital accessibility techniques to benefit all website visitors.

Specifying headings to structure your page

Making something, like a title, bold doesn’t make it an actual header, that’s a pseudo-heading. The CK-Editor toolbar in Drupal has an option to specify a proper heading (such as H1, H2, or H3). Screen-reader users have an easier time scanning page content that has been divided into headings and sub-headings. Special key commands allow them to jump between headings to scan the page. The Communication Services staff at the College of Arts and Sciences have put together some great video tutorials about using headings to promote good accessibility2. See the References at the bottom of this page.

Specifying alternative text on images, hyperlinks, and links to documents

Specifying alternative text on images helps a screen reader user tell image means and it’s relation to nearby content. Making your online content friendly for screen-readers not only benefits the visually impaired but others who use text-to-speech apps5. In certain contexts, like while driving in a car, people may choose to listen to your content through a text-to-speech app rather than visually read it. Audio narration also helps people follow along with the narrative while they are reading. Many text-to-speech apps highlight what is being read.

Alternative text should also be added to 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. Relative links are used to build internal links between pages.  For example a path might look like: ‘/folder/sub-folder/name-of-page.html’. Absolute links send readers out to external sites. A URL path might look like: ‘http://www.someplace.com/folder/sub-folder/name-of-page.html’.

Instead of just linking to untagged PDF files it’s recommended to create webpages with the same content as the file then place a link to the PDF, if needed. This is because PDF files are generally not as accessible as HTML pages4. It takes more effort to make a PDF file more accessible than an HTML page. Many universities and schools of pharmacy are already creating student manual documents in HTML format. Some post important current student information in both HTML and PDF format. The ‘ASC CE Training Links to Files’ training video4 says its’ imperative that you indicate the file type in the link text such as including ‘[pdf]’ in brackets.

Making data tables accessible

It’s important for tables to be made accessible as possible to those using screen readers. The most common issue for Word documents with data tables in them is missing table row headers <th> (usually in the first row).

To add a header row in MS Word 2013:
– Right-click on the table and choose ‘Table Properties’.
– Under the ‘Row’ tab check ‘Repeat as header row’ at the top of each page.

You will be able to see the <th> in the table structure in Acrobat Pro’s ‘Tags’ panel after you’ve exported to PDF. Missing table row headers can also be added in Drupal’s CK-Editor or another HTML editor app, like Dreamweaver or Kompzer.

References

1) ASC Communication Services. ASC CE Training – Accessibility. The Ohio State University College of Arts and Sciences. 2015.
2) ASC Communication Services. ASC CE Training Headers and Accessibility.  The Ohio State University College of Arts and Sciences. 2015.
3) ASC Communication Services. ASC CE Training – Alternative Text.  The Ohio State University College of Arts and Sciences. 2015.
4) ASC Communication Services. ASC CE Training Links to Files. The Ohio State University College of Arts and Sciences. 2015.
5) Paul Boag. Accessibility is not what you think. Boagworld. 2014.
6) Accessibility at Penn State [Internet]. Tables for Data in HTML. Pennsylvania State University, University Park, PA. [cited 13 Feb 2016]