Accessible Sites - Dynamiser

Accessibility and your website

If you owned a shop and a customer could not get their wheelchair in through your door you would likely fix that problem straight away.

The same if a visually impaired customer needed help with reading a price or instructions on a product on your shelf; you would be more than happy to help. And it is these customers that may need help with reading the contents of your website.

Let’s look at more “Why’s”:

It is just plain ethical to make websites accessible to all
You increase your website’s audience, increase its reputation and likely create more business
You will also improve your SEO ranking

And it is not just the visually impaired that benefit from a good accessible website, visitors with other considerations can also benefit:

auditory disabilities
cognitive disabilities
neurological disabilities
physical disabilities
speech disabilities

So what can be done? Firstly Dynamiser can do much in the background of your pages to make the pages accessible, just good design practice. WordPress, Elementor and Astra are already very good starting points compared to a website created with good old fashioned HTML. But the major considerations are something all Dynamiser customers should give time to when deciding on the design and content of their website, all with the help of Dynamiser. These will be discussed below and follow the W3C advice.

Before we dive in, let’s look at more of the abbreviations and an acronyms that are associated with planning a good accessible website. So let’s list them out here and now before moving on to discuss further.

W3C: World Wide Web Consortium (as discussed above).
WCAG: Web Content Accessibility Guide; this is the set of guidelines laid out by the W3C for good accessible web sites.
POUR: Perceivable, Operable, Understandable, Robust: An acronym used in WCAG to provide a set of principles the advice is based around.
A, AA and AAA: Different levels of accessible standards a website can adhere to. The higher the number of A’s the higher the standard but may impact of website aesthetics.

See below for some useful links with further information. And then we can look more specifically at all considerations we can make in designing your website following the WCAG/POUR advice.

Will your site design be compromised?

Inevitably any Dynamiser client requiring a new website will have concerns about aesthetics and how changes for accessibility could affect any design. As you read on you will see that there is no need for concern. As example the font sizes can handled without permanent large fonts and colour contrasts can be handled by a great WordPress plugin, called One Click, discussed later in this page.

There may be some compromise but with a little thought your design need not be affected.

Fonts

The starting point should be the font and font size. For sizing there is a way to keep your site looking neat for the regular visitor but take advantage of the browser settings used by the visually impaired visitor.

Most current browsers allow for larger font settings, but these are ignored by the standard font sizing used by web designers – the use of Pixels. A Pixel is a unit of size on a web page. The default is normally 15 or 16px for text and 20px for headings. But another sizing method can be used called REM. EM is another unit of typography size and the R stands for root, in web page it is this root sizing that allows an equivalent px size to be set for regular visitors but then scale up according to the browser settings of the visually impaired.

Let’s have a look at this in practice. The first example shows two columns created on a page with a heading and text, Both have been set with the equivalent px and REM values and with the default Google Chrome font size we see no apparent difference in the way the columns are seen on the page.

But in the second example we see that the REM settings take effect when the browser font size has been increased. Dynamiser will help all clients calculate the correct REM settings for all heading and text, not just in text based sections of the page but also in all other features used such as CTA’s, Flip Boxes, Image Boxes or any other place where text is used.

So what about font style? Advice is to not get carried away with a font style but should you be restricted? Well no, the key is selecting a good compromise. Dynamiser advice has been to check the standard google fonts as these are all available within WordPress/Elementor and others can be sourced from websites such as fontsquirrel. But the Bureau of Internet Accessibility (see below) advise using a San Serif based font as they display better on both on desktop and mobile devices. Or use some of the standard fonts seen on standard PC applications (such as MS Word) like Arial, Helvetica, Lucida Sans, Tahoma, and Verdana as they are familiar fonts to users. Other Google fonts recommended by Elementor are PT Serif, Noto Serif, and Noto Sans

With fonts.google.com you can filter for Sans Serif based fonts by un-selecting all other font categories at the top right hand side of the page. At fontsquirrel.com simply click on the Sans Serif link under classifications in the Find Font section on the right-hand side-panel

A good example of a nice plain easy to read font, available from FontSquirrel is the Tiresias font, which can be imported into Elementor. See below compared to using the a Serif only based font called PlayFair Display. The Playfair Display font is undoubtedly attractive but is not great for the visually impaired.

Still want to use a different font then no problem, consider spacing the lettering and do not change format at all, such as making italic or capitalised. Also make sure it stands out against the background. (Google allows you to change the background colour in Chrome). In addition Screen Readers (discussed later) can also help.

We can see the difference of readability, even for able readers, when we space out and do not capitalise or italicise the text. The background/foreground contracts will be discussed next.

Colour Contrasts

