By James Ravelle, Operations Manager – Lehigh Valley Arts Council
One of my responsibilities at the Lehigh Valley Arts Council is designing and programming our website. After the launch of our Pennsylvania Arts Accessibility Program (PAAP), I realized that there were several website content and graphic issues that needed to be addressed if the Arts Council was taking a leadership role in this arena. This article highlights the challenges and solutions I discovered in my effort to upgrade our website and hopefully, will help other organizations improve their websites’ accessibility.
The prevalence of low vision is extremely common and simple updates to a website can increase accessibility and maintain proper customer service. One in six Americans (17%) age 45 years of age or older1, representing more than 16 million people in the United States ages 18-64 live with some kind of sight impairment, including blindness. The 65+ age range includes another 5.4 million, even when wearing glasses or contact lenses7. According to the University Eye Institute of Houston, common visual impairments include an inability to see detail, loss of contrast sensitivity and reduced or loss of color vision2. Despite the prevalence of visual impairment and relative ease of implementation, “of the 8.11 billion pages on the Internet, between 95 and 99 percent of them are not accessible by people with disabilities.”8
Text size and contrast are two simple website tools and alterations that can assist low sighted users. Giving the user control over the size, contrast and color of text and graphics provides ease of access and can service a variety of needs.
1. One simple tool I created for the Arts Council’s website was a button that can increase the font size of the page text. Three different buttons activate three different CSS style sheets; a style sheet defines the style of text on your website. I created the main, default style sheet and then two variable style sheets with larger font sizes. It is important to note that according to W3’s Web Content Accessibility Guidelines 1.0 any webpage should be readable without style sheets (as plain text) in the event that HTML is rendered without them3.
2. Contrast sensitivity is a common impairment that causes difficulty reading subject matter that is not distinguished. For example, The New York Times website uses light gray text on a white background, which is hard to read. The Center for Vision Loss has an option on their website to alter the contrast (black on white/white on black) of the web page, in addition to a font size option. Having this control may not be necessary if you ensure that your graphics are high contrast. Use darker colors for text and edit images so that multiple colors are differentiated. These colors can complement the aesthetic you have selected for your website, just use light, dark and vibrant combinations to create clarity. Here is an example of poor contrast using varying shades of green:
There are varying degrees of severity with vision disorder, a point clarified during a training session with VSA’s Celia Hughes. A large percentage of people who have visual difficulty are not legally blind. For these patrons, the minor improvements listed above can help them navigate your website.
Those who are legally blind have a completely different user experience. Blind visitors may use a screen reader program to turn visual content into audio; one of the most common screen reader programs is JAWS by Freedom Scientific4. Screen reader programs like JAWS go through a webpage line by line, image by image and converts the information available into sound, literally reading the screen for the user. There is a free demo of JAWS available if you would like to gain familiarity with its functionality.
As an example of text to speech, I have converted a full text version of the Lehigh Valley Arts Council website into to audio: http://www.lvartscouncil.org/Access/LVAC.mp3 using a text to audio converter, Read Please 20035. It may not necessary to create an audio rendition of your web content, however your website should be prepared to be interpreted properly by the screen reader program. There are two key strategies that must be followed to enable these programs to read your webpage properly for legally blind users.
1. According to W3’s Web Content Accessibility Guidelines 1.0 it is important to “provide a text equivalent for every non-text element” 3. A reader program can be used by readers to interpret text, however these programs are not able to “read” images. A description should be provided for every image on your site in order to work with the program. These descriptions are gathered from the html “alt” tag inside of the code for all images. For example, here is the HTML code for a banner graphic on the Arts Council webpage. As the program “reads” the website, it will make the alt tags audible to the user.
<img src=”/images/image.jpg” width=”960″ height=”320″ alt=”Click here to visit our January / February 2014 featured artist Marion Sheinberg”>
Also, it is suggested that whenever possible information should be displayed as text rather than an image; page headers should be stylized text rather than an image of text so that they can be interpreted easily. For example, both of the following samples produce the same effect; one with an image and one with stylized text:
2. Clearly organize the layout of your website for the program to read. Organizing content makes it easier to access for all website visitors. For example, have your organization’s logo as the first item on the top of the webpage, followed by the next most relevant content. The mission statement or opening paragraph for the website’s home page should be prefaced with a sentence defining exactly what it is; you don’t want seemingly random text to abruptly start sounding. For tables containing data, identify row and column headers3. Organize everything on the page logically and in order while maintaining your aesthetic and design.
Whether you outsource the design of your website or do it yourself, it is important to be mindful of how users with disabilities will interact with your website. You want the message and content of your website to be as available to visually impaired users as it is to others. W3 has created a checklist of priorities for websites—I recommend going through this checklist and ensuring your website is fully accessible to all users. Ignoring accessibility issues disregards the needs of your audience and restricts their participation. To quote Ms. Betty Siegel, Esq., Director of VSA and Accessibility at the John F. Kennedy Center for the Performing Arts, accessibility is “an integrated and intrinsic value, a core part of business and an asset.”6
- The Lighthouse Inc. (www.Lighthouse.Org), 1995. The Lighthouse National Survey on Vision Loss / “Prevalence of Vision Impairment”: http://www.lighthouse.org/research/statistics-on-vision-impairment/prevalence-of-vision-impairment/
- University of Houston (www.opt.uh.edu), 2014. “Common Disorders causing vision loss (low vision)” https://www.opt.uh.edu/uei/services/lowvision/common-disorders.cfm
- W3C (www.w3.org), 1999. “Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0” http://www.w3.org/TR/WCAG10/full-checklist.html
- Freedom Scientific (www.freedomscientific.com), 2014. “JAWS for Windows Screen Reading Software” http://www.freedomscientific.com/products/fs/jaws-product-page.asp
- Read Please 2003, 2013. https://sites.google.com/a/readerpal.com/readplease/
Program used to convert Lehigh Valley Arts Council’s website:
- Ms. Betty Siegel, Esquire, Nov. 2013. “The Arts and Disability: Making Cultural Arts Experiences Accessible.” http://www.lvartscouncil.org/Access/11-21-13%20Allentown%20Pa.pdf
- Cheryl James (CherylAJames.com), May 2012. “Who is Affected?” http://www.cherylajames.com/who-is-affected/
- Cheryl James (CherylAJames.com), May 2012. “’Site’ Impaired – Web access for the visually impaired.” http://www.cherylajames.com/site-impaired-web-access-for-the-visually-impaired/