Editors Andy Brodie and Hilary Menos on making The Friday Poem accessible to everyone
Links in this article jump to explanations further down the page
When we decided to create The Friday Poem we started with a vague commitment to making the site readable to all. It was only some way into the process that it became a firm commitment as we realised how many websites, including poetry websites, are difficult for some readers to fully engage with.
Blind poet Giles Turnbull says, “Some websites are just incredibly hard to navigate and read the content of, as a blind person.”
He cites one online quarterly poetry magazine which claims it wants to help under-represented poets. He says, “I, and many blind people, struggle with what NVDA (Non Visual Desktop Access) tells me are “clickable elements”. Those are apparently a new substitute for buttons or links. The problem is that maybe they work fine for sighted people using a mouse, but I’ve not used a mouse for 13 years! If you can’t see where things are to click on them, then they are very tricky to use and, although screen readers can mimic the click of a mouse button, it can be hit or miss as to whether that works.
Blind poet Giles Turnbull says, “Some websites are just incredibly hard to navigate and read the content of, as a blind person.”
“On this online magazine poems page, every poem is a clickable element, which does not seem to react no matter how I try and activate it. As a result I hear a list of poets, each one followed by their type of submission, such as “Annie Fisher – poem”. There’s no poem title, and I can’t figure out how to read it. That alone would discourage me from ever submitting a poem to them.”
Accessibility
When we started developing the Friday Poem we were sure that we didn’t want to discourage anybody from using it. So we learned lots about what accessibility means. We learned about the sort of things that might prevent people from accessing websites. We learned about the different types of assistive technology, especially screen readers. We researched contrasting tones on the page and how best to use colour, and we learned about which text sizes and shapes are best, and the most accessible text layout. We learned about how semantic headings are used to structure information and make it easy for screen reader users to create a mental map of the page, and about keyboard focus and the necessity of making all functions controllable by keyboard keys. We learned about alt text, which is the descriptive text added to images so that blind people and people with low vision can understand what message the image is adding to the text. We looked at how to best manage links on a page, and what the problems are with CAPTCHA.
This helped us make our initial decisions about how the site looked, and how it functioned. More recently we’ve also learned about the problems people with dyslexia encounter when using websites, which has led us to make some changes to the site. We’ve also realised that our commitment to accessibility affects how we use social media, what style guidelines we give writers and reviewers, and which poems we choose to publish on The Friday Poem.
The design of The Friday Poem
We designed a site that was informed by and in most respects conformed to the Web Content Accessibility Guidelines (WCAG) 2.0 a set of guidelines and best practices put together by accessibility experts to address what “accessibility” means. We built the site with WordPress, a Content Management System (CMS) which supports accessibility. We embraced a minimal design which minimised distraction and cognitive load. We didn’t use any dynamic content, for example snazzy animations, slideshows or pop ups. We took care over the layout and functionality of our forms. We also decided not to use hidden text tabs because they can be confusing for screen reader users, and we decided not to use a tile layout for the Frip page for the same reason.
So far so good
Then we discovered that people with dyslexia had issues with text and content display which we had only partially taken into account. Ten percent of the population are believed to be dyslexic, about four percent severely.
The British Dyslexia Association (BDA) Style Guide
The BDA Style Guide has similar recommendations to WCAG 2.0 regarding font, headings, contrast, colour, low cognitive load, and text layout. But it also recommends not using white backgrounds as white can appear too dazzling. Happily The Friday Poem was already using black text on an off-white background.
More importantly, it emphasises the problems dyslexic readers have with justified text, and with large gaps between letters and words. Ted Page from accessible digital documents, speaking about justified text, says, “With simple justified text the uneven variation in spacing between words makes the text more difficult to read because, instead of moving smoothly along the line, the eye has to jump from word to word. For people with certain disabilities such as dyslexia the problems can be serious; justification can interfere with their ability to understand the text at all.”
When large gaps between words line up above one another, readers with dyslexia may perceive distracting white patterns flowing through the page that can become more prominent than the text itself. The effect is known as “rivers of white” and it can make reading difficult, if not impossible.
When large gaps between words line up above one another, readers with dyslexia may perceive distracting white patterns flowing through the page that can become more prominent than the text itself. The effect is known as “rivers of white” and it can make reading difficult, if not impossible
Giles Turnbull says, “A similar type of problem occurs with presentational spaces. I have seen a few websites that will put a space between letters in headings, such as T H I S W E E K ‘ S A N N O U N C E M E N T S. The screen reader just reads letter after letter and the blind person has to try and form the word in their mind, but sometimes the words are not in frequent use and it can be difficult to tell where one word starts and the other ends.“
There is some dispute over whether words in italics are difficult to read. The BDA says they can crowd text and be confusing but others say that although blocks of italic text can be difficult to read for many people, banning italics in all contexts can strip text of much of its semantic richness, making it less readable and therefore less accessible.
Punctuation
There is also an issue with text that is run together in all lower case, and text which uses unconventional punctuation. It seems that many of us, often including people with dyslexia, rely on the signposting that capital letters and conventional punctuation bring. Words run together in all lower case can be confusing so, for example, Twitter hashtags should be in CamelCase. #TheFridayPoem, not #thefridaypoem.
Turnbull says, “One thing which is a pain in the arse for a screen reader user, is when a website uses a full line of asterisks or dashes or other character to segment the text into chapters or articles. The screen reader will likely say, “starstarstarstarstarstar…” which is worst when it’s a long article which you’ve started the screen reader reading from the top, only to necessitate moving your hand back to the keyboard to arrow down past the string of characters and continue reading at the next line.”
Concrete poetry
What about concrete poems, where a poem is presented to look like the object the poem is about? How do screen readers read these?
“If a poem is laid out in the shape of a teapot, a screen reader is simply going to read it as if it were a sentence in a page of Oliver Twist.”
In an article on Sabotage Reviews in 2017 Giles Turnbull says, “If a poem is specifically presented on the page to reflect a particular shape, or a desired spacing between words, then I do not hear that when the screen reader reads the poem to me. As far as a screen reading program is concerned a fully justified line of text sounds exactly the same as a left or right aligned line of text, or with six spaces between the first and second word, 10 spaces between the second and third word and 20 spaces between the third and fourth word. Whatever the poet intended by spacing his or her line that way does not get transmitted to me.
“If a poem is laid out in the shape of a teapot, a screen reader is simply going to read it as if it were a sentence in a page of Oliver Twist.”
So what does this mean for The Friday Poem?
It means we won’t use justified text, large blocks of italic text, or text with large or variable spaces between words or characters. We won’t accept poems which have these features. Where our writers use or quote text with these features in their reviews, we may remove the spaces and print the text without justification, and / or not in italics.
We have started using bold italics for book titles. We are considering shortening our line lengths. We are cutting down our use of dashes. We won’t use asterisks to separate chapters on articles or reviews.
We are also likely to look suspiciously at writing which uses unconventional punctuation. We already look suspiciously at concrete poetry, no nothing’s changed there!
What does all this mean for you poets?
Should this make a difference? Helena Nelson says, “I think poets, whether writing in verse or prose, should think about both shape and accessibility on the page.”
We think that, at the very least, when you write a poem, you must be aware that if you use text layout or punctuation in an unconventional way, you are likely to exclude some readers.
Images of text
Turnbull says, “One of the main things that make my heart sink is when people take photos of a poem rather than typing the text. That works fine for sighted people but not for blind and visually impaired ones. It is possible for two screen readers (including the one that I use) to perform optical character recognition in order to speak the text in the photo, but very often the text isn’t large enough or clear enough for it all to be read. Sometimes it won’t read anything! Often it will mistake letters and numbers so a capital B might be spoken as the number 8. The strangest one I’ve ever encountered was a lower case r followed by a lower case i, being interpreted as a lower case n!”
Twitter, in particular, is full of photographs of poems. Blind people and people with low vision can’t read these.
Twitter, in particular, is full of photographs of poems. Blind people and people with low vision can’t read these. If you are going to upload a photograph or an image of a poem for Facebook or Twitter, you need to add the entire text in the post, or attach alt text to the image (Twitter gives you 1000 characters to play with, Facebook gives you 100 characters). On Twitter, we’ve started responding to photos of poems without alt text with a link to Twitter guidelines on how to add alt text. We hope nobody is put out by our gentle nudge, and we hope you’ll all join in. It’s easy to do, and it makes a difference.
Are most poetry sites accessible
You can easily tell whether a website is accessible. If it has underlined, unique, targeted links that’s a good start. A statement somewhere in favour of accessibility is obviously good. Using developer tools in your browser, you can see whether the images have alt text attached. If there are snazzy pop-ups, links that say ‘Read more’ or a CAPTCHA that requires that you distinguish features in a set of pictures, this isn’t a good sign. Many websites in the poetry world are doing good things in this area. Some are not.
Turnbull says, “A magazine I would single out for praise is PN Review, published by Carcanet. I can’t remember exactly what difficulties I was having with the magazine but I mentioned it to editor Michael Schmidt, and he introduced a free 2-year subscription for blind and visually impaired people so they can download a PDF of each issue and it can be read with screen reading software.
“Nell Nelson is very good at making her websites as accessible as possible. She does describe any image that appears on the website.”
Helena Nelson says, “For one of my workshops, Giles Turnbull agreed to come along not just as a poet, but as a poet who is blind, so that I could ‘see’ how it worked for him. I gave him the shared pages in advance, so he could preview with his screen-reader. We thought it worked pretty well. It was certainly great having him there as a participant.”
And The Friday Poem?
We think our site is better than most, but we are still learning and we are always open to suggestions. If you are a user of our site and you have a comment, query or complaint about accessibility, please contact The Friday Poem here.
If you want to take accessibility seriously, try reading a website with your computer screen reader software. Or try this exercise suggested by Giles Turnbull on his blog. He says, “Would you feel comfortable if you had to spend tomorrow with a blindfold over your eyes? Give it a whirl – when you take your shower tomorrow morning try doing it with your eyes shut and no squinting; try spending the whole morning blindfolded, or if you’re feeling really brave spend the whole day that way. Make sure you try writing some poetry without using anything that reflects the sense of sight :)”
What accessibility means
When we say a website is accessible we mean that the site’s content is presented in such a way that it is available to anyone and that the functionality can be operated by anyone. When a developer is building a website it’s easy for them to assume that all users can see and use a keyboard, a mouse, or a touch screen, and can interact with your page content the same way they do. If they don’t understand that this isn’t the case, they may create a website that works well for some people but not well, or not at all, for others. So accessibility concerns users who have some type of impairment or disability, physical or non-physical, permanent or temporary.
The sort of things that might prevent people accessing websites
There are a range of impairments that can cause user difficulty. These include:
Visual impairments: from blindness and low vision to poor colour vision
Motor / dexterity impairments: from someone not wanting to use a mouse because of painful RSI to someone who may be partially paralysed
Hearing impairments: users may be deaf or hard of hearing
Cognitive impairments: users with conditions like ADD, dyslexia, and autism may want or need to access things differently. Also, these users may find that minimal design works best because it minimises distraction and cognitive load.
Different types of Assistive Technology
This term covers devices, software, and tools that help any person with a disability complete a task. One popular type of assistive technology is screen reader software which enables visually impaired people to use computers by reading screen text aloud in a generated voice. The user can control what is read by moving the cursor to a relevant area by using keyboard shortcut keystrokes.
Contrasting tones on the page
Contrast refers to the difference in lightness between the text font, or anything in the foreground, and its background. Using more highly contrasting tones makes a website’s font easier to see.
It’s hard to work out what combination of colours works best for the largest number of people. Giles Turnbull says, “Bear in mind that some visually impaired people find black text on a white background fine, others prefer white text on black (which was my preference in my pre full blindness days), and others prefer the same options with blue and white. A lot of dyslexic people wear coloured lenses to stop text seeming to move around the page, and I believe it is possible to get physical screen overlays to produce the same effect on a computer.”
The WebAIM guidelines recommend a minimum contrast ratio of 4.5 to 1 for all text. The Friday Poem has a contrast ratio which varies across the site: at worst it is 13.32 to 1 and at best it is 19.91 to 1.
How best to use colour
The most common form of colour deficiency, red-green colour deficiency, affects approximately 8% of the population. Colour should not be used as the only way of conveying content or distinguishing visual elements. Colour alone should not be used to distinguish links from surrounding text unless they meet certain contrast requirements; it’s important to add an additional indicator such as an underscore. The Friday Poem doesn’t use red or green anywhere. Our text meets the contrast requirements but we underscore links anyway, partly because it’s a widely used convention and partly because we think it looks good.
Text sizes and shapes
Text should be large. Body text should be sans serif because it’s easier to read. Logos can be in seriffed fonts because they slow the reader down, which is ok, in fact probably even good, for a logo. The Friday Poem uses a sans serif font at a base font size of 1.15 em which is larger than normal. Our logo is seriffed, but not ornate.
Giles Turnbull says, “As a blind person I can read promos and flyers with my screen reader, but very ornate fonts for example can challenge my screen reader and the Optical Character Recognition that may be needed, leaving me with patchy bits of information that may not tell me all I need to know.”
Accessible text layout
Text should be left aligned, without justification, and uncluttered. It’s best to avoid multiple columns as used in newspapers. Text is easier to read if it is broken up with regular section headings in long documents and include a table of contents. Lines should not be too long: 60 to 70 characters. The Friday Poem has considerably long line lengths in places, sometimes up to 175 characters long, though more usually around 120. Is this OK? We are not sure. Our defence? Our articles are long and, if not exactly scholarly, certainly a bit more serious than a lot of puffy web content. We’re still thinking about this.
Semantic headings
Screen reader users use the headings structure to navigate content. Ideally heading 1 is used for the primary title of the page and nothing else. Subsequent headings should be used to indicate and organise the content on the page. It’s important not to pick a header just because it looks good visually, as this can confuse screen reader users. It’s also important not to skip heading levels, for example from a heading 1 to a heading 3, as screen reader users will wonder if content is missing.
Turnbull says, “ Somebody using a screen reader will usually navigate using headings. To do that in the screen reader Non Visual Desktop Access (NVDA) you press the letter h and it will jump from one heading to the next. Pressing shift+h navigates backwards. It’s helpful if the article uses levels of heading, rather than making everything, say, heading 3 because that was the font and size that the website developer preferred the look of!”
He says, “In my currently-dormant blog, I would put the main blog post title as a level 1 heading, then sub-headings at level 2, and the occasional sub-sub-heading at level 3. A sighted person would normally see a different typeface for the different levels of heading, such as heading 1 being bold and 14pt font, heading 2 being not bold and 12pt font, and heading 3 being not bold and italic. Usually a blind person won’t have the screen reader set to announce formatting changes, so the bold / italic / font size will be unnoticed, but he or she will hear the text of the heading, followed by “heading level 2” or whatever heading level it is (there are six possible heading levels in html website code).”
On The Friday Poem we use headings to structure our content with a clear intention to help screen reader users to navigate the site. On the Frip page, even though sighted users wont see a heading 1, it’s there in the screen reader text to aid screen reader users.
Keyboard focus
Focus determines where keyboard events go in the page at any given moment. The currently focused item is often indicated by a focus ring. Some users operate their computer almost entirely with the keyboard or other input device. For those users, focus is critical; it’s their primary means of reaching everything on the screen, so all page functionality should be available using the keyboard unless it’s something you cannot do with a keyboard, such as freehand drawing. On The Friday Poem all functionality is available via the keyboard.
Alt text
Alt text is descriptive text which is readable by screen readers, and should be provided for all images so that screen reader users can understand the message conveyed by the use of images on the page.
Turnbull says, “Just adding one or two sentences to say what an image shows gives a blind person a similar level of sensory detail that a sighted reader would have. Many websites don’t describe images, so a screen reader will only be able to say “graphic”. Is that graphic a poem, a piece of prose, a photo of the author or the office cat, a landscape view or some sort of visual graphic such as a coloured swoosh used only to add colour to the page?”
On The Friday Poem we put alt text into every image, and we try to make the alt text as useful as possible (and occasionally mildly amusing) while still being brief. We also use hidden screen reader text at various points on the site to improve the experience for screen reader users.
How best to manage links on a page
When including links in content, it’s important to use text that properly describes where the link will go. Just like sighted users scan the page for linked text, visually-impaired users can use their screen readers to scan for links. As a result, screen reader users often do not read the link within the context of the rest of the page. Using descriptive text properly explains the context of links to the screen reader user.
On The Friday Poem we make sure that all links are unique and targeted so that screen reader users know exactly where a link will take them.
Links should be underlined because this makes them easier to read for partially sighted people. Google doesn’t underline links but that’s because if you search for something on Google you know that everything that comes up is a link.
Off-site links
Screen reader users often create a mental map of the site. If they then click on a link and it opens in a new tab it can be confusing and they can’t just use a back button to get back to the original site. So it’s important not to have links that take screen reader users off site by opening a new tab or without a warning. We do send readers off-site but we don’t open links in a new tab, and it’s generally through a descriptive link. There is a particular icon which indicates an offsite link but, in our experience, screen readers don’t read it, so we don’t use it.
CAPTCHA
CAPTCHA stands for Completely Automated Public Turin test to tell Computers and Humans Apart. On the Happenstance blog Helena Nelson says, “I haven’t mentioned the bit about confirming that you’re not a robot, which is straightforward so long as you can see. Accessibility is a key issue here, and one that is not always top of the agenda when it comes to legislation.”
Giles Turnbull encountered difficulties navigating the Magic Oxygen website in 2017 where he needed to prove he was a human via a CAPTCHA of random, distorted letters which automated spam software can’t figure out. He says, “Sometimes you will see a CAPTCHA that has an audio version for blind or visually impaired users who can’t see the CAPTCHA. Sadly there was no audio CAPTCHA option on the Magic Oxygen contact page.” Happily Magic Oxygen changed their CAPTCHA process to accommodate him, but many web developers still don’t realise that it is necessary to have only a tick box, not random, distorted letters or pictures of cars or lamp posts or boats. The Friday Poem had a tick box; at the moment we are trying out an invisible CAPTCHA to see how it works.
Web Content Accessibility Guidelines (WCAG) 2.0
WCAG 2.0 is organised around four principles:
Perceivable: Can users perceive the content? Just because something is perceivable with one sense, such as sight, that doesn’t mean that all users can perceive it.
Operable: Can users use User Interface (UI) components and navigate the content? For example, something that requires a hover interaction cannot be operated by someone who can’t use a mouse or touch screen.
Understandable: Can users understand the content? Can users understand the interface and is it consistent enough to avoid confusion?
Robust: Can the content be accessed by a wide variety of browsers? Does it work with assistive technology?
Dynamic content
Dynamic content such as snazzy animations, pop ups, light boxes, and slideshows can be problematic. Either make sure they are accessible or don’t use them. We don’t.
Layout and functionality of forms
It’s important to lay forms out in a way screen reader users can fill in easily. We do.
