We all know the frustration of using a badly designed website. Perhaps we can’t find what we’re looking for, or links are broken, or an image behind text makes it unreadable. This is an everyday experience for people with disabilities. When websites are poorly designed and coded, they can be difficult or impossible to use. This can be true for anyone, whether you’ve broken your arm and can’t use a mouse for a few weeks, or you’re permanently blind or dyslexic. There are hundreds of ways we might struggle to get the most from a website.
Making websites accessible to all requires careful thinking and regular improvements to content and code. Over the last year, we have worked especially hard to improve the accessibility of our ebooks. Here is some of the work we’ve done. We welcome your feedback, especially your suggestions about what to improve next.
Text for screen readers
In many places we’ve added or improved the text that screen readers will read aloud. We’ve also added code that makes it easier for those readers to understand the structure of our pages.
A major change has been switching from JPG images to SVG images with accessible text for all of our figures in English. We’ve also added text descriptions of these images (in their alt-text attributes) that screen readers can read aloud. We’re working on doing the same in other languages, too.
All videos now have transcripts in English, and we’re working on adding those in other languages.
We also improved the code behind specific elements to make them easier for screen readers to use. We added titles to videos, improved our use of ARIA roles, included screen-reader text for close-popup and footnote buttons, and improved the HTML behind MCQs, the search-box and tables. And we made a few fixes to our system where our HTML wasn’t strictly valid, like avoiding duplicate IDs on elements.
Visibility improvements
We made many elements clearer for people without excellent vision.
Sharp readers might have noticed that we changed the colours of some of our capstone themes in The Economy. This was also an accessibility decision, intended to make the colours easier to distinguish, and more readable when used for small text.
We also made a number of small improvements you might not have noticed: many buttons are slightly bigger and bolder, links are underlined (and not just blue, except where text is obviously a link by its location), and light-grey text is now darker.
Looking towards the next edition of The Economy, we reviewed 1167 figures for colour contrast, font size and colour readability, and whether they relied on colour for meaning. For instance, a legend that relies on being able to distinguish purple from brown would not work for many people. And, when referring to figure elements in the book text, we need to avoid using colour alone. We’ve begun the work of making these improvements, and look forward to rolling them out in future editions.
Keyboard navigation
We wanted to make our books usable with only a keyboard, since not everyone can use a mouse. This means, for example:
- you can now close popups with the Esc key
- you can navigate through the links on a page (including the Contents menu) with the tab key
- you can navigate slidelines with arrow keys and/or Tab and Enter.
Data efficiency
The cost of data can be an obstacle for students who’re paying for every kilobyte. Our books are big, so it’s critical that we use as little data as possible.
As we mentioned earlier, we replaced JPG-format images with SVG-format images in English (with other languages coming later). In almost all cases, our SVGs are much smaller than their JPG versions – and they look clearer, too. We estimate this will save users more than half the data they used before, and in most cases much more.
Do you have further suggestions for us? Or your own stories about websites and accessibility? We’d love to hear from you. Please email us at [email protected]
We are grateful to our publishing partner, Electric Book Works, for all the work they have done on improving the accessibility of CORE’s ebooks.
