User experience

Common web accessibility issues for a user with a visual impairment

Have you considered how your content might be consumed by a user with a disability?

A student with a visual impairment got in touch to say they were experiencing difficulties using certain form fields. I wanted to explore this and used it as an opportunity to run some testing with the user on common journeys on the website.

The testing was enlightening and gave some valuable feedback which we’re using to make adjustments on the website. The user highlighted several common issues they experience daily which I thought would be valuable to share.

Magnification

As you might have expected, increasing screen size across any device was a must for the user. If you or I wanted to see something more clearly when browsing the web, we’d probably zoom right? This works for us, but it isn’t necessarily how users with a visual impairment would do it. The user who tested with me uses screen magnification instead, commonly between 200-300%.

The difference is screen magnification enlarges the whole screen but maintains the aspect ratio. This takes parts of screen out of the viewport horizontally. Whereas zooming within a browser like Chrome the width of the screen stays the same and content stacks vertically.

The following screenshots illustrate the difference. The left is the magnified version and right is zoomed. You’ll notice on the zoomed version the logo, navigation and primary navigation are visible, but in the magnified version these are now out of the viewport.

Screenshots showing the comparison between zooming and magnifying a webpage to 200%

Magnification of the entire screen means horizontal scrolling comes into play. More complex layouts with text next to imagery can cause difficulty when only a portion of content is visible at any one time.

Take the following example, in the magnified version on the right, the user can’t tell there is text to the side of the image and could easily miss it.

Screenshots showing how web content with an image and text side-by-side is different when viewed at 100% and magnified by 200%

You can try out the difference between zoom and magnification yourself. Here’s how to do it on Windows and Mac.

On Windows, use Control with + to zoom in and Control with – to zoom back out again. Now use the Windows button with + to toggle on the magnification tool. Then use Windows with + to magnify and Windows with – to reduce in size.

On a Mac, you can zoom using Command with + and – to zoom in and out. For magnification, you will have to enable the “Use keyboard shortcuts to zoom” feature (yes, I know it says zoom rather than magnification) in your Accessibility preferences under System preferences. Once you’ve done that, toggle the feature on using Command with Option and F8. Then use Command with Option and + to magnify and Command with Option and – to reduce.

Screen readers

A screen reader is an application that assists users with consuming content, converting it into a medium which visually impaired users can digest easier. The user regularly uses a screen reader to help with using the web, but particularly on mobile devices where screen size is so small.

Key information can be hard to pick out in text-heavy content. Long paragraphs are difficult to process, particularly on mobile devices. Concise copy that gets to the point and is easier to consume for all users but particularly those with a visual impairment. This is also where accessible content like the correct use of headings and link text is crucial.

Try to consume some of your content using a screen reader on mobile and see how it works. These applications come as standard on iPhone and Android. On iPhone you need VoiceOver which can be found under Settings > General > Accessibility and on Samsung Android it’s Voice assistant under Settings > Accessibility > Vision.

Colour/contrast

In the use of colours, contrast is the major factor. Thin text wasn’t an issue for the user if the contrast is high enough. Even if the text can’t be made out, the contrast would let them know something is there. This allows them to tap for their screen reader to kick in or magnify the screen further.

Contrast with backgrounds is different. As this isn’t displaying information, a subtle difference between a white and a grey is often enough to indicate a change of state. The user mentioned that the zebra striped tables we use are very helpful. When the screen is magnified, only part of a table is visible, the change in colour despite being slight helps them to follow a row when scrolling horizontally.

Example showing how tables on the derby.ac.uk appear when the screen is magnified — Screenshot showing how the entry requirements table on a course page looks when the screen is magnified

In summary

Observing how different users consume your content will provide valuable insights that can help shape what we do. I’d encourage you to take half an hour to try magnifying your screen and using the screen reader on your phone.

If you’re interested in reading more on this subject, I’d recommend this blog by a software engineer from the BBC who writes in detail about his experience using the web for a day with a screen reader.

The importance of headings

How many times have you landed on a page only to be overwhelmed by the amount of copy on it?

Headings are not only a great way of breaking up paragraphs, but also allowing the reader to skim the page for the information they wish to digest, especially if they aren’t committed to reading every last word.

You probably already know headings are a great way of providing structure to a page visually, but they do so much more – here’s why they’re an essential part of any web page.

Headings make your content accessible

We’ve just topped the Sitemorse INDEX for UK Universities and Higher Education for the second successive quarter, so we know just how important website accessibility is. We need to ensure that every page we create or edit meets the same high standards; and right at the top of any page checklist should be headings.

In order to achieve an AA accessibility rating or above you should ensure that “Headings and labels describe topic or purpose” Headings and Labels, World Wide Web Consortium (W3C).

