Mini-Demo

Underline Accessibility

The Context

We were developing our first ever English Composition subject textbook. Styling required the use of underline and double underline text, which was not previously supported in our library.

The Challenge

1. There is a common HTML tag for underline, but not double underline. We needed to make sure the CNXML to XHTML conversion for both was consistent in structure.

2. We also realized that the XHTML didn’t produce anything that could be picked up by a screen reader to notify a user that the text was underlined or double underlined.

3. We also realized this was a challenge everywhere (I can also see on this website editor that underlining isn’t an option!)

The Approach

1. Working with a developer, we first established how the underline would be transformed from CNXML to HTML. Double underline was a new feature so we also had to build in functionality for the conversion. Once the new XSLT instructions were implemented, we had to decide how to tackle the styling and accessibility portions.

2. We created a variety of HTML tags and tested them with a screen reader. Only one thing worked. This posed a further challenge as it would inject text that would be visible to sighted users and it would look confusing. We would have to implement further styling to hide these words.

3. With a publication date fast approaching, we first strived for the mark-up to work for sighted users first. Then to implement the larger structural manipulation instructions and styling fixes for the PDF and web view.

Lessons Learned

To be honest, I never thought something as benign as underlined text would cause so many issues. My key takeaways are to never underestimate seemingly small things, especially in the case of accessibility. I also learned about the severe limitations that accessibility has as the screen reader really does not pick up a lot of different tags. It is very important to think about accessibility early on so that even if we postpone those improvements, we do not create content that pushes us into a corner.