Skip to main content

Jim Byrne Accessible Website Design Glasgow for The Third Sector, Voluntary, Charities and Not for Profits

Accessible, Responsive Website Design
Jim Byrne Web Designer

Accessible PDFs from MS Word

Published: October 8, 2021

PDFs are generally created from source documents; often that is an MS Word document – which has to be made accessible before being exported (or in the Mac version, saved) as a PDF.

In this short article I outline the steps you need to take to ensure your PDFs are accessible after you have gone through the conversion process. The information in this article assumes that you have already read my article on how to create an accessible Word Document (outlined in my ‘Creating Accessible Word Documents’ guide).

A summary: how to create an accessible Word document

In summary to make your Word document accessible you must:

  • Use styles to add semantic structure, i.e. to create headings, paragraphs, lists and so on.
  • Ensure your images have appropriate alt descriptions.
  • Ensure that link text makes sense when read out of context and that you avoid using URLs as link text.
  • Remove superfluous spacing.
  • Avoid using text boxes and floating images; instead use use ‘inline with text’ for images.
  • Ensure that you have good contrast between text and background colours.

Create and format your tables correctly to ensure that they are accessible.

How to create an accessible PDF

Once you have ensured that you Word document is accessible you are ready to convert it to PDF What you are now trying to do is to ensure that all the work you have done is preserved during the conversion process.

Luckily it is easy, as all you have to do is, export the file to PDF and ensure that ‘Document structure tags for accessibility’ has been checked within the export preferences pane. Don’t print to PDF – that will not preserve the work you have done in your Word document.

Once you have exported the file to PDF there are still a few things that you need to do to complete the process. You have to carry these steps out within Adobe Acrobat Pro DC.

  • Check that PDF tab order is set to use ‘Use Document Structure’. Show thumbnails, select all thumbnails then right-click (Ctrl click on Mac) and on the resulting menu choose Page Properties.
  • Click ‘Tab Order’ tab and check click ‘Use Document Structure’.
  • Give the document a title via File / Properties / Description.
  • And finally, run the built-in accessibility checker. Via, View/Tools/ Accessibility/Open/Accessibility Check.
  • Accessible PDFs are tagged documents

The major difference between an accessible PDF and an inaccessible PDF is that the accessible version will be tagged, i.e. each element of the document will have a tag. In simple terms, that means each element has a text label saying what type of element It is, i.e. is it a paragraph, a heading, an image a bulleted list and so on.

It is these tags that allow accessibility technologies to read and organise the content in ways that make it accessible. For example, a blind person can use a screen reader, such as JAWS to list all of the headings in the document and jump to the section they are interested in – only because the headings in the document are identified as headings – using tags. If there were no tags in the PDF document JAWS would not be able o recognise headings from all of the other text in the document.

A note on the Arial font and accessibility

Published: July 27, 2021

Arial is a sans serif typeface, designed in 1982, based on Monotype Grotesque. The font has a similar proportion and weight to Helvetica.

It is a font with a contemporary look. Since 1992 it has shipped with every version of Microsoft Windows, which has helped it become ubiquitous.

It is a favourite of desktop publishers, though less so with designers; who think it inferior to Helvetica. The story goes, that it was designed primarily to avoid having to pay royalties (to Linotype) for the use of Helvetica.

It is rarely recommended for print work (though it is a print font). Helvetica is considered a better-looking, more flexible font.

Arial and accessibility

Arial is recommended by RNIB and other organisations concerned with accessibility. If you search for guidelines for document accessibility they all tend to say, use Arial, with a minimum size of of 14pt.

However, I am not aware of any research that shows Arial to a better font than similar sans serif fonts. I think it’s more likely that it was the sheer ubiquity of this sans-serif font that led to the recommendation.

There are similar contemporary-looking, clean and easy-to-read fonts that would do the job just as well. I.e. Calibri, Century Gothic, Helvetica, Tahoma, and Verdana or Myriad Pro.

Note that all of the above fonts are sans serif. Serif fonts are rarely recommended – as more ornate fonts are considered more difficult to read. On lower resolution computer screens the serifs can be distorted, making the words look blurry.

Slab serif Fonts

Having said that, slab serif Fonts (a type of serif typeface characterized by thick, block-like serifs) such as Rockwell, Clarendon, and Museo Slab are considered easy to read and accessible. They tend to be used for headings rather than body text.

Photo: “Pool of Knowledge” by Ian Muttoo is licensed under CC BY-SA 2.0

How is the term ‘disabled people’ defined and why does it matter?

Published: December 7, 2018

As a website designer or an organisation commissioning a website you need to know how the term ‘disabled people’ is defined for the following reasons:

