Category Archives: Accessibility

Accessibility Practicum: Captioning an interview with a former coal miner

My good deed of this week was to download a video from Internet Archive and upload it to YouTube with some corrected close captioning.

The video I chose is of an interview with a man from Hazard, Kentucky about what life was like in the early 1900’s and what it’s like for him today. The man has a pronounced regional accent and I was curious about how well YouTube would be able to automatically generate captions for it.

I appreciate and use closed-captioning, especially as subtitles when watching foreign language movies or when my very noisy dishwasher is running. However, I was surprised when trying to actually create them how little I could remember about their common conventions.

I had a lot of questions

I wasn’t sure about punctuation, whether I could leave it off when transcribing more conversational speech.

I wasn’t sure if I needed to “set the scene”, accounting for any visible or audible change, with something like stage directions.

I didn’t know if speakers’ names should be used when multiple people are speaking.

Recommendations to affix the speaker’s name to transcribed text felt awkward when I tried them out.

I didn’t know where to draw the line when making corrections. While I did end up making some, I was concerned about removing mannerisms of speech which typify regional Appalachian dialects.

While researching these questions, I couldn’t find easy answers

The captioning process

The automatic captions provided by YouTube are better than nothing and it took less than an hour for the closed-captioning file to be created. The accent of the primary speaker in the video I uploaded was fairly heavy but the speech-to-text generation required less editing than I’d anticipated.

The closed-captioning editor embedded into YouTube was intuitive to me as someone who had never used it while still feeling like it probably rewards more advanced users.  Despite this, I found the editing process pretty tedious and it was difficult for me to stay consistent. Getting all super focused so you can listen to the same clip over and over and agonize over having a caption appear at the right millisecond can be fun but there’s not getting around that creating captioning is labor-intensive, which of course translates into it being expensive.

Accessibility Evaluation: Arts & Letters Daily

I conducted an accessibility evaluation on the human-curated, arts and humanities news aggregator, Arts & Letters Daily. To conduct this evaluation, I selectively used the “Web Accessibility Checklist” from the A11Y Project. This checklist incorporates principles and guidelines from WCAG 2.0, WAI-ARIA, and Section 508. These are my notes.

Header and Footer

The header does not explicitly include an ARIA banner landmark but since it’s in an HTML5 document and the header is a child element only of the body, this role is implicit.

There’s a language tag! Good.

This site does not use “main” or “articles” landmark roles to wrap the focal content of of the site and represent independent items of content. Wrapping the three columns with the main tag and assigning each article blurb an article role would likely contribute to this site’s accessibility.

A div element is used to contain the footer content. A better option would have been to either use an actual <footer> element, which in an HTML5 document can be mapped an ARIA landmark role of “contentinfo” or explicitly assign a landmark role of “contentinfo” to the div.

This site is all text save for a logo in the header, without any ALT text. That should be there. Who’s that supposed to be in the logo anyway?!

Site Logo

Site Logo

 

Navigation

An ARIA role landmark is not provided for the navigation menu. A semantic HTML5 <nav> element could be used in place of <div id=”leftnav”> in order to make this role implicit or a landmark role of navigation could have been assigned .

Main Content

Semantic headings are used but there are some issues. For one, heading levels were chosen in order to produce desired font size rather than to represent hierarchically organized information. Also, two are skipped, h1 and h2.

Curiously, no headings are used to mark the blurbs of content which are what the site’s all about really. This negatively impacts the experience of tabbing through in the normal display, since the only thing you can tab to and from are the “Read more” links which close each blurb.

Arts and Letters Daily, normal display

Normal Display

Blurbs on this site are arranged into three categories, yet they are not wrapped in HTML5 <sections>.  This is a lost opportunity to improve accessibility.

An alternate way of displaying content is provided. With this view, content is listed under dates with each blurb falling under a heading with the category. This arrangement of content seems like it would be easier for assistive tech to interpret than the table-view.

An alternate way of displaying content

Alternate View

Links

Focus is a CSS pseudo class used to apply styling to an element currently targeted or activated by an input device. Many elements have focus by default but this state can also be added to any HTML5 element. In addition to being able to uniquely style the targeted element, elements with focus can be tabbed through, which greatly contributes to accessibility.

So, one of the elements that get focus by default are anchor tags, which explains why the “more” links are what are available to tabbing in the normal, table display. These links are not underlined but are otherwise distinguishable as links.  But not to give them too much credit, there really should be a way to get focus at the beginning of each of these blurbs, not just the end.

The “More” links are semantically unclear and text should be provided to give greater indication of where they go, especially since they all point to external locations.

JavaScript

How a site implements JavaScript is also an accessibility concern. This site uses some inline JavaScript which is discouraged but I found that when I completely disabled JavaScript, no functionality was lost.

Color Contrast

The contrast ratio for background and text color was 6.09, a score of AA for normal text and AAA for large or bold text.

aldaily.com has a contrast ratio score of 6.09

Contrast Ratio Score

Color blindness

I viewed the site using filters simulating different types of colorblindness. There isn’t a lot of meaningful use of color on this site and the palette is very spare, so there isn’t any problematic use of color.