The contrast between the background or a coloured block and the foreground text can make a massive difference and not only to the visually impaired. A simple background colour on a page or section, or within a feature such as a CTA or button is one thing but also any image based background should also be considered. on top of this is any opacity setting (how non-transparent an image or a text block is).

The simple thing is light on dark or dark on light but colours used within that range should also be checked. Also see the contrast advice for visitors affected by colour blindness later in this page.

With images, the contrast is equally as important; in the example below, we have a nice picture that is used as an impact hero banner on a home page. But the text and button contrast is problematic for visually impaired visitors as the contrast is hard to adjust due to the changes in colour between dark and light in the image.

The “Berkshire Dining” logo is also a difficult font type.

One fix is to reduce the opacity of the background image but even with a colour change and use of text shadow on the header, the result is not perfect and reduces the impact the website owner may want to make.

A better solution is to choose an image that has less colour changes so we can use full opacity with a better contrasting colour. Add in an increased button size and font changes we now have a hero banner that stands out and is great for impaired visitors.

Screens Readers

Screen Readers are software tools used by the visually impaired to electronically read the contents of a screen out loud and this is crucial for such users when accessing any website.

A website is blocked out into sections top to bottom of the screen and within sections are columns that contain the elements seen on the screen, such as images, text, forms, buttons and so on, which are read left to right. So any web page design should keep this in mind; keep your content in the order you want it to be read by everyone. It is not unknown to have bits of useful information all over a screen and regular visitors to your site will be able to see this and make sense of it within your wonderful design, but would a screen reader read out the content in a logical flow? The screen readers provide short-cut keys to move through the elements, you may be familiar with doing this with the tab button which is also the way any user would navigate if they have no access to a mouse. This is known as the “Tab Order”.

The following sections will describe how Dynamiser can build a website that adheres to the recommended standards to aid screen readers present your site as perfectly as possibly to the visually impaired…

Non-text based elements of your page such as images and forms
Menus
Skipping to main content of a page
Ignoring irrelevant content
Abbreviations
HTML links within text

So how are images, buttons and icons handled by readers when there is no or limited text. Even a button that states “Click me” or “Read More” should have additional context as a screen reader may not see the association with any imagery.

There are many ways to help screen readers add more context and reason for such elements of your pages.

Alt Text
Title Attributes
Aria
Captions

Alt Text

Or alternative text, has been around for many years and was initially used with images on slow internet connections at the time of modems; the text would be displayed while the image was loaded. Most browsers no longer display the text as they are not required now we have faster internet speeds. But they are used by Search Engines so it is recommended that they are still added to images to help your web page rankings. Normally you would not add to decorative images as not needed by SEO and other images may also be deemed not relevant to SEO but we should consider adding to all non-decorative images to help screen readers. The screen reader will see the alternative text and read it out to the user when the image is landed on by their short-code or tab. So make sure the text is content rich explaining exactly what the image is about.

This is especially important if there is a link associated with the image to another page, popup or website. Below is such a case, when the screen reader reaches the image it will read out the text “Choose Lush Fauna for all your wedding bouquets. Click here to see more information” as this is the images Alt Text.

Titles

Alt Text has been replaced by Title attributes in recent years and Titles can be added to images there are limitations

They will add a text description of the image when the user hovers over the it but the size is by default small so of no use to a visually impaired as the size is set by the Operating System (such as Windows or MAC) and not the browser. The user may have large fonts set in the OS so they should not be ruled out completely.
WordPress no longer adds the Title to the image, by request of website developers, so they have to be manually added within Elementor.
On some browsers, Screen readers will not see the Title so can be ignored.
Of no use to SEO

See example below, hover over the image to see the title. If the title is needed then discuss with Dynamiser. There is no reason why they cannot be added for non-accessibility reasons to help describe an image to all visitors.

Aria Labels

Aria is a system of coding attributes designed especially for Screen Readers and is the recommended method. It stands for Accessible Rich Internet Application. The beauty is that the labelling of elements is not just contained to images, the labels can be associated with any other features such as Icons, buttons, image boxes, headings and much more. A label is the text you want a Screen Reader to read out loud when the user tabs to that element.

The first example of where they are a really great help is with buttons. So often a button may state something short and simple and even in context with surrounding text, the Screen Readers may not make the contextual association. So the label can pad out the reason for clicking the button. So instead of just reading “More” the Label can be set to “Click this button to hear more about the bouquets Lush Fauna provide along with pricing and delivery details”

In the next example we can see how a label can be added to a social media icon.

Captions