It will have an impact on the approach you take to making your website accessible.
As an organisation you will want to stay on the right side of the law when it comes to making your content and service accessible to ’disabled people’.
Ok, how is the term defined in law?

To paraphrase the UK equality legislation, the term, ’disabled people’ is defined not by the cognitive or physical impairment of the individual but by the physical (or virtual) environment they live in.

For example, if a wheelchair user turns up for a job interview to find that they can’t get in the building because there are steps up to the front door, that’s a problem. The legislation states that it is not the individuals mobility problem that makes them disabled it’s actually the lack of a ramp.

The design of the building and a lack of an alternative access route is preventing them from attending the interview. What needs changed here is not the person but the design of the building or the addition of an alternative way in.

In other words the individual is not expected to suddenly regain the power of their legs – their lack of mobility is not the issue. However, in this the lack of access to the building has put the individual at a disadvantage and that is against the law.

I understand how that works for buildings, what about websites?

The issues are exactly the same on the web. You can’t say that your website is not designed to be accessible to people who are blind or have Dyslexia or people with a hearing impairment.

If you said that you would be breaking the law; because you are implying that accessibility is due to a problem with the the person and not a problem with the website.

So in summary. If you are a website designer, this definition of ‘disabled people’ tells you that it’s your job to create a design that is flexible enough to accommodate the needs of individuals with different impairments.

If you are an organisation commissioning a website, you may be surprised to know that the accessibility of your website is not the responsibility of your website designer.

The UK legislation clearly states that the responsibility for ensuing your website is accessible lies with you, the owner of the site.

So for you the definition of the phrase ‘disabled people’ means you need to be absolutely clear when commissioning your website that it must be accessible to all users.

There are exceptions to this rule in that the any costs incurred and efforts you make are considered reasonable in relation to the resources you have as an organisation.

Jim Byrne

Digital Accessibility Consultant

Do you need your website to be accessible to disabled people? Do you need an accessibility audit of your existing website? I can help. Contact me. Tel: 07810 098 119

5 ideas to improve your online presence and make your site more secure in 2018 

Published: January 9, 2018

Happy New Year. I hope you had a restful break. 🙂

This is the time of year to make plans; freshen up your website; reach more people or try to do things more efficiently.

Here are five things to consider as we move in to 2018. Click the appropriate link for information about those activities you are interested in:

1. Make sure your website has been upgraded or re-designed to work well on mobiles and tablet computers. 2017 was the year that mobile usage finally overtook desktop browsing. Every website now needs to be a ‘responsive’ website and able to operate on all devices. Is yours?

The importance of having a mobile friendly website is, of course, not new. In 2016 Google made changes to the way they rank sites, to the extent that more mobile friendly sites are moved up the rankings. It is no longer simply about usability, it’s also about whether you can be found at all, ‘on any platform’. Gianluca Fiorelli wrote in the Moz* newsletter (Moz are an SEO consulting company) that, ‘Google is steadily moving to a mobile-only world’. Get in touch if you would like to discuss upgrading yours site to work well on mobiles.

2. Consider commissioning an accessibility audit of your site. You may be breaking the law without knowing it. If you web content is not accessible to disabled people that is considered a form of discrimination under the Equalities Act 2010.

If you ensure your website is accessible you are likely to increase the audience for your content. Accessible websites also tend to be easier to use for all visitors. This is an area I have over two decades of experience in so if you have any questions or if you would like to commission an audit get in touch. Get back to me within two days of receiving this newsletter and I promise to provide an unprecedented good deal on a website accessibility audit of your site. I will check your site against WCAG 2 level 2, or whatever level you require.

3. Ensure your website is protected against being hacked and that if you are hacked you have your content backed up. I am currently providing a discount on my standard website backup service.

I also provide a 24/7 monitoring (and cleanup) service to ensure that if your website gets hacked you will know right away. Immediate action is required if you website is hacked:

  1. If you are hacked and Google detects that your site has been hacked then your site will be blacklisted. This means that Google will start to tell visitors that your site is dangerous. Clearly that is not good for your credibility and, of course, you will lose much of your traffic as not many people will override a Google warning to visit your content. Once Google has blacklisted your site you need to clear your site of malicious content and then you need to try to get Google to remove the blacklisting.
  2. Hackers can add malicious code and content to your site and serve adverts to your visitors without you noticing. If you visit your site directly it looks fine. However when people are finding your site via Google it appears to be serving drugs or porn or some other malicious content.

