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).
In summary to make your Word document accessible you must:
Create and format your tables correctly to ensure that they are accessible.
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.
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.
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 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.
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
ARIA stands for Accessible Rich Internet Application. ARIA was designed to make Web content and dynamic applications accessible to disabled people – by providing a list of new attributes that can be added to HTML elements.
These attributes are understood by browsers and assistive technology – adding functionality to help make web content more accessible.
Here are some ways that ARIA makes websites more accessible
There are two categories of ARIA attributes. ‘Role’ attributes and ‘states & properties’ attributes. These attributes can be added to elements manually or they can be added dynamically, i.e. using scripts.
Role attributes are added via role=”name of role goes here”. There are six different categories of role attributes:
<div id=”nav” role=”navigation”>…</div>
Everything within this <div> will be recognised as being part of the navigation section.
When landmarks have been added to a page, screen reader users can jump directly to the different sections. The name of the attribute makes the function of each section clear for users.
<input type=”search” aria-label=”search text” >
<input type=”submit” value=”Site Search”>
You may have noticed that I used an additional ARIA attribute in the above example, the aria-label. The aria-label attribute is a way to add a text label to an element. The text label is not visible on the screen but is read out by screen readers.
Examples of landmark attribute use:
Here is an example of using the ‘main‘ landmark
<h1>Guide to Accessible Website Design<h1>
…. main content area of page ….
There can be more than one section on a page using the same landmark role. For example there could be several navigation sections on a page. When that is the case you can use the aria-labelledby attribute to help distinguish between them. For example,
Example 1: the main navigation
<div id=”mainnav” role=”navigaton” aria-labelledby=”mainnavigation”>
<h2 id=”mainnavigation”>Main Navigation</h2>
…main navigation links here …
Example 2: the right-hand column navigation
<div id=”rightcolunnnav” role=”navigation” aria-labelledby=”rightnavigation”>
<h2 id=”rightnavigation”>Right-Hand Column Navigation</h2>
…right-hand column navigation goes here …
The crucial detail to note in the above examples is that the value of the aria-labelledby attribute is the same as the value of the <h2> id attribute – thus connecting them. In long-hand what is being said is, ‘this heading value is the label for this navigation area’. So the main navigation area is labelled as, ‘Main Navigation’. This is what screen readers will read out as the label for that navigation area.
I mentioned earlier that there are 6 different categories of landmark roles, so to finish this short article here is a summary of each.
On my WCAG 2.1. training course, I outline why designing a flexible website is the key to accessible website design – by flexible I mean designing your site so that visitors can change it to suit their own needs.
It’s a good approach for you because you don’t need to design a million different websites, e.g. one with big text for people with a visual impairment, another for people who are colour blind and yet another for people with motor impairments. You just need to design one website; one that can flex to accommodate a million different needs.
I said that you should aim to, ‘divorce content from presentation’. Unfortunately, that can all sound a bit theoretical, so in this article, I will give you some practical examples of how that works in practice.
1. For people using older browsers ensure you set font sizes using relative units (e.g. em units or percentages) rather than absolute units (e.g. pixels or ppints). If you use absolute font sizes visitors to your site using older browsers might not be able to resize the text to suit their needs.
2. Ensure your website is ‘responsive‘, i.e. it reflows or resizes itself to work on all devices – no matter their size or shape. If your website is not responsive visitors may have to scroll left and right, to see all of your content or it may be unusable on smaller screens. I agree with the Bureau of Internet Accessibility who explain that making your website responsive is essential – but it is not the full story.
3. Don’t use background images for important content. It is not possible to add text description (i.e. via the alt attribute) to background images. For a portion of your visitors, some of your content will be missing. For example, enabling high contrast mode in Mozilla’s Firefox automatically hides background images. It does this to ensure that all of the text on the page has the desired high contrast – with the background. If those background images have essential content in/on them – that content is gone for some visitors. The visitor is no longer getting equivalent content to those people using the default contrast.
4. Ensure all links clearly describe their destination. Screen reader users can quickly navigate around a page by extracting all of the links – so I can quickly jump to the one I want. If the links are all called ‘click here’ or ‘more’ or ‘PDF download’ then they need to read the entire page to get the context for every link. The designer did not build in flexibility; they built-in a barrier that only became apparent when a screen reader user tried to access the site. Never turn off user scalability; this will make it difficult for visitors to resize the text.
5. Similarly, a screen reader user can summarise headings on a page – to get a sense of how the content is organised. This will only be possible though if the content is organised in a logical way using appropriate headings, i.e. an h3 heading is used to indicate that the content of the headings is related to but subservient to the content in the preceding h2 heading. If there are five headings on a page and they are all marked up using h1 – visually they may look related – but as far as the screen reader (and access tools) are concerned – there is no logical order to any of them.
6. Ensure your site is keyboard-friendly. Many assistive technologies rely on keyboard accessibility – not just screen reader users. For example, people who use mouth and head sticks and those who use adaptive keyboards.
Try using your tab key to navigate your website. Check if any links are being missed, check that the links are in a logical order, check that there is a visual indication of the link you are on; one common method is to have the link outlined in a colour that contrasting colour. If there is no ‘focus indicator’ it is very easy to get lost when using a keyboard to navigate.
By law your website must be accessible to disabled people; this book tells you how to achieve that.
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.
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
It’s not just your overall website that needs to be well organised and easy to navigate, the same applies to your individual page content. In this section I introduce two simple ideas to help make your content more accessible, whether your visitors are disabled or not. The first idea relates to the visual layout of your content and the second to ensure that you are adding headings in a way that improves rather than hinders accessibility.
The amount of ‘page real estate’ you give to each section should reflect the importance of that area to your target audience. Ideally you should try to create a visual hierarchy that reflects both the importance of each section and how each section relates to every other section.
In the example above, the largest area of the page is clearly on the left which implicitly tells the visitor to ‘start here as this is the most important bit’. Well organised pages are not only more accessible but also easier to use because visitors spend less time trying to figure out where to start and where to go next.
I’ll admit this is not a groundbreaking idea and that you will not always be able to apply it to every page. However, if you have it in mind each time you create a new page it will help you to organise your content and it will help you break your content up into logical chunks. This in turn will help guide visitors through your content.
It also helps you to think about where you should add headings in a way that breaks up your content visually on the page. That is not to say that the content itself will not be the main driver in terms of where you add headings. However, if you have a large area of content on your web page that is not broken up by any headings that is a problem as it is going to put visitors off reading it.
The logical organisation of your content and the relative importance of each section should not only be clearly visible but it should be reflected in the way you display your headings. The size and colour of headings should reflect their relationship with each other. In short, more important headings should be bigger and stand out more.
The more you can do to make it clear how your page content is organised and how each section of your page relates to every other section, the easier it will be for visitors to consume your content.
The great thing about using WordPress is that it hides the complexity of creating web content. However, for our purposes it is useful to know a little bit of what is happening behind the scenes. Each time we use the WYSWYG editor to add a heading or a list or a paragraph of text or an image, WordPress is adding the appropriate code for us. For example, when we choose a particular heading from the toolbar pull-down menu WordPress adds the HTML tag for that heading to the page.
The screenshots above show what you end up with when you use the toolbar to create a heading, a paragraph or a list. Screen shot 1 shows the text being highlighted and a heading being chosen from the pulldown menu, screen shot 2 shows the result. In the third screen shot you see the HTML code that WordPress has created. In this case it is a level 2 heading.
<h2>Here is a heading</h2>
In WordPress you can create six levels of headings, <h1> ..</h1> through to <h6> … </h6>.
By adding headings in this way you are ensuring that your content will be understandable to people who cannot even see your page. The simple act of adding appropriate headings makes it easy for screen reader users to navigate through and summarise page content. They do this by reading out just the page headings and jumping between them to the section they are interested in.
So in the example below the screen reader user could jump directly to subheading 2 rather than having to read through all the content of the left-hand column first:
If we were to look at the code of the webpage example above, we would see that the most important heading on the page is enclosed by the H1 element
<h1>Most Important Heading</h1>
The next two headings are enclosed by the h2 and h3 elements respectively
<h2>Subheading 1</h2> <h3>Subheading 2</h3> And the final two headings are enclosed in an <h4> element: <h4>Subheading 3</h4> <h4>Subheading 4</h4>
We would also notice that the text in between the headings is enclosed in the paragraph (i.e.</p>…</p>) element which indicates to both your browser and someone using a screen reader that that these are paragraphs of text.
<p>Some paragraph text.</p>
The markup is giving structure to the web page that a web browser and a screen reader can understand. Using markup correctly to create this structure is key in ensuring your content is accessible.
Luckily you don’t actually need to add the HTML yourself in order to create accessible web structured web pages. All you need to do is ensure that you are using the WYSWYG toolbar correctly when editing your documents. You are using the toolbar correctly when you use it to format your document with headings, paragraphs and lists when the content demands it.
I am aware that I have been using quite a lot of jargon in this section so far and I apologise for that. However, if you can ‘get your head around’ what these phrases mean it will definitely help you get a deeper understanding of how web pages are constructed. And crucially, it will give you a better understanding of how to ensure your pages are accessible. So on that note, I will introduce the phrase ‘structured document’ into the proceedings.
A web page is a ‘structured document’. This means that the document is ‘marked up’ (i.e. labelled) using the a markup language in a way that reveals its structure. That structure consists of headings, paragraphs, lists, images block quotes and so on. And in this case the markup language to describe the structure of web pages is Hypertext Markup Language, HTML for short.
Marking up a document just means that you are adding labels to the different types of content so that a computer can understand what they are and how to process them. A web browser such as Firefox, Google Chrome or Internet Explorer reads the document (i.e. a web page) and because the content is clearly labelled it is able to understand it.
What your web browser understands is, ‘this bit is a heading, this bit is a paragraph and this bit is an image’. That means it can display these elements appropriately.
This is important not just for web browsing software, it is also important for search engines such as Google.
Google is reading those same tags to understand which bits of the page are the most important and therefore which bits it should add to its search index.
It is important to screen reading software because it means it knows which bits it can use to provide a quick summary of the content to the screen reader user. For example, it can do this by listing all of the headings on the page or listing all of the links or reading out the text label of an image.
A newspapers is a good example of an offline structured document. It has Banner headings and small sub-headings to draw your attention to stories and it has paragraphs of text and photographs that write about and illustrate those stories.
Ok that’s enough about structured documents, let’s get back to ensuring our web pages are accessible. I’ll just quickly mention a technique I see people using a lot but which is very bad practice, I.e. styling text to make it look like a heading instead of formatting it as an actual heading.
It is possible to make pages look as if they have appropriate headings by visually making headings bolder and bigger (by using the bold button on the WYSWYG toolbar and increasing the font size) – however, that is not a good idea because it doesn’t add any heading tags to the page. It might work for you visually but it won’t work for the computers that need to process and understand that page content and it doesn’t work for human beings who are unable to see the page.
If you fail to add proper structure by using the appropriate tags (i.e chosen from the WYWYG toolbar menu) not only will search engines no longer know what bits of text on the page are the most important, a screen reader user would no longer be able to easily summarise or navigate through the content.
‘Marked up’ content just means that content has been labeled appropriately, as a heading or a paragraph or a quote or a list or a table…., e.g. in the following example the heading has been marked up using the h1 element:
The h1 is saying to the web browser, ‘this is the main heading on the page, please display it appropriately’. It is also saying to a screen reader, ‘voice this in a way that indicates it is the main heading for this page’. And it is saying to Google, ‘this is the main subject of this web page please index it as such in your searchable database’.
‘Marking up’ the elements of a page ensures that the organisation of that content is accessible to people using screen readers; the screen reading software will know which bits of the texts are headings and what the relationship is between those headings.
Now that we are clear that you need to add headings to your page it’s time to learn how to use the WordPress WYSWYG toolbar to markup your page content appropriately.
When creating headings you need to highlight your text and then use the format pull-down menu to format your heading, i.e. as a Heading 1 or a Heading 2 or a Heading 3 or whatever is the correct level for that particular heading in the page.
When you want to create a list you highlight your list content and click the list button on your WYSWG toolbar and if you want to create a paragraph you highlight your text and choose ‘paragraph’ from the formatting menu.
Paying attention to this aspect of page content creation ensures that you are adding a logical structure to your pages; which will be very helpful to the people visiting your page.
It’s as simple as that. 🙂
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:
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: firstname.lastname@example.org
All the best,
For Third Sector organisations already working within the constraints of the Data Protection Act it is unlikely to mean enormous changes to their approach. However, it does come with some additional duties and and some additional anxiety, due to the enormous penalties for non-compliance. The penalties for non-compliance will make third sector organisations think twice about their use of personal data (i.e. fines can be up to 4% of worldwide turnover).
The regulations become enforceable from 25 May 2018. From that point on organisations who process personal data must comply with the new regulations.
For example, regulations will apply to data stored and processed for campaigning, for fundraising and for volunteer management. It should also be noted that volunteers are to be treated in the same way as employees, i.e. they must have appropriate training in the area of data protection.
Third sector organisations must arrange an audit of personal data held and know:
* Where it comes from?
* Who it is shared with?
When asking for consent to store someone’s personal details:
* You must explain why you are collecting the data.
* Explain why you are retaining it .
* And provide clear information on how it will be used.
Explicit consent is now required to sell or share data with third party organisations. For example, when building an online mailing list a pre-ticked box on a form is no longer allowed. Consent must be unambiguously indicated through an action of the subscriber, i.e. they must tick the box themselves.
Everyone who is on an existing list must be aware that they are on the list and why they are on there. Consent is not however required for all forms of direct marketing – organisations can still make calls or send direct marketing material by post provided they can satisfy the ‘legitimate interest’ condition. Situations where you do not need consent are set out specifically in the GDPR* (see my notes at the foot of this article).
Individuals will have a right of access to their own data at any time. Third sector organisations therefore will need to plan how to handle data access requests and decide on timescales and procedures.
There is also a new ‘right to be forgotten’ choice and individuals can request to be removed from data lists. Data also has to be kept up to data; so regular checks will be required on existing data. This will require privacy policies to be updated to outline procedures for individuals to request removal of their data. Individuals also have to be able to find out what data you hold about them.
Procedures need to be in place to detect, report and investigate any personal data breaches.
The new legislation provides an opportunity to review current practices and ensure you are not contravening any of the additional protections required by the new act. And of course it needs to be taken seriously due to the severe penalties for any organisation found to be in breach of the the new legislation.
Brexit will not put paid to this legislation; it is almost certain that the UK will adopt most (or all) of GDPR legislation.
Jim Byrne Accessible Website Design can help your organisation comply with the new regulations in the following areas.
If you are holding individuals data on your web site (e.g. members, volunteers, clients) you need to be active in ensuring your website is secure. I can help you by hardening security on your server, providing security monitoring services, enabling secure connections (e.g. an SSL Certificate) and providing backups for all of your online data (both database content and files).
I can review your existing forms to check compliances and update any that need to be updated.
I can also provide an audit of your website and website data to check how you are collecting and storing users personal data.
* The UK’s Data Protection Regulator’s (ICO) highlights four factors in relation to whether you can rely on Legitimate Interests to hold an individual’s data:
Contact me If you value experience (over 20 years as a web developer) and unrivalled technical know-how. Get in touch. Tel: 07810 098119. Email: email@example.com
I’m located in the Ability Fest Pavilion at stand number 23.
Here is the blurb from the exhibition organisers including information about parking.
“It’s time to get inspired at Scotland’s largest disability lifestyle and independent living event, 4-5 October at the SEC, Glasgow.
Doors open from 10am – 4pm each day. Make sure you get there early to hear from Sally Magnusson! The renowned journalist, broadcaster and Playlist for Life founder will be opening the show! (10am, Wed 4th Oct).
Visit us at the event to see, try and test our latest products and services!
To find out more visit www.independentlivingscotland.org
Please note parking is free at the SEC surface level car park (excludes multi-storey) when you register in advance for the show.”
I hope to see you there.
All the best,
Other posts in this category