Along with Image captions other elements such as Icon boxes and Image boxes do contain text and this text will be read by Screen Readers but very often long amounts of contextual text is not needed and can effect the overall look and feel of your web pages. So Aria Labels can be used to supplement the captions or negate any need for full captions to be presented on the page. The first example shows a limited caption on an image but a better caption via the Aria Label. The example shows the same effect with an Icon box.

So when to use? It is Dynamiser’s recommendation that Aria labels are used for all features along with Alt Text for non-decorative images so that SEO is still maintained.

Dynamiser will work with all clients to make sure that the correct text is used to really add power to your website for all visually impaired visitors and at the same time maintain the integrity of your design ensuring your site is still fit-for-purpose for all visitors, attracting customers and helping your business.

Forms and Menus

When faced with forms, such as a contact Form, and menus, both horizontal and drop-down, Screen Readers will read each in turn as the they are tabbed through. So it pays to make sure that the wordings are clear so the objective is understood before filling in a field or selecting an option.

Elementor based forms and menus are built to support accessibility but any page should have the option to skip to prevent lots of key presses to get past forms or menus if the visually impaired visitor does not want fill out the form or select anything from a menu. These are called Skip Links and will be discussed next.

Skip Links

As discussed above, Screen Readers will tab through all the features of a web page reading out loud the content based on the text of the screen or the Aria Label/Alt Text. But we have also seen that tabbing is required through all Menu items and Contact forms. The visually impaired should be given the option to skip past blocks of unnecessary tabbing so adding a skip link is advisable.

A normal skip link is the first link of the page. When the “skip link” is clicked, the focus is taken directly to the main section of the page. We also see that they are useful to skip forms.

But do we want the links visible to all users? probably not, especially at the top of a page above menus or other initial content. So Dynamiser can make the links invisible to the browser but not Screen Readers.

Below we see the new contrast-friendly hero banner with a menu of five options. So a skip link has been added to avoid tabbing through the 5 options to get down to the main content of the page.

Below we can see what the Screen Reader sees and is the first element landed on when the page opens. The text is read out allowing the user to opt to click and bypass the menu options. (note, the skip link is also seen on a browser when the tab key is used to navigate)

Below we see another example of a good use of a skip link. This time the visitor just wants the phone number from the a websites Contact Us page. Even with the larger font of the number, the visitor still needs the Screen Reader to read out each element of the page until it reaches it.

Without the skip link the user will have to tab through all of the fields in the form, which includes all the radio button options, and the send button, until they reach the phone number. So the skip link will be seen by the reader and read out allowing the user to click and land directly on the number, which the Screen Reader will then read out loud.

Abbreviations

On a lot of websites, abbreviations can be common but not necessarily readable by a Screen Reader as not common words. As an example, the abbreviation “SEO” is seen on this website a lot and though a regular reader is likely to have visited the SEO page and know what it stands for, the Screen Reader though will see it as a word and may struggle to pronounce it. The fix is to mark it as an abbreviation. Outside of Screen Readers, this will place a dashed underline allowing a hover to bring up the explanation. You can try this below. But for accessibility, the Screen Reader will see this and read out the full text “Search Engine Optimisation” instead of attempting to pronounce the abbreviation.

Visible Outline Focus

These are not directly used by Screen Readers but they can be added to any or all pages of a website. Not seen normally by visitors to your site but once the tab or Screen Reader short-cut key is pressed the outlines will appear around the current Element. For visitors using a Reader and still following on the screen, it can help show them where they are on a page. Anyone who uses tab can see where they are which is great if the impairment is not severe enough for a reader.

in the example below we have a standard button as seen normally on a page, but when tabbed to, the button will then be highlighted by a border, in this case, the border is dashed and coloured red. The type, colour and thickness can be set as required.

Buttons NOT text links

We are all familiar with links within a block of text. Examples below where the link is coloured differently highlighting a link to the visitor.

Visit the Dynamiser SEO page to find out more about Search Engine Optimisation.

Lottie has a great selection of prints available to purchase here.

I recommend visiting dickiescafe.co.uk for a selection of great lunchtime fare.

New men’s sunglasses are available at SpecShack. Click here to see more.

But Screen readers will just read the text, they will not inform the visitor that there are underlying links behind the differently coloured text. A Button however will allow the Screen Reader to identify an action is possible and should be further enhanced via an Aria Label (as discussed above). It’s also more attractive and more obvious even to the normally sighted visitors.

Further help for Screen Readers

The final three considerations are added to all accessible pages by Dynamiser automatically and do not require client action or input.

HTML Semantic Elements: This is a case of labelling each Section or Column, of a web page with the purpose of that Section such as headers, footers, paragraphs etc. This aids the Screen Readers to further describe the type of content being read out.
Complimentary landmarks: This is another Aria setting and can be added to sections to inform the Screen Reader to ignore; great to allow the Readers to skip past parts of a web page, such as adverts which visually able visitors would simply choose to ignore.
Spelling: seems obvious but Dynamiser will spell check every page but if you have any industry specific words that may not be in a normal dictionary then the same approach as abbreviations can be used.

