Blog

Posted on

Campus Tour at CSDB

Sculpture with colored panels that the sun shines through.

On Valentine’s Day I visited the Colorado School for the Deaf and the Blind (CSDB) in Colorado Springs, CO. I was there to provide support for my State agency’s listening tour conducted by our State Personnel Director. I serve as an accessibility ambassador in my role of content administrator for many State websites, so I was pleased to be invited at the last minute. The school serves students from preschool to 21 years old.

The number one thing I learned by listening to school employees participating in the listening session is that the deaf and hard of hearing community is a culture unto itself. One woman spoke up to describe how hearing people think that deaf people are the same as hearing people except they just can’t hear. However, she explained, there is an entire deaf culture that we hearing people just don’t know about. And I agree. I don’t really know that culture at all. She mentioned to me that one thing web content producers should understand is that most people in the deaf community prefer an American Sign Language (ASL) translation over closed captions on videos. Oh, how many closed captions I’ve done over the years, and I’ve never known this!

The Campus Tour

Touring the campus, we saw dorm rooms for deaf and hard of hearing students equipped with visual doorbells. To knock on the door, you push the doorbell and it pulses the lights in the room on and off. We saw an outdoor running track designed for blind and visually impaired students that had a bright yellow handrail on both sides all the way around. And the tactile sculpture in the dorms was a big hit. Below, Kassi reaches out to touch the art work.

Tactile sculpture with finger signs and braille that says 'we shape our lives'
Woman touches tactile sculpture
My favorite sculpture on CSDB campus was this tactile piece with finger signs and braille around three sides. In the photo with Kassi showing three children reaching for stars, the caption is “We touch the stars.” The side with trees and three children says “We shape our lives.”

Insights

Another big takeaway for me as a content administrator is how much of the internet is still inaccessible. My agency’s third-party job application site and our internal cybersecurity awareness trainings are not accessible. The issue with this is that it means someone who needs accessible content can not act independently. They must then depend on someone else to help them do the application or take the training.

Just think, the minute you need to use a mouse to click on content because it’s the only way to move forward is the minute that content becomes inaccessible to someone who needs a keyboard-only interface, such people who are blind / visually impaired or people with a motor disability.

One last thing

Meet the person responsible for your choices, words, actions, jobs, future, and success. Before you speak, THINK: Is it True? Is it Helpful? Is it Inspiring? Is it Necessary? Is it Kind?

This whiteboard message belongs everywhere, doesn’t it! And, let’s make the web accessible to help these young students achieve their success independently.

Posted on

Making HTML Lists

Here are some tips on making HTML lists in your content management system. In a word processing program, you can easily highlight two or more paragraphs and turn them into a bulleted list with a button that looks like a bulleted list. The same is true in a content management system (CMS). Most CMS’s have an editor toolbar with the familiar set of buttons. An ‘ordered list’ uses numbers. An unordered list uses the dots we call ‘bullets’:

  • Captain Picard
  • Commander Riker
  • Deanna Troi

Take a look at the code view for this list. The “ul” tag is short for “unordered list.” There is an open list tag and a close list tag at the end – the one with the slash “/ul”. 

<ul>
  <li>Captain Picard</li>
  <li>Commander Riker</li>
  <li>Deanna Troi</li>
</ul>

This is the semantic way to create a list. When this content is posted onto a website, any screen reading software can announce that it’s a list with three items. When working on the web, remember that your content should be semantic. That allows screen reading software to discern the hierarchy of your content and announce it to users.

But there are other ways to create the look of a list without the tags being semantic. Sometimes with copy/paste from other programs you’ll end up with dot characters, or images of fancy bullets. In the case of numbered lists, I’ve seen hard-coded non-breaking spaces imitating the look of tabs after numbers, but the content isn’t a true list. When screen reading software encounters content like this, it just reads the content without announcing the list. For three short items, perhaps that’s not a big deal. However, business lists or outlines can go on for many pages and hierarchy can get confusing.