This is why headings should be treated as labels – they are there to introduce or summarise content below – they should not be unrelated statements or marketing jargon.

“When headings are clear and descriptive, users can find the information they seek more easily, and they can understand the relationships between different parts of the content more easily.” W3C.

This technical structure is particularly important for assistive technologies such as screen readers to read out the structure and provide in-page navigation to the user.

Headings influence your search rankings

The often-forgotten benefit of correctly using headings is that search engines use them to index the structure and content of your web pages; why wouldn’t you go to the effort of adding these correctly in order to improve your search ranking on Google?

Search engines like Google pay the most attention to H1 headings, but they will also look for the other headings within a page. This is why it’s important that your H2s are treated correctly as sub-headings and contain similar keywords to your H1 tag. They should be easily readable, make sense and not be stuffed with keywords, as the likes of Google will recognise this!

What you need to know about headings

Headings go from Heading 1 (H1) all the way down to Heading 6 (H6), the least important heading.

All pages should include an H1 – this is the most important heading on your page and this may often be very similar to the Page title (or in T4 terms, the Section Name) but your heading tag can often be more descriptive and expand on the Page title.

The H1 should give readers an indication of what the page is about and you should always make sure that you only have one Heading 1 on a page, as this will allow the likes of Google to understand the context of your page’s content.

H1 headings should be followed by an H2 and this should be followed by an H3 and so on.

Skipping heading ranks should be avoided as this can be very confusing and if the structure isn’t hierarchical, users of assistive technologies (eg screen readers) may not understand the relationship between the headings.

This means you should make sure that an H2 is not followed directly by an H4, for example. However, you can skip ranks when closing subsections, so a Heading 2 starting a new section can follow a Heading 4 if that closes the previous section.

Finally, remember that headings should be used for headings only – they shouldn’t be used to make text larger or bold and definitely not links!

If you have any questions, please feel free to contact us or book a slot at one of our drop-in sessions which are regularly advertised in Inform. You can do both by emailing digitalsupport@derby.ac.uk.

Why websites and content have to work on a mobile device

As of October 2018, there were 4.1 billion active internet users in the world, of which 3.9 billion were mobile internet users. Just to clarify, 95% of people who access the internet are doing it using a mobile device.

Browsing habits have changed considerably over the last few years – we idly browse on our phones while watching TV, rarely do we pull up a chair to our computer and settle down to ‘surf the net’. So we have to consider the variety of devices and screen sizes that our audience are using.

The rising tide of mobile use

It’s no surprise that mobile use is increasing when we consider the convenience they offer and the evolution of connectivity technologies over the last few years.

The Office for National Statistics (ONS) releases periodic data which suggests that mobile devices are the go-to devices for all age groups in Great Britain, with the exception of the 65+ age group in Great Britain.

And this plays out with https://www.derby.ac.uk as well. Year on year, our website is seeing a growing proportion of mobile users, and declining desktop usage.

Designing websites for a range of devices

Our new website has been designed with mobile use at the forefront of the development process, it is what is known as ‘responsive’ which means that it adapts the content to fit user device sizes and orientation. This approach allows us to deliver a more consistent user experience irrespective of the device they are using.

What we have seen over time is that users want to be able to explore websites and consume the content irrespective of the device they are using. They want this consistent user experience. But this isn’t the only consideration that has to be taken into account.

Eliminate clutter

Mobile devices have a more restrictive view-port which means that unnecessary elements become a hindrance to the user and will negatively impact the user experience. Websites with a clean user interface will result in users feeling more comfortable in browsing our website and will take on board more of the content that they see.

Mobile interaction is different

With a laptop, you use the ultra-precise mouse to interact with the device, with mobile you rely on a less precise pointing device – your finger! In practice, this means that there is no benefit in creating hover effects on links, buttons need to be large enough for our audience to use effectively and menus are best offered in an expandable format to ensure they don’t take over the valuable screen real estate.

Photography

Clear photography becomes more important with mobile users. An image may look perfectly clear on a desktop device but, on mobile, some images can be difficult to see so use of imagery should be carefully considered.

All of these things have been taken into account on the new website and we are continuing to work closely with many teams to ensure that new content continues to be developed with this in mind.

And this approach is having a positive impact

Our previous website had mobile pages, however they weren’t as optimised as they are on the new site – where we have rebuilt the site from the ground up. To pick out a few statistics:

Bounce rates (which measure users who leave the site after viewing one page) for users on mobile devices have improved by 20%.
We have seen a 7% increase in undergraduate prospectus requests and a 41% increase in postgraduate prospectus requests from mobile devices.
We have had a 4% increase in open event bookings from mobile devices.