WebAIM is a Web Services organisation for accessibility based out of Utah. They carried out a survey to determine the most popular Screen Readers; Check the information blocks below for details on the 3 most common screen readers as well as Google’s own offering called ChromeVox.

Video and animated content

The use of videos, via YouTube, Vimeo or your own locally hosted in a website is a great idea to help portray information. There are accessibility considerations though

Auto-play is irrelevant if the content cannot be seen.
For the hard of hearing just moving images are not much help
Auto-play can cause issues to visitors with cognitive and neurological impairments.

So the advice is to not set Auto-play and instead of just having a static video image on the page, use a button instead (as above for the NVDA Screen reader YouTube video earlier in this page). Having an Aria-label on the button will mean the Screen Reader will pick up on the objective of the button allowing the visitor to choose whether to watch the video or tab past to the next content. This works for the hard of hearing as well; if no Screen reader they will still visually see the button and choose whether to watch or not.

Also, look to see if a video has transcripts, this will allow Screen Readers to read out the content of a video so the information you wish to portray even if the visual content is not seen. If you are creating your own videos then great, if not then contact the video creator to see if available or sit and create your own transcripts from the video. You may be able to generate transcripts if the video allows. A transcript could be pasted into a PDF for download for the visually impaired. Captions are also a great idea and Screen Readers should recognise these. So both visually impaired and the hard of hearing visitors can be catered for with a bit of care. See below for a list of useful links.

Media Carousels are also considered a potential problem for visitors with cognitive or neurological problems. We have seen these on Dynamiser Inspiration pages as a great impactful way to display multiple images that roll across the screen. But consideration should be given before using as the animation may affect some visitors. The good news is that they can still be used but turn of auto-play and allow users to use navigation arrows or dots to move manually through the images.

PDF files

PDF files are a great way to provide visitors with large chunks of information text, common are price lists, technical specifications, privacy policies and terms and conditions. Again great for Screen Readers as they will all interact with the Adobe Reader. But again think about Font and Font sizes; the Bureau of Internet Accessibility recommends the following fonts: Times New Roman, Verdana, Arial, Tahoma, Helvetica, and Calibri. Which is good as they are all available to MS Word which is one of the easiest ways to create PDF files if you do not own a full copy of Adobe Acrobat.

Opening new tabs or Windows

It is common practice for a new tab (within the same browser) or a new window (a new browser session) to be opened when a link is clicked from a web page. This is good when you want your visitor to simply “pop-off” to read some sub-information and close that tab/window to return back to the current page. And usually applied when an external website is accessed.

But for Screen Readers this is a problem as

The Reader does not know it is a new tab or window and will continue to read the new page regardless of the users knowledge of the fact.
External sites will not have links for the Reader to allow return to your website

So what can we do as changes to the way the new pages are displayed impacts the way all your visitors use your website.

Keep all internal links within the current tab/window
If you still want external links opened in a new tab or window, then make it a new tab, and not a window, and then add this fact to your buttons Aria label. This will allow the Reader’s user to go back via the browsers own controls.

Elementor's One Click Accessibility Plugin

The great news is that Elementor have announced support for a third party plugin called One Click. Developed especially for websites built with WordPress, this adds an accessibility toolbox to your web pages and handles much of the accessibility guidelines previously discussed. The plus point is that it may allow you to keep great web design without compromising the look and feel for accessibility reasons. Click on the link below to see more.

A note about the Dynamiser website

It should be noted that this site was built with a major oversight: accessibility. The Accessibility pages have been built according to the WCAG guidance and all other pages will be updated over time until the whole site is compliant. The One Click plugin is active and can be seen on all pages.

Accessibility and your website

Will your site design be compromised?

Fonts

Colour Contrasts

Bad Colour Example

Good Colour Example

Bad Colour Example

Good Colour Example

Screens Readers

Alt Text

The Screen Reader says...

Titles

Aria Labels

The Screen Reader says...

The Screen Reader says...

Captions

The Screen Reader says...

Questions?

The Screen Reader says...

Forms and Menus

Skip Links

Or Phone us on 01234 567890

Abbreviations

Visible Outline Focus

Buttons NOT text links

Further help for Screen Readers

Video and animated content

PDF files

Opening new tabs or Windows

The Screen Reader says...

Other disabilities and considerations

Elementor's One Click Accessibility Plugin

More Reading

A note about the Dynamiser website

Contact Us