If you’d like lists that have images of little arrows or colorful dots that are not a part of the standard set of bullets, you should still use the “ul” and “li” tags that the bulleted list button gives you and assign the image bullets with CSS. Unfortunately, that means you’ll need to know how to write CSS. If you don’t know how, then let the browser display the bullets how it wants.

  • Starship Enterprise
    • Captain Kirk
  • Starship Enterprise Next Generation
    • Captain Picard

In the above nested list, I didn’t have a choice in WordPress about whether the indented item would be an open circle or a normal bullet mark. Please note, that when formatting nested lists in a CMS, first make all list items one big list and then use the indent buttons to push list items to the right. That should assign parent/child relationships correctly.

I’ve seen lists come across my desk that might have forty items but each item is a separate list with open and close ‘ul’ tags. That’s not very usable for assistive technology. This way, each item is announced as a list of one item. It might be tempting to hit enter or return after your list item to try to get more space under the bullet. But what that does is break the list apart into multiple lists. Instead, it’s CSS to the rescue. You can define line-height AND space after list items with CSS. But usually, the very simple WYSIWYGs in CMS’s don’t offer that out of the box. Again, you’d need to know how to write the CSS to adjust vertical spacing of list items so you can maintain the correct semantics of the list.

Posted on

Global Accessibility Awareness Day

May 16, 2019 is the eighth Global Accessibility Awareness Day (GAAD). If you post stuff on the web, I’d like to bring your attention to accessibility. 

via GIPHY

Some Terms:

Assistive Technology: Literally, technology to assist people with different disabilities. People with low vision use screen magnifiers, people with vision impairment use screen readers or refreshable braille displays. People with hearing impairments depend on closed captions in videos with audio. People with motor impairments may not be able to use a mouse or sometimes even a keyboard. There is one other class of disability with the label cognitive disabilities. Assistive tech for this group includes things like fonts specialized for dyslexia, and uber-clear writing and placement in form labels, plus the use of plain language all throughout the site.

Accessibility: In this usage of the word, we refer to the ability of web users with all sorts of disabilities to access content on the web. Access to content on the web can be blocked or limited for assistive technologies depending on many factors.

WCAG or Section 508: These terms are used with the phrase “compliance with,” since Section 508 is actually a part of the Americans With Disabilities Act, and WCAG is a set of guidelines published by the Web Accessibility Initiative to help content producers and developers to code better stuff for the web.

It’s All About Awareness

GAAD is an awareness day. What content managers don’t know can impair accessibility. Here is a pretend scenario: Content manager receives a signed document on paper and is instructed to ‘post this on the website.’ They use the multifunction printer to scan the paper to a PDF and email it. They post to the file manager in the CMS without checking the file. Bork! The file turned out to be an image of the text with no machine-recognizable words in it. This means people using screen readers have no access to that content because it cannot be read aloud by a machine. This is to say it’s inaccessible content.

If the content manager knew that text scanned in as an image could pose a problem for some of their audience, they could scan the document using different settings so that it could be machine searchable, and, even better, to have tags for accessibility added to the PDF and alt text added to any images in the document.

Another scenario: Web manager wants infographics all over the website to make data-heavy information more visually interesting. Web coder uploads three text-heavy images without any alternative text (alt text). Bork! Now all that ‘info’ in the infographic is inaccessible to users of screen readers.

In the scholarly articles about accessibility I have read, an industry’s failure to provide accessible content boils down to ignorance on the part of the developers and content managers. There isn’t much incentivizing going on to help people want to learn how to comply with accessibility guidelines other than the negative incentive of a potential lawsuit for failure to comply. And that is the use-case I see reported most often: a disabled customer brings a lawsuit against a government entity for failure to provide content in an accessible format.

What You Can Do

I have been using the hashtag #OhMyGAAD on LinkedIn to publicize the Global Accessibility Awareness Day. People are also using #OhMyGAAD on Twitter. I’ve signed the GAAD accessibility pledge and I earned the Site Improve certificates last year when I started using Site Improve. Before that, I had been coding federal government content to comply with Section 508 since 2011, and I also wrote a term paper on website accessibility in 2016.