We are seeing other interesting trends on an international basis as well. We have seen a 270% increase in mobile users in India and a 42% increase in mobile users in Asia in general.

How we’re getting our web pages loading faster

People don’t like waiting. They certainly don’t like waiting for web pages to load. This is why we are now using a content delivery network (CDN) that speeds up this process. Here, we look at exactly what this means and how it may affect you.

What is a content delivery network (CDN)?

A CDN is a network of servers set up to deliver web-based content faster, particularly assets like images and pdfs that include a lot of data. Delivery is faster because the servers are distributed geographically so there will always be a server close to the user, wherever they may be. This means their images and pdfs will load quicker.

We are using a CDN from Amazon Web Services (AWS), who also host our website. As well as the CDN, AWS also provide an image manipulation tool that allows us to load different sizes and quality of images to the site depending on what type of device is being used. The system recognises the type of device being used and automatically changes the url. This allows us to introduce responsive imagery across the site, where users on mobile devices will be shown smaller images.

What are the benefits?

The primary benefit of introducing this technology is it will improve the time it takes to load a webpage. In the digital age we live in, users don’t like to wait, especially the undergraduate demographic. A shorter load time improves user experience particularly for international users. For example, if a user in Australia is using our website, they will be loading images from a server local to them as opposed to having to load images from the UK.

SEO

Page speed is a factor in how search engines rank results. Over time, this technology will have a positive impact on our search ranking. Users are more prone to leave a slow-loading website. A CDN can reduce this bounce rate and increase the time that users spend on the site. A faster website should mean people stay and stick around for longer.

Server space

We will also save space on our web servers. Normally, when providing responsive imagery when an image is uploaded, we would have to save several different size versions of the image. At a minimum, you’d have a small, medium, large and full-size version of each image. Now, we can store the original image and, when it’s used, the system changes the URL to create different sizes of images on the fly. These images are stored by the image manipulation service and are not on our servers, saving us space.

As a CMS user, what do you need to know?

When you use T4, these changes will have no effect on how you upload images and add content. Images should still be uploaded using the specification in our digital guidelines and optimised by passing through TinyJpg.

There is a small trade-off of using the service in terms of waiting initially for images to be published but I believe the benefits far outweigh this. When web content with a new image is added, it needs to be published to our web server, which is synced with AWS. The sync runs multiple times every hour but it means, when publishing a new image, there could be up to 10 minutes before it is synced and therefore available to use. So the content would be live but the image wouldn’t be there. Ten minutes is the very maximum though. In most cases, it will quicker and sometimes it will be synced immediately. Hopefully, this trade-off will only be temporary. We are working with T4 and AWS on a solution.

This blog is about how we can make our website as accessible as possible

Do you understand what this blog is about? If you believe it will give you information about how we can make our website as accessible as possible then the title has done its job.

I have, obviously, over-egged the pudding to make a point [do you all understand that metaphor? If not, it is not accessible]. But the first step on the road to an accessible website is to have a title for each page that tells the reader what they can find on the page. And that continues through the initial content, the subheads, the images, everything. At no point do we want our audience to be wondering what our page is about.

That is the first stage of accessibility. And it is also the first item in our content checklist titled How to achieve AA accessibility rating:

Your web page must have a title that describes its topic or purpose

You will be thinking that goes without saying but one of the biggest blockers for accessibility is assumed knowledge.

A short story

Let me tell you a story. A short one.

I put together a list of 15 points specifically relating to content and how to make it accessible. I shared this list with a few people and asked for feedback. I was slightly embarrassed to get replies back saying: “What does this mean?”

Clearly my list wasn’t accessible. Not everybody knows what an “alt tag” is and what it does. I do and had assumed everyone else did as well. The checklist has now been updated with better descriptions. But that doesn’t mean it can’t be improved. All feedback welcomed.

It’s the law

We have an approaching legal requirement to make our website accessible. And we need to achieve an AA accessibility rating. We have put together our content checklist on the Web Content Accessibility Guidelines (WCAG) 2.0. This is what WCAG says about accessibility:

“Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these. Following these guidelines will also often make your web content more usable to users in general.”

Our checklist

And this is our AA content accessibility checklist:

Your web page must have a title that describes its topic or purpose.
All images must have “alt tags”. This is a description of the image and can be added in the Media Library in the “Description” field. NB when creating a media gallery, ensure you use a different description for each image.
The purpose of each link on the page can be determined from the link text alone. Do not use simply ‘Click here’ or ‘Read more’.
Use easy-read alternatives to technically advanced text. Ideally text should be written to be easily readable by all levels of ability.
Only play sound if user activates it [unless there is a good reason otherwise].
Do not rely solely on shape, size, visual location, orientation or sound for understanding or navigation. Eg avoid content such as “click on the triangular button on the right when the music starts”.
Do not change context (eg go to another page, play video) unless this is activated by the user. We want our users’ journey through our website to be as predictable as possible.
Provide submit buttons to initiate change of context (eg go to another page, play video) and warn users in advance when opening a new window [opens in new window].
Avoid images of text as these cannot be read by screen readers (logos are OK – with the appropriate alt tag).
If language changes within the text, mark it in the source code so it is recognised by screen readers. Eg if there is a paragraph in French, use code <p lang=”fr”>Il y a un paragraphe en francais.</p>
Information conveyed by colour differences should also be explained in text. For instance, the following four points are technical and will need to be discussed with video/audio providers.
Provide a text transcript of audio-only content.
Provide captions for all prerecorded audio/video content. Note: captions include subtitles plus text to describe important sounds.
Provide a second audio track on all prerecorded video to provide audio description – or a second version of the video with audio description.
Provide captions on live audio content.

What’s next?

We are testing our accessibility regularly using the SiteMorse platform and updating our pages where necessary.

We are also taking steps to improve our methods and our content types as we learn more about what is required. For instance, users can now toggle captions on and off on video within the website, and we now have the provision to add text transcripts to video files. We are also investigating the possibility of users being able to toggle to pared down, less visually noisy versions of pages. Every day’s a school day.

A close-up of the YouTube caption button

What we need now is for our content producers to make sure any new content achieves these AA standards.

All new video we upload to the website must have captions and we also want to add a full transcript of what is said in our videos. By the time the law applies to us, we need to make sure EVERY video, new or old, on our website has both of these features. NOTE: We cannot rely on YouTube’s auto captions. They seem to work OK a lot of the time but will then say something jawdroppingly embarrassing. We do not want this. We now have guidance on how to correct subtitles and create transcripts.

Accessibility is a challenge and one we intend to meet well before it becomes a legal requirement. The bigger challenge is to make sure the website is accessible while also being appealing and engaging to all our users.

Subject area pages, 12 months on.

Improving user experience. Enhancing conversion rates.

Back in June 2016 we began looking at how we could improve the user experience for those exploring course and subject level information. Subject pages were used in some areas of the website as a way of grouping related course pages together. But they were being used inconsistently; the layouts and designs varied between colleges, some courses weren’t associated with a subject page at all, and none of the pages were responsive.

This inconsistency was impacting on the student journey by making it harder for users to find and browse course information.

We also knew from a previous search engine optimisation (SEO) project that we needed more specific subject area content on our website to improve our search rankings. From a marketing campaign perspective, we knew that we also needed responsive subject areas to direct specific campaign traffic.

So we launched a project to create a standardised design for all subject pages across the university. With 50 subject areas that cover all of our courses, and a tight timescale in which to deliver so much new content, it was a challenge that would be delivered in conjunction with colleagues from across the marketing department.

Developing the page

Old subject area page - Forensic Science — Old subject area page – Forensic Science

The whole process started by working with the dedicated college marketing teams. We ran workshops to understand the type of content they would like to be able to host on these pages, discuss how they might look and how campaigns would be using them. It became clear quite early on that thes pages needed to make it easy for users to order a prospectus or book onto an open day – after all these are our key calls to action.

Having gathered our requirements, we spent some time sketching initial designs which were then interpreted as a wireframe concept (see below – I’m no designer!).

Wire frame of subject area page — Developing the subject area page – wire frame

Release and launch

Rolling out the new subject area pages was a significant task. It meant drafting in staff from the college marketing teams to implement the pages across all 50 subject areas.m – very much a team effort.

Part-way through the year we undertook some more work to make these pages more conversion focused – driving more users to book open days or order a prospectus. You can see the pink bar that was added which made the key calls to action more prominent.

New subject area page - Forensic Science — Responsive, conversion-focused. Just better.

The design met all the requirements we identified at the start of the project, but the impact on the user experience and how it engaged prospective students was going to be the real measure of success…

Impact

For the purposes of this review, I am going to continue to focus on the Forensic Science page, but the impact has been similar for all other subject areas.

Comparing the performance of the previous subject area page to the new one gives you some idea of how successful they have been for goal conversion (Open Day bookings and/or prospectus orders).

Goal	2015-16 Old subject area page	2016-17 New subject area page
Prospectus orders	22	253
Open day bookings	43	200

We can also see that users are spending more time on our new subject pages. This shows that the new layout has improved the user experience of our site and helped to increase those all important conversions.