In other words you need your site to be monitored and you need to be alerted right away if malicious code or content has been added to your site. You might think it won’t ever happen to you. Not true, it is almost guaranteed that you will be hacked at some point. 43,000 sites get hacked every day and 10,000 sites get blacklisted by Google every day. Get in touch if you have a WordPress website and you are not already using a monitoring and cleanup service. Not only can I give you a great deal, I’ll also install the monitoring software for free.

4. Make sure you are ready for the new General Data Protection Regulations (GDPR). The GDPR is the EU data protection regulation which replaces the current Data Protection Act. It aims to simplify regulation and give individuals more control over their personal data. I recently wrote a short summary about the GDPR I think you will find useful.

5. Get a brand new accessible, mobile friendly, feature rich website; one that is designed from the ground up to help you meet your goals, whether that be to get more members, sell more products or get more people registered for your newsletter. If it’s been on your mind for a while now’s the perfect time to take action.

Get in touch if you want to chat about any of the above. Tel: 07810 098119 Email: webdesign@jimbyrne.co.uk

All the best,
Jim

Public Sector Equality Duty – A summary

Published: January 31, 2017

What is the public sector equality duty for?

The public sector equality duty is designed to ensure that those carrying out public functions (including public authorities) consider how they can contribute to and help foster a more equal society. They have a duty to promote good relations between different groups and to advocate and advance equality.

In summary:

  • Deliver improved outcomes for everyone.
  • Develop policies, based on evidence.
  • Take action to advance equality.
  • Be transparent, accessible and accountable.
  • With this policy the onus shifts away from the individual’s need to assert their right to equal treatment onto public authorities. Public authorities are now expected to be pro-active in tackling institutional discrimination.

The public sector equality duty covers a list of ‘protected characteristics’:

  • race
  • religion or belief
  • disability
  • age
  • gender
  • gender reassignment,
  • pregnancy and maternity
  • sexual orientation

The duty also covers marriage and civil partnerships, in relation to eliminating unlawful employment discrimination.

How does it relate to disabled people?

Organisations must take into account a disabled person’s impairment and ensure that that impairment is not a barrier to equal treatment. Organisations need to be pro-active i.e. not wait to react if someone complains about an issue or requests equal access or treatment. An example would be a local authority making their website accessible to disabled people and providing alternative formats available by default.

The General Equality Duty

The public sector equality duty is set out in the Equality Act 2010 and referred to as the ‘general equality duty’.

The general equality duty has three elements:

  1. To eliminate unlawful discrimination.
  2. To promote equality of opportunity.
  3. To foster good relations between those with ‘protected characteristics’ and those who do not.

A public authority must take account of these three needs to comply with the general equality duty.

Who is subject to the General Equality Duty?

The list includes health boards, education authorities, further and higher education authorities, local authorities, the police, fire and rescue authorities and Scottish Ministers. There is a full list of those subject to the act online.

The duty covers public authorities when carrying out their public functions as service providers, as policy makers and as employers and also covers services and functions which are contracted out.

When private and voluntary sector organisations are carrying out a ‘public function’ they are also covered by the duty. A public function’ is one defined as such by the Human Rights Act 1998.

In order to meet the general duty, a public authority must:

  • Be educated about the the act and the requirements implied so that they can be applied to policies and practices. Duties under the act should be considered at the time when new policies are being created.
  • The decision making process must take heed of the three needs of the general equality duty in a way that influences the outcomes of those decisions.
  • The general equality duty is a ‘continuing duty’ – so it has to be considered during the implementation of policy and must be continually reviewed.
  • The public equality duty also applies to anyone exercising public functions on behalf of a public body; the duty rests with the public authority even when delegated to a third-part organisation.

Specific Duties

Secondary legislation outlining specific duties came into force on 27 May 2012.

Each listed authority is required to:

  • Publish progress on mainstreaming of the equality duty, equality outcomes, gender pay gap and equal pay.
  • Review policies and practices and asses them.
  • Gather employee information.
  • Consider award criteria in relation to public procurement
  • Publish information in a manner that is accessible.

How Jim Byrne Accessible Website Design Can help organisations comply with the Public Sector Equality Duty

Many of the organisations subject to the act have websites and documents that are not accessible to disabled people. If a disabled person cannot access information on a website managed by a public authority and no alternatives are offered that would be considered as unequal treatment under the Equality Act 2010 .

The services I provide can help in the following ways. I can:

  • Carry out a website access audit to check if there are any barriers to disabled people accessing content.
  • Help make the updates necessary to ensure your website is accessible
  • Develop a new usable accessible website for your in so that you are being pro-active in meeting the needs of disabled people
  • Update your existing website to make it more accessible.
  • Identify and fix accessibility problems with PDF’s or Word documents you publish so that your publications are accessible to your target groups.

Contact me to discuss any of the above. Telephone: 07810 098 119