Look up the hashtag on your favorite social media. Do three accessibility fixes on your own web content. When I think of accessibility, I remember that I am human, and I may not always be fully-abled as I am now. All the steps I’ve taken so far to publish accessible content are things I’d want any developer or content manager to do for me if I needed assistive technology.

Posted on

File Management

When working on the web, coders or content managers often see the request to ‘post this pdf on our page…’. A wise one will ask, ‘Is this a file replacement or is it new? Shall I delete the outdated file or keep it for archives?’ File management can be a bear for content managers.

Think of a bucket that is mounted so high you cannot see inside it, or it has a lid that won’t let you see inside the bucket. Let’s pretend the bucket is your file upload directory in your content management system (CMS). Some CMS’s make you first upload into a media library and then get the link to the file from there so you can link it on your page. But other CMS’s have a file uploader right on the edit page pane. Every time you upload a .docx or .pdf or .xlsx document into a page it also goes into the bucket.

You can show or hide the file from the page, but it still lives in the bucket, out of your sight.

via GIPHY

Out of Sight But Not Out of the Engines

Search engines can find those files! Even if you have un-linked the file from the page, it still lives in the bucket of files that search engines can index and keep in their short term memory, called cache.

That is why I do the tedious thing, the hard thing, and take the longer road. It’s boring and tedious to go cherrypick files for deletion, but if you’d like to save yourself some headaches further down the road, keep your directories clean in the present.

Depending on your workflow, you may need to ask your internet host to delete files for you, or your coder, or your IT team. Sometimes it is not obvious how to get a printout of what is in that bucket, and sometimes you just plain can’t get a listing of all the files in your upload directory. So each time you replace a file, make sure the old one is either deleted or overwritten.

Website Emergency!

This came up for me at work this quarter. A user had done a search and found an obsolete file on Google. It posed a fraud risk for the financial division, and they asked to have it removed asap. In my workflow, only the person who originally uploaded a file can delete it fully from the server. Since the file was over six years old and it was unknown who uploaded it, I needed to place a trouble ticket with my host to have it removed.

Next time you get a request to ‘please post this pdf on our page…,’ know that this is only half of the request! Your next question is ‘shall I delete the old file?’ And that is document management.

Posted on

Catching Up

Since I have left this website alone to fend for itself for over a year, a lot has happened. Today I’m home from work because of a blizzard, so I have updated my PHP and WordPress versions. I added security to the protocol, which means the web address should now start with https rather than http. It’s fitting to come in and clean up the site back-end after Google published a Google Doodle on the 30th anniversary of the world wide web. Tim Berners Lee submitted a proposal for the http protocol 30 years ago! Let’s see, what was I doing then? In 1989 I was a freshman at a college in Maryland and I was frustrated with computers…I had no way of knowing I would end up managing websites and website content.

I’m now working on state website content full time and have precious little time to focus on this personal blog. I’ve also let go of Adobe Premiere and Dreamweaver so I may not be able to do video tutorials until I find time to learn another video editing tool. Adobe is so pricey that I pared it down to a Photoshop and Lightroom-only subscription.

STC

I’ve upgraded my membership in the Society for Technical Communication (STC) and I anticipate attending their annual summit this year. This year it is time to invest in my own career growth! Working on the web can be rewarding. I will focus on attending workshops about user experience and content strategy.

A Bit of Nostalgia

I’ve been working on the web for about 20 years now. In 1999 I learned Dreamweaver back when Macromedia owned it. The web was a wide-open field of possibilities. My first job earning money for website services? I freelanced for a woman who wanted to build and sell a screensaver for people who liked watching soap operas in 1999 or 2000. So I used Photoshop and Director to make a little self-playing slide show of all the soap opera stars she told me to put in. I didn’t recognize a one of them because I never watched soaps! I haven’t thought of that in a decade. I wonder where that project is… I don’t think I could even find a screenshot of it. I remember I had made it look like it was a reel of film moving left to right, with the little holes at top and bottom. Each frame was a different character from a show. And I suppose she offered the zipped file for sale on her website so users could buy it and install it to be their screensaver.