I am staying at a hotel at the moment. I asked about a wheelchair accessible room. They were talking to me about an “ADA compliant” room. This made me think about the difference between “we care” and “we have to”.
Many people are unable to access your audio or video content if you don’t provide a transcript or captions. The obvious target group being excluded is people who are Deaf, or people with hearing impairments. Some people with cognitive impairments also process the written word better than they process spoken words. By not providing transcripts or captions, you are discriminating against people with disabilities. It isn’t good from a Corporate Social Responsibility (CSR) perspective. And it often carries risk from a legal perspective.
I found a bit of code on a site that befuddled me. I could hardly believe what I read. I showed it to others in the accessibility community and they were as astonished as I was. We were all chuckling. The snippet of code was indeed a doozy. But some developer wrote it. He thought it was the right thing to do. Let’s look at this snippet and explain why it doesn’t work.
The offending snippet
<h2 class="h3" role="heading" aria-level="1">Some heading</h2>
Why are accessibility specialists rolling their eyes at this? Because the code undermines what the heading tag does. But let’s pull this one apart a bit more.
Headings – A quick recap
- HTML headings serve to define the structure and hierarchy of a page’s content.
- There are, as you probably know, 6 levels of headings.
- Headings are not headers.
- Headings are hierarchical. That hierarchy needs to be available visually as well as programmatically.
- Heading levels should not be skipped.
- Screen reader users can use headings to “skim” a page’s content.
- Screen reader users can jump from one heading to the next
- Screen reader users can load a list of headings and then jump to a specific heading.
Taking the snippet apart
Using a class
There’s nothing wrong with assigning headings classes. There are plenty of uses for that. In this case, however, the class is
h3 yet the heading level is 2. The assumption here is that they wanted to style
h2 to look like
h3. This is a problem because of the impact it has on sighted users relying on headings to understand the page’s hierarchy.
Using a role
There’s nothing wrong with assigning roles to HTML elements. An added role should not change the semantic meaning of an HTML element. Here it’s fine because the role is “heading”, and the element is a heading. In fact, it is redundant to use the heading role on a heading tag. But it doesn’t hurt.
The problem is that the attribute
aria-level was used to define a different heading level than the tag’s. And it’s a bad idea to change the nature of a tag. If you want a
h1, then use a
h1. If you use an
h2, then don’t try to force it to behave like a
Keep it simple
Use existing HTML tags whenever possible. Don’t try and make them behave differently than what they are supposed to. Keep it simple, eh?
Here’s what it could have looked like:
<h2 class="display1">Some heading</h2>
I often encounter sites with poor colour contrast between text and background. The client tells me that the colours can’t be changed because they are part of their brand guidelines. A discussion usually follows. Often, I’m able to convince the client that changing the hue of a specific colour on their site will not have a significant impact on their branding. Here are the points I use to explain why there isn’t going to be a significant impact.
This morning, a moving truck was parked on the sidewalk, blocking nearly all of it. Pedestrians were forced to walk sideways like crabs to be able to get through. A mother pushing a stroller was unable to get passed. In a wheelchair, it was also impossible to get through.