Last Friday was Greg Kraus’ last day at NC State. Although Greg is moving on to bigger and better things, everyone in the university developer community is sad to see him go—especially me and Jen, who worked with Greg in OIT-OCC.
For those that don’t know, Greg was the university’s IT Accessibility Coordinator. I’m serving on the search committee to select his replacement, and today I’d like to talk a little about accessibility in the context of what we do at OIT Design.
What is IT accessibility?
IT accessibility is about ensuring that all potential users are able to use and interact with software or websites, regardless of any physical disabilities that they may have. In web design, that often (though not exclusively) means building websites that can be used by people with visual impairments.
What are some things I should watch for?
- Document structure – In short, using HTML tags the way they’re intended to be used. While there’s a temptation to use h1, h2, and h3 tags interchangeably and as your visual design needs require, those tags each provide key navigational markers for screen readers. Similarly, other common HTML elements—lists, header, footer, etc.—provide information to users about how the page is structured. (Read more.)
- Keyboard-only use – A good website should be usable and navigable using just a keyboard—no mouse or trackpad required. Users should be able to tab through links and access any hidden content (think elements like accordions or tabs) using just a keyboard.
- Turn off CSS – Web designers lean heavily on CSS to control how their sites are displayed. But now try turning it off. Viewing your site without any styling at all can be jarring, but it’s an important part of understanding how your site is structured and whether the flow of information is easy to understand to a user who isn’t making a visual distinction between, say, the left and right columns of a page.
- Color contrast – For users with a partial visual impairment, subtle color contrasts (like dark-gray text on a light-gray background) can be indistinguishable. That doesn’t mean everything has to be strictly black-text-on-white, but it does mean designers and developers need to be thinking about color contrast. WCAG AA guidelines sets a standard 1 to 4.5 luminosity ratio. At NC State, white text against a Wolfpack Red background meets this standard, but black text does not. (Test your preferred color palette here.)
- Usability – Usability and accessibility aren’t the same thing, but usability and accessibility are closely related. Following accessibility guidelines typically leads to better usability, and designing a website with usability in mind will fix many of these issues before they become a problem. When you’re designing and developing, consider the diversity of your audience and how that diversity may affect how they interact with your website.
What’s a specific change I can make to my content to make my WordPress site more accessible?
In WordPress, here are two easy things you can do:
- Use proper page headers. This is easy in the WordPress visual editor. In the toolbar that appears at the top of the editor, the dropdown “Paragraph” menu allows you to choose between regular paragraph text and different headers (h1 to h6).
- Add meta data to all of your images. The WordPress media uploader provides you with title, alt, caption, and description fields for your images. Use these fields to provide users with the information contained in your images.
What’s a specific change I can make to how I write WordPress themes to make them more accessible?
Besides the general awareness of document structure and the other “things to watch for” listed above, a good practice is to make use of ARIA landmarks in your theme files. The W3C provides a good primer for developers on what ARIA is and how to use it.
Accessibility isn’t difficult, but it does take deliberate action on the part of designers and developers and a commitment to make it a part of our workflow. It’s something most good designers struggle with, and it’s certainly not something I’ve personally done a good job with in the past.
Thankfully, there are a number of resources available online and for the NC State community to help improve IT accessibility.
- accessibility.ncsu.edu – The hub of all things accessibility at NC State.
- IT Accessibility Quick Guide – A reference document for many common IT topics at NC State.
- Web Accessibility Handbook – A more comprehensive overview of web accessibility at NC State.
- WCAG 2.0 – Web Content Accessibility Guidelines generated by the W3C.
- REG 04.25.05 – NC State’s regulation on IT accessibility.
- Web accessibility evaluation tools: