Monthly Archives: May 2018

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.

 

 

 

Usability Test: Emerald Downs Racetrack and Casino (Mobile Version)

Previously, I conducted usability testing on the Emerald Downs website as accessed using a desktop browser. This week, I performed the same usability test but using smaller form factor devices, tablets and smartphones.

Demographics

For my mobile test I enlisted the help of three user testers. Two tests were conducted in person and one remotely.

Age, gender, educational attainment, and parent status of user testers:

  • 60-65 yo female, High School, with kids, low vision, uses a wheelchair for mobility
  • 25-30 yo female, Masters degree, with kids
  • 35-40 yo male, Bachelors degree, no kids

Devices and Applications

I used Mobizen for audio and screencapturing on my own mobile device, a Motorola Droid Turbo 2, to administer the in person tests. For the remote test, I spoke with the user on the phone while they accessed the site on an Amazon Fire device. As there was no screencapture and I was unable to observe their interactions with the site, what data could be collected was limited. I enlisted this person anyway because they fall into a demographic not represented by anyone else I had recruited so far.


Usability Test – Preliminary Portion

After starting the session by introducing the usability test and asking some preliminary questions, I gave user testers a couple of minutes to orient themselves on the homepage of the site (asking they not click on anything). I then requested they put the device down and describe their general impressions of the site, what it’s for, and what types of events are held at Emerald Downs.

Usability Test – Task Portion

For this portion of the test, I asked users to complete three tasks:

  1. Locate where events are displayed on the site and describe what information is available
  2. Determine whether Emerald Downs is a good place to bring kids. Are kid-specific events held?
  3. Imagine you have a free weekend coming up and would like to see some live horse racing. Locate this weekend on the calendar, find out what events were being held that day, and figure out at what time the gates open.

Usability Testing Script (Mobile Version): mobile-testing-script


Observations – Overall impressions of the site

All users commented on the site being visually appealing, with one user calling it “fancy” and another “colorful and interesting — the people in the photos look like they are having a good time”. Two users mentioned that the design looked “modern”. All were able to identify the site as belonging to the Emerald Downs Racetrack but only one volunteered “Casino” in their description of who they thought the site belonged to. When asked to list what kinds of events are held at Emerald Downs, all users included horseracing and live music.

One user complained about insufficient contrast between background and text color on the site and hard to read fonts. They cited the poor contrast as being why they misread “Responsible Wagering” in the menu as “Responsible Watching” and joked they thought this meant you weren’t allowed to heckle the horses or blow raspberries at them.

White text on grey background

White text on grey background

Observations – Task One

There are two primary links from the home page where users can access the event calendar, one in the main menu bar and another in a sectional block midway down the page. A user who spent more time exploring this main menu bar when initially surveying the site accessed the calendar through a link there under “Visit” while the other two users selected the turquoise block (see image below — what do you think about the contrast?).

White text on turquoise background

White text on turquoise background

Two users, including the one who accessed the calendar through the menu were surprised or thrown off by arriving on a view listing events rather than one displaying a calendar grid layout. All users selected the “Previous Events” and “Next Events” although only one user verbalized having understood that these links actually display the previous and next weeks worth of events.

page turners

Next events? Next week’s events?

I observed two users show signs of frustration at having to use these links to view more events instead of being able to scroll to see more. One user looked for but was unable to find a link to access the desktop version of the site.

All users noted the legend at the top of the calendar view and two users voluntarily “sorted” by these options. One user who did so said that it “doesn’t do anything”. (These links do actually work, but the feature isn’t accurately named — they filter results, not sort them.)

sort vs filter

Sort vs. Filter

Observations – Task Two

Two of my user testers have children but only one has kids of an age where they currently face having to take them out for fun now and again. All users scrolled through the events and were able to call out ones they thought would be kid friendly. One user mentioned they thought daytime would be best for kids, since the site hosts gambling and has a nightlife scene with live music and dancing.

yeehaw family fun

Family fun at Emerald Downs

One user located the clubhouse menu under “Dining Options” in order to find out what food was available. They located the menu but noticed pricing wasn’t provided, which they thought should be.

Quick Pix Cafe - no prices?

Quick Pix Cafe – no prices?

Observations – Task Three

All users were able to find an upcoming weekend to set their imaginary trip but two seemed or mentioned being bothered to have to click through each successive week to reach the weekend they wanted.

When attempting to locate an upcoming Saturday or Sunday, only one user complained the weekday wasn’t provided alongside the date. This user (who I ran through the test with remotely) actually had someone near them pull up a calendar on another device in order to collate weekday information. I suspect the other users may have offered this complaint as well had I asked them specifically to pick a Saturday or Sunday.

Only a weeks worth of events are displayed at a time and users have to click through each week successively in order to arrive on the one that they want. One user who seemed to enjoy clicking and scrolling through each week to see what was happening didn’t mention being frustrated by this but the others said that they thought there should be a way to go directly to a date or that it should be faster to get to a given date.


Recommendations

Based on data collected from conducting this usability test with three users, I’ve identified the following pain points and list them along with recommendations on how to overcome them (these correspond to observations in bold from users):

Contrast
* Adjust text and background color where needed to make text easier to make out by those with low vision
Fonts
* Adjust fonts where needed to those easier to make out by those with low vision
Event display options
* Provide the option of viewing events on a grid displaying monthly calendar
“Previous/next page” labels in event listing
* Change labels from “Previous Events”/”Next Events” to “Previous Week”/”Next Week”
Link to desktop version
* Add one
Sort vs. filter using event legend
* Change label from sort to filter
Menu Prices
* Include them
Calendar navigation
* Provide an alternate way for users to access a given date, by either clicking on a calendar grid or using a dropdown
Information on date cards
* Provide the weekday next to month and numeric day


Additional comments about accessibility information on the site

One of my users requires the use of a wheelchair for mobility and has low vision. They estimated spending 30 hours using the internet each week, exclusively through a touchscreen tablet. I spent extra time asking questions of this user outside of the given tasks in order to find out what they thought about the site.

In addition to the standardized tasks, I had them explore the site for information about wheelchair access. The first thing they did was go to a page set up for “Parking” and found a section there specifically for “Patrons with Disabilities”. From there they went to the “Admission” page where ticket information can be found, finding there another more expansive section with information for those with disabilities.

Main menu

Main menu

Aside: Prior to running to asking the user to complete these extra tasks, I made myself do them. While I was able to (eventually), it took me considerably longer and included more “dead ends”. I believe it’s very possible web users with disabilities develop highly-tuned information seeking patterns and skills which allow them to navigate more readily to this pertinent type of information (know exactly where websites “hide” this information). The more I think about how this particular user responded to the task, the more logical the choice to start at “Parking” and then head to “Admission” seems. Perhaps they were imagining the visit and stepping through it chronologically — first you arrive in the parking lot, then you show/buy your ticket…

When asked whether they thought Emerald Downs would be an easy or stressful place for someone with limited mobility to visit, they said ” it seems like they’ve done all they can to make it as easy possible”.