Or fill in the contact form below:

[contact-form-7 id=”132″ title=”Contact form 1″]

WordPress Plugins that help accessibility

Published: December 4, 2014

Many of the websites I develop use WordPress for Content Management; so I’m I’m always happy to come across plugins that help make WordPress sites more accessible.

Here are two that I thought looked particularly useful.

EsAudioPlayer

A cross-browser, accessible audio player (MP3 player).

There are a couple of features that make it more accessible than the ‘bog-standard’ mp3 player:

  • The audio file can be downloaded by text browser users.
  • Screen reader user can control the player buttons, i.e. play, stop and so on.

Download EsAudioPlayer.

My Read More

This plugin replaces the default “read more” with text that you specify, and adds words from the title to it (the number of words is your choice). This means that all your links will be unique.

Download My Read More.

Do you know of any accessibility plugins?

Get in touch if you have come across any WordPress plugins designed to make WordPress sites more accessible; your recommendations are appreciated.

All the best,
Jim

p.s. and of course you can also contact me for all your WordPress development needs.

How to make client-side image maps accessible

Published: November 3, 2014

Although client-side images are preferred over server-side image maps – as equivalent text can be provided for each image map ‘hot-spot’ – server-side image maps are sometimes necessary. For example, a server side image can be used when the active regions of a client-side image map cannot be easily defined using an available geographic shape. In such cases the answer is to provide redundant text links relating to each link provided by the server side image map.

The following markup example is typical of the code used to reference a server side image map.

<a href="/cgi-bin/mymap.map">
<img ismap src="imagemap.gif" >
</a>

The web pages accessed by the clicking the mage map in the above example would be completely hidden to someone using a screen reader or a text-only web browser, as there is no alternative way of accessing the links provided.
An example of the server side image with alt attribute added and an alternative set of links to the same content:

<a href="/cgi-bin/mymap.map">
<img ismap src="imagemap.gif"
alt="Alternative text links are provided at the foot of the page.">
</a>

You then make the following links available at the foot of the page,

<p><a href="about.html">About Us</a> | <a href="research.html">Research</a> </p>

As you can see in the example above the alt attribute provided information about where to find the text based links. The alternative text based links provided at the bottom of the page imply that the image map has two hot-spots, one to find information about the organisation and another for information related to research.

Structure your menus by marking them up as lists

Published:

A navigation menu is – if we are speaking structurally – a list.

I still see websites that don’t markup their navigations links as lists; I guess the reason for this is that designers don’t want to have ugly big bullet points littering their menu’s, or seemingly uncontrollable margins throwing out their carefully crafted layouts.

Is it possible to use the correct structural markup, and still make your menus look the way you want them to?

The simple answer is yes; you can use CSS to style lists to look more-or-less any way you want.

First, undermine your previous assumptions by visiting the Listamatic website to see examples of different list styles (with the CSS used for each).

Then visit Mark Newhouse’s Taming Lists tutorial to learn how to make your own.

And finally – if you can’t be bothered learning how to do it yourself – have a look at Accessify’s List-o-matic – where you fill in a few forms, and the List-o-matic tool does all the hard work for you.

Why is this relevant to accessible web design?

Using the appropriate markup for all the structures in your web documents is the first step towards making them accessible; web pages need to be accessible to the ‘user agents’ people use first, before they can be accessible to the people themselves. Using valid standards based markup means you have the best chance of your pages being understood by those intermediate ‘user agents’ (usually that means computers and web browsers).

Links

Check colour contrast by creating a greyscale image of your web page

Published: August 19, 2014

This very simple tip will help you to check whether the colours you have chosen for your web pages have adequate contrast.

Take a screen shot of one of your web pages, and open it up in an image editing program (e.g., Photoshop). Desaturate the image to remove all colour so that you end up with a greyscale image.

Viewing the page as a set of contrasting grey areas makes it much easier to see whether, for example, there is sufficient contrast between the background colour and text. I was reminded of this tip while reading the Techdis article Colour and Contrast Accessibility Issues: for the design of e-learning materials by EA Draffan and Peter Rainger.

Link text should describe the content linked to

Published:

This tip is a very short one; ensure that the text used for links adequately describes the page or content being linked to. Link text should be short and descriptive – and ideally still make sense when read out of context.

Some people using screen readers will be navigating through your site by jumping from link to link; if all your links say ‘click here’ the usability and accessibility of your site is considerably reduced.

Give me a phone if you would like me to test the accessibility of your website:

I provided feedback on the WCAG 2, have two decades of experience and worked with hundreds of organisations.

07810 098 119

Alternative access to client feedback

Client Quotes

Loading